xxxxxxxxxx
53
let hr;
let min;
let sec;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(50);
translate(width / 2, height / 2);
hr = hour();
min = minute();
sec = second();
strokeWeight(1);
stroke(255);
fill(255);
textAlign(CENTER, CENTER);
textSize(32);
text(hr + ":" + min + ":" + sec, 0, 0);
drawClock();
}
function drawClock() {
strokeWeight(50);
stroke(255);
noFill();
angleMode(DEGREES);
rotate(270);
angleMode(RADIANS);
stroke(200, 150, 50, 60);
ellipse(0, 0, 400, 400);
let endSec = map(sec, 0, 59, 0, TWO_PI);
stroke(200, 150, 50);
arc(0, 0, 400, 400, 0, endSec);
stroke(150, 50, 200, 60);
ellipse(0, 0, 300, 300);
let endMin = map(min, 0, 59, 0, TWO_PI);
stroke(150, 50, 200);
arc(0, 0, 300, 300, 0, endMin);
stroke(50, 200, 150, 60);
ellipse(0, 0, 200, 200);
let endHr = map(hr, 0, 24, 0, TWO_PI);
stroke(50, 200, 150);
arc(0, 0, 200, 200, 0, endHr);
}