var angle;

var scalar;

var X;

var Y;

var side;

var grey;

let circles = [];

let num = 800;

let  r = 0;

​

function setup() {

  createCanvas(500, 500);

  // slider = createSlider(1,5,1,1);

  background(220);

  offset = width / 2;

  angle = 1;

  scalar = 5;

  side = 20;

  grey = 255;

  for(let i=0; i<num;i++){

    X = offset + sin(angle)*scalar - width/2;

    Y = offset + cos(angle)*scalar - height/2;

    circles[i] = new Circle(X, Y, side, grey);

    angle += 1;

    scalar += 1/2;

    side += 0.05;

    grey -= 0.6;

  }

}

​

function draw() {

  background(220);

  push();

  translate(width/2,height/2);

  // let r = map(mouseX,0,width,0,PI);

  rotate(r);

  r++;

  // r+=slider.value();

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

    circles[i].makeCircle();

  }

  pop();

}

​

class Circle {

  constructor(X,Y,side,grey) {

    this.x = X;

    this.y = Y;

    this.side = side;

    this.grey = grey;

  }

    makeCircle() {

    fill(this.grey);

    stroke(this.grey);

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

  }

}