createCanvas(512, 512);

  pg = createGraphics(width/2, height);

  og = createGraphics(width/2, height);

  pg.ellipseMode(CENTER);

  pg.noStroke();

  pg.angleMode(DEGREES);

  pg.color1 = true;

  og.ellipseMode(CENTER);

  og.noStroke();

  og.angleMode(DEGREES);

  og.color1 = false;

  angleMode(DEGREES);

}

​

function draw() {

  background('#F03A47');

  pg.background('#F03A47');

  pg.translate(pg.width*3/4, pg.height/2);

  pg.rotate(frameCount);

  {

  pg.fill(pg.color1? 0:255);

  pg.arc(0, 0, pg.width, pg.width, 0, 180);

  pg.fill(pg.color1? 255:0);

  pg.arc(0, 0, pg.width, pg.width, 180, 0);

  pg.fill(pg.color1? 0:255);

  pg.ellipse(-pg.width/4, 0, pg.width/2);

  pg.fill(pg.color1? 255:0);

  pg.ellipse(pg.width/4, 0, pg.width/2);

  pg.fill(pg.color1? 0:255);

  //pg.ellipse(pg.width/4, 0, pg.width/4);

  pg.fill(pg.color1? 255:0);

  //pg.ellipse(-pg.width/4, 0, pg.width/4);

  }

  pg.rotate(-frameCount);

  pg.translate(-pg.width*3/4, -pg.height/2);

  translate(width/2, height/2);

  rotate(180)

  image(pg, -width/2, -height/2);

  rotate(180);

​

  og.background('#F03A47');

  og.translate(og.width*3/4, og.height/2);

  og.rotate(-frameCount);

  {

  og.fill(og.color1? 0:255);

  og.arc(0, 0, og.width, og.width, 0, 180);

  og.fill(og.color1? 255:0);

  og.arc(0, 0, og.width, og.width, 180, 0);

  og.fill(0);

  og.ellipse(-og.width/4, 0, og.width/2);

  og.fill(255);

  og.ellipse(og.width/4, 0, og.width/2);

  og.fill(0);

  //og.ellipse(og.width/4, 0, og.width/4);

  og.fill(255);

  //og.ellipse(-og.width/4, 0, og.width/4);

  }

  og.rotate(frameCount);

  og.translate(-og.width*3/4, -og.height/2);

  image(og, -width/2, -height/2);

}