Fanjie Jin – Project-06-Abstract-Clock

53

//Fanjie Jin
//Section C
//fjin@andrew.cmu.edu
//Project 6

function setup() {
    createCanvas(480,480);
}
    
function draw() {
   background(15, 20, 60);

//change the hour, min and sec into variables
    var S = second();
    var M = minute();
    var H = hour();
    
//display the grid for percentages
    stroke(255)
    strokeWeight(1)
    line(240, 25, 240, 455)

    stroke(255)
    strokeWeight(1)
    line(20, 240, 480, 240)

//display the percentage signs
    fill(255);
    text(" 0% ", 450, 237);
    fill(255);

    text(" 25% ", 228, 470);
    fill(255);

    text(" 50% ", 5, 237);

    fill(255);
    text(" 75% ", 228, 18);

//outer circle
    stroke(255);
    noFill();
    ellipse(240, 240, 400, 400);

//arc plate displays hours overall percentage of hour
    MappedH = H / 24;
    strokeWeight(1);
    fill(100, 140, 222);
    arc(240,240, 400, 400, 0, MappedH *2 * PI);

//outer circle
    fill(15, 20, 60);
    stroke(255);
    ellipse(260, 240, 300, 300);

//display the grid for hours
    for(a = 0 ;a < 360; a += 15){
      push();
      translate(240,240);
      strokeWeight(1);
      stroke(255, 255, 0);
      rotate(radians(a));
      line(0,0,200,0);
      pop();
    }

//outer circle
    fill(15, 20, 60);
    stroke(255);
    ellipse(260, 240, 300, 300);

//display the grid for seconds and how many seconds have passed
    for(i = 0 ;i < 360; i += 6){
      push();
      translate(260,240);
      stroke(255, 0, 0);
      rotate(radians(i));
      line(0,0,150,0);
      pop();
    }
      push();
      translate(260,240);
      rotate(radians(6 * S));
      stroke(255);
      line(0,0,150,0);       
      pop();

    fill(15, 20, 60);
    ellipse(270, 240, 200, 200);

//display how many minutes have passed 
    MappedM = M / 60;
    push();
    translate(270, 240);
    noStroke();
    fill(100, 108, 222);
    arc(0,0, 200, 200, 0, MappedM *2 * PI);
    pop();

//draw grid for minutes
    for(a = 0 ;a < 360; a += 6){
      push();
      translate(270,240);
      strokeWeight(1);
      stroke(255, 255, 0);
      rotate(radians(a));
      line(0,0,100,0);
      pop();
    } 

//inner ellipse 3
    fill(15, 20, 60);
    stroke(255);
    ellipse(249, 240, 150, 150);

//circle at the center would expand based on seconds 
    fill(50, 20, 60);
    noStroke();
    ellipse(249, 240, S * 2.5, S * 2.5);

//display the actual time at the middle of the canvas
    fill(255);
    text(nf(H, 2,0) + ":", 220, 237);
    text(nf(M, 2,0) + ":", 240, 237);
    text(nf(S, 2,0), 260, 237);

//line showing the beginning     
    stroke(255);
    strokeWeight(2);
    line(240, 240, 600, 240);
}

In this abstract clock project, I have decided to treat it with a minimalistic approach. Overall, there are three rings, and from the center to the outer ring, the minutes, seconds, and hours are being displayed. The gird has showed the percentage, so from the clock, viewer will be understand how much percent of the day has been passed. There is a circle expanding constantly at the center of the clock based on how many seconds have been passed. Lastly, I have experimented with the idea of offset so compositionally, its more intriguing.