​

Currently this sketch draws a repeatedly growing and shrinking ellipse.

​

The challenge:

​

  1. Organize the variables into object literal format.

  2. Change the program to encapsulate the ellipse's behavior inside a class. Then, create multiple instances of the class on your canvas.

  3. Create new instances of the class using mouse clicks. Use a JavaScript push() to store the instances of the class that you create, and update and display all of them in the draw() loop.

​

*/

​

​

// let x = 300;

/*

let y = 300;

let d = 0;

let incr = 2;

let maxSize = 150;

*/

​

let breather = null;

/* {

  x : 300,

  y : 300,

  d : 0,

  incr : 2,

  maxSize : 150

} */

​

function setup() {

  createCanvas(600, 600);

  breather = new breathingThing( 200 );

}

​

function draw() {

  background(150);

  ellipse(breather.x, breather.y, breather.d);

  if (breather.d > breather.maxSize || breather.d < 0) {

    breather.incr = -breather.incr;

  }

  breather.d += breather.incr;

  // sth( 'hello' ) // instance

}

​

​

function sth( data ){

  console.log( data )

}

​

class breathingThing {

  constructor( maxSize ){

    this.x = 300;

    this.y = 300;

    this.d = 0;

    this.incr = 2;

    this.maxSize = maxSize;

  }

}

​

​

​

​