I remember learning about the Korean water clock that was invented in the Chosun dynasty in elementary school, which inspired me to create a simplified version of it through p5.js.
sketch
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();
}