Face Clock

//FACE CLOCK SKETCH

​

var hr, mn, sc;

var end_hr, end_mn, end_sc;

​

function setup() {

  createCanvas(400,400);

}

​

function draw() {

  background(255);

​

  angleMode(DEGREES);

  translate(width/2,height/2);

  rotate(-90);

​

  strokeWeight(8);

  noFill();

​

  //seconds - innermost

  stroke(164, 216, 54);

  arc(0, 0, 250, 250, 0, end_sc);

​

  //minutes - middle

  stroke(216, 62, 111);

  arc(0, 0, 312, 312, 0, end_mn);

​

  //hours - outside

  stroke(165, 33, 61);

  arc(0,0,340,340,0,end_hr);

​

  hr = hour();

  mn = minute();

  sc = second();

  end_hr = map(hr % 12,0,12,0,360);

  end_mn = map(mn, 0, 60, 0, 360);

  end_sc = map(sc, 0, 60, 0, 360);

​

​

  //Top of face

  stroke(0);

  strokeWeight(8);

  noFill();

  arc(0,0,280,280,270,90);

​

  //Bottom of face

  noFill();

  arc(0,0,290,290, 160, 200);

​

  //Left eyebrow

  noFill();

  strokeWeight(6);

  stroke(0);

  arc(0,-80, 80 ,80, 330, 40);

​

  //Right eyebrow

  arc(0, 75, 80 ,80, 320, 30);

​

  //Nose

  rectMode(CENTER);

  fill(0);

  noStroke();

  rect(-35, 0, 25, 9, 4);

​

  rotate(90);

​

  //Mouth

  fill(216, 54, 54);

  translate(0,85);

  beginShape();

  vertex(-36,0);

  bezierVertex(-36,0,-30,-4,-26,-7);

  bezierVertex(-18,-14,-15,-19,-10,-19);

  bezierVertex(-8,-20,-4,-20,0,-15);

  vertex(0,-15);

  bezierVertex(4,-20,8,-20,10,-19);

  bezierVertex(15,-19,18,-14,26,-7);

  bezierVertex(30,-4,34,-1,36,0);

  vertex(36,0);

  bezierVertex(35,2,23,19,0,20);

  bezierVertex(-18,19,-23,13,-27,10);

  bezierVertex(-30,7,-35, 2,-36,0);

  endShape();

​

  //Lip shine

  fill(255);

  noStroke();

  // ellipse(0,-2, 8, 5);

  ellipse(12,5,7,5);

  ellipse(5,7,4,3);

​

  //seconds elapsing

  if (sc % 2 == 0) {

      fill(0);

      noStroke();

      //Left

    ellipse(-80,-85,20,20);

    //Right

    ellipse(75, -85, 20, 20);

  } else {

    noFill();

      strokeWeight(6);

      stroke(0);

      //Left

      //Eyelashes

      arc(-80,-85,20,20, 0, 180 );

      line(-100, -75, -90, -80);

      line(-80, -65, -80, -75);

      line(-60, -75, -70, -80);

      //Right

      //Eyelashes

      arc(75, -85, 20, 20, 0,180);

      line(55, -75, 65, -80);

      line(75, -65, 75, -75);

      line(95, -75, 85, -80);

  }

​

}

​