Skip to Content
Learn
Interaction with p5.js
Making Shapes Move with Mouse Position

p5.js makes it easy for us to use the mouse position with the built-in variables mouseX and mouseY. These two variables allow for a variety of mappings to visual elements in a p5.js sketch.

The mouseX and mouseY variables always contain the mouse’s current horizontal and vertical positions, relative to the origin of the canvas. p5.js will continuously check where the mouse is and update mouseX and mouseY to the latest position, making these variables ideal for manipulating elements on the canvas dynamically.

// Draw an ellipse sized 100 pixels by 100 pixels positioned at the current mouse position ellipse(mouseX, mouseY, 100, 100);

In the code example above, the mouseX and mouseY variables are used as the x and y coordinates for the center of the ellipse. This means that whenever the mouse position changes, the center position of the ellipse will follow.

To generalize, in situations where numerical values can be used, we can now use the mouseX and mouseY variables!

Instructions

1.

In sketch.js, begin by moving the background() function call into the setup() function.

2.

Inside of the draw() function, create an ellipse with a width and height that are both 75 pixels. Use mouseX for the x coordinate and mouseY for the y coordinate.

When you move your mouse around the canvas, a white ellipse should be duplicating itself continuously.

3.

Using the fill() function, add color to the ellipse, which will change depending on mouse position. For the red value input mouseX, for the green input 135, and for the blue value input mouseY.

Now move your mouse around the canvas. The ellipse should be duplicating itself across the canvas with a sort of painterly effect!

Folder Icon

Take this course for free

Already have an account?