//remove that circle and add two random circles. 

//If the user clicks either of those circles, remove that circle and add two more.

​

function setup() {

  createCanvas(400, 400);

  circleList = []; //start here with an empty array

 // make the first circle for when the sketch starts 

  firstCircle = new Circle(random(width), random(height), 50,

  [random(255), random(255), random(255), .5]);

  circleList.push(firstCircle);

  noStroke();

  colorMode(RGB, 255, 255, 255, 1); // this can make see through circles

​

}

​

function draw() {

  background(128);

​

    // loop through a list of circles here and plot them all

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

        circleList[i].display(); 

        // so this gets each item on the list

        // each item is a whole "circle", with an x, y and size

        // and it can display itself by .display()

        // because we are using a circle class below:

    }

    if (mouseIsPressed == true) {

        // loop through circles again

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

            a = mouseX - circleList[i].x;

            b = mouseY - circleList[i].y;

            c = sqrt(sq(a) + sq(b)); // find distance of the mouse from the center of circle

            if (c <= circleList[i].size / 2){

                circleList.splice(i, 1)

​

                newCircle = new Circle(random(width), random(height), 50, [random(255), random(255), random(255), .5]);

                circleList.push(newCircle);

                newCircle = new Circle(random(width), random(height), 50, [random(255), random(255), random(255), .5])

                circleList.push(newCircle);

​

            }

        }

    }

}

​

// just copied this in from the old tutorial

class Circle {

  constructor(x, y, size, colour) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.colour = colour

  }

  display() {

    fill(this.colour)

    circle(this.x, this.y, this.size);

  }

}