Lan Wei-Project-06-Abstract Clock

sketch

function setup() {
    createCanvas(450, 450);
    stroke(255, 215, 0);
    background(0);
    frameRate(1);
}

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

    // HourRect
    var rectHH = height/24; //height of each 'hourfloor'
    var rectMH = rectHH/60; //height of each 'minutefloor'
    var rectW = [100, 140, 120, 130];
    for(var i = 0; i < H; i ++){
        fill(25, 25, 112); //add changefulness to different floors color
        var rectX = width/2 - 0.5 * rectW[i % 4]; //X coordinate of HourRect
        var rectY = height -(i + 1) * rectHH; //Y coordinate of HourRect
        rect(rectX, rectY, rectW[i % 4], rectHH);
    }

    //MinuteRect
    for(var j = 0; j < M; j ++){
        fill(255);
        var rectX = width/2 - 0.5 * rectW[j % 4]; //X coordinate of MinuteRect
        var rectY = height -(j + 1) * rectMH - H * rectHH; //Y coordinate of MinuteRect
        rect(rectX, rectY, rectW[j % 4], rectMH);
        //cover secondRect in every new minute
        push();
        fill(0);
        noStroke();
        rect(width/2 - 140/2, height - M * rectMH - H * rectHH - 17, 150, 17);
        pop();
    }

    //SecondRect
    for(var k = 0; k < S; k ++){
        fill(150);
        var heightRange = [5,14,3,8,17]; //to get random height
        var widthRange = [7,5,2,8,6]; //to get random width
        var gap = rectW[k % 4] / 60; // distribute second rectangles
        var rectX = width/2 - 130/2 + k * gap; //X coordinate of MinuteRect
        var rectY = height - M * rectMH - H * rectHH - heightRange[k % 5]; //Y coordinate of MinuteRect
        rect(rectX, rectY, widthRange[k % 5], heightRange[k % 5]);
    }
}

In the design I try to make the clock look like a building under construction. The ‘second rectangles’ and ‘minute rectangles’ are the parts being built and the ‘hour rectangles’ are floors that are already built.