🔮 Unit 3 Overview

How can sounds, images, and fonts can be combined and manipulated with code?


In this unit, students learn about working with media and asynchronicity. They also explore arrays and loops as ways to organize data and iterate through information. The preload function is used to load image, font, and sound files before sketches are run, and callback functions are introduced. In the final project, students combine images, fonts, and sound to create their own random meme generator.

Blueprint Foundations Student Outcomes


ANALYZE - Describe how I might use patterns to express an idea.
  • Describe different things I tried in order to achieve a goal.
  • Explain why I chose to include the specific components of my prototype over others.
  • Explain the characteristics or patterns that informed a function or an interface I created.
COMMUNICATE - Explain why using patterns is necessary when creating with a computer.


ANALYZE - Describe how instructions can have different outputs depending on inputs.
  • Demonstrate the benefit of using an event, conditional, or loop in my prototype.
  • Explain how a function I prototyped can be used by someone else.
  • Suggest changes to an algorithm that impacts my family or my community.
  • Compare and contrast how conditionals or loops were used in classmates’ prototypes.
  • Teach someone the difference between instructions and an algorithm.


ANALYZE - Experiment with the commands of a programming language.
  • Describe the changes I made after testing at least three parts of my program.
  • Describe how I used community research to make technical decisions in the creation of my prototype.
COMMUNICATE - Discuss what can and cannot be done with a specific set of commands.


Formative Assessments are given during each lesson.
Summative Assessments include:
  • Wallpaper project
  • Fortune Teller Project
  • Machine Learning/Image Array Research
  • Typography Project
  • Meme Generator

Overview of Instructional Materials

Below we have broken each learning activity down into succinct lessons. We have also structured lessons to promote best practices in pedagogy and student engagement, as well as including our own suggestions for implementation.

Sequence of Lessons

LA1 - For Loops

  • U3LA1.1 - While Loops
  • U3LA1.2 - For Loops I
  • U3LA 1.3 - For Loops II
  • U3LA1.4 - Variation in For Loops
  • U3LA1.5 - Nested For Loops
  • Mini-project: Wallpaper Design

LA2 - Arrays

  • U3LA2.1 - Introduction to Arrays
  • U3LA2.2 - Arrays and floor() function
  • U3LA2.3 - Arrays and Loops

LA3 - Media

  • U3LA3.1 - Preload && Images
  • U3LA3.2 - Images && Arrays
  • U3LA3.3 - Image Manipulation
  • Mini-project - Vision Board

LA4 - Typography

  • U3LA4.1 - Fonts && Text Styling
  • Mini-project: Kinetic Type

LA5 - Sounds

  • U3LA5.1 Loading && Finding Sounds
  • U3LA5.2 Playing sounds & stop/start button
  • Mini-project - Musical Keyboard
  • Final Project: Meme Generator