mousePressed() function is called once after every mouse button press over the canvas. This means that the code block within the
mousePressed() function will only run once the mouse has been pressed. To run the code again, the mouse needs to be released and pressed a second time.
We can also use the built-in
mouseIsPressed variable to determine whether the mouse is pressed or not. When the mouse is pressed, the
mouseIsPressed variable evaluates to
true, and when it is not pressed, it evaluates to
false. We can create an
if statement using the
mouseIsPressed variable to continuously run a code block while the mouse is pressed.
Take a look at mouseEvents.js on the right. The code shows the differences in using the
mousePressed() function and the
mouseIsPressed variable. Once a mouse press is detected, the
mouseIsPressed variable returns
true and begins drawing ellipses at random positions around the canvas for as long as the mouse is pressed. Simultaneously, the
mousePressed() function randomly chooses the color of the ellipses and the background, but those colors will not change until the mouse is released and pressed again.
There are also other mouse event functions that p5.js offers, such as:
mouseMoved()function, which can be used to trigger an event every time the mouse moves while the mouse has not been pressed.
mouseClicked()function, which can be used to detect a mouse button press and release over an element.
Some mouse events act in similar ways, but they can be layered to create various interactions within a p5.js project.
In the browser window notice the ellipse in the center of the canvas. Currently, it’s pretty bland—let’s make it more interesting!
Open sketch.js and add an
if statement into the
draw() function. It should have a condition of
mouseIsPressed. Inside the code block of the
if statement, set the fill value for the ellipse below to:
fill(fillValue, 0, 0, 50);
else statement to the
if statement. Inside the code block of the
else statement set fill to:
fill(0, 0, fillValue, 50);
Note that the
fillValue variable used in the if-else statement is declared at the top of the program and initialized with a value of
0 in the
draw() function, create an empty
mouseMoved() function. Inside the function, set the
fillValue variable to a random value between 0 and 255.
Now move your mouse around the canvas to see the shape’s color change!
mouseMoved() function block, at the bottom of the program, create an empty
shapeScale variable declared at the top of the program, double the size of the ellipse each time the mouse is clicked.
To begin, inside the empty
mousePressed() function, write an
if statement with a condition of:
shapeScale < width
If the statement evaluates to
shapeScale to be twice its current value. Do this using a multiplication assignment operator (
If the statement evaluates to
shapeScale variable should be reset to 50.
Now, click on the canvas and see how the ellipse’s size doubles each time the canvas is clicked. When the size of the ellipse becomes larger than the width of the canvas it is reset back to its original size of 50.