Sean Meng-Project 06-Abstract Clock

hmeng-project 06

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-06-Abstract Clock

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

function draw() {
    background(214, 200, 224);
//define current time   
    var S = second();
    var M = minute();
    var H = hour();
    var round = 2 * PI;
    var angle = 0;
//convert time value to radian angles
    var ratioS = S / 60;
    var ratioM = M / 60;
    var start0 = 0;
    var start = PI + HALF_PI;
    var size1 = 200;
//diameters of the arc
    var D1 = 200;
    var D2 = 220;
    var D3 = 170;
    var D4 = 120;
    var D5 = 80;
    
    noStroke();
//Second plate graphics
    fill(255, 216, 224);  //Light pink
    ellipse(180, 180, size1 * ratioS, size1 * ratioS);
    fill(255, 186, 224);  //Pink
    ellipse(210, 150, 100 * ratioS, 100 * ratioS);
    fill(255, 136, 204);  //Dark pink
    ellipse(150, 220, 55 * ratioS, 55 * ratioS);
//Second inner ring
    stroke(200, 64, 150);  //Magenta
    strokeWeight(15 * ratioS);
    noFill();
    arc(180, 180, D1, D1, start, start + round * ratioS);
//Second outter ring
    stroke(255);
    strokeWeight(4 / 60 * S);
    arc(180, 180, D2, D2, start, start + round  * ratioS);
//Second starting line
    fill(255);
    rect(175, 0, 5, 90);

//Minute plate
    stroke(255, 242, 255);  //Light purple
    strokeWeight(5);
    noFill();    
//Minute ring1
    arc(350, 310, D3, D3, start0, round);
    stroke(255, 215, 85);  //Yellow
    strokeWeight(30 * ratioM);
    arc(350, 310, D4, D4, start0, round * ratioM);
//Minute ring2    
    stroke(255, 235, 135);  //Light yellow
    strokeWeight(10 * ratioM);
    arc(350, 310, D4, D4, start0, round * ratioM); 
//Minute starting line
    noStroke();
    fill(255, 242, 255);
    rect(425, 305, 100, 10);

//Hour plate
    fill(255);
    ellipse(200, 390, D5, D5);

//12 Hour operator
    if(H > 12) {
        for(var i = 0; i < H - 12; i += 1){
            fill(151, 59, 227);
            ellipse(200, 320 + i * 15, 10, 10);
        }
    } else {
        for(var i = 0; i < H; i += 1){
            fill(151, 59, 227);
            ellipse(200, 320 + i * 15, 10, 10);
        }
    }

}

In this project, I explores the representation and abstraction of the clock by engaging geometries and colors. And visualizing the variation of time in a more creative way.