Bounce

index.html

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
<script src="script.js"></script>

script.js

let speed = 4;
let diameter = 32;
let radius = diameter / 2;
let x = diameter;

function setup() {
    createCanvas(400, 400);
    noStroke();
}

function draw() {
    background(240);

    // Add the current speed to the x location.
    x = x + speed;

    // Remember, || means "or."
    if ((x + radius > width) || (x - radius < 0)) {
        /* If the object reaches either edge, 
	   multiply speed by -1 to turn it around. */
        speed = speed * -1;
    }

    // Display circle at x location
    fill(255, 0, 0);
    ellipse(x, height / 2, diameter);
}

thumbnail.png