​

var ball = {

  x: 300,

  y: 250,

  xspeed: 4,

  yspeed: -3,

  ballColor: 255

​

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(222);

  move();

  bounce();

  display();

  changeColor();

​

​

}

​

function move() {

  ball.x = ball.x + ball.xspeed;

  ball.y = ball.y + ball.yspeed;

}

​

function bounce() {

  if (ball.x > width || ball.x < 0) {

    ball.xspeed = ball.xspeed * -1;

  }

  if (ball.y > width || ball.y < 0) {

    ball.yspeed = ball.yspeed * -1;

  }

​

}

​

function display() {

  stroke(0);

  strokeWeight(2);

  fill(ball.ballColor);

  ellipse(ball.x, ball.y, 25, 25);

​

}

​

function changeColor() {

  if (ball.x > width || ball.x < 0) {

    if (ball.ballColor == 0) {

      ball.ballColor = 255

    } else {

      ball.ballColor = 0;

    }

​

  }

  if (ball.y > width || ball.y < 0) {

    if (ball.ballColor == 0) {

      ball.ballColor = 255

    } else {

      ball.ballColor = 0;

    }

  }

}