​

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 initialized = false;

let circles = [];

​

class Circle {

  constructor (x, y, w, h) {

    this.d = w * 2;

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.incr = 2;

    console.log('x')

    console.log(x)

    console.log('y')

    console.log(y)

    this.color = color(random(255), random(255), random(255));

    fill(this.color)

    ellipse(this.x, this.y, w, h);

  }

​

  changeSize () {

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

      this.incr = -this.incr;

    }

    this.d += this.incr;

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

  }

}

​

​

function setup() {

  createCanvas(600, 600);

  circles.push(new Circle(width / 2, height / 2, 0, 0));

}

​

function draw() {

  background(150);

​

  circles.forEach ( (circle) => {    

    circle.changeSize();

  });

​

}

​

function mousePressed () {

  circles.push(new Circle(

    mouseX, mouseY, 0, 0

  ));

}