@sarmal/core 0.35.0 → 0.35.1

package/README.md

@@ -4,9 +4,11 @@
   <strong>Parametric curve animations for loading/thinking indicators</strong>
 </p>
 
-<p align="center">
-  <a href="https://sarmal.art" target="_blank">Live Demo at sarmal.art</a>
-</p>
+<div align="center">
+  <a href="https://sarmal.art">
+    <img src="../../docs/public/curves-light.gif" alt="Sarmal demo" width="100%" max-width="720">
+  </a>
+</div>
 
 ---
 

package/dist/index.cjs

@@ -1441,14 +1441,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   const cellW = W / cols;
   const cellH = H / rows;
   const dotR = Math.min(cellW, cellH) * 0.36;
-  let gradientRgb;
-  if (Array.isArray(initialColor)) {
-    validateBaseRenderOptions({ trailColor: initialColor });
-    gradientRgb = initialColor.map(colorToRgb);
-  } else {
-    gradientRgb = null;
-  }
-  let colorRgb = gradientRgb ? gradientRgb[0] : colorToRgb(initialColor);
+  let gradientOklab = null;
+  let colorRgb = { r: 255, g: 255, b: 255 };
   let currentTrailStyle = initialTrailStyle;
   let animTime = 0;
   const ANIM_PERIOD = 6;
@@ -1520,7 +1514,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
   }
   function buildBgImageData() {
     bgImageData = new ImageData(W, H);
-    const bg = gradientRgb ? gradientRgb[0] : colorRgb;
+    const bg = colorRgb;
     const baseAlpha = 0.05 * 255;
     const { data } = bgImageData;
     const n = cols * rows;
@@ -1537,18 +1531,14 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
       }
     }
   }
-  function sampleGradientRgb(stops, t) {
-    const n = stops.length;
-    const scaled = Math.max(0, Math.min(1, t)) * (n - 1);
-    const i = Math.min(Math.floor(scaled), n - 2);
-    const a = stops[i];
-    const bStop = stops[i + 1];
-    const mix = scaled - i;
-    return {
-      r: Math.round(a.r + (bStop.r - a.r) * mix),
-      g: Math.round(a.g + (bStop.g - a.g) * mix),
-      b: Math.round(a.b + (bStop.b - a.b) * mix)
-    };
+  function applyColor(color) {
+    if (Array.isArray(color)) {
+      gradientOklab = color.map((c) => parseColorToOklab(c));
+      colorRgb = oklabToRgb(gradientOklab[0]);
+    } else {
+      gradientOklab = null;
+      colorRgb = colorToRgb(color);
+    }
   }
   function calculateBoundaries(skel) {
     const b = computeBoundaries(skel, W, H);
@@ -1602,7 +1592,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     }
     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 timeOffset = currentTrailStyle === "gradient-animated" ? animTime / ANIM_PERIOD : 0;
     const n = cols * rows;
     for (let dotIdx = 0; dotIdx < n; dotIdx++) {
       const intensity = grid[dotIdx];
@@ -1610,9 +1600,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
         continue;
       }
       let r, g, b;
-      if (gradientRgb !== null) {
-        const t = Math.max(0, Math.min(1, intensity + sineOffset));
-        ({ r, g, b } = sampleGradientRgb(gradientRgb, t));
+      if (gradientOklab !== null) {
+        ({ r, g, b } = oklabToRgb(getPaletteColor(gradientOklab, intensity, timeOffset)));
       } else {
         ({ r, g, b } = colorRgb);
       }
@@ -1630,17 +1619,20 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     }
     ctx.putImageData(frameImageData, 0, 0);
   }
+  function completeMorphNow() {
+    engine.completeMorph();
+    morphResolve?.();
+    morphResolve = null;
+    morphReject = null;
+    morphProgress = 0;
+  }
   function renderFrame(deltaTime) {
     if (engine.morphAlpha !== null) {
       morphProgress = Math.min(1, morphProgress + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphProgress);
       calculateBoundaries(engine.getSarmalSkeleton());
       if (morphProgress >= 1) {
-        engine.completeMorph();
-        morphResolve?.();
-        morphResolve = null;
-        morphReject = null;
-        morphProgress = 0;
+        completeMorphNow();
         calculateBoundaries(engine.getSarmalSkeleton());
       }
     } else if (engine.isLiveSkeleton) {
@@ -1658,6 +1650,8 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
     renderFrame(deltaTime);
     animationId = requestAnimationFrame(loop);
   }
+  validateBaseRenderOptions({ trailColor: initialColor });
+  applyColor(initialColor);
   calculateBoundaries(engine.getSarmalSkeleton());
   computePixelMask();
   frameImageData = new ImageData(W, H);
@@ -1706,11 +1700,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
      */
     morphTo(target, opts) {
       if (morphResolve !== null) {
-        engine.completeMorph();
-        morphResolve();
-        morphResolve = null;
-        morphReject = null;
-        morphProgress = 0;
+        completeMorphNow();
       }
       morphDurationMs = opts?.duration ?? DEFAULT_MORPH_DURATION_MS;
       morphProgress = 0;
@@ -1731,13 +1721,7 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
       validateBaseRenderOptions(partial);
       let needsRebuildBg = false;
       if (partial.trailColor !== void 0) {
-        if (Array.isArray(partial.trailColor)) {
-          gradientRgb = partial.trailColor.map(colorToRgb);
-          colorRgb = gradientRgb[0];
-        } else {
-          gradientRgb = null;
-          colorRgb = colorToRgb(partial.trailColor);
-        }
+        applyColor(partial.trailColor);
         needsRebuildBg = true;
       }
       if (partial.trailStyle !== void 0) {
@@ -1749,9 +1733,13 @@ function createSarmalDotMatrix(canvas, curveDef, options) {
       if (needsRebuildBg) {
         buildBgImageData();
       }
-      if (currentTrailStyle !== "default" && gradientRgb === null) {
+      if (currentTrailStyle !== "default" && gradientOklab === null) {
+        console.warn(
+          `[sarmal] dot matrix: trailColor is a single color but trailStyle is "${currentTrailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`
+        );
+      } else if (currentTrailStyle === "default" && gradientOklab !== null) {
         console.warn(
-          "[sarmal] dot matrix: gradient trailStyle has no effect without a trailColor array"
+          '[sarmal] dot matrix: trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
         );
       }
     }