canvasWidth = 720; // ignore variable name... i changed my mind on canvas size later

  canvasHeight = 720;

  createCanvas(600, canvasHeight);

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

  //define the hr mn sc function

  let hr = hour();

  let mn = minute();

  let sc = second();

//////   hours: sun

  strokeWeight(5);

  if (hr >=6 && hr <= 12) {

//     sun opacity grows

    sunOpacity = map(hr,6,12,50,255);

    stroke(252, 186, 3);

    fill(252, 186, 3, sunOpacity);

    circle(120,120,150);  

  }

  else if (hr > 12 && hr <= 18) {

//     sun opacity shrinks

    sunOpacity = (map(hr,12,18,255,50));

    stroke(252, 186, 3);

    fill(252, 186, 3, sunOpacity);

    circle(120,120,150); 

  }

  else if (hr > 18 && hr <= 23) {

//     moon opacity grows

    background(150);

    moonOpacity = (map(hr,19,24,50,255));

    stroke(255);

    fill(255, 255, 255, moonOpacity);

    circle(120,120,150); 

  }

  else if (hr >= 0 && hr <= 5) {

//     moon opacity shrinks

    background(150);

    moonOpacity = (map(hr,0,5,255,50));

    stroke(255);

    fill(255, 255, 255, moonOpacity);

    circle(120,120,150); 

  }

​

//////   seconds & minutes

​

if (mn % 2 != 0) { // odd minutes

// ground hog's shadow is growing

  strokeWeight(0);

  fill(99, 99, 97,100);

  shadowLength = map(sc,0,60,0,320);

  if (shadowLength <= 160) {

    shadowX = map(sc,0,30,0.334,0.45);

    ellipse(canvasWidth*shadowX,canvasHeight*.8,160,40);

  } 

  else {

    ellipse(canvasWidth*.45,canvasHeight*.8,shadowLength,40);  

  }

​

//   ground hog's hole

  stroke(0);

  fill(0);

  ellipse(canvasWidth*.334,canvasHeight*.8,160,40);

//   hog is peeping up

  strokeWeight(5);

  stroke(115, 77, 23);

  fill(156, 105, 34);

  hogWidth = 120;

  hogHeight = map(sc,0,60,0,280);

  rect(canvasWidth*.25,canvasHeight*.8,hogWidth,-hogHeight,0,0,45,45);

​

// hog's face

  eyes = map(sc,0,60,620,canvasHeight*.47);

  nose = map(sc,0,60,634.4,canvasHeight*.49);

  mouthTop = map(sc,0,60,641.6,canvasHeight*.5);

  mouthBottom = map(sc,0,60,656,canvasHeight*.52);

  if (sc>6) {

    strokeWeight(0);

    fill(0);

    circle(canvasWidth*.3,eyes,13); // left eye

    circle(canvasWidth*.365,eyes,13); // right eye

    }

​

  if (sc>11) {

    ellipse(canvasWidth*.334,nose,25,13); // nose

    }

​

  if (sc>12) {

    // mouth

    noFill();

    stroke(0);

    strokeWeight(2);

    line(canvasWidth*.334,mouthTop,canvasWidth*.31,mouthBottom);

    line(canvasWidth*.334,mouthTop,canvasWidth*.358,mouthBottom);

    }

  }

else { // even minutes

// ground hog's shadow is shrinking

  strokeWeight(0);

  fill(99, 99, 97,100);

  shadowLength = map(sc,0,60,320,0);

  if (shadowLength <= 160) {

    shadowX = map(sc,30,60,0.45,0.334);

    ellipse(canvasWidth*shadowX,canvasHeight*.8,160,40);

  } 

  else {

    ellipse(canvasWidth*.45,canvasHeight*.8,shadowLength,40);  

  }

​

//   ground hog's hole

  stroke(0);

  fill(0);

  ellipse(canvasWidth*.334,canvasHeight*.8,160,40);

​

//   hog is retreating down

  strokeWeight(5);

  stroke(115, 77, 23);

  fill(156, 105, 34);

  hogWidth = 120;

  hogHeight = map(sc,0,60,280,0);

  rect(canvasWidth*.25,canvasHeight*.8,hogWidth,-hogHeight,0,0,45,45);

​

// hog's face

  eyes = map(sc,0,60,canvasHeight*.47, 620);

  nose = map(sc,0,60,canvasHeight*.49, 634.4);

  mouthTop = map(sc,0,60,canvasHeight*.5, 641.6);

  mouthBottom = map(sc,0,60,canvasHeight*.52,656);

    if (mn % 10 === 0) {

    if (sc===0) {

      // surprised groundhog

      // eyebrow

      noFill();

      stroke(0);

      strokeWeight(2);

      line(canvasWidth*.39,eyes-27,canvasWidth*.365,eyes-20); 

      // eye

      strokeWeight(2);

      stroke(0);

      fill(255);

      push();

      rotate(15);

      ellipse(canvasWidth*.492,eyes-85,15,25);

      pop();

      // nose

      fill(0);

      ellipse(canvasWidth*.41,nose+5,25,13);

      // mouth

      fill(245, 174, 220);

      stroke(209, 151, 203);

      strokeWeight(2);

      rect(canvasWidth*.392,mouthTop+13,24,35);

      // !!

      fill(252,0,0);

      stroke(252,0,0);

      strokeWeight(2);

      textFont('Verdana');

      textSize(40);

      text('!!', 300,310);

      // scary shadow

      textSize(14);

      text('👁️', 440,586);

      textSize(12);

      text('👁️', 440,575);

      }

    if (sc<56 && sc>0) {

      noFill();

      stroke(0);

      strokeWeight(2);

      line(canvasWidth*.31,eyes-20,canvasWidth*.28,eyes-15); // left eyebrow

      line(canvasWidth*.355,eyes-20,canvasWidth*.385,eyes-15); // right eyebrow

      }  

    if (sc<54 && sc>0) {

      strokeWeight(0);

      fill(0);

      circle(canvasWidth*.3,eyes,13); // left eye

      circle(canvasWidth*.365,eyes,13); // right eye

      }

​

    if (sc<48 && sc>0) {

      ellipse(canvasWidth*.334,nose,25,13); // nose

      textSize(17); // tear

      text('💧',canvasWidth*.365,nose+10);

      }

​

    if (sc<47 && sc>0) {

      // mouth

      noFill();

      stroke(0);

      strokeWeight(2);

      line(canvasWidth*.334,mouthTop,canvasWidth*.31,mouthBottom);

      line(canvasWidth*.334,mouthTop,canvasWidth*.358,mouthBottom);

      }

  }

  else {

  if (sc<54) {

    strokeWeight(0);

    fill(0);

    circle(canvasWidth*.3,eyes,13); // left eye

    circle(canvasWidth*.365,eyes,13); // right eye

    }

  if (sc<48) {

    ellipse(canvasWidth*.334,nose,25,13); // nose

    }

  if (sc<47) {

    // mouth

    noFill();

    stroke(0);

    strokeWeight(2);

    line(canvasWidth*.334,mouthTop,canvasWidth*.31,mouthBottom);

    line(canvasWidth*.334,mouthTop,canvasWidth*.358,mouthBottom);

    }

  }

}

​

}