Mouse interaction allows users to manipulate or control the application using mouse positions and clicks. The p5.js has built-in functions that allow for such interactions to take place.
To use the mouse to interact with the p5.js application, we can use the global variable, the mouseIsPressed
, to check when the mouse has been pressed. This variable is true
when the mouse button is clicked, and false
when it is not.
We can also use the mouseX
and mouseY
, to track the mouse's position.
Let’s look at a few sample cases.
Take a look at the example below. In this example, we can see the use of the mouseIsPressed
, and the mouse's position. Click the mouse to draw something onto the canvas.
Lines 2–12: The size
variable stores the size of the "brush." The setup()
function sets up the application canvas and the background.
Lines 14–26: In the draw()
function, whenever the mouseIsPressed
is true
, an size
variable controlling the diameter. Before drawing the ellipse, we use the noStroke()
function to remove the
Take a look at the example below, in which we can see the mouseX
and mouseY
variables being used to draw shapes. We will see that wherever we move the mouse on the canvas, we will see a crosshair.
Lines 3–6: The setup()
function is called once at the start of the execution. This function sets up the application canvas.
Lines 8–17: The draw()
function is called once every frame. In this function the background is being reset, and the
Lines 20–25: The ellipse()
function is being used to draw one ellipse at mouseX
and mouseY
. The line()
function is being used twice to draw two lines — a vertical line and a horizontal line. The vertical line is at mouseX
, that spans the height
of the canvas. The horizontal line is at mouseY
, that spans the width
of the canvas.
The p5.js allows the user to implement mouse interactions in a simple way. There are also other functions like the mousePressed()
mouseReleased()
Unlock your potential: p5.js fundamentals series, all in one place!
If you've missed any part of the series, you can always go back and check out the previous Answers:
What is p5.js?
p5.js is an open-source JavaScript library for creative coding, designed for visualizations, games, and interactive art, with a beginner-friendly approach.
How to color shapes in p5.js
Learn how to apply colors to shapes using fill()
, stroke()
, and transparency to create stunning visual effects.
How to use images in p5.js
Discover how to load, display, and manipulate images in p5.js to enhance dynamic and interactive sketches.
How to use image filters in p5.js
Enhance your images with built-in filters like grayscale, blur, and threshold to achieve unique visual effects.
How to create advanced 2D shapes in p5.js
Master the creation of complex 2D shapes using curves, vertices, and transformations for custom designs.
How to add keyboard interaction in p5.js
Learn how to detect and respond to keyboard input to add interactivity to your sketches.
How to use vectors in p5.js
Explore the power of vectors for motion, physics simulations, and dynamic interactions in creative coding.
How to add mouse interaction in p5.js
Implement mouse-based interactions such as clicks, drags, and movement tracking to enhance user engagement.
Free Resources