Some general improvements

canvasWorker.js

@@ -105,10 +105,14 @@ self.onmessage = (msg) => {
       console.log("using WebGL");
       // i hate this
       try {
-        gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
+        gl = canvas.getContext("webgl", {
+          preserveDrawingBuffer: true,
+          antialias: false,
+        });
         if (!gl)
           gl = canvas.getContext("experimental-webgl", {
             preserveDrawingBuffer: true,
+            antialias: false,
           });
       } catch (e) {
       } finally {
@@ -137,7 +141,7 @@ self.onmessage = (msg) => {
     draw([x, y + height, x + width, y + height, x + width, y, x, y], colorArr);
   } else {
     const [color, x, y, width, height] = msg.data;
-    if (width < 4 || height < 4) return;
+    if (width < 3 || height < 3) return;
     gl.fillStyle = color;
     gl.fillRect(x, y, width, height);
   }

index.html

@@ -279,7 +279,7 @@
           <em id="resolutionConfigLabel" style="font-style: normal">1000</em>
         </fieldset>
         <b>Warning:</b> Larger resolutions will often need exponentially more
-        memory/computation!)
+        memory/computation!
         <br />
         <br />
         <b>Debug information:</b>
@@ -307,16 +307,21 @@
     </main>
     <script src="main.js"></script>
     <script charset="utf-8">
+      const params = new URL(window.location.href);
+
       let useWebGL = true;
+      if (params.searchParams.has("webgl"))
+        useWebGL = params.searchParams.get("webgl") == "true";
+
       const isPhone = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
       const isSafari = /^((?!chrome|android).)*safari/i.test(
         navigator.userAgent,
       );
-      if (isPhone || isSafari) {
+      if ((isPhone || isSafari) && !params.searchParams.has("webgl")) {
         useWebGL = false;
         MAXRES = 3;
         window.debugInfo.innerHTML +=
-          "detected Phone/Safari, falling back to Canvas with MAXRES=3.<br>";
+          "detected phone/Safari, falling back to Canvas with MAXRES=3. Reload with ?webgl=true to still try webgl.<br>";
       }
 
       const canvas = window.canvas;
@@ -353,7 +358,6 @@
         }, 0);
       };
 
-      const params = new URL(window.location.href);
       if (params.searchParams.has("term")) {
         const t = parseBLC(decodeBase64(params.searchParams.get("term")))[0];
         window.term.innerText = show(t);

main.js

@@ -19,7 +19,7 @@ const UNKNOWN = 2;
 
 const drawAt = (worker, x, y, color) => {
   worker.postMessage([
-    color == WHITE ? "white" : color == BLACK ? "black" : "grey",
+    color == WHITE ? "white" : color == BLACK ? "black" : "#cccccc",
     x[0],
     y[0],
     x[1] - x[0],
@@ -167,8 +167,8 @@ const show = (t) => {
   if (t === null) return "";
   switch (t.type) {
     case "abs":
-      // return `\\${show(t.body)}`;
-      return `[${show(t.body)}]`;
+      return `\\${show(t.body)}`;
+    // return `[${show(t.body)}]`;
     case "app":
       return `(${show(t.left)} ${show(t.right)})`;
     case "idx":
@@ -378,7 +378,8 @@ const inc = (i, t) => {
     return null;
   }
 
-  if (t.hash in incCache && i in incCache[t.hash]) return incCache[t.hash][i];
+  const h = hash("" + i + t.hash);
+  if (h in incCache) return incCache[h];
 
   let newT;
   switch (t.type) {
@@ -396,8 +397,7 @@ const inc = (i, t) => {
       return null;
   }
 
-  if (!(t.hash in incCache)) incCache[t.hash] = {};
-  incCache[t.hash][i] = newT;
+  incCache[h] = newT;
   return newT;
 };
 
@@ -408,8 +408,8 @@ const subst = (i, t, s) => {
     return null;
   }
 
-  const h = hash("" + t.hash + s.hash);
-  if (h in substCache && i in substCache[h]) return substCache[h][i];
+  const h = hash("" + i + t.hash + s.hash);
+  if (h in substCache) return substCache[h];
 
   let newT;
   switch (t.type) {
@@ -427,8 +427,7 @@ const subst = (i, t, s) => {
       return null;
   }
 
-  if (!(h in substCache)) substCache[h] = {};
-  substCache[h][i] = newT;
+  substCache[h] = newT;
   return newT;
 };
 
@@ -531,12 +530,11 @@ const snf = (_t) => {
 
 const reduceLoop = (worker, root, _t) => {
   let cnt = 0;
-  console.log("BLC size:", size(_t));
+  window.debugInfo.innerHTML += `Term size: ${size(_t)} bit (BLC)<br>`;
   const stack = [{ ctx: root, t: _t }];
   for (let i = 0; stack.length > 0 && !canceled; i++) {
     cnt++;
 
-    // console.log(i, stack.length);
     // let [{ ctx, t }] = stack.splice(
     //   Math.floor(Math.random() * stack.length),
     //   1,

style.css

@@ -55,6 +55,20 @@ span#error {
     color: red;
 }
 
+fieldset {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+pre {
+	white-space: pre-wrap;
+}
+
+details summary {
+	cursor: pointer;
+}
+
 footer {
     text-align: center;
 }