Now that your emoji is variable, reusable thanks to functions and you have created a first animation with it, it is time to make it interactive.
p5.js has some useful variables for us to play around with the mouse position. The variable mouseX gives us the current x-position of your mouse on the canvas and the variable mouseY the corresponding y-position.
To start, let us draw a small circle at every position of the mouse in a new file. You can try it yourself before you take a look at the solution.
1
2
3
function draw() {
ellipse(mouseX, mouseY, 10);
}
You can see a trail of ellipses
As you see, we use the variable mouseX and mouseY as parameter for the x- and y-position of an ellipse and we draw it 30 times a second.