Jason zhu-Project-06-Abstract Clock

sketch

/* Jason Zhu
jlzhu@andrew.cmu.edu
Section E
Project Abstract Clock
*/

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(400, 355);
    background(8, 7, 17);
    millisRolloverTime = 0;
}

function draw() {
    noStroke();
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    var MS = millis();

    // predetermined function
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    // display hour bar
    if (H==0){
        fill(8, 7, 17);
        rect(30,0,60,360);
    } else {
        for(i=0;i<H;i++){
            var r = (i*(255/23));
            var g = (0);
            var b = (0);
            fill(r,g,b);
            rect(30,(i*(300/23)),60,60);
        }
    }

    // display minute bar
    if (M==0){
        fill(8, 7, 17);
        rect(130,0,60,360);
    } else {
        for(i=0;i<M;i++){
            var r = (0);
            var g = (i*(255/59));
            var b = (0);
            fill(r,g,b);
            rect(130,i*(300/59),60,60);
        }
    }

    // display second bar
    if (S==0){
        fill(8, 7, 17);
        rect(230,0,60,360);
    } else {
        for(i=0;i<S;i++){
            var r = (0);
            var g = (0);
            var b = (i*(255/59));
            fill(r,g,b);
            rect(230,i*(300/59),60,60);
        }
    }

    // display milli/second bar
    if (S==1 || S ==3 || S==5 || S ==7 || S==9 || S ==11 || S==13 || S ==15 || S==17 || S ==19 || S==21 || S ==23 || S==25 || S ==27 || S==29 || S ==31 || S==33 || S ==35 || S==37 || S ==39 || S==41 || S ==43 || S==45 || S ==47 || S==49 || S ==51 || S==53 || S ==55 || S==57 || S ==59){
        fill(8, 7, 17);
        rect(330,0,60,360);
    } else {
            fill(255);
            rect(330,0,60,360);
        }
    
}

For this project I hoped to visualize clocks in a linear and color way. I wanted to represent the individual component of my clock with different R,G,B values. By using color, in addition to slight position cues, the goal was to create another more abstract method of keeping track of the time of the day. I developed the idea by trying to think of other ways that people visualized things. Naturally, color was something that was at the precipice of my mind. Overall, I think I learned a good amount about pulling various information from the world into my code. I imagine additional applications to be things such as pulling weather data or humidity data.