@sarmal/core 0.34.0 → 0.35.0

package/dist/index.d.cts

@@ -104,10 +104,10 @@ interface DotMatrixSarmalOptions extends Pick<BaseRendererOptions, "autoStart" |
  * Grid geometry is derived from `cols` and `rows`.
  * For example, a 240x240 canvas with `cols: 32, rows: 32` produces 1024 dots with cells approximately 7.5x7.5 px each.
  *
- * The background layer (all dim dots) is pre-rendered to an OffscreenCanvas at init and
- *  restored each frame with a single `drawImage` call.
- * Lit dots are batched by brightness level,
- *  so the total draw calls per frame is around 10–12 regardless of grid size.
+ * At init, a pixel mask is computed that records which canvas pixels belong to each dot.
+ * Each frame, RGBA values are written directly into a typed array (one entry per lit pixel)
+ *  and flushed to the canvas with a single `ctx.putImageData` call.
+ * Frame cost is flat regardless of how many dots are lit or what grid size is used.
  *
  * @param canvas - The canvas element to draw into.
  *                 Its `width` and `height` HTML attributes determine the rendering area.

package/dist/index.d.ts

@@ -104,10 +104,10 @@ interface DotMatrixSarmalOptions extends Pick<BaseRendererOptions, "autoStart" |
  * Grid geometry is derived from `cols` and `rows`.
  * For example, a 240x240 canvas with `cols: 32, rows: 32` produces 1024 dots with cells approximately 7.5x7.5 px each.
  *
- * The background layer (all dim dots) is pre-rendered to an OffscreenCanvas at init and
- *  restored each frame with a single `drawImage` call.
- * Lit dots are batched by brightness level,
- *  so the total draw calls per frame is around 10–12 regardless of grid size.
+ * At init, a pixel mask is computed that records which canvas pixels belong to each dot.
+ * Each frame, RGBA values are written directly into a typed array (one entry per lit pixel)
+ *  and flushed to the canvas with a single `ctx.putImageData` call.
+ * Frame cost is flat regardless of how many dots are lit or what grid size is used.
  *
  * @param canvas - The canvas element to draw into.
  *                 Its `width` and `height` HTML attributes determine the rendering area.

package/dist/index.js

@@ -1416,7 +1416,6 @@ function createSarmalSVG(container, curveDef, options) {
 }
 
 // src/renderer-dot-matrix.ts
