[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit 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
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • 🔮Unit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • 🗃️🗃U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • 🗃️🗃U1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • 🎨🎨 Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • 🔮Unit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • 🗃️🗃U2LA1 Mini Project: Make a Traffic Light 🚦
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • 🗃️🗃U2LA2 Mini Project: Light Switch Game
    • U2LA3.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 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • 🗃️🗃U3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • 🗃️🗃U3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • 🗃️🗃U3LA5 Mini Project: Keyboard/Patatap
  • 🎨🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • 🔮🔮 Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • 🗃️🗃 U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • 🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • 🔮🔮 Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • 🗃️🗃 U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • 🗃️🗃 U5LA2 Mini Project: Build Your Own Challenge
    • 🔮🔮 Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Prompt
  • Suggested Duration
  • Sample Output
  • Culturally Responsive Best Practices
  • Extensions

Was this helpful?

  1. Unit 3: Arrays, Loops, Media

🗃U3LA4 Mini Project 4: Typography

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

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:

  • Ain’t No Rest for the Wicked (Cage the Elephant)

  • Harder, Better, Faster, Stronger (Daft Punk)

  • Closer (Chainsmokers)

  • From Paper to Screen

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

Example 1

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:

  • My Spanish (Melisa Lozada-Oliva)

  • Bitches (Melisa Lozada-Oliva)

PreviousU3LA4.1 Fonts && Text StylingNextU3LA5.1: Loading & Playing Sound Files

Last updated 3 years ago

Was this helpful?

🗃️
Example with blinking text and hidden message
Paper Inspiration
Example that displays two text designs