xxxxxxxxxx
153
// Inspired by a coding challange by Daniël Shiffman, The Coding Train
// see: https://www.youtube.com/watch?v=E4RyStef-gY
let amplitude;
function setup() {
createCanvas(400,900);
noStroke();
amplitude = 0.5;
textAlign(CENTER);
textSize(75);
}
function draw() {
background(245);
scale(0.5);
let h = hour();
let m = minute();
let s = second();
tempDate = new Date();
let ms = tempDate.getMilliseconds();
let hr_rotation = amplitude * sin((PI/60)*(m+s/60.0));
let min_rotation = amplitude * sin((PI/60)*(s+ms/1000.0));
let sec_rotation = amplitude * sin((PI/1000)*ms);
// draw hours
push();
translate(width,height-height/1.5);
fill(255,105,150);
rect(-175,-220,350,10,5);
fill(150);
translate(-135,-210);
if (h % 2 == 0) {
rotate(hr_rotation);
}
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
if (h % 2 == 0) {
rotate(-hr_rotation);
}
translate(90,0);
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
fill(255);
text(int(h/10), 0,424);
fill(150);
translate(90,0);
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
fill(255);
text(h%10, 0,424);
fill(150);
translate(90,0);
if (h % 2 == 1) {
rotate(-hr_rotation);
}
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
if (h % 2 == 1) {
rotate(hr_rotation);
}
pop();
// draw minutes
push();
translate(width,height);
fill(105,255,150);
rect(-175,-220,350,10,5);
fill(150);
translate(-135,-210);
if (m % 2 == 0) {
rotate(min_rotation);
}
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
if (m % 2 == 0) {
rotate(-min_rotation);
}
translate(90,0);
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
fill(255);
text(int(m/10), 0,424);
fill(150);
translate(90,0);
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
fill(255);
text(m%10, 0,424);
fill(150);
translate(90,0);
if (m % 2 == 1) {
rotate(-min_rotation);
}
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
if (m % 2 == 1) {
rotate(min_rotation);
}
pop();
// draw seconds
push();
translate(width,height+height/1.5);
fill(150,105,255);
rect(-175,-220,350,10,5);
fill(150);
translate(-135,-210);
if (s % 2 == 0) {
rotate(sec_rotation);
}
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
if (s % 2 == 0) {
rotate(-sec_rotation);
}
translate(90,0);
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
fill(255);
text(int(s/10), 0,424);
fill(150);
translate(90,0);
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
fill(255);
text(s%10, 0,424);
fill(150);
translate(90,0);
if (s % 2 == 1) {
rotate(-sec_rotation);
}
rect(-1,0,2,400);
ellipse(0, 400, 90, 90);
if (s % 2 == 1) {
rotate(sec_rotation);
}
pop();
}