let centerX;

let centerY;

let d = 40;

let centerDist = 50;

let angle = 0;

let initialColor = 0;

let initialDiameter = 1;

​

function setup() {

  createCanvas(400, 400);

  centerX = width/2;

  centerY = height/2

  angleMode(RADIANS);

  circles.push(new Circle(0, centerDist, angle, initialColor, initialDiameter));

}

​

function draw() {

  background(255);    

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

    circles[i].drawCircle();    

    circles[i].updateCircle();

  }    

  createNewCircle();

  removeCircle();

  //console.log(circles.length);

  centerDist += 1;

  angle += 0.05;       

}

​

function createNewCircle() {   

  if(frameCount%10 == 0) {

    circles.push(

      new Circle(

        0, 

        centerDist, 

        angle, 

        initialColor,

        initialDiameter)); 

  }     

}

​

function removeCircle() {

  circles = circles.filter( c => c.color < 255);

}

​

class Circle {  

  constructor(r, centerDist, angle, color, diameter) {

    this.r = r;    

    this.centerDist = centerDist;

    this.angle = angle;

    this.color = color;

    this.diameter = diameter;

  } 

  drawCircle() {    

    //calcular polares para retangulares

    let cY = sin(this.angle)*this.r + centerY;

    let cX = cos(this.angle)*this.r + centerX;

    stroke(this.color);

    noFill();

    circle(cX, cY, this.diameter);    

  }

  updateCircle() {          

    this.r += 1;

    if(this.r > this.centerDist) {

      this.r = this.centerDist;

    }

    this.color += 1;

    this.diameter += 0.5;

    // if(this.diameter > d) {

    //   this.diameter = d;

    // }

  }  

}

​