init

2025-04-05 16:12:50 -06:00 · 2025-04-05 16:12:50 -06:00 · 8d3892b6de
commit 8d3892b6de
12 changed files with 516 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>vLEDMatrix</title>
+  </head>
+
+  <body>
+    <canvas id="canvas" width="768" height="384" />
+
+    <script>
+      const canvas = document.getElementById("canvas");
+      const ctx = canvas.getContext("2d");
+
+      function draw(pixelData) {
+        ctx.clearRect(0, 0, 768, 384);
+        for (let y = 0; y < 32; y++) {
+          for (let x = 0; x < 64; x++) {
+            const idx = y * 64 * 3 + x * 3;
+            ctx.beginPath();
+            ctx.arc(x * 12 + 4, y * 12 + 4, 4, 0, 2 * Math.PI);
+            ctx.fillStyle = `rgb(${pixelData[idx]} ${pixelData[idx + 1]} ${pixelData[idx + 2]})`;
+            ctx.fill();
+          }
+        }
+      }
+
+      const memory = new WebAssembly.Memory({
+        initial: 2,
+        maximum: 2,
+      });
+
+      const importObject = {
+        env: {
+          memory: memory,
+          printi64: (arg) => console.log(arg),
+          printf32: (arg) => console.log(arg),
+          timestamp: () => {
+            return BigInt(Math.floor(Date.now() / 1000));
+          },
+        },
+      };
+
+      WebAssembly.instantiateStreaming(fetch("zig-out/bin/ledbox.wasm"), importObject).then((result) => {
+        const wasmMemoryArray = new Uint8Array(memory.buffer);
+
+        setInterval(() => {
+          result.instance.exports.draw();
+          const pointer = result.instance.exports.getPixelDataPointer();
+          const pixelData = wasmMemoryArray.slice(pointer, pointer + 64 * 32 * 3);
+          draw(pixelData);
+        }, 100);
+      });
+    </script>
+  <body>
+</html>