Michal Luria – Project 06 – Abstract Clock

mluria-06

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-06-Project
*/


var n = 0.00; //transition from color to color
 

function setup() {
    createCanvas(400,400);
    background(255);
    colorMode(HSB, 100);
}


function draw() {

    var s = second();
    var h = hour() +3; //transition at 3AM

    //top color in gradient 
    var topH = s*1.5; //top saturation influenced by seconds
    var topS = 30
    var topB = 90;

    //bottom color in gradient 
    var bottomH = 100; 
    var bottomS = 0;
    //bottom brightness according to hour
    //darkest at 3AM
    var bottomB = map(h, 27, 0, 0, 100); 




    for(var i = 0; i < height; i++){

        var topCol = color(topH, topS, topB); //define top color
        var bottomCol = color(bottomH, bottomS, bottomB); //define bottom color

        //transition from top color to bottom color according to height
        n = map(i, 0, height, 0, 1); 
        var centCol = lerpColor(topCol, bottomCol, n);
        stroke(centCol);
        strokeWeight(2);
        line(0, i, width, i); //draw a line of color

    }


}

When thinking about abstraction of time, what I found fascinating was how time could be represented with color. Maybe you would not know what was the exact hour by looking at the clock, but I thought the point of the project was mainly to get a sense of the time. This is why I created a gradient, where one side is influenced by the seconds and changes the saturation, whereas the other side’s brightness is influenced by the hour of the day. In this way, every second of the day has a unique frame that will reappear the next day.