Bouncing circle

Here is the code for a green square that follows the mouse, and a color changing circle once it hits top and bottom. I followed almost exactly what was going on in class. The canvas size is increased from 600 x 600 to 1000 x 600.

bouncing circle and square following mouse

var x =500;

var y =300;

var sqwl =50;

xSpeed = 5;

ySpeed = 3;

function setup() {

// put setup code here

createCanvas(1000, 600);

r = 255;

g = 0;

b = 0;

}

function draw() {

background (150);

fill('green');

rect(mouseX, mouseY,sqwl, sqwl);

//this is my bouncing circle

fill(r, g, b)

ellipse(x, y, 50, 50);

x = x + xSpeed;

y = y + ySpeed;

//in order to get the circle to stay on the screen we need a conditional.

//if my circle touches the right side of the screen, change the direction.

if (x > 1000 - sqwl/2){

xSpeed = -xSpeed;

}

else if (x <0){

xSpeed = -xSpeed;

}

//bounce my circle if we touch top or bottom

if (y >  (600 -sqwl/2)){

ySpeed = -ySpeed;

b = 0;

}

else if (y < sqwl/2){

ySpeed = -ySpeed;

b=255;

}

}