Project 06 – Abstract Clock

var angle = 180;
function setup() {
    createCanvas(420, 400);
    // rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255);
    textAlign(CENTER);
    textSize(30);
    text('The water clock', width/2, 50);
    textSize(10);
    textAlign(LEFT);

    let hr = hour();
    let mn = minute();
    let sc = second();

   
    fill(255);
    text(hr + ':' + mn + ':' + sc, 10, 150);
    text('24:00:00', width-65, 150);
    rect(100, 140, 30, 5);
    rect(200, 140, 30, 10);
    
    //hour
    push();
    fill(255);
    translate(350, 380);
    rotate(radians(180)); //rotation to make the rectangle grow upwards
    rect(0, 0, 120, 240);
    fill(0, 0, 255);
    translate(5, 0);
    rect(0, 0, 110, hr*10);
    pop();

    //minute
    push();
    fill(255); //red rectangle
    translate(205, 260);
    rotate(radians(180)); //rotation to make the rectangle grow upwards
    rect(0, 0, 80, 120);
    fill(0, 75, 255);
    translate(5, 0);
    rect(0, 0, 70, mn*2);
    if (mn==59) { //when each the mn container is full, water is transferred to the hr contatiner
        translate(-30, 115);
        stroke(0, 100, 255);
        strokeWeight(5);
        line(-8, 0, 30, 0);
        stroke(0, 0, 255);
        line(-8, 0, -8, -115);
    }
    pop();

    //second
    noStroke();
    push();
    fill(255); 
    translate(100, 200);
    rotate(radians(angle)); //rotation to make the rectangle grow upwards
    rect(0, 0, 40, 60);
    fill(0, 150, 255);
    translate(5, 0);
    rect(0, 0, 30, sc);
    if (sc==59) { //when each the sc container is full, water is transferred to the mn contatiner
        translate(-30, 57.5);
        stroke(0, 150, 255);
        strokeWeight(3);
        line(-8, 0, 30, 0);
        stroke(0, 100, 255);
        line(-8, 0, -8, -115);
    }
    pop();
}