p5.js has some other useful variables for us. With width and height we can read the width and height of our current canvas. With this we can, for example, change the color of a circle depending on the mouse position. Try to find a solution.
Solution
1
2
3
4
5
function draw() {
noStroke();
fill((mouseX / width) * 255, 0, (mouseY / height) * 255);
ellipse(mouseX, mouseY, 10);
}
You can see a colored trail of ellipses
In this video you will see how we can improve the drawing program from the last exercise when we are adding some color to it.