Homepage/script.js at main · Clazyo/Homepage · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* -- Convert degrees to radians -- */
function deg2rad(d) { return (2 * d / 360) * Math.PI; }

/* -- progress clocks hand every once in a while -- */
setInterval(() => {
	let minute = document.getElementById("minute");
	let hour = document.getElementById("hour");
	let second = document.getElementById("second");

	/* -- no angle in 3 a clock -- */
	let s = new Date().getSeconds() * 6 - 90;
	let m = new Date().getMinutes() * 6 - 90;
	let h = new Date().getHours() * 30 - 90;

	second.style.transform = 'rotate(' + s + 'deg)';
	minute.style.transform = 'rotate(' + m + 'deg)';
	hour.style.transform = 'rotate(' + h + 'deg)';

}, 10);

/* -- update clock fast -- */
/* -- hand angle calculation. -- */
function vec2ang(x,y) {
	angleInRadians = Math.atan2(y, x);
	angleInDegrees = (angleInRadians / Math.PI) * 180.0;
	return angleInDegrees;
}

/* -- calculate angle on notches and positions. -- */
let nc = document.getElementById("notch-container");
let angle = 0;
let rotate_x = 120;
let rotate_y = 0;

/* -- calculate minute notches -- */
for (let i = 0; i < 60; i++) {
	let thin = document.createElement("div");
	let x = rotate_x * Math.cos(angle) - rotate_y * Math.cos(angle);
	let y = rotate_y * Math.cos(angle) + rotate_x * Math.sin(angle);
	let r = vec2ang(x, y);
	thin.className = "thin";
	thin.style.left = 122 + x + "px";
	thin.style.top = 127 + y + "px";
	thin.style.transform = "rotate(" + r + "deg)";
	nc.appendChild(thin);
	angle += (Math.PI / 300) * 10;

}
// reset angle parameters
angle = 0; rotate_x = 120; rotate_y = 0;

/* -- thicc notches -- */
for (let i = 0; i < 12; i++) {
	let notch = document.createElement("div");
	let x = rotate_x * Math.cos(angle) - rotate_y * Math.cos(angle);
	let y = rotate_y * Math.cos(angle) + rotate_x * Math.sin(angle);
	let r = vec2ang(x, y);
	notch.className = "notch";
	notch.style.left = 122 + x + "px";
	notch.style.top = 127 + y + "px";
	notch.style.transform = "rotate(" + r + "deg)";
	nc.appendChild(notch);
	angle += (Math.PI / 60) * 10;

}

/* -- moving the clock -- */
window.onload = addListeners();
function addListeners(){
	document.getElementById("clock-rim").addEventListener("mousedown", mouseDown, false);
	window.addEventListener("mouseup", mouseUp, false);
}
function mouseUp() {
	window.removeEventListener("mousemove", divMove, true);
}
function mouseDown(e){
window.addEventListener("mousemove", divMove, true);
}
function divMove(e){
		var div = document.getElementById("clock-rim");
	div.style.position = "absolute";
	div.style.top = e.clientY + "px";
	div.style.left = e.clientX + "px";
}