Unit 3 Loops, Arrays, Media
How can sounds, images, and fonts can be combined and manipulated with code?

Mini-Project: Kinetic Type


Suggested Duration

45 minutes

Student Outcomes

Abstraction:

  • Give examples of specific patterns in something I can see, do or touch.
  • Describe different things I tried in order to achieve a goal.
  • Explain characteristics or patterns that informed a function or an interface I created.

Algorithms:

  • Explain why I used specific instructions to complete a task.

Prototype:

  • Experiment with the commands of a programming language.
  • Explain why I chose specific commands to communicate my instructions.

Draw With Fonts

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.

Your task is to:

  • 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

Sample Output

Example

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: