From e42a5706903fc853feed388442d1f344bb8553cb Mon Sep 17 00:00:00 2001
From: Christian Lawson-Perfect <christian@lawson-perfect.uk>
Date: Sun, 4 May 2025 13:00:58 +0000
Subject: [PATCH] first commit - found it not working

the dots just wobble back and forth one stop
---
 .gitignore |  1 +
 index.html | 28 +++++++++++++++++++++
 script.js  | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  |  5 ++++
 4 files changed, 105 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
 create mode 100644 script.js
 create mode 100644 style.css
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8bc0f76
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.make.*
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fdd5b01
--- /dev/null
+++ b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>A thing made by CLP</title>
+    <script type="module" src="script.js"></script>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <header>
+      <h1>A thing made by CLP</h1>
+    </header>
+    <main>
+    <svg id="board" viewBox="-0.1 -0.1 1.2 1.2">
+      <defs>
+        <linearGradient id="dots-gradient">
+          <stop offset="0%" stop-color="green" />
+          <stop offset="100%" stop-color="white" />
+        </linearGradient>
+      </defs>
+      <rect x="-100" y="-100" width="200" height="200" fill="hsl(120,30%,70%)"/>
+      <path id="curve" fill="none" stroke="black" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="square"/>
+      <path id="dots" fill="none" stroke="hsl(120,50%,70%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="round"/>
+    </svg>
+    </main>
+  </body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a30f3a3
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+/*
+Duration: 52 seconds.0:52
+Hilbert curve at its sixth iteration
+
+    Alphabet : A, B
+    Constants : F + −
+    Axiom : A
+    Production rules:
+*/
+
+console.clear();
+
+const rules = {
+  "A": "+BF-AFA-FB+",
+  "B": "-AF+BFB+FA-",
+};
+
+let steps = 5;
+
+let s = "A";
+for(let i=0;i<steps;i++) {
+  let ns = "";
+  for(let c of s) {
+    ns += rules[c] || c;
+  }
+  s = ns;
+}
+
+let [x,y] = [0,0];
+const m = 2**(-steps);
+let dir = [m,0];
+let d = 'M 0 0 ';
+const width = 1.5 * 2**-(steps+1);
+
+const dots = [];
+
+for(let c of s) {
+  const [dx,dy] = dir;
+  switch(c) {
+    case '+':
+      dir = [-dy,dx];
+      break;
+    case '-':
+      dir = [dy,-dx];
+      break;
+    case 'F':
+      x += dx;
+      y += dy;
+      d += `l ${dx} ${dy}`;
+  }
+}
+
+const length = 2**steps - 1;
+
+document.getElementById('curve').setAttribute('stroke-width',width);
+document.getElementById('curve').setAttribute('d',d);
+document.getElementById('dots').setAttribute('stroke-width',width*0.4);
+document.getElementById('dots').setAttribute('d',d);
+document.getElementById('dots').setAttribute('stroke-dasharray',`0.0000001 ${2*m}`);
+
+function easeInOutSine(x) {
+return -(Math.cos(Math.PI * x) - 1) / 2;
+
+}
+function frame() {
+  const period = 1000;
+  const t = (new Date()-0)/period % 1000;
+  document.getElementById('dots').setAttribute('stroke-dashoffset',easeInOutSine(t)*m);
+  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