-var NUM_BUCKETS = 8;
 function createSarmalDotMatrix(canvas, curveDef, options) {
   const {
     cols = 32,
@@ -1455,7 +1454,12 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   let scale = 1;
   let offsetX = 0;
   let offsetY = 0;
-  let bgCanvas = null;
+  let pixelMaskStarts = new Uint32Array(0);
+  let pixelMaskLengths = new Uint32Array(0);
+  let pixelMaskIndices = new Uint32Array(0);
+  let pixelMaskCoverages = new Float32Array(0);
+  let bgImageData = null;
+  let frameImageData = null;
   let animationId = null;
   let lastTime = 0;
   let pausedByVisibility = false;
@@ -1463,20 +1467,73 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   let morphReject = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphProgress = 0;
-  function buildBgCanvas() {
-    bgCanvas = new OffscreenCanvas(W, H);
-    const bgCtx = bgCanvas.getContext("2d");
-    const bg = gradientRgb ? gradientRgb[0] : colorRgb;
-    bgCtx.fillStyle = `rgba(${bg.r},${bg.g},${bg.b},0.05)`;
-    bgCtx.beginPath();
+  function computePixelMask() {
+    const starts = new Uint32Array(cols * rows);
+    const lengths = new Uint32Array(cols * rows);
+    const allIndices = [];
+    const allCoverages = [];
+    const cornerR = roundness * dotR;
+    const cornerR2 = cornerR * cornerR;
+    const SSAA = 4;
+    const SSAA2 = SSAA * SSAA;
     for (let row = 0; row < rows; row++) {
       for (let col = 0; col < cols; col++) {
+        const dotIdx = row * cols + col;
         const cx = (col + 0.5) * cellW;
         const cy = (row + 0.5) * cellH;
-        bgCtx.roundRect(cx - dotR, cy - dotR, dotR * 2, dotR * 2, roundness * dotR);
+        const x0 = Math.max(0, Math.floor(cx - dotR - 1));
+        const x1 = Math.min(W - 1, Math.ceil(cx + dotR + 1));
+        const y0 = Math.max(0, Math.floor(cy - dotR - 1));
+        const y1 = Math.min(H - 1, Math.ceil(cy + dotR + 1));
+        starts[dotIdx] = allIndices.length;
+        let count = 0;
+        for (let py = y0; py <= y1; py++) {
+          for (let px = x0; px <= x1; px++) {
+            let hits = 0;
+            for (let sy = 0; sy < SSAA; sy++) {
+              const spyCenter = py + (sy + 0.5) / SSAA;
+              for (let sx = 0; sx < SSAA; sx++) {
+                const spxCenter = px + (sx + 0.5) / SSAA;
+                const dx = Math.max(Math.abs(spxCenter - cx) - (dotR - cornerR), 0);
+                const dy = Math.max(Math.abs(spyCenter - cy) - (dotR - cornerR), 0);
+                if (dx * dx + dy * dy <= cornerR2) {
+                  hits++;
+                }
+              }
+            }
+            if (hits > 0) {
+              allIndices.push((py * W + px) * 4);
+              allCoverages.push(hits / SSAA2);
+              count++;
+            }
+          }
+        }
+        lengths[dotIdx] = count;
+      }
+    }
+    pixelMaskStarts = starts;
+    pixelMaskLengths = lengths;
+    pixelMaskIndices = new Uint32Array(allIndices);
+    pixelMaskCoverages = new Float32Array(allCoverages);
+  }
+  function buildBgImageData() {
+    bgImageData = new ImageData(W, H);
+    const bg = gradientRgb ? gradientRgb[0] : colorRgb;
+    const baseAlpha = 0.05 * 255;
+    const { data } = bgImageData;
+    const n = cols * rows;
+    for (let dotIdx = 0; dotIdx < n; dotIdx++) {
+      const start = pixelMaskStarts[dotIdx];
+      const len = pixelMaskLengths[dotIdx];
+      for (let k = 0; k < len; k++) {
+        const px = pixelMaskIndices[start + k];
+        const coverage = pixelMaskCoverages[start + k];
+        data[px] = bg.r;
+        data[px + 1] = bg.g;
+        data[px + 2] = bg.b;
+        data[px + 3] = Math.round(baseAlpha * coverage);
       }
     }
-    bgCtx.fill();
   }
   function sampleGradientRgb(stops, t) {
     const n = stops.length;
@@ -1538,43 +1595,38 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     }
   }
   function draw() {
-    ctx.clearRect(0, 0, W, H);
-    if (bgCanvas) {
-      ctx.drawImage(bgCanvas, 0, 0);
+    if (!bgImageData || !frameImageData) {
+      return;
     }
-    const animOffset = currentTrailStyle === "gradient-animated" ? Math.abs(animTime / ANIM_PERIOD % 2 - 1) * 0.35 : 0;
-    for (let bucket = 0; bucket < NUM_BUCKETS; bucket++) {
-      const lo = bucket / NUM_BUCKETS;
-      const hi = (bucket + 1) / NUM_BUCKETS;
-      const midpoint = (lo + hi) / 2;
-      const alpha = 0.08 + midpoint * 0.92;
-      let hasLit = false;
-      ctx.beginPath();
-      for (let row = 0; row < rows; row++) {
-        for (let col = 0; col < cols; col++) {
-          const intensity = grid[row * cols + col];
-          if (intensity > lo && intensity <= hi) {
-            const cx = (col + 0.5) * cellW;
-            const cy = (row + 0.5) * cellH;
-            ctx.roundRect(cx - dotR, cy - dotR, dotR * 2, dotR * 2, roundness * dotR);
-            hasLit = true;
-          }
-        }
-      }
-      if (hasLit) {
-        if (gradientRgb !== null) {
-          const t = ((midpoint + animOffset) % 1 + 1) % 1;
-          const { r, g, b } = sampleGradientRgb(gradientRgb, t);
-          ctx.fillStyle = `rgb(${r},${g},${b})`;
-        } else {
-          const { r, g, b } = colorRgb;
-          ctx.fillStyle = `rgb(${r},${g},${b})`;
-        }
-        ctx.globalAlpha = alpha;
-        ctx.fill();
+    frameImageData.data.set(bgImageData.data);
+    const { data } = frameImageData;
+    const sineOffset = currentTrailStyle === "gradient-animated" ? 0.15 * Math.sin(animTime / ANIM_PERIOD * 2 * Math.PI) : 0;
+    const n = cols * rows;
+    for (let dotIdx = 0; dotIdx < n; dotIdx++) {
+      const intensity = grid[dotIdx];
+      if (intensity <= 0) {
+        continue;
+      }
+      let r, g, b;
+      if (gradientRgb !== null) {
+        const t = Math.max(0, Math.min(1, intensity + sineOffset));
+        ({ r, g, b } = sampleGradientRgb(gradientRgb, t));
+      } else {
+        ({ r, g, b } = colorRgb);
+      }
+      const baseA = (0.08 + intensity * 0.92) * 255;
+      const start = pixelMaskStarts[dotIdx];
+      const len = pixelMaskLengths[dotIdx];
+      for (let k = 0; k < len; k++) {
+        const px = pixelMaskIndices[start + k];
+        const coverage = pixelMaskCoverages[start + k];
+        data[px] = r;
+        data[px + 1] = g;
+        data[px + 2] = b;
+        data[px + 3] = Math.round(baseA * coverage);
       }
     }
-    ctx.globalAlpha = 1;
+    ctx.putImageData(frameImageData, 0, 0);
   }
   function renderFrame(deltaTime) {
     if (engine.morphAlpha !== null) {
@@ -1605,7 +1657,9 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     animationId = requestAnimationFrame(loop);
   }
   calculateBoundaries(engine.getSarmalSkeleton());
-  buildBgCanvas();
+  computePixelMask();
+  frameImageData = new ImageData(W, H);
+  buildBgImageData();
   if (initialPhase !== void 0) {
     engine.seek(initialPhase);
   }
@@ -1691,7 +1745,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
         }
       }
       if (needsRebuildBg) {
-        buildBgCanvas();
+        buildBgImageData();
       }
       if (currentTrailStyle !== "default" && gradientRgb === null) {
         console.warn(