createCanvas(1920, 1080);

  noStroke();

  slider = 145;

  //slider = createSlider(0, 290, 145);

  //slider.position(10, height-30);

  //slider.style('width', width-20 + 'px');

  frameRate(60);

  colorMode(HSB, 360);

  //checkbox = createCheckbox("Black/white", false);

  //checkbox.changed(myCheckedEvent);

  cycleColors = false;

}

​

function draw() {

  rectMode(CENTER);

  c = (frameCount/4)%360;

  c3 = color(c, 300, 360);

  c4 = color(c+50, 300, 360);

    if(cycleColors) {

        c1 = color(c, 300, 360);

    c2 = color((c+180)%360, 300, 360);

  } else {

    c1 = 360;

    c2 = 0;

  }

  var speed = 300-slider;

  sec = (frameCount / speed)%TWO_PI;

  bg = -720*cos(sec*2)+180;

  background(40);

  fill(250);

  textStyle(BOLD);

  textFont('Verdana', 20);

  text("@URBANOXYGEN_", width-220, height-20);

  x = width/2;

  y = height/2;

  r = height-30;

  fill(c1); //White half-circles (biggest one)

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

  fill(c2);     //Black half-circles (biggest one)

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

  xx = sin(-sec)*(height-30)/4;

  yy = cos(-sec)*(height-30)/4;

  rr = r/2;

  fill(c1);

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

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

  fill(c2);     //Black half-circle (smallest one)

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

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

  xxx = sin(sec)*(height-30)/8;

  yyy = cos(sec)*(height-30)/8;

​

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

    fill(i%2==0 ? c1 : c2);

      ellipse(x + xx + xxx, y + yy + yyy, (height-30)/(i*4));

        ellipse(x - xx + xxx, y - yy + yyy, (height-30)/(i*4));

    fill(i%2==0 ? c2 : c1);

    ellipse(x + xx - xxx, y + yy - yyy, (height-30)/(i*4));

        ellipse(x - xx - xxx, y - yy - yyy, (height-30)/(i*4));

  }

}

​

function myCheckedEvent() {

  cycleColors = !cycleColors;

}