Introduction to Computational Media with p5.js

Unit 2 Response & Draw

How can control flow allow for user interactions?
Grade 9-12

Overview

In this unit, students learn to make their sketches respond to actions taken by the user, from moving the pointer to clicking or touching it over a certain area, to typing on the keyboard. The if statement is introduced. The map function is used to convert inputs into useful ranges. For the final project, students create an expressive drawing tool.

Suggested Duration

2 - 4 Weeks

Big Ideas

  • Interactive systems: programming visual systems that change over time and respond to user inputs.
  • Interaction design: defining the interactions between user and system.
  • Designing tools for creative expression.

Enduring Understandings

  • Understand that we can create our own drawing tools, and that the creation of tools can be expressive in itself.
  • Understand that the fast succession of still frames allows for the illusion of motion and for the system to respond to user clicks, hovers, and key presses.
  • Understand linear transformations of the coordinate plane (scale, translate, rotate), and of one single variable (map function)

Lesson Sequence

Final Project - Paint in P5

Example Repository
Unit 2 Example Code Repository