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.
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:
background
out of the draw()
function allows the user to draw. 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.