Project 6: Abstract Clock

sketch

var x = [0];
var y = [0];
var w = 25;
var rc;
var gc;
var bc;
var r = [];
var g = [];
var b = [];
var theta = [0];
var dtheta = [];
var rad = [50];
var mo;
var d;
var h;
var mi;
var s;


function setup() {
    createCanvas(480, 480);
    translate(240, 240);
    rotate(radians(270)); // midnight pointing upwards
    strokeWeight();
    var mo = month(); // establishing times as variables
    var h = hour();
    var mi = minute();
    var s = second();
    if (mo == 1) { // converting days to be out of 365
        d = day();
    } else if (mo == 2) {
        d = 31 + day();
    } else if (mo == 3) {
        d = 59 + day();
    } else if (mo == 4) {
        d = 90 + day();
    } else if (mo == 5) {
        d = 120 + day();
    } else if (mo == 6) {
        d = 151 + day();
    } else if (mo == 7) {
        d = 181 + day();
    } else if (mo == 8) {
        d = 212 + day();
    } else if (mo == 9) {
        d = 243 + day();
    } else if (mo == 10) {
        d = 273 + day();
    } else if (mo == 11) {
        d = 304 + day();
    } else if (mo == 12) {
        d = 334 + day();
    }
    if (h < 12) { // tying hour to red fill
        rc = map(h, 0, 11, 0, 255);
    } else {
        rc = map(h, 23, 12, 0, 255);
    }
    if (mi < 29) { // tying minutes to green fill
        gc = map(mi, 0, 29, 0, 255); 
    } else {
        gc = map(mi, 59, 30, 0, 255);
    } if (s < 29) { // tying seconds to blue fill
        bc = map(s, 0, 29, 0, 255);
    } else {
        bc = map(s, 59, 30, 0, 255);
    }
    fill(rc, gc, bc);
    circle(0, 0, 480); // clock face
    for(j = 0; j < 4; j += 1) { 
        if (j == 0) { // setting colors of markers inverse
            r[j] = 90;
            g[j] = 75;
            b[j] = map(bc, 255, 0, 0, 255);
        } else if (j == 1) {
            r[j] = 50;
            g[j] = map(gc, 255, 0, 0, 255);
            b[j] = 0;
        } else if (j == 2) {
            r[j] = map(rc, 255, 0, 0, 255);
            g[j] = 50;
            b[j] = 50;
        } else if (j == 3) {
            if (d < 182) {
                r[j] = map(d, 0, 364, 0, 255);
                g[j] = map(d, 0, 364, 0, 255);
                b[j] = map(d, 0, 364, 0, 255);
            } else {
                r[j] = map(d, 364, 0, 0, 255);
                g[j] = map(d, 364, 0, 0, 255);
                b[j] = map(d, 364, 0, 0, 255);
            }
        }
        r.push(r[j]);
        g.push(g[j]);
        b.push(b[j]);
        fill(r[j], g[j], b[j]);
        specialcircle(rad[j], y[j], w);
        rad.push(rad[j] + 50);
        x.push(0);
        y.push(0);
        theta.push(0);
    }
}

function draw() {
    strokeWeight(0);
    translate(240, 240);
    rotate(radians(270)); // midnight pointing upwards
    var mo = month(); // establishing times as variables
    var h = hour();
    var mi = minute();
    var s = second();
    if (h < 12) { // tying hour to red fill
        rc = map(h, 0, 11, 0, 255);
    } else {
        rc = map(h, 23, 12, 0, 255);
    }
    if (mi < 29) { // tying minutes to green fill
        gc = map(mi, 0, 29, 0, 255); 
    } else {
        gc = map(mi, 59, 30, 0, 255);
    } if (s < 29) { // tying seconds to blue fill
        bc = map(s, 0, 29, 0, 255);
    } else {
        bc = map(s, 59, 30, 0, 255);
    }
    r[0] = 90; // marker fill inverse of clock face
    g[0] = 75;
    b[0] = map(bc, 255, 0, 0, 255);
    r[1] = 50;
    g[1] = map(gc, 255, 0, 0, 255);
    b[1] = 0;
    r[2] = map(rc, 255, 0, 0, 255);
    g[2] = 50;
    b[2] = 50;
    if (d < 182) {
        r[3] = map(d, 0, 364, 0, 255);
        g[3] = map(d, 0, 364, 0, 255);
        b[3] = map(d, 0, 364, 0, 255);
    } else {
        r[3] = map(d, 364, 0, 0, 255);
        g[3] = map(d, 364, 0, 0, 255);
        b[3] = map(d, 364, 0, 0, 255);
    }
    fill(rc, gc, bc);
    circle(0, 0, 480); // clock face
    for(j = 0; j < 4; j += 1) { // movement with time
        theta[0] = map(s, 0, 59, 0, 355);
        theta[1] = map(mi, 0, 59, 0, 355);
        theta[2] = map(h, 0, 23, 0, 355);
        theta[3] = map(d, 0, 364, 0, 355);
        x[j] = rad[j] * cos(radians(theta[j]));
        y[j] = rad[j] * sin(radians(theta[j]));
        fill(r[j], g[j], b[j]);
        specialcircle(x[j], y[j], w);
    }
}

function specialcircle(x, y, w) {
    ellipse(x, y, w, w);
}

I wanted to create a clock that was both readable and abstract. The seconds marker corresponds to blue, the minutes to green, the hours to red, and the days of the year to grayscale. The clock face fill is a combination of all of these colors, but the inverse of the marker colors.