My current sketch draws a repeatedly growing and shrinking ellipse. Help me change the program so that this behavior is encapsulated inside a class. Move all this behavior to a class, then have mouse clicks create instances of the class on the screen. 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 balls = [];

let b;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

​

  background(0);

  for (i = 0; i < balls.length; i++) {

    balls[i].show();

  }

}

​

function mouseClicked() {

​

  b = new ball(mouseX, mouseY, 100);

  balls.push(b);

}

​

class ball {

  constructor(x, y, d) {

    this.x = x;

    this.y = y;

    this.d = d;

    this.maxSize=150;

    this.incr=2;

  }

​

  show() {

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

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

      this.incr = -this.incr;

    }

    this.d += this.incr;

  }

​

}