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

fix the scaling for the big hand.

Browse source
This commit is contained in:
Christian Lawson-Perfect 2025-03-17 10:09:22 +00:00
parent 2c7badf010
commit 24758b7758
1 changed files with 1 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
script.js
View file

@ -69,23 +69,19 @@ 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
let scale = segments**(curves.length-1);
curves.forEach((curve,i) => {
const now = new Date();
const midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate());
const dt = (new Date() - midnight) / scale / period;
const dt = (new Date() - midnight) / period / (60**(1-i));
const m = dt % (2*segments);
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));
const end = Math.min(b,1)*length;
const start = Math.max(0,b-1)*length;
//document.getElementById('debug').textContent = `${m.toFixed(4)} ${length} ${segments}`
curve.setAttribute('stroke-dasharray',`${end-start} ${2*length}`);
curve.setAttribute('stroke-dashoffset',-start);
curve.setAttribute('stroke-width',width/2**(i));
scale /= segments;
})
requestAnimationFrame(frame);