diff --git a/script.js b/script.js index 3c3739c..b63cae3 100644 --- a/script.js +++ b/script.js @@ -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);