gregberger.github.io/clock/sketch.js at master · gregberger/gregberger.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
let colors = {
	h: "#34495E",
	m: '#8EACBF',
	s: '#FF6600',
	bg: '#000000'
};
function setup() {
	createCanvas(windowWidth, windowHeight);
	fill(255);
	strokeWeight(5);
	strokeCap(SQUARE);
	displayDensity(2);
	//noFill();
	//noStroke();
}

function draw() {
	let d = new Date();
	let hr = d.getHours();
	let min = d.getMinutes();
	let sec = d.getSeconds();

	background(colors.bg);
	fill(255);
	textSize(40);
	text(hr+":"+min+":"+sec, 100, 50);

	push();
	translate(width/2, height/2, 0);
	let rotationSec = radians(map(sec,0,60,0,360));
	let rotationMin = radians(map(min, 0,60, 0, 360));
	let rotationH = radians(map(hr%12, 0, 12, 0, 360));
	rotate(-HALF_PI);
	fill(colors.h);
	arc(0,0, 700,700, 0, rotationH);
	fill(colors.bg);
	ellipse(0,0,600,600);
	fill(colors.m);
	arc(0,0, 600,600, 0, rotationMin);
	fill(colors.bg);
	ellipse(0,0,100,100);
	fill(colors.s);
	arc(0,0, 100,100, 0, rotationSec);
	pop();

}