Project 6 abstract clock

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;
    }

}

Leave a Reply