Getting Started with p5.js

Chapter 5. Response

Code that responds to input from the mouse, keyboard, and other devices depends on the program to run continuously. We first encountered the setup() and draw() functions in Chapter 1. Now we will learn more about what they do and how to use them to react to input to the program.

Once and Forever

The code within the draw() block runs from top to bottom, then repeats until you quit the program by closing the window. Each trip through draw() is called a frame. (The default frame rate is 60 frames per second, but this can be changed.)

Example 5-1: The draw() Function

To see how draw() works, run this example:

function draw() {
  // Displays the frame count to the console
  print("I’m drawing");
  print(frameCount);
}

You’ll see ...