In order to create smooth animations, we need to create a variable for the speed and then incrementally change that value with each frame.

In the example below, we are animating an ellipse that is falling at a set speed. To achieve this, we first define a variable named speed. We then set a variable named yPos for the ellipse’s y position. Afterward, we increment yPos with the speed variable.

let speed = 1; // Determines the speed
let yPos = 0; // Starting position on y-axis

function draw(){
   ellipse(width / 2, yPos, 20, 20); 
   yPos += speed; // Increments the value of the y position
}

To reset the ellipse to its initial location, we first write an if statement to check whether the ball has reached the bottom of the canvas. You can tell if it has reached the bottom when the y position of the ball is greater than the height (yPos > height). At this point, reassign the y position of the ball back to 0, which is the top of the canvas.

if(yPos > height) {
  yPos = 0; // When yPos becomes greater than height, reset to 0
}

With the code above you can create this infinitely looping animation of a dropping ball.

Instead of resetting the ball’s position to the top, you can have it bounce up when it reaches the bottom of the sketch. To move the ball in the opposite direction, inverse the speed variable by multiplying the value by -1.

if(yPos > height){
  speed = speed * -1; // Negative value changes speed to opposite direction
}

By inverting the direction of the speed, we have created an animation of a ball that bounces when it reaches the bottom.

Let’s now try to have the ball bounce off all four sides of the canvas!

To achieve this, we first need to differentiate the speed for the x-axis and the y-axis movement. Let’s do this by creating variables called xSpeed and ySpeed to represent the movements along both axes.

// Initialize speed along x and y-axis to 1
let xSpeed = 1; 
let ySpeed = 1; 

Next, let’s write an if statement to check when the ellipse’s x position is greater than the canvas width or less than 0. We use an OR operator (||) to check if either condition is true.

if(xPos < 0 || xPos > width) {
  // If xPos is less than 0 or greater than width, run this code
}

We need to write another if statement to check when the ellipse’s y position is greater than the canvas height or less than 0.

if(yPos < 0 || yPos > height) {
  // If yPos is less than 0 or greater than height, run this code
}

When the ellipse touches any side of the canvas, we move it in the opposite direction by multiplying -1 to the variable representing speed. We write the code to change the direction within the if statements.

if(xPos < 0 || xPos > width) {
  xSpeed = xSpeed * -1; // Invert xSpeed when xPos is less than 0 or greater than width
}

if(yPos < 0 || yPos > height) {
  ySpeed = ySpeed * -1; // Invert ySpeed when yPos is less than 0 or greater than height
}

When we piece all the steps together it will create an animation of a ball bouncing around the canvas.