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);