let frameLimit = 4*360+1;

let canvas;

​

function setup() {

  var p5Canvas = createCanvas(1080, 1080);

  canvas = p5Canvas.canvas;

  angleMode(DEGREES);

  noStroke();

  colorMode(HSB, 360);

  iniRadius = 700

  radius = iniRadius;

  n = 10;

  frameRate(60);

}

​

function draw() {

  if(frameCount===2)

  capturer.start();

  noStroke();

  background(40, 250);

  translate(width/2, height/2);

  a = 6;

  rotate(frameCount/4);

  for(j=0;j<a;j++) {

    push();

    rotate(360/a*j);

    //translate(-iniRadius/4-iniRadius/50, 0);

    translate(-iniRadius/2, 0);

    for(i=1;i<n;i++) {

      rotate(frameCount*pow(-1, j));

      y=frameCount

      //fill(i%2==0? color(y%360, 300, 360) : color((y+180)%360, 300, 360));

      //fill(i%2==0? 0:360)

      fill(250-i*20, 360, 360);

      ellipse(-0.5*radius/pow(2, i+1), 0, radius/pow(2, i+1));

      translate(radius/pow(2,i+2), 0);

      if(i==n-1) {

        fill(i%2==0? 0:255);

        ellipse(0, 0, radius/pow(2, i+1));

        fill(i%2==0? 255:0);

        ellipse(-radius/pow(2, i+1), 0, radius/pow(2, i+1));

      }

    }

    pop();

  }

  resetMatrix();

  stroke(220);

  fill(220);

  textFont('Nunito', 30);

  text('@URBANOXYGEN_', width-290, height-25);

  if(frameCount < frameLimit) {

  capturer.capture(canvas);

} else if(frameCount == frameLimit) {

  capturer.stop();

  capturer.save();

}

​

}