From d8de618cfc1b0a89bd92340071d20e668244a53d Mon Sep 17 00:00:00 2001
From: noe <git@kat.cafe>
Date: Thu, 2 May 2024 21:24:55 -0400
Subject: [PATCH] add explanation and highp 8bit float

---
 .../-~-/index.html                            | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/-~-/what the fuck is a lightrunner/-~-/index.html b/-~-/what the fuck is a lightrunner/-~-/index.html
index 70b90ee..9e0a456 100644
--- a/-~-/what the fuck is a lightrunner/-~-/index.html	
+++ b/-~-/what the fuck is a lightrunner/-~-/index.html	
@@ -51,8 +51,31 @@
     <ul>
       <li id="rgb">rgb(-1,-1,-1)</li>
       <li id="hex">#HHHHHH</li>
+      <li id="rgb2">high precision rgb(-1,-1,-1)</li>
     </ul>
   </section>
+  <section>
+    <p>warning: math</p>
+    <p>
+      a 9-character single-case string could be interpreted as 3 triplets of
+      base32. this allows for a 0-46655 range per channel!
+    </p>
+    <ol>
+      <li>our example "girltwink" turns into (gir, ltw, ink)</li>
+      <li>which turns into decimal (21411, 28292, 24176)</li>
+      <li>
+        we change this to linear by dividing by 46655 ( 0.45892187332547424,
+        0.6064087450434037, 0.5181866895295253 )
+      </li>
+      <li>
+        and then up to 8 bit 0-255 ( 117.02507769799593, 154.63422998606794,
+        132.13760583002895 )
+      </li>
+      <li>
+        but probably too precise of a color :3 so <b>( 117, 155, 132 )</b>
+      </li>
+    </ol>
+  </section>
 </main>
 
 <script>
@@ -61,18 +84,22 @@
   const colorBoxEl = document.querySelector("#color-box");
   const hexEl = document.querySelector("#hex");
   const rgbEl = document.querySelector("#rgb");
+  const rgb2El = document.querySelector("#rgb2");
 
   const setColor = (r, g, b) => {
     colorBoxEl.setAttribute("style", `--color: rgb(${r}, ${g}, ${b})`);
     hexEl.innerHTML = `#${(
-      r.toString(16).padStart(2, "0") +
-      g.toString(16).padStart(2, "0") +
-      b.toString(16).padStart(2, "0")
+      Math.round(r).toString(16).padStart(2, "0") +
+      Math.round(g).toString(16).padStart(2, "0") +
+      Math.round(b).toString(16).padStart(2, "0")
     ).toLowerCase()}`;
-    rgbEl.innerHTML = `rgb(${r}, ${g}, ${b})`;
+    rgbEl.innerHTML = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(
+      b
+    )})`;
+    rgb2El.innerHTML = `highp rgb(${r}, ${g}, ${b})`;
   };
 
-  const base32to8bit = (b32) => Math.round((parseInt(b32, 36) / 46655) * 255);
+  const base32to8bit = (b32) => (parseInt(b32, 36) / 46655) * 255;
 
   const inputToColor = (inputRaw) => {
     const input = inputRaw + "000000000";