cleanup

Author: shanecranor

index.html

@@ -76,7 +76,7 @@ <h2>Output Settings</h2>
         <div id="loadingBarContainer">
           <div id="loadingBar"></div>
         </div>
-        <p id="loadingText">Loading...</p>
+        <p id="loadingText">Rendering Image!</p>
       </div>
     </main>
 

index.js

@@ -12,24 +12,17 @@ function drawQbist(canvas, info, oversampling = 0) {
     worker.addEventListener("message", (e) => {
       const { command } = e.data
       if (command === "progress") {
-        console.log(`Rendering progress: ${e.data.progress}%`)
+        const { progress } = e.data
+        loadingOverlay.style.display = "flex"
+        loadingBar.style.width = progress + "%"
       } else if (command === "rendered") {
         const { imageData } = e.data
         const data = new Uint8ClampedArray(imageData)
         const imgData = new ImageData(data, width, height)
         ctx.putImageData(imgData, 0, 0)
         worker.terminate() // Clean up the worker
-        resolve() // Resolve the Promise when rendering is complete
-      }
-    })
-    worker.addEventListener("message", (e) => {
-      const { command, progress } = e.data
-      console.log("Worker message:", command, progress)
-      if (command === "progress") {
-        loadingOverlay.style.display = "flex"
-        loadingBar.style.width = progress + "%"
-      } else if (command === "rendered") {
         loadingOverlay.style.display = "none"
+        resolve() // Resolve the Promise when rendering is complete
       }
     })
 
@@ -79,9 +72,7 @@ export function updateAll() {
 function checkURLState() {
   const urlParams = new URLSearchParams(window.location.search)
   if (urlParams.has("state")) {
-    console.log("State found in URL")
     const state = urlParams.get("state")
-    console.log("State:", state)
     loadStateFromParam(state)
     return true
   }

qbistListeners.js

@@ -37,7 +37,6 @@ export function loadStateFromParam(stateBase64) {
   try {
     const stateJSON = atob(stateBase64)
     const stateObj = JSON.parse(stateJSON)
-    console.log("Loaded state:", stateObj)
     if (
       stateObj.transformSequence &&
       stateObj.source &&

worker.js

@@ -2,49 +2,43 @@ import { optimize, qbist } from "/qbist.js"
 // --- Worker Message Handling ---
 // Receives a "render" command with payload and sends back the computed image data.
 self.addEventListener("message", (e) => {
-  console.log("aaa")
+  const data = e.data
+  if (data.command === "render") {
+    const { info, width, height, oversampling = 1 } = data
+    const { usedTransFlag, usedRegFlag } = optimize(info)
+    const buffer = new Uint8ClampedArray(width * height * 4)
 
-  try {
-    const data = e.data
-    if (data.command === "render") {
-      const { info, width, height, oversampling = 1 } = data
-      const { usedTransFlag, usedRegFlag } = optimize(info)
-      const buffer = new Uint8ClampedArray(width * height * 4)
-
-      for (let y = 0; y < height; y++) {
-        const progress = Math.floor((y / height) * 100)
-        if (height > 256) {
-          self.postMessage({ command: "progress", progress })
-        }
-        for (let x = 0; x < width; x++) {
-          const color = qbist(
-            info,
-            x,
-            y,
-            width,
-            height,
-            oversampling,
-            usedTransFlag,
-            usedRegFlag
-          )
-          const r = Math.floor(color[0] * 255)
-          const g = Math.floor(color[1] * 255)
-          const b = Math.floor(color[2] * 255)
-          const idx = (y * width + x) * 4
-          buffer[idx] = r
-          buffer[idx + 1] = g
-          buffer[idx + 2] = b
-          buffer[idx + 3] = 255
-        }
+    for (let y = 0; y < height; y++) {
+      const progress = Math.floor((y / height) * 100)
+      if (height > 256) {
+        self.postMessage({ command: "progress", progress })
+      }
+      for (let x = 0; x < width; x++) {
+        const color = qbist(
+          info,
+          x,
+          y,
+          width,
+          height,
+          oversampling,
+          usedTransFlag,
+          usedRegFlag
+        )
+        const r = Math.floor(color[0] * 255)
+        const g = Math.floor(color[1] * 255)
+        const b = Math.floor(color[2] * 255)
+        const idx = (y * width + x) * 4
+        buffer[idx] = r
+        buffer[idx + 1] = g
+        buffer[idx + 2] = b
+        buffer[idx + 3] = 255
       }
-
-      // Transfer the image data buffer back to the main thread
-      self.postMessage(
-        { command: "rendered", imageData: buffer.buffer, width, height },
-        [buffer.buffer]
-      )
     }
-  } catch (e) {
-    console.log(e)
+
+    // Transfer the image data buffer back to the main thread
+    self.postMessage(
+      { command: "rendered", imageData: buffer.buffer, width, height },
+      [buffer.buffer]
+    )
   }
 })