From 6ddcc2f8935d455af4f755005b200cd17be5b6eb Mon Sep 17 00:00:00 2001 From: Christian Lawson-Perfect Date: Mon, 17 Mar 2025 09:16:00 +0000 Subject: [PATCH] first commit. The hands pulse back and forth. --- .make.lock | 0 index.html | 27 +++++++++++++++++ script.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 5 ++++ 4 files changed, 119 insertions(+) create mode 100644 .make.lock create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.make.lock b/.make.lock new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..5e7ef8f --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + A thing made by CLP + + + + +
+ + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..bb4715b --- /dev/null +++ b/script.js @@ -0,0 +1,87 @@ +let steps = 3; + +console.clear(); + +const rules = { + "A": "+BF-AFA-FB+", + "B": "-AF+BFB+FA-", +}; + +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)); + + scale *= pips; + }) + + requestAnimationFrame(frame); +} +frame(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0fc09ac --- /dev/null +++ b/style.css @@ -0,0 +1,5 @@ +:root { + --spacing: 1em; + + color-scheme: light dark; +} \ No newline at end of file