//functions are kind of the fundamental foundational building blocks

// in JS in many ways.]

//call a function like the ellipse. define a function like function draw

//functions like ellipse and draw are special to p5. p5 is a library of 

//functions. 

// there are two key principles of functions: 

// 1. Modularity 

// 2. reusability 

// functions are a way that you can organize your program. You can break

// up your lines of code into modulral pieces, put it into seperate 

//functions to keep your code organized. 

// if you want to draw a specific things you can make it into a func

// and call it with different parameters 

// in JS you can make a variable which is also a container for other 

//variables 

 // the variables in var ball like x, y, etc are refered to as 

// name value or key value pairs  like the name is xspeed, the value 

//is 4

var ball = {

 x: 300,

 y: 200,

 xspeed: 4,

  yspeed: -3

}

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(0);

  move();

  bounce();

  if ( ball.x >= width){

    fill (200,200,100);

  } else if (ball.x <= 0){

    fill(100,50,255);

  } else if(ball.y >= height){

   fill(255,100,50);}

  else{

    fill(20,255,100);

  }

  display();

}

​

  function display(){

    stroke (225);

  strokeWeight (4);

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

  }

​

  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 > height || ball.y< 0){

      ball.yspeed= ball.yspeed *-1;

  }

  }

​

​

​

// i want it to change color when it hits the different sides