p5js: making interactive sketches

We talked about using mouseX and mouseY in this lesson:

https://renickbell.net/doku.php?id=p5js-week-02

Let's go deeper on making our sketches interactive.

Think about what data the mouse can give you:

1. X position
2. Y position
3. button clicks
4. button releases
5. double-clicks

p5js also has some functions that deal with mouse position relative to the previous frame, including detecting mouse movement, mouse dragging, and whether the left button is pressed. There's also a function for mouse wheel, but mouse wheels are not always implemented on mice or may be implemented in different ways.

In the following example, we make a box follow the mouse.

You can read more about mouseX and mouseY here:

https://p5js.org/reference/#/p5/mouseX

https://p5js.org/reference/#/p5/mouseY

That's cool, but let's move the mouse to the center of the box. Notice that this example first declares variables for the width and height. This allows us to reuse them and later will let us more easily experiment with our code.

Let's blow up the rect from our previous example when the left button of the mouse is pressed.

For more on mouseIsPressed, see here: https://p5js.org/reference/#/p5/mouseIsPressed

On my laptop, mouseButton == CENTER seems buggy in this example: https://p5js.org/reference/#/p5/mouseButton

In this version, we'll make the rect get smaller when the mouse moves. At the same time, we'll make the animation a little smoother.

For more on the mouseMoved function, see here: https://p5js.org/reference/#/p5/mouseMoved

In this version, let's show the mouse position value like we did before, and then let's use that value when we click.

Let's gather the mouse position from each click and use it. We'll store it in a variable called mouseClickPositions as objects with an x and y (actually, we should use the Point class which we studied before!). Then in the draw loop we can use forEach to draw all of the click values.

Notice that we're still just using mouseX and mouseY.

That's cool, but what if we want the mouse positions to do something WITHOUT clicking? No problem! The code is very similar. We just need a different array for storing the mouse positions. Notice where we put the code.

Now let's use the keyboard to make things more interesting. We'll make a variable called lastKey, where we'll store the value of the last key which has been pressed. We'll use that value in a conditional statement that controls the color of the small circles that we are drawing as the mouse moves around. Press 'g' to make the circles green, and press any other key to change the color back to gray. Check this out:

You can read more about the keyTyped function here: https://p5js.org/reference/#/p5/keyTyped

Well, that's kind of cool, but what about keeping the gray ones from before, and only making green ones when 'g' is pressed? We can do that, too, but we'll have to be a bit more clever about storing our data and then drawing from it. Earlier, we stored mouse positions in an array. We can store the lastKey at the same time, and then use that value to draw each of the circles. Let's change our code and see what happens. Notice that we have to include more braces in our anonymous function because it required more than one statement:

Above, we stored key presses. We can also do something based on whether a certain key is pressed. The keyIsDown function returns either 'true' or 'false', so we can use that in an if-statement to control the behaviour of our program. In this case, we use the key 'b' (represented by the keycode 66) to change the rect under the mouse to the color red:

Read more about the keyIsDown function here: https://p5js.org/reference/#/p5/keyIsDown

You can find all of the key codes here: https://www.toptal.com/developers/keycode

For more on mouse and keyboard interaction in p5js, see the 'mouse' and 'keyboard' section in the 'Events' section of the reference here: https://p5js.org/reference/

All of these are done with the functions provided by p5js. There is a whole set of keyboard and mouse event handlers built into your browser. You can find more information on them here:

keyboard events: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

mouse events: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent