For this assignment I added a ySpeed and made it different from the xSpeed, I added r,g,and b as it's own variables and I randomly just chose numbers to pick colors. My code is down below with the link to my creation.
var xPos;
var yPos;
var xSpeed;
var ySpeed;
//var ballSize;
//Here are the colors red, green,and blue
var r;
var g;
var b;
function setup() {
createCanvas(400, 400);
//setting my intial position
xPos = 10;
yPos = 400;
xSpeed = 3;
ySpeed = 5;
r = 0
g = 0
b = 0
}
function draw() {
background(0, 20);
if(xPos > 400){
xSpeed = -xSpeed ;
r = random(0, 300);
g = random(0, 255);
b = random(0, 500);
}
else if (xPos < 0){
xSpeed = -xSpeed ;
r = random(0, 300);
g = random(0, 255);
b = random(0, 500);
}
if(yPos > 400){
ySpeed = -ySpeed ;
r = random(0, 300);
g = random(0, 255);
b = random(0, 500);
}
else if (yPos < 0){
ySpeed = -ySpeed ;
r = random(0, 300);
g = random(0, 255);
b = random(0, 500);
}
//move the ball horizontally
xPos = xPos + xSpeed;
//move the ball vertically
yPos = yPos + ySpeed;
//Drawing my ball
fill( r, g, b);
ellipse(xPos, yPos, 50, 50);
}