Unit 2 Response & Draw
How can control flow allow for user interactions?

1.4 Draw With Mouse

How can I use built-in variables to create a program that lets the user draw?


Overview

This learning activity introduces p5`s program flow, demonstrating how setup() and draw() function. By using p5`s mouse position variables and turning off the background function, they create expressive drawing programs.

Suggested Duration

45 minutes

Objectives

Students will be able to:

  • Understand how moving background out of the draw() function allows the user to draw.
  • Utilize pmouseX and pmouseY to create something that draws.

Vocabulary

Control flow The order in which steps of an algorithm are executed; determined by logical constructs such as IF statements, loops, and calls to other procedures.
pmouseX The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.
pmouseY The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.
frameCount The system variable frameCount contains the number of frames that have been displayed since the program started.

Resources

Once and Forever

So far we have been drawing static images: they don't change over time. But one of the exciting things about drawing computationally is that we can make our drawings dynamic: we can have them change over time and respond to what the user does, or to some other kind of input.

You have probably noticed that setup() and draw() come up repeatedly in the examples. These are both functions, like rect and ellipse, except that instead of calling them, we have been declaring them in our code. p5 takes care of calling them for us. In fact, it calls setup once, when our program starts, and then it calls draw once and again, forever (or until we close the sketch window).

To prove it, look at this example. Each time our draw() function is called, p5 adds 1 to a variable called frameCount. In the sketch below, we draw this variable to our canvas, using the text function. As you can see, frameCount keeps growing, as p5 calls draw() over and over again.

Now try removing the background line. What happens? Why?

Although it might seem that our ellipse is only drawn once, it is actually being drawn over and over again for as long as our sketch runs. The reason we don't see any changes is that the ellipse is being drawn, again and again, in the same exact position. For us to see any changes, something needs to vary.

Draw with the Mouse

We have already used mouseX and mouseY in the previous learning activity, to help us place our shapes. Like width and height, mouseX and mouseY are built-in variables. p5 continuosly checks where the mouse is and updates mouseX and mouseY with the latest position.

Now, instead of writing their current values on the screen like we did before, let's use these variables to set the position of an ellipse ––to make it vary

If we remove the background line, we get an interesting effect: we have made a drawing program.

Let's make it more drawing like by removing the stroke and making the fill somewhat transparent.

And to make the line continuous, let's use two more variables built into p5: pmouseX and pmouseY, which hold the position to the mouse previous to the current frame.

From here, we can get creative. One satisfying example is to set the stroke weight heavier the faster you move. To do this, we calculate the distance between the current and the previous mouse position.