Variables are a crucial component for creating movement in p5.js. To have your sketch change over time, you will need to increment or decrement your variables with each frame.
Remember that after you declare a variable, you can always reassign it by giving it a new value. In order to have your element move across the canvas, it is necessary to first define your variable, then reassign that variable to be incrementing and decrementing.
The code below shows how to increment an ellipse along the x-axis of the canvas.
// Initialize xPos variable to 5 let xPos = 5; function draw(){ // Use xPos variable as x position of ellipse ellipse(xPos, 100, 100, 100); // Increment xPos by 1 every draw loop xPos += 1; }
A value is incremented by writing the following expression:
x = x + 1;
Above, the x
variable is taking its own value and then adding 1 to it. This expression can also be written as x++
or x += 1
.
A value is decremented by writing the following expression:
x = x - 1;
Here, the x
variable is taking its own value and then subtracting 1 from it. This expression can also be written as x--
or x -= 1
. Keep in mind that the value 1
can be changed to any other number.
Instructions
In this exercise, you will reassign variables in order to gradually change the size, color and position of the ellipse over time.
In the draw()
loop underneath the fill()
function, create an ellipse with the global variable xPos
for the x position, height / 2
for the y position, and size
for the width and the height.
In the line below the ellipse()
function call, increment the color
variable by 1.
Now that we have incremented the ellipse’s color, let’s increment the size of the ellipse. Increment the size
variable by 0.5.
Let’s do the same for the x position of the ellipse. Reassign the xPos
variable so it is decrementing by a value of 2.
Great job! The previously static sketch we started out with is now an animation with many elements changing over time.