let maxDiameter;

​

let myCircles = [];

let maxNumCircles = 100;

​

function setup() {

  createCanvas(400, 400);

  maxDiameter = 1.5 * width;

  minDiameter = maxDiameter / 30;

}

​

// determine relative order of 2 circles by diameter

function orderByDiameter(circleA, circleB) {

  return circleA.d - circleB.d;

}

​

// determine reverse relative order of 2 circles by diameter

function orderByDiameterReverse(circleA, circleB) {

  return -(circleA.d - circleB.d);

}

​

function drawCircle(aCircle) {

  push();

  translate(width / 2, height / 2);

  rotate(radians(aCircle.rv * frameCount));

  fill(aCircle.color);

  stroke(aCircle.color);

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

  pop();

}

​

function draw() {

  background(220, 20, 100);

  //myCircles.sort(orderByDiameter).reverse();

  myCircles.sort(orderByDiameterReverse);

  myCircles.forEach(drawCircle);

}

​

function addCircle() {

  // color lottery

  let myColor = 255;

  if (random() < 0.5) {

    myColor = 0;

  }

​

  let newCircle = {

    x: random(-10, 10),

    y: random(-10, 10),

    d: random(minDiameter, maxDiameter),

    rv: random(-10, 10),

    color: myColor,

  };

  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();

    }

  }

}

​