Sarah Choi – Project – 06 – Abstract Clock

My representation of the clock showed three different parts of the clock. I wanted to portray hours, minutes, and seconds in three different manners. By doing this, I was able to code the outside of the circle with an arc, showing the hour. I made an inner loop with the minutes by using stroke lines. And finally, the seconds were done with the squares in the perimeter.

project-06

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-06

var x = 0;
var y = 0;
var dX = 1;
var dY = 1;

function setup() {
    createCanvas(600, 600);
}

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

    background(0);

    //seconds
    //top half right side
    stroke(0);
    strokeWeight(1);
    for (i = 0; i < 8; i++) {
        x1 = 281 - (37.5 / 2) + i * 37.5;
        y1 = 0;
        rects.push([x1, y1, s > i]);
    }

    for (i = 8; i < 25; i++) {
        x1 = 600 - 37.5;
        y1 = (i - 8) * 37.5;
        rects.push([x1, y1, s > i]);
    }

    for (i = 25; i < 39; i++) {
        x1 = 600 - (37.5 * (i - 23));
        y1 = 600 - 37.5;
        rects.push([x1, y1, s > i]);
    }

    for (i = 39; i < 55; i++) {
        x1 = 0;
        y1 = 600 - (37.5 * (i - 38));
        rects.push([x1, y1, s > i]);
    }

    for (i = 55; i < 61; i++) {
        x1 = (i - 54) * 37.5;
        y1 = 0;
        rects.push([x1, y1, s > i]);
    }

    for (i = 0; i < 61; i++) {
        if (rects[i][2]) {
            x1 = rects[i][0];
            y1 = rects[i][1];
            fill(255);
            rect(x1, y1, 37.5, 37.5);
        } 
        else {
            x1 = rects[i][0];
            y1 = rects[i][1];
            fill(255, 153, 0);
            rect(x1, y1, 37.5, 37.5);
        }
    }

    //minute
    for (a = 0; a < m; a++) {
        fill(255);
        circle(300, 300, 300 - (5 * a), 300 - (5 * a));
    }

    //hour
    noFill();
    strokeWeight(20);
    stroke(0, 0, 255);
    arc(300, 300, 360, 360, -HALF_PI, TWO_PI * (h / 12) - HALF_PI);

    //time
    noStroke();
    fill(0);
    textSize(30);
    text(nf(h % 12, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 240, 285, 300, 300);
}