Kai Zhang-Project-06-Abstract-Clock

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-06

var prevSec; //previous second
var msr = 0;//millisecond rollover
var wcol = 0; //wallpaper color
var scol = 0; //second loop color
var mcol = 0; //minute loop color
var hcol = 0; //hour loop color

function setup() {
    createCanvas(600, 600);
    colorMode(HSB, 100);
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    var mils; //millisecond
    var fcd = 0; //frame count decrease


    background(wcol, 40, 30);
    angleMode(RADIANS);

    wcol += 0.1;
    if (wcol > 99) {
        wcol = 0;
    }
    
    strokeWeight(4);
    stroke(20);
    noFill();

    if (prevSec != s) {
        msr = millis();
    }
    prevSec = s;
    var mils = floor(millis() - msr);

    
    //hour loop
    push();
    translate(300, 410);

    stroke(40);
    for (var size = 320; size < 401; size += 20) {
        ellipse(0, 0, size, 100);
    }

    stroke(hcol + 75, 40, 90);
    for (var size = 320; size < 401; size += 20) {
        arc(0, 0, size, 100, -PI / 2, h/12 * 2*PI - PI / 2);
    }

    hcol += 0.1;
    if (hcol > 25) {
        hcol = -75;
    }
    pop()


    //minute loop
    push()
    translate(300, 340);

    stroke(40);
    for (var size = 320; size < 401; size += 20) {
        ellipse(0, 0, size, 100);
    }

    stroke(mcol + 50, 40, 90);
    for (var size = 320; size < 401; size += 20) {
        arc(0, 0, size, 100, -PI / 2, m/60 * 2*PI - PI / 2);
    }


    mcol += 0.1;
    if (mcol > 50) {
        mcol = -50;
    }
    pop()


    //second loop
    push()
    translate(300, 270);

    stroke(40);
    for (var size = 320; size < 401; size += 20) {
        ellipse(0, 0, size, 100);
    }

    stroke(scol + 25, 40, 90);
    for (var size = 320; size < 401; size += 20) {
        arc(0, 0, size, 100, -PI / 2, (s/60 + mils/60000) * 2*PI - PI / 2);
    }

    scol += 0.1;
    if (scol > 75) {
        scol = -25;
    }
    pop()


    
    //mils loop
    push()
    translate(300, 200);
    stroke(77);
    strokeWeight(4);
    arc(0, 0, 320, 100, millis()/1000 * 2*PI, (millis() - 200)/1000 * 2*PI);
    arc(0, 0, 340, 100, (millis() - 100)/1000 * 2*PI, (millis() - 300)/1000 * 2*PI);
    arc(0, 0, 360, 100, (millis() - 200)/1000 * 2*PI, (millis() - 400)/1000 * 2*PI);
    arc(0, 0, 380, 100, (millis() - 300)/1000 * 2*PI, (millis() - 600)/1000 * 2*PI);
    arc(0, 0, 400, 100, (millis() - 400)/1000 * 2*PI, (millis() - 800)/1000 * 2*PI);
    pop()
}

For this project I’m also considering an apporach to do a 3 dimensional abstract clock using 2D primitives. There are 4 sets of loops running on the tracks stacking bottom up and each shows the hour, minute, second, and milisecond. However, the milisecond loops are moving too fast so I rather make it a infinite looping than resetting at each second. The color of the loops and background are also changing the hue constantly, and they’re offest in H value so they’re always in contrast colors.