clp/hilbert-clock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

only 60 dots, to match normal clocks; colours change through the day and support dark mode

Browse source
This commit is contained in:
Christian Lawson-Perfect 2025-03-18 09:01:12 +00:00
parent 24758b7758
commit 6eaa95d0f7
3 changed files with 80 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

23
script.js
View file

@ -26,6 +26,7 @@ const width = 1.5 * 2**-(steps+1);
const dots = [];
let i = 0;
for(let c of s) {
const [dx,dy] = dir;
switch(c) {
@ -36,15 +37,19 @@ for(let c of s) {
dir = [dy,-dx];
break;
case 'F':
i += 1;
x += dx;
y += dy;
d += `l ${dx} ${dy}`;
}
if(i==61) {
break;
}
}
d += 'l 0.000000001 0.000001'; // make sure the final dot is drawn
const length = (2**(2*steps)-1) * m;
const length = 60 * m;
const curves = Array.from(document.querySelectorAll('.curve'));
@ -67,13 +72,17 @@ function easeLinear(t) {
}
function frame() {
const segments = 2**(2*steps)-1; // number of segments in the curve
const period = 1000*60/segments; // One period of the small hand is 60 seconds
const now = new Date();
const midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate());
const dt = (new Date() - midnight);
document.body.style.setProperty('--bg-hue',dt*360/(1000*60*60*24));
const segments = 60; // number of segments in the curve
const period = 1000; // One period of the small hand is 60 seconds
curves.forEach((curve,i) => {
const now = new Date();
const midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate());
const dt = (new Date() - midnight) / period / (60**(1-i));
const m = dt % (2*segments);
const m = (dt / period / (60**(1-i))) % (2*60); // between 0 and 120
//const m = document.getElementById('t').valueAsNumber * 120;
const t = i == 0 ? m : (Math.floor(m) + easeInOutSine(m % 1)); // linear for big hand, eased for small hand
const a = t/segments; // between 0 and 2
const b = 2*(1-Math.abs(1-a/2));