Project – 06 – abstract clock

    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-06-abstract clock



function setup () {
  createCanvas(480, 480);
    background(0);
}


function draw (){
    angleMode(DEGREES);
    let hr = hour();
    let mn = minute();
    let sc = second();

    push();
    translate(240,240);
    rotate (-90);
    strokeWeight(8);

    // second circle
    stroke(255,100,150);
    noFill();
    var end1 = map(sc, 0, 60, 0, 360);
    arc(0,0,300,300,0,end1);

    //minute circle
    stroke(150,100,255);
    var end2 = map(mn, 0, 60, 0, 360);
    arc(0, 0, 280, 280, 0, end2);

    //hour circle
    stroke(150,255,100);
    let end3 = map(hr%12, 0, 12, 0, 360);
    arc(0, 0, 260, 260, 0, end3);
    pop();

    


    //face
    //black eyebrows 
    stroke(255);
    fill(0);
    rectMode(CENTER);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
  
    //eyes
    ellipseMode(CENTER);
    ellipse(170, 200, 20, 20);
    ellipse(310, 200, 20, 20);
  
    //nose
    noStroke();
    strokeWeight(6);
    fill(204, 95, 95);
    rect(240, 230, 15, 30, 20);
  
    //lips
    stroke(250);
    noFill();
    rect(240, 280, 60, 20, 20);
  
    //teeth
    line(240, 270, 240, 290);
    line(240 - 15, 270, 240 - 15, 290);
    line(240 + 15, 270, 240 + 15, 290);

    //face animation
    if (sc % 2 == 0) {
    //eyebrows raise
    //cover old eyebrows w white
    stroke(0);
    strokeWeight(8);
    rectMode(CENTER);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
    //new raised eyebrows
    strokeWeight(5);
    stroke(255);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
    
    //mouth becomes smaller
    //cover old mouth
    //lips
    strokeWeight(10);
    stroke(0);
    noFill();
    rect(width/2, 280, 60, 20, 20);
    //teeth
    line(width/2, 270, width/2, 290);
    line(width/2 - 15, 270, width/2 - 15, 290);
    line(width/2 + 15, 270, width/2 + 15, 290);
    //new small mouth
    strokeWeight(6);
    stroke(255);
    ellipse(width/2, 280, 20,20);
  }
  
}