I sort of messed around with the changing of these blocks for a while. I had them as notches for a second but I liked how at midnight it’ll turn to a black screen and slowly become red green and blue again. I also liked the layering effect of seconds in front of minutes in front of hours. It would be interesting to try to make it into more of a shifting gradient of red green and blue.
sketchDownload
//felix cooper fcooper D
var secs = {x:200, y:240, w:100, r:0};
var mins = {x:100, y:240, w:100, g:0};
var hours = {x:0, y:240, w:100, b:0}; //initializes each time box as an object
function setup() {
createCanvas(300, 240);
}
function draw() {
let s=second(); //sets a variable connected to each set of time
let m=minute();
let h=hour();
background(255);
fill(0,0,hours.b);
noStroke();
rect(hours.x,hours.y-4,300,240); //draws rectangle across canvas
hours.y=map(hour() + norm(minute(), 0, 60),0,24,0,240); //mapps y value to hours
hours.b=map(hour() + norm(minute(), 0, 60),0,24,0,255);//same for b value, the norm function makes it move in minute incriments
if(h == 0){
hours.y=240; //resets at midnight
}
fill(0,mins.g,0);
noStroke();
rect(mins.x,mins.y-4,300,240); //does the same stuff just for minutes
mins.y=map(minute() + norm(second(), 0, 60),0,60,0,240);
mins.g=map(minute() + norm(second(), 0, 60),0,60,0,255);
if(m == 0){
mins.y=240;
}
fill(secs.r,0,0);
noStroke(); //does the same stuff just for seconds
rect(secs.x,secs.y-4,300,240);
secs.y=map(second(),0,60,0,240);
secs.r=map(second(),0,60,0,255);
if(s == 0){
secs.y=240;
}
}