//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.