From 2c7badf010f0fc3413ebfd4ac9b6b44b3ceb592c Mon Sep 17 00:00:00 2001 From: Christian Lawson-Perfect Date: Mon, 17 Mar 2025 09:51:42 +0000 Subject: [PATCH] It's a proper clock! The hands fill up to one end, then empty, then it all starts again. The period is 60 seconds for the small hand, and 60 minutes for the big hand, so it matches a standard clock. --- index.html | 6 +++--- script.js | 34 ++++++++++++++++++++-------------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 5e7ef8f..9af23ad 100644 --- a/index.html +++ b/index.html @@ -9,17 +9,17 @@
- + - - + +
diff --git a/script.js b/script.js index bb4715b..3c3739c 100644 --- a/script.js +++ b/script.js @@ -7,6 +7,8 @@ const rules = { "B": "-AF+BFB+FA-", }; +steps = Math.min(steps,5); // make sure I don't type a huge number that crashes my PC + let s = "A"; for(let i=0;i { - const dt = (new Date() - 0) / scale / period; - const m = dt % (pips); - const t = dt; - const l = (Math.floor(m) + easeInOutSine(m % 1))*length/pips; - const n = Math.max(0,easeInOutSine(t))*l; - //document.getElementById('debug').textContent = `${m.toFixed(4)} ${length} ${pips}` - curve.setAttribute('stroke-dasharray',`${l-n} ${length}`); - curve.setAttribute('stroke-dashoffset',-n); - curve.setAttribute('stroke-width',width*(easeInOutSine(t)*0.1+0.9)/2**(i+1)); + const now = new Date(); + const midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate()); + const dt = (new Date() - midnight) / scale / period; + 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 *= pips; + scale /= segments; }) requestAnimationFrame(frame);