🎨
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, else if, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses && Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • U3LA2.4: Updating and Deleting from Arrays
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • 🤓U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • 🗃️U3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • 🎨Unit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine && Oscillating Motion
    • 🤓U4LA5.2: Cosine && Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Prompt
  • Suggested Duration
  • Sample Output
  • Culturally Responsive Best Practices
  • Extensions
  1. Unit 3: Arrays, Loops, Media

U3LA4 Mini Project 4: Typography

How can type be interactive while conveying mood and meaning in projects?

PreviousU3LA3.3: Fonts && Text StylingNextU3LA4.1: Loading & Playing Sound Files

Last updated 2 years ago

Prompt

If you’ve ever sat through a dull class or meeting with a song stuck in your head, you’ve probably passed the time by doodling the lyrics on whatever paper is closest. You might’ve written them out in your best handwriting - maybe even testing cursive or script - or maybe you opted for big, block letters to emphasize your favorite part. If you had lots of time on your hands, maybe you even mixed all three.

This is not a new activity - people have been doodling lyrics for years. As computers and access to design and animation software became more commonplace, people starting updating their tributes to their favorite tune to the digital space. There was even a brief trend for kinetic type, which illustrated lyrics using design, typography, and animation to the beat of the song, as in the following examples:

While we don’t have quite the animation skills yet to make something this elaborate, we are all able to use a variety of fonts, text, and type along with user interactions like buttons and key presses to create a tribute to our favorite song that matches the mood, beat, or rhythm of the song.

  • Pick a song or poem* that you will create a lyrical composition for

  • Use at least 3 fonts

  • Create a design that highlights your favorite parts of the song and incorporates user interactions (EX: maybe something changes colors or moves when it is clicked or a button is pressed!)

  • Integrate other p5 elements you have learned so far to improve your program

NB: You can certainly set expectations around school-appropriate selections (or ask students to censor appropriately), but be sure students also know this is about picking something they like or are interested in. They can choose songs/poems in any language or genre!

Suggested Duration

2-4 45 minute periods, dependent on how ambitious your students get with their projects!

Sample Output

Culturally Responsive Best Practices

Within this design-based challenge, there are many prompts you can give students to make the project seem more relevant to them and the cultures of communities that they are a part of. (Please recall that communities can refer to a lot of things, including just the culture of being a teen, a Minecraft player, or a KPop fan - be mindful that you are allowing students to explore choice in their creations in a way that is authentic to them!)

Allowing for student choice in this project is one of the best ways to be culturally responsive! Allow students the freedom to pick the song/poem/whatever that is most meaningful to them - if they say it is important, accept it as important.

Extensions

Write your own poem and animate it as it is meant to be performed. For inspiration, check out Melisa Lozada-Oliva, who primarily writes poems that explore her culture and upbringing and are meant to be performed:

(Cage the Elephant)

(Daft Punk)

(Chainsmokers)

(Melisa Lozada-Oliva)

🗃️
Ain’t No Rest for the Wicked
Harder, Better, Faster, Stronger
Closer
From Paper to Screen
Example 1
My Spanish
Paper Inspiration
Example with blinking text and hidden message
Example that displays two text designs