Min Ji Kim Kim – Project 06 – Abstract Clock

sketch

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-06
*/

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

function draw() {
    var h = hour();
    var m = minute();
    var s = second();

    background(0); //map time to fit the boxes
    mS = map(s, 0, 59, 0, 110);
    mM = map(m, 0, 59, 0, 110);
    mH = map(h, 0, 23, 0, 110);
    
    //purple rectangle
    noStroke();
    fill('#804FB3');
    rect(150, 140, 20, 40);
    
    //yellow rectangle
    fill('#edd011');
    rect(190, 300, 20, 40);

    //blue hour
    strokeWeight(10);
    stroke('#e3edff');
    fill('#0058ff');
    rect(60, 20, 120, 120);
    
    //red minute
    stroke('#ffdbdb');
    fill('#ff3333');
    rect(140, 180, 120, 120);
    
    //green second
    stroke('#d7ffcf');
    fill('#2bcf2b');
    rect(105, 340, 120, 120);

    //changing the box color inside to match time
    noStroke();
    fill('#82adff');
    rect(65, 25, 110, 110 - mH); //hour
    fill('#ff9696'); //minute
    rect(145, 185, 110, 110 - mM);
    fill('#a2fc90'); //second
    rect(110, 345, 110, 110 - mS);

    //display time on top
    noStroke();
    fill(255);
    text(nf(h, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 270, 30);
    textSize(18);
}

At first I didn’t really know how to approach this project, so I started looking at what kind of shapes I wanted to use for my clock. I ultimately found inspiration from a picture of hanging frames online. I started by sketching the shapes using magic numbers and then I tried to figure out how to use the hour, minute, and second functions to manipulate the time. I used the map function to manipulate the time increments to fit the box height. I decided to use primary colors for the boxes and secondary colors for the small rectangles connecting the boxes. Time is indicated by the increasing darker hues in the lighter hue background. Overall, I had a lot of fun creating this abstract clock.