From 6eaa95d0f76163af76b3d902781196c087f250c0 Mon Sep 17 00:00:00 2001
From: Christian Lawson-Perfect <christian@lawson-perfect.uk>
Date: Tue, 18 Mar 2025 09:01:12 +0000
Subject: [PATCH] only 60 dots, to match normal clocks; colours change through
 the day and support dark mode

---
 index.html | 15 ++++++++-------
 script.js  | 23 +++++++++++++++-------
 style.css  | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 80 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index 9af23ad..5cbfbb7 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
-    <title>A thing made by CLP</title>
+    <title>Hilbert clock</title>
     <script type="module" src="script.js"></script>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <main>
     <svg id="board" viewBox="-0.3 -0.3 1.6 1.6" style="max-height: 100svh">
       <defs>
         <linearGradient id="dots-gradient">
@@ -16,12 +15,14 @@
           <stop offset="100%" stop-color="white" />
         </linearGradient>
       </defs>
-      <rect x="-100" y="-100" width="200" height="200" fill="hsl(140,60%,60%)"/>
-      <path class="curve" fill="none" stroke="hsl(24,50%,10%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="square"/>
-      <path class="curve" fill="none" stroke="hsl(240,50%,50%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="square"/>
-      <path id="dots" fill="none" stroke="hsl(240,20%,90%)" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="round"/>
+      <path id="big-hand" class="curve" fill="none" stroke-width="-1.01" stroke-linejoin="round" stroke-linecap="square"/>
+      <path id="small-hand" class="curve" fill="none" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="square"/>
+      <path id="dots" fill="none" stroke-width="0.01" stroke-linejoin="round" stroke-linecap="round"/>
       <text id="debug" fill="white" font-size="0.1"></debug>
     </svg>
-    </main>
+
+    <footer>
+      <p><a href="https://somethingorotherwhatever.com">made by clp</a></p>
+    </footer.
   </body>
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index b63cae3..879266f 100644
--- a/script.js
+++ b/script.js
@@ -26,6 +26,7 @@ const width = 1.5 * 2**-(steps+1);
 
 const dots = [];
 
+let i = 0;
 for(let c of s) {
   const [dx,dy] = dir;
   switch(c) {
@@ -36,15 +37,19 @@ for(let c of s) {
       dir = [dy,-dx];
       break;
     case 'F':
+      i += 1;
       x += dx;
       y += dy;
       d += `l ${dx} ${dy}`;
   }
+      if(i==61) {
+        break;
+      }
 }
 
 d += 'l 0.000000001 0.000001'; // make sure the final dot is drawn
 
-const length = (2**(2*steps)-1) * m;
+const length = 60 * m;
 
 const curves = Array.from(document.querySelectorAll('.curve'));
 
@@ -67,13 +72,17 @@ 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
+  const now = new Date();
+  const midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate());
+
+  const dt = (new Date() - midnight);
+  document.body.style.setProperty('--bg-hue',dt*360/(1000*60*60*24));
+  
+  const segments = 60; // number of segments in the curve
+  const period = 1000; // One period of the small hand is 60 seconds
   curves.forEach((curve,i) => {
-    const now = new Date();
-    const midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate());
-    const dt = (new Date() - midnight) / period / (60**(1-i));
-    const m = dt % (2*segments);
+    const m = (dt / period / (60**(1-i))) % (2*60); // between 0 and 120
+    //const m = document.getElementById('t').valueAsNumber * 120;
     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));
diff --git a/style.css b/style.css
index 0fc09ac..3480ee1 100644
--- a/style.css
+++ b/style.css
@@ -2,4 +2,60 @@
   --spacing: 1em;
 
   color-scheme: light dark;
+
+  --bg-hue: 210;
+  --bg-lum: 60%;
+
+  --hand-hue: calc(180 + var(--bg-hue));
+  --big-hand-lum: 15%;
+  --small-hand-lum: 50%;
+  --dots-lum: 90%;
+}
+
+a {
+  filter: saturate(0%);
+  font-family: sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-lum: 20%;
+    --big-hand-lum: 90%;
+    --small-hand-lum:60%;
+    --dots-lum: 15%;
+  }
+}
+
+body {
+  margin: 0;
+  background: hsl(var(--bg-hue),60%,var(--bg-lum));
+  display: grid;
+  justify-items: center;
+  grid-template: 1fr auto / 1fr;
+  height: 100svh;
+  overflow: hidden;
+}
+
+#board {
+    width: 100%;
+    height: 100%;
+}
+main {
+    height: 100%;
+}
+
+path {
+  stroke: hsl(var(--hand-hue),50%,var(--lum));
+}
+
+#big-hand {
+  --lum: var(--big-hand-lum);
+}
+
+#small-hand {
+  --lum: var(--small-hand-lum);
+}
+
+#dots {
+  --lum: var(--dots-lum);
 }
\ No newline at end of file
