haewanp – Project 06 – AbstractClock

abstract clock

var h;
var m;
var s;

function setup() {
    createCanvas(480, 480);
    noStroke();
}

function draw() {
    background(231, 79, 62);
    Hour();
    Minute();
    Second();
}

function Hour() {
    h = hour();
    
    //convert to 12 hours
    if (h > 12 || h == 0) {
        h = abs(h - 12);
    }
    
    fill(18, 6, 99);
    textSize(240);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(RIGHT);
    text(nf(h, [2], [0]), 258 + 20 * h, 205); //hour
    fill(232, 204, 199);
    rect(0, 200, 20 * h + 250, height - 200);
    fill(18, 6, 99);
    rect(0, 200, 20 * h + 250, 20);    
}

function Minute() {
    m = minute();
    
    textSize(200);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(CENTER);
    text(nf(m, [2], [0]), 4.2*m + 130, 350); //minute
    rect(4.2*m, 340, width - 4.2*m, 20);
    fill(1, 70, 117);
    rect(4.2*m, 360, width - 4.2*m, 220);
}

function Second() {
    s = second();
    
    fill(18, 6, 99);
    textSize(100);
    textFont('Georgia');
    textStyle(BOLD);
    textAlign(CENTER);
    text(nf(s, [2], [0]),5.5*s + 90, 445); //second
    rect(5.5*s + 20, 440, width - 4.2*s, 20);
    fill(228, 227, 214);
    rect(5.5*s + 20, 460, width - 4.2*s, 20);
}

When I initially designed this clock, I used illustrator rather than a paper (you can see my sketch below). It was pretty much successful to execute code as I intended in the sketch. The difference from my initial sketch is that I added each different color block below each number to have a more interesting visualization. Also, in the overall process, it is important to consider how each different time element visually coordinates together. I made a hierarchy among the hour, minute and second based on its scale. In colorwise, I made a custom color palette at ‘khroma.co’ which is an AI color generating tool based on my preference of color. It generated a bunch of color palette for me then I pick one of the nicest one then apply the color palette to this project.