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.
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
In sketch.js, begin by moving the background() function call into the setup() function.
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.
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!