let millisecond;

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  millisecond = millis();

}

​

function draw() {

  background(102, 181, 255);

  let s = second();

  let m = minute();

  let h = hour();

  //clock shapes

  push();

  translate(width / 2, height / 2);

  noFill();

  //second shape

  stroke(204, 230, 255);

  strokeWeight(10);

  let end1 = map(s, 0, 60, 0, 360);

  arc(0, 0, 220, 220, 0, end1);

  //minute shape

  stroke(179, 217, 255);

  strokeWeight(20);

  let end2 = map(m, 0, 60, 0, 360);

  arc(0, 0, 330, 330, 0, end2);

  //hour shape

  stroke(153, 204, 255);

  strokeWeight(35);

  let end3 = map(h, 0, 12, 0, 360);

  arc(0, 0, 450, 450, 0, end3);

  pop();

  //name of the clock

  textAlign(CENTER, CENTER);

  fill(230, 242, 255);

  textFont('Roboto.ttf');

  textSize(15);

  text('have a glass of water!', 300, 310);

  //water alarm

  if (h <= 10) {

    textSize(15);

    text('Good morning G,', 300, 280);

  } else if (h > 10 && h < 16) {

    textSize(15);

    text('Good afternoon G,', 300, 280);

  } else {

    textSize(15);

    text('Good night G,', 300, 280);

  }

}