var H; // current hours
var M; // current minutes
var S; // current seconds
var hr; // hour rgb
var hg;
var hb;
var mr; // minute rgb
var mg;
var mb;
var sr; // second rgb
var sg;
var sb;
var bc; // background color
var lc; // line color
function setup() {
createCanvas(380, 480);
}
function draw() {
H = hour();
M = minute();
S = second();
var mapH = map(H, 24, 0, height, 0);
var mapM = map(M, 59, 0, height, 0);
var mapS = map(S, 59, 0, height, 0);
// switching colors depending on day or night
// day = midnight (0:00) to noon (12:00)
// night = noon (12:00) to midnight (24:00)
if (H < 12) { // day
hr = 170;
hg = 40;
hb = 250;
mr = 45;
mg = 250;
mb = 45;
sr = 30;
sg = 185;
sb = 250;
bc = 220;
lc = 0;
}
if (H >= 12) { // night
hr = 50;
hg = 5;
hb = 75;
mr = 10;
mg = 60;
mb = 10;
sr = 30;
sg = 35;
sb = 90;
bc = 30;
lc = 255;
}
// day or night colored rectangles
fill(hr, hg, hb);
noStroke();
rect(0, 0, width / 3, height);
fill(mr, mg, mb);
noStroke();
rect(width / 3, 0, width / 3, height);
fill(sr, sg, sb);
noStroke();
rect(2 * width / 3, 0, width / 3, height);
// moving of rectangle for hours
fill(bc);
noStroke();
rect(0, 0, width / 3, mapH);
// moving of rectangle for minutes
fill(bc);
noStroke();
rect(width / 3, 0, width / 3, mapM);
// moving of rectangle for seconds
fill(bc);
noStroke();
rect(2 * width / 3, 0, width / 3, mapS);
// markings for hours, minutes, seconds
for (var hi = 0; hi < 24; hi ++) {
stroke(lc);
strokeWeight(1);
line(0, (height / 24) * hi, width / 12, (height / 24) * hi);
if (hi == 3 || hi == 6 || hi == 9 || hi == 12 || hi == 15 || hi == 18 || hi == 21) {
line(0, (height / 24) * hi, width / 6, (height / 24) * hi);
line(width / 3, (height / 11.9) * hi, 6 * width / 12, (height / 11.9) * hi);
}
}
for (var mi = 0; mi < mapM; mi ++) {
stroke(lc);
strokeWeight(1);
line(width / 3, (height / 11.9) * mi, 5 * width / 12, (height / 11.9) * mi);
}
for (var si = 0; si < mapM; si ++) {
stroke(lc);
strokeWeight(1);
line(2 * width / 3, (height / 5.9) * si, 3 * width / 4, (height / 5.9) * si);
}
}
I drew my inspiration from candle clocks which was used a long time ago to tell time. You can tell how much time as passed by seeing how much of the candle has melted. Similarly, I created an abstract clock that mimics the candle clock, only mine has tick markings on the side so you can better tell what time it is.
(in regards to longer tick markings) It goes from 12am to 6am to 12pm to 6pm to 12 am again for the hours. It goes from 0 to 15 to 30 to 45 minutes. The seconds go by 10s. Also, when the time hits 12pm, the colors switch from bright (day) to dark (night) colors.