For my abstract clock, I wanted to deconstruct the clock in hours, minutes and seconds, so I created three separate motions of the clock to illustrate the time in 24 hours.
sketch
//Angela Yang
//Section C
function setup() {
createCanvas(450, 440);
angleMode(DEGREES);
}
function draw() {
//Default side bar
background(0);
push();
translate(225, 285);
rotate(-90);
//Clock face
fill("white");
ellipse(0, -12, 5, 5);
ellipse(0, 12, 5, 5);
stroke("white");
strokeWeight(3);
line(-18, -5, -18, 3);
let hours = hour();
let minutes = minute();
let seconds = second();
stroke(255, 100, 150);
noFill();
strokeWeight(5);
let end = map(seconds, 0, 60, 0, 360);
arc(0, 0, 100, 100, 0, end);
stroke("#0BDA51");
let end2 = map(minutes, 0, 60, 0, 360);
arc(0, 0, 80, 80, 0, end2);
stroke("yellow");
let end3 = map(hours, 0, 24, 0, 360);
arc(0, 0, 60, 60, 0, end3);
pop();
fill(255);
noStroke();
text(hours + ":" + minutes + ":" + seconds, 390, 20);
// stroke()
push();
translate(112.5, 112.5);
noFill();
stroke(255);
ellipse(0, 0, 70);
noStroke();
rotate(-90);
//Hour clock on the left corner
for (let i = 0; i < 12; i++) {
if (i == hours % 12) {
fill("yellow");
ellipse(50, 0, 15);
} else {
fill(255);
ellipse(50, 0, 10);
}
rotate(360 / 12);
}
pop();
push();
translate(225 + 112.5, 112.5);
rotate(-90);
noFill();
stroke(255);
ellipse(0, 0, 110);
noStroke();
rotate(-90);
//Minute clock on the right corner
for (let i = 0; i < 60; i++) {
if (i == minutes % 60) {
fill("#0BDA51"); //Draws the indicator circle
ellipse(70, 0, 8);
} else {
fill(255);
ellipse(70, 0, 4);
}
rotate(360 / 60);
}
pop();
//Second clock in the middle
push();
translate(225, 112.5 + 170);
noFill();
stroke(255);
ellipse(0, 0, 160);
noStroke();
rotate(-90);
for (let i = 0; i < 60; i++) {
if (i == seconds % 60) {
fill(255, 100, 150);
ellipse(100, 0, 10);
} else {
fill(255);
ellipse(100, 0, 6);
}
rotate(360 / 60);
}
pop();
}