createCanvas(windowHeight-30, windowHeight);

  noStroke();

  slider = createSlider(0, 290, 120);

  slider.position(10, height-30);

  slider.style('width', windowHeight-60 + 'px');

  frameRate(60);

  fac1 = 1;

  fac2 = 2;

  fac3 = 3;

}

​

function draw() {

  background(128);

  var speed = 300-slider.value();

  sec = (frameCount / speed)%TWO_PI;

  x = width/2;

  y = width/2;

  r = width;

  fill(255);

  arc(x, y, r, r, fac1*sec+HALF_PI, fac1*sec+3*HALF_PI);

  fill(0);

  arc(x, y, r, r, fac1*sec+3*HALF_PI, fac1*sec+HALF_PI);

  xx = sin(-fac1*sec)*width/4;

  yy = cos(-fac1*sec)*width/4;

  rr = r/2;

  fill(255);

  arc(x + xx, y + yy, rr, rr, fac2*sec+3*HALF_PI, fac2*sec+HALF_PI);

  arc(x - xx, y - yy, rr, rr, fac2*sec+3*HALF_PI, fac2*sec+HALF_PI);

  fill(0);

  arc(x + xx, y + yy, rr, rr, fac2*sec+HALF_PI, fac2*sec+3*HALF_PI);

  arc(x - xx, y - yy, rr, rr, fac2*sec+HALF_PI, fac2*sec+3*HALF_PI);

  xxx = sin(-fac2*sec)*width/8;

  yyy = cos(-fac2*sec)*width/8;

  rrr = rr/2;

  fill(255);

  arc(x + xx + xxx, y + yy + yyy, rrr, rrr, fac3*sec+HALF_PI, fac3*sec+3*HALF_PI);

  arc(x + xx - xxx, y + yy - yyy, rrr, rrr, fac3*sec+HALF_PI, fac3*sec+3*HALF_PI);

  arc(x - xx + xxx, y - yy + yyy, rrr, rrr, fac3*sec+HALF_PI, fac3*sec+3*HALF_PI);

  arc(x - xx - xxx, y - yy - yyy, rrr, rrr, fac3*sec+HALF_PI, fac3*sec+3*HALF_PI);

​

  fill(0);

  arc(x + xx + xxx, y + yy + yyy, rrr, rrr, fac3*sec+3*HALF_PI, fac3*sec+HALF_PI);

  arc(x + xx - xxx, y + yy - yyy, rrr, rrr, fac3*sec+3*HALF_PI, fac3*sec+HALF_PI);

  arc(x - xx + xxx, y - yy + yyy, rrr, rrr, fac3*sec+3*HALF_PI, fac3*sec+HALF_PI);

  arc(x - xx - xxx, y - yy - yyy, rrr, rrr, fac3*sec+3*HALF_PI, fac3*sec+HALF_PI);

  xxxx = sin(-fac3*sec)*width/16;

  yyyy = cos(-fac3*sec)*width/16;

  rrrr = rrr/2;

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

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

      ellipse(x - xx - xxx - xxxx, y - yy - yyy - yyyy, width/(i*8));

        ellipse(x - xx + xxx - xxxx, y - yy + yyy - yyyy, width/(i*8));

      ellipse(x + xx - xxx - xxxx, y + yy - yyy - yyyy, width/(i*8));

      ellipse(x + xx + xxx - xxxx, y + yy + yyy - yyyy, width/(i*8));

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

    ellipse(x - xx - xxx + xxxx, y - yy - yyy + yyyy, width/(i*8));

        ellipse(x - xx + xxx + xxxx, y - yy + yyy + yyyy, width/(i*8));

      ellipse(x + xx - xxx + xxxx, y + yy - yyy + yyyy, width/(i*8));

      ellipse(x + xx + xxx + xxxx, y + yy + yyy + yyyy, width/(i*8));

  }

}