​

var r = 100;

var g = 250;

var b = 200;

// java script object notation . here is a javascript object

var circle1 = {

  x: 0,

  y : 200,

  diameter: 400,

  xspeed :1, 

  szie: 1 

}; //this var circle is really one line of code

​

  var circle2 ={

    x : 600,

    y : 200,

    diameter : 400,

    xspeed :1,

    szie: 1

  };

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(b, g, r);

​

  r = r + .5;

  g = g - .4;

​

  display();

  moveScale();

  bounce();

 }

  function display(){

  fill(g, r, b / 50);

  stroke(r, g, b);

  strokeWeight(5);

  ellipse(circle1.x, circle1.y, circle1.diameter, circle1.diameter);

  fill(g, r, b );

  stroke(r, g*30, b);

  strokeWeight(5);

  ellipse(circle2.x, circle2.y, circle2.diameter, circle2.diamter);

  }

  function moveScale(){

      circle1.x = circle1.x + circle1.xspeed;

  circle1.diameter = circle1.diameter  - circle1.szie;

  circle2.x = circle2.x-circle2.xspeed;

   circle2.diameter= circle2.diameter - circle2.szie;

  }

  function bounce (){

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

   circle1.xspeed = circle1.xspeed *-1;

   circle1.szie = circle1.szie *-1;

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

   circle2.xspeed = circle2.xspeed *-1;

   circle2.szie = circle2.szie *-1;

 }

  }

// you declared an variable called circle which is an object and one of the pieces

  // of data in that object is x, and diameter. so how do i get that x to work'

  // on the ellipse and draw? 

  //with dot syntax

  // if you want more than 1 object this way you dont have all these different named 

  //variavles liek x1 and x2, and y1, and y2. This way of organizing of collections

  //of variables that are bieng used together conceptually into a object can really 

  //help you organize and keeo track of things and lays a good foundatoin for a lot

  //of things 

  // it also sets a foundation from working with data that comes from other sources

  //bceause it will have exactly the same syntax

}