Please enable JavaScript to use CodeHS

Digital Art with p5.js

Description

This lesson introduces students to interactivity, the ability of a computer to respond to user input. Students explore and reflect on examples of interactive sketches that respond to mouse movement, mouse clicks, and pressed keyboard keys.

Objective

Students will be able to:

  • Define interactivity
  • Test different types user input
  • Explore example interactive p5.js sketches
Description

This lesson teaches students how to develop interactive sketches that respond to user input from the mouse, including mouse movement and mouse clicks.

Objective

Students will be able to:

  • use the mouseX system variable to keep track of the current horizontal position of the cursor
  • use the mouseY system variable to keep track of the current vertical position of the cursor
  • use the mouseButton system variable to check whether the mouse is left, right, or center clicked
Description

This lesson teaches students how to develop interactive sketches that respond to user input from the keyboard. Students also explore how key codes are used to represent physical keys on the keyboard and use them in their sketches.

Objective

Students will be able to:

  • use the keyIsPressed system variable to create interactive p5.js sketches that respond to any pressed key
  • use keyIsDown() function to create interactive p5.js sketches that respond to a specific key being pressed
  • Represent a physical key on the keyboard digitally using key code
  • Include text in a p5.js sketch