Introduction to Computational Media with p5.js

This is a teacher-facing p5 curriculum. Each unit includes a series of learning activities and ends with a final project where students apply the concepts they have learned in a creative way. Final project prompts include three levels of difficulty. For each of them, a finished project example is provided.

Unit information

Overview, big ideas, goals, activities, final project

Lessons

• LA 1 Create a Grayscale Drawing
  • 1.1 p5.js Introduction and Deconstruction
  • 1.2 Line Functions and Parameters
  • 1.3 Rectangles, Ellipses, and Layering
  • 1.4 Various Shapes, Stroke Weight, Fill()
  • Mini-Project - Taijutu Symbol

• LA 2 Make It Vary
  • 2.1 Center elements with built-in variables: width and height
  • 2.2 Custom Variables
  • 2.3 Place elements at random positions
  • Mini-Project - Custom Emoji

• LA 3 Make It Colorful
  • 3.1 Intro to Color
  • 3.2 RGB vs. HSB colorMode
  • 3.3 Color Palettes and Design

Unit information

Overview, big ideas, goals, activities, final project

Lessons

• LA 1 Draw With Mouse
  • 1.1 Conditionals and If Statements
  • 1.2 Conditionals and If, Else If, Else Statements
  • 1.3 Logical Operators AND and OR
  • 1.4 Draw With Mouse
  • 1.5 Map Function

• LA 2 Hover and Click on Things
  • 2.1 Hover and Conditional Statements
  • 2.2 Rectangles and Clicks
  • Mini-Project - Light Switch Game

• LA 3 Press Keys
  • 3.1 Key Presses and Conditionals

Unit information

Overview, big ideas, goals, activities, final project

Lessons

• LA 1 Loops
  • 1.1 While Loops
  • 1.2 For Loops I
  • 1.3 For Loops II
  • 1.4 Variation In For Loops
  • 1.5 Nested For Loops
  • Mini-Project: Wallpaper Design

• LA 2 Arrays
  • 2.1 Introduction to Arrays
  • 2.2 Arrays and floor()
  • 2.3 Arrays and Loops

• LA 3 Media
  • 3.1 Preload, Load Image, Display Image
  • 3.2 Images && Arrays with ML5
  • 3.3 Image Manipulation (Position, Size, Tint)
  • Mini-Project: Vision Board

• LA 4 Typography
  • 4.1 Fonts and Text Styling
  • Mini-Project: Kinetic Type

• LA 5 Sound
  • 5.1 Sound Files
  • 5.2 Playing Sounds
  • Mini-Project: Musical Keyboard

Unit information

Overview, big ideas, goals, activities, final project

Learning Activities

1 . Make a flip book
2 . Move in all directions
3 . Move in cycles

Final Project Examples

Level 1 - Step by Step Guide
Level 2
Level 3

Unit information

Overview, big ideas, goals, activities, final project

Learning Activities

1 . Write a happy-face-drawing function
2 . Draw many smiley faces, slightly differently
3 . Return a value

Final Project Examples

Level 1 - Step by Step Guide
Level 2
Level 3

Unit information

Overview, big ideas, goals, activities, final project

Learning Activities

1 . Draw an array of bubbles
2 . Literal Objects and Constructors
3 . Add and delete from the array
4 . Click on a bubble

Final Project Examples

Level 1 - Step by Step Guide
Level 2
Level 3

Unit information

Overview, big ideas, goals, activities, final project

Learning Activities

1 . Add a title and text to your page
2 . Add title and text from Javascript
3 . Move canvas around
4 . Create a button that changes the background
5 . Add an interface to your sketch: sliders, buttons, text inputs
6 . Hover on text, drag sliders: control your sketch using HTML elements

Final Project Examples

Level 1 - Step by Step Guide
Level 2
Level 3

Resources

p5 Website

p5 Examples page
p5 Reference page

Video Tutorials

Coding Train, by Daniel Shiffman

Books

Learning Processing 2nd edition, by Daniel Shiffman.
Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry.

Parts of some learning activities in this curriculum have been adapted from the resources above. Relevant book chapters and videos are linked from each learning activity.

Credits

Lead writer

Luisa Pereira

Teaching Contributors

Courtney Morgan
Jose Orea