let canvas;

​

function setup() {

  var p5Canvas = createCanvas(1080, 1080);

  canvas = p5Canvas.canvas;

  angleMode(DEGREES);

  noStroke();

  radius=500;

  frameRate(60);

}

​

function draw() {

  if(frameCount == 1)

    capturer.start();

  background('#6a17c2');

  translate(width/2, height/2);

  noStroke();

  for(i=0;i<3;i++) {

    push();

    rotate(120*i-frameCount/4);

    translate(radius*0.577, 0);

    rotate(-frameCount/2);

    fill(0);

    arc(0, 0, radius, radius, 0, 180);

    fill(255);

    arc(0, 0, radius, radius, 180, 0);

    translate(radius/4, 0);

    fill(0);

    ellipse(0, 0, radius/2);

    factor = 0.93;

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

      push();

      rotate(120*j+frameCount/2);

      translate(radius*0.535/4, 0)

      rotate(-2*frameCount);

      fill(0);

      arc(0, 0, radius*factor/4, radius*factor/4, 0, 180);

      fill(255);

      arc(0, 0, radius*factor/4, radius*factor/4, 180, 0);

      fill(0);

      ellipse(radius*factor/16, 0, radius*factor/8);

      fill(255);

      ellipse(-radius*factor/16, 0, radius*factor/8);

      pop();

    }

    translate(-radius/2, 0);

    fill(255);

    ellipse(0, 0, radius/2);

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

      push();

      rotate(120*j+frameCount/2);

      translate(radius*0.535/4, 0)

      rotate(-2*frameCount);

      fill(0);

      arc(0, 0, radius*factor/4, radius*factor/4, 0, 180);

      fill(255);

      arc(0, 0, radius*factor/4, radius*factor/4, 180, 0);

      fill(0);

      ellipse(radius*factor/16, 0, radius*factor/8);

      fill(255);

      ellipse(-radius*factor/16, 0, radius*factor/8);

      pop();

    }

    pop();

  }

  resetMatrix();

  stroke(220);

  fill(220);

  textFont('Nunito', 30);

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

  if(frameCount < frameLimit) {

    capturer.capture(canvas);

  } else if(frameCount === frameLimit) {

    noLoop();

    capturer.stop();

    capturer.save();

  }

}