Alice Cai Project 6 Abstract Clock

I have always wanted to try living without knowing what the time is. How can I make a clock that doesn’t tell me the time? The way I started brainstorming for this was quite simple. Time would be represented through a greyscale spectrum. I wanted to go as abstract and clean as possible, which was at first, just three squares.

Through this, I wanted to represent time in color, simply by changing the shade of the squares every second minute and hour.

I liked this solution because it was as clean, modern, and abstract as possible. You can’t actually know what second it is in any way; it is only dictated by a spectrum.

I began to further develop this solution by adding the factor of length so that the rectangle grows as time passes.

Finally, I added the concept of “time is a social construct”. “Time is” is always there in black, but the answer changes as time passes. In the beginning of the hour and minute, the shades of the second and minute are the darkest, and as time passes, they fade away. Inversely, the answer “a social construct” becomes darker as time passes.

sketch

//alcai@andrew.cmu.edu
//project6 abstract clock
//section E week 6

function setup(){
    createCanvas(500,500);
    
}

function draw() {
    strokeWeight(0);
    background('white');
    //variables for time
    var s = second();
    var m = minute(); 
    var h = hour();


    //second rectangle grows per second and gets lighter, at 60 seconds it is white
    fill(255/60 * s);
    rect(width/4, height/2 - 50, 40,40 + 3 * s);
    //minute rectangle grows per minute and gets lighter at the pace of the second rectangle
    fill(255/60 * s);
    rect(width/2, height/2 - 50, 40, 40 + 3 * m);
    //hour rectangle grows per hour and gets lighter at the pace of the minute rectangle
    fill(255/60 * m);
    rect(width/4 * 3, height/2 - 50,40,40 + 3 *h);
    //time is... is always black, but "a social construct" gets darker by the second, inverse to the actual time rectangles. 
    textSize(32);
    fill(0);
    text('TIME IS...', width/4, height/2 - 100);
    fill(255 - 255 / 60 * s);
    text('A SOCIAL CONSTRUCT', width/4, height/2 - 75);
}