let theta, step;

let r, rad;

​

let circles, colors;

let timer;

​

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive

}

​

class Circle {

  constructor(col, size, step, theta, r) {

    this.color = col;

    this.size = size;

    this.step = step;

    this.theta = theta;

    this.r = r;

    this.timer = 0;

  }

​

  update() {

    this.theta += this.step;

​

    if (this.timer > 0) {

      this.r++; //= map(this.timer,0,100,1,5);

      this.timer--;

      if (this.timer < 0) this.timer = 0;

    } else {

      this.r--;

      if (this.r < 30) this.r = 30;

    }

  }

  startBurst() {

    if (this.timer == 0 && this.r == 30) this.timer = 250;

  }

  draw() {

    noStroke();

    // translate(width/2,height/2);

    fill(this.color);

    circle(this.r * cos(this.theta), this.r * sin(this.theta), this.size);

  }

}

​

function setup() {

    //https://www.colourlovers.com/palette/9362/Powerpuff_Girls!

    colors = [

      color("#000000"),

      color("#00D0FF"),

      color("#F91D8B"),

      color("#81F400"),

    ];

  angleMode(RADIANS);

  t = color("#28728f");

  step = TWO_PI / 64;

  let numCircles = 50;

  rad = 50;

  // r = 100;

  theta = 0;

  timer = 50;

​

  createCanvas(800, 800);

  noStroke();

  fill(t);

​

  circles = [];

  r = 30;

  let idx = 1;

  let _c = colors[idx];

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

    circles.push(

      new Circle(

        _c,

        random(10, 50),

        TWO_PI / random(100, 256),

        random(TWO_PI),

        r

      )

    );

    if (i % 4 == 0) {

      // r += 20;

      idx++;

      if (idx > colors.length - 1) idx = 1;

      _c = colors[idx];

    }

  }

}

​

function draw() {

  background(0);

  translate(width / 2, height / 2);

  for (let i = circles.length - 1; i >= 0; i--) {

    circles[i].update();

    circles[i].draw();

​

    if (frameCount % 100 == 0) circles[i].startBurst();

  }

  // for (let i = circl)

  // fill(t);

  // translate(width/2,height/2);

  // circle(r*cos(theta),r*sin(theta), rad);

  // theta += step;

}

​