xxxxxxxxxx
168
const types = ['winterTime','summerTime','regular'];
let clockType = 0;
let displayText = '';
let s, m, h, alarm = 0;
let totalMinutes = 60;
let displayHours = 12;
function setup() {
createCanvas(500, 500);
angleMode(DEGREES);
textFont('Roboto');
}
function draw() {
let now = new Date(),
then = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
0, 0, 0),
diff = now.getTime() - then.getTime();
let timeZone = int(diff / 1000 / 60 / 60 ) - hour();
let oneRealSec = diff / 1000 - 60*60 * timeZone; // one hour earlier
let maxHours = 24;
switch( types[clockType] ){
case "summerTime":
maxHours = 23;
displayText = "Winter → Summer";
break;
case "winterTime":
maxHours = 25;
displayText = "Summer → Winter";
break;
default:
displayText = 'Normal Time';
break;
}
let oneSec = map( oneRealSec, 0, 24*60*60, 0, maxHours*60*60 );
s = int(oneSec) / 60 * 360;
m = oneSec / 60 / 60 * 360;
h = oneSec / 60 / 60 / 12 * 360;
alarm = 8 / 24 * maxHours / 12 * 360;
background(255);
// Body
rectMode(CENTER);
fill('#29292F');
rect(width / 2, height / 2 - 450 / 2 - 6, 134, 20);
noStroke();
fill('#30333A');
rect(width / 2, height / 2, 450, 450, 30);
// Watch Face
fill('#64656F');
circle(width / 2, height / 2, 418);
fill('#24272F');
circle(width / 2, height / 2, 414);
fill('#0F0F0F');
circle(width / 2, height / 2, 382);
fill(0);
rect( width / 2, height / 2 + 80, 130, 20 );
fill(180);
textAlign(CENTER);
textSize(14);
text(displayText,width / 2, height / 2 + 85);
// minute marks
push();
translate(width / 2, height / 2);
fill(255, 140);
for (let i = 0; i < totalMinutes; i++) {
rotate(360 / totalMinutes);
if ((i + 1) % 5 == 0) {
rect(0, 178, 2, 18);
} else {
rect(0, 180, 2, 12);
}
}
pop();
// numbers
push();
translate(width / 2, height / 2 + 10);
rotate(180);
for (let i = 0; i < displayHours; i++) {
rotate(360 / displayHours);
fill('white');
textAlign(CENTER);
textSize(25);
push();
translate(0, 150);
rotate(150 - 30 * i);
text(i + 1, 0, 0);
pop();
}
pop()
// Fingers
// Alarm
push();
translate(width / 2, height / 2);
rotate(alarm);
fill('#212121');
rect(0, -65, 10, 130);
fill('#387C01');
rect(0, -120, 10, 20);
pop();
// Hours
push();
translate(width / 2, height / 2);
rotate(h);
fill(255);
rect(0, -70, 22, 140, 11);
pop();
// Minutes
push();
translate(width / 2, height / 2);
rotate(m);
fill(255);
rect(0, -90, 14, 180, 7);
pop();
// Seconds
push();
translate(width / 2, height / 2);
rotate(s);
fill('#F1B000');
rect(0, -90, 6, 180, 3);
circle(0, 0, 48);
rect(0, 25, 22, 50, 11);
pop();
// Glass Cover
fill(200, 70);
circle(width / 2, height / 2, 400);
}
function keyPressed() {
if (keyCode === 32) { // space
clockType++;
if( clockType >= types.length ){
clockType = 0;
}
}
}