var r,g,b;

var ball = {
 x: 300,
 y: 200,
 xspeed: 4,
 yspeed: -3
}

function setup() {
 createCanvas(600, 400);


}

function draw() {
 background(0);
 move();
 bounce();
 display();
 colorChange();
 r = random(255);
 g = random(255);
 b = random(255);

}



function bounce() {

 if (ball.x > width || ball.x < 0) {
  ball.xspeed = ball.xspeed * -1;
 }

 if (ball.y > height || ball.y < 0) {
  ball.yspeed = ball.yspeed * -1;
 }
}

function display() {
 stroke(255);
 strokeWeight(4);
 fill(200,0,200);
 ellipse(ball.x, ball.y, 24, 24);



}

function move() {
 ball.x = ball.x + ball.xspeed;
 ball.y = ball.y + ball.yspeed;

}


 function colorChange() {
  if (ball.x >= width || ball.x <= 0 || ball.y >= height || ball.y<= 0) {
    fill(r,g,b);
    ellipse();


  }



 }

var ball = {
  x: 300,
  y: 200,
  xspeed: 4,
  yspeed: -3,
  color: { r: 200, g: 0, b: 200 } // else you could use an array [200, 0, 200]
}

fill(ball.color.r, ball.color.g, ball.color.b); // or if using the array fill(ball.color[0], ball.color[1], ball.color[2]);

function colorChange() {
  ball.color.r = random(255);
  ball.color.g = random(255);
  ball.color.b = random(255);
}

function bounce() {
  if (ball.x > width || ball.x < 0) {
    ball.xspeed *= -1;
    colorChange();
  }

  if (ball.y > height || ball.y < 0) {
    ball.yspeed *= -1;
    colorChange();
  }
}