p5.js makes it easy for us to use the mouse position with the built-in variables
mouseY. These two variables allow for a variety of mappings to visual elements in a p5.js sketch.
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
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
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
In sketch.js, begin by moving the
background() function call into the
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.
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
Now move your mouse around the canvas. The ellipse should be duplicating itself across the canvas with a sort of painterly effect!