let maxDiameter;

​

let myCircles = [];

let maxNumCircles = 100;

​

function setup() {

  createCanvas(400, 400);

  maxDiameter = width;

  minDiameter = maxDiameter / 30;

}

​

// determine relative order of 2 circles by diameter

function orderByDiameter(circleA, circleB) {

  return circleA.d - circleB.d;

}

​

function drawCircle(aCircle) {

  push();

  translate(width / 2, height / 2);

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

  pop();

}

​

function draw() {

  background(220, 20, 100);

  myCircles.sort(orderByDiameter);

  myCircles.forEach(drawCircle);

}

​

function addCircle() {

  let newCircle = {

    x: random(-10, 10),

    y: random(-10, 10),

    d: random(minDiameter, maxDiameter),

  };

  myCircles.push(newCircle);

}

​

function mouseClicked() {

  // if more than maxCircles, then clear array

  if (myCircles.length >= maxNumCircles) {

    myCircles = [];

  } else {

    let circlesToAdd = random(8, 16);

    for (let c = 0; c < circlesToAdd; c++) {

      addCircle();

    }

  }

}

​