We have used mouseX, mouseY, and mouseIsPressed to make our sketches interactive. These variables are created and set by p5, and let us poll to find out the state of the mouse every frame. Often we want to perform a specific action when the state changes. For example we might want to do something at the moment the user presses the button.
One thing we could do is keep track of the button state ourselves and use if to see if it has changed.
Reacting to input changes is very common, so p5 will notify us when these events occur. This sketch does the same thing, but uses p5 events.
This code is a little simpler—we don’t have a mouseWasPressed variable, and don’t need the if. It is also easier to read and understand because the draw() function is focused on drawing, and the state change is handled in mousePressed().
In the example above, the ellipseColor variable is used to remember a small piece of our application state. It remembers what color our ellipse should be. The draw() function uses that state when it draws the ellipse, and the mousePressed() function changes the state. Note that the draw() function doesn’t need to “know” anything about what causes ellipseColor to change, it only needs to draw it.
Until now, our applications have been basically “single-screen” or "single-scene". The next example has two scenes, and switches when the user clicks.
We can use functions to organize things a bit. This helps a little bit even with this simple app, but becomes even more important as your applications grow more complex.
The example below is the most complex example we’ve seen in the class notes, but it is broken up into several functions. None of the functions are very complex. Study how this example breaks down a larger problem into a collection of smaller ones.
This is the example we looked at in class on how to tell if the mouse was over a certain area. For this to work correctly the sketch’s canvas cannot be scaled, so open it in the editor and make sure your window is big enough to fit the canvas without scaling.
Build on your illustration in two ways:
First, revise the existing features based on critique feedback. Aim for making significant improvements in all areas of your project including: illustration, composition, animation, interaction.
Second, expand your project by making use of p5 events and adding a second “state” or "page". Carefully consider how the second state is activated, how the user returns to the first state, and how the states relate to each other.