How do I make a ball bounce off the sides of the canvas?

offsite

#1

Here is the link to my project so far.

I want to make a ball(an ellipse) bounce around all four walls of the canvas and as this happens I would also like to change the colour of the ball and speed after each bounce(randomly of course). P.S I want the ball to continue bouncing around the canvas off all four walls. Thanks for the help!!

This is the code I have tried. It gets the ball across the x-axis from left to right but doesn’t stop on the way back from right to left. I also don’t know how to get it to bounce off the top and bottom sides, and how to get it to bounce off one of the side walls to a top or bottom wall. I would just like the ball to bounce on all four sides in a clockwise direction(Left wall, top, right, bottom, left, etc etc.)

// The position of the ball
var x = 25;
 
// How far the ball moves every time
var speed = 3;
 
var draw = function() {
    background(47, 222, 126);
   
    fill(48, 46, 48);
    ellipse(x, 200, 50, 50);
 
    // Moves the ball
    x = x + speed;
    
    if (x > 375) {
        speed = -5;
        
    if (x < 214) {
        speed = 5;
        }
    }
};