var x = 200;//where it is left to right

var y= 110;//where it is up and down

var xspeed = 1;//implied velocity to move left to right

var yspeed = 2.5;//implied velocity to move up and down

​

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  //these are the modular functions-they are defined seperately and have different jobs to do

  display();

  move();

  bounce();

}

​

function display(){

​

  fill(200,100,200);

  noStroke();

  ellipse(x,y,24,24);//places ball at var x and var y with a diameter of 24

}

function move(){

  x=x+xspeed;

  y=y+yspeed;// redraws the ellipse at x and y incremented by one pixel

}

function bounce(){

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

    xspeed = xspeed*-1;

  }

  if(y>height || y<0){

    yspeed = yspeed*-1;//logic to check x and y positions

  }

}