We didn’t discuss this in too much detail last time, but everything that happens in the setup function runs once(when the page loads) and everything that runs in the draw function runs over and over again until the sketch stops.
While it doesn’t seem like it, whatever is being drawn in the draw function gets drawn in the same spot approximately 60 times a second. With this in mind, we can create an animation.
Think of p5.js animations like a flipbook or frame by frame animation, where each state of the animation needs a new“page”.
Review
To demonstrate this, take a look at this basic example
Replace the x position of the ellipse with the built in variable“mouseX”.
As you can see, the placement of the ellipse changes with the cursor along the horizontal axis X. You can place the variable“mouseY” in the y value as well.
Try placing the background color into the set up and see what happens when you move your mouse.
As you can see, the background was drawn once when the page loads so the circle’s path gets saved at every frame.
You can adjust this very slightly to have a basic drawing program. In this edit, i’ve removed the stroke, converted my color to RGB and added an alpha opacity value(the 4th number in the fill).
Mouse events series of events that happen when the mouse gets activated. One such is function mousePressed() which runs every time the mouse is pressed.
To use a mouse event, you’ll create a new function(separate from set up and draw). Like this..
functionsetup() {
createCanvas(1000, 1000);
background("MediumSpringGreen");
}
functiondraw() {
noStroke();
fill(251,21,145, 30);
ellipse(mouseX, mouseY, 250, 250);
}
functionmousePressed() {
//your code goes here
}
If you add a background color once the mouse pressed function runs, you’ll“clear the screen.”
Animation Intro
Review
Mouse Events
function setup() { createCanvas(1000, 1000); background("MediumSpringGreen");}
function draw() { noStroke(); fill(251,21,145, 30); ellipse(mouseX, mouseY, 250, 250);}
function mousePressed() {//your code goes here}