Add configuration and debugging

3 files changed, 64 insertions, 3 deletions

diff --git a/canvasWorker.js b/canvasWorker.js
index 51878f6..ab97236 100644
--- a/canvasWorker.js
+++ b/canvasWorker.js
@@ -76,13 +76,28 @@ let useWebGL = true;
 
 let draw;
 self.onmessage = (msg) => {
-  if (msg.data == "clear") {
+  if ("clear" in msg.data) {
     if (useWebGL) {
       gl.clearColor(0, 0, 0, 0);
       gl.clear(gl.COLOR_BUFFER_BIT);
     } else {
       gl.clearRect(0, 0, canvas.width, canvas.height);
     }
+  } else if ("resize" in msg.data) {
+    const { width, height } = msg.data.resize;
+    canvas.width = width;
+    canvas.height = height;
+    gl.canvas.width = width;
+    gl.canvas.height = height;
+
+    if (useWebGL) {
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      draw = initGL();
+    } else {
+      gl.clearRect(0, 0, canvas.width, canvas.height);
+    }
   } else if ("canvas" in msg.data) {
     canvas = msg.data.canvas;
     useWebGL = msg.data.useWebGL;
diff --git a/index.html b/index.html
index 9e519c9..d46fbef 100644
--- a/index.html
+++ b/index.html
@@ -263,6 +263,28 @@ map = \\(0 \\\\\(0 (6 4) (6 3) (6 2) (6 1)))
         ></textarea>
       </div>
       <button id="render">Render!</button>
+      <details>
+        <summary>Configuration</summary>
+        <fieldset>
+          <label for="resolutionConfig">Resolution: </label>
+          <input
+            type="range"
+            min="100"
+            max="10000"
+            step="10"
+            name="resolutionConfig"
+            id="resolutionConfig"
+            value="1000"
+          />
+          <em id="resolutionConfigLabel" style="font-style: normal">1000</em>
+        </fieldset>
+        <b>Warning:</b> Larger resolutions will often need exponentially more
+        memory/computation!)
+        <br />
+        <br />
+        <b>Debug information:</b>
+        <pre id="debugInfo"></pre>
+      </details>
       <footer>
         <ul>
           <li>
@@ -293,6 +315,8 @@ map = \\(0 \\\\\(0 (6 4) (6 3) (6 2) (6 1)))
       if (isPhone || isSafari) {
         useWebGL = false;
         MAXRES = 3;
+        window.debugInfo.innerHTML +=
+          "detected Apple/Safari, falling back to Canvas with MAXRES=3.<br>";
       }
 
       const canvas = window.canvas;
@@ -311,8 +335,9 @@ map = \\(0 \\\\\(0 (6 4) (6 3) (6 2) (6 1)))
 
         // button doesn't update text without timeout
         setTimeout(() => {
+          let cnt;
           try {
-            reduceLoop(
+            cnt = reduceLoop(
               worker,
               root,
               app(t)(parse("\\((((0 \\\\1) \\\\1) \\\\1) \\\\1)")),
@@ -322,6 +347,7 @@ map = \\(0 \\\\\(0 (6 4) (6 3) (6 2) (6 1)))
           } finally {
             window.render.textContent = "Render!";
             window.render.disabled = false;
+            window.debugInfo.innerHTML += `rendered ${cnt} squares<br>`;
             console.timeEnd("reduceLoop");
           }
         }, 0);
@@ -345,6 +371,20 @@ map = \\(0 \\\\\(0 (6 4) (6 3) (6 2) (6 1)))
         params.searchParams.set("term", encodeBase64(t));
         window.history.pushState({ path: params.href }, "", params.href);
       });
+
+      window.resolutionConfig.addEventListener("input", () => {
+        const resolution = +window.resolutionConfig.value;
+        document.getElementById("resolutionConfigLabel").innerHTML = resolution;
+      });
+
+      window.resolutionConfig.addEventListener("change", () => {
+        const resolution = +window.resolutionConfig.value;
+        root.x[1] = resolution;
+        root.y[1] = resolution;
+        worker.postMessage({
+          resize: { width: resolution, height: resolution },
+        });
+      });
     </script>
   </body>
 </html>
diff --git a/main.js b/main.js
index c07d08c..7112d1f 100644
--- a/main.js
+++ b/main.js
@@ -348,7 +348,7 @@ const seemsScreeny = (t) =>
   t.body.left.left.left.left.idx === 0;
 
 const clearScreen = (worker) => {
-  worker.postMessage("clear");
+  worker.postMessage({ clear: true });
 };
 
 /* beta reduction */
@@ -434,6 +434,7 @@ const subst = (i, t, s) => {
 
 // guaranteed normal form
 // only use if sure that t is not a (potentially diverging) screen
+// TODO: this assumes laziness LOL
 const gnf = (t) => {
   if (cancelReduction() || t === null) {
     error("in gnf");
@@ -529,9 +530,12 @@ const snf = (_t) => {
 };
 
 const reduceLoop = (worker, root, _t) => {
+  let cnt = 0;
   console.log("BLC size:", size(_t));
   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),
@@ -579,6 +583,8 @@ const reduceLoop = (worker, root, _t) => {
       drawAt(worker, ctx.x, ctx.y, toColor(t));
     }
   }
+
+  return cnt;
 };
 
 function helpSyntax() {