@sarmal/core 0.4.2 → 0.6.0

package/dist/index.cjs

@@ -44,27 +44,57 @@ var CircularBuffer = class {
     return this.count;
   }
 };
-function createEngine(curveDef, trailLength = 120) {
-  const curve = {
+function resolveCurve(curveDef) {
+  return {
     name: curveDef.name,
     fn: curveDef.fn,
     period: curveDef.period ?? TWO_PI,
     speed: curveDef.speed ?? 1,
+    skeleton: curveDef.skeleton,
+    skeletonFn: curveDef.skeletonFn,
   };
+}
+function createEngine(curveDef, trailLength = 120) {
+  let curve = resolveCurve(curveDef);
   const trail = new CircularBuffer(trailLength);
   let t = 0;
   let actualTime = 0;
+  let morphCurveB = null;
+  let _morphAlpha = null;
+  let _morphStrategy = "normalized";
+  function sampleSkeleton(c, sampleT) {
+    if (c.skeletonFn) {
+      return c.skeletonFn(sampleT);
+    }
+    if (c.skeleton === "live") {
+      return c.fn(sampleT, actualTime, {});
+    }
+    return c.fn(sampleT, 0, {});
+  }
   return {
     tick(deltaTime) {
       t = (t + curve.speed * deltaTime) % curve.period;
       actualTime += deltaTime;
-      const point = curve.fn(t, actualTime, {});
-      trail.push(point.x, point.y);
+      if (morphCurveB !== null && _morphAlpha !== null) {
+        const a = curve.fn(t, actualTime, {});
+        const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
+        const b = morphCurveB.fn(tB, actualTime, {});
+        trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
+      } else {
+        const point = curve.fn(t, actualTime, {});
+        trail.push(point.x, point.y);
+      }
       return trail.toArray();
     },
     get trailCount() {
       return trail.length;
     },
+    get isLiveSkeleton() {
+      return curve.skeleton === "live";
+    },
+    get morphAlpha() {
+      return _morphAlpha;
+    },
     reset() {
       t = 0;
       actualTime = 0;
@@ -93,13 +123,65 @@ function createEngine(curveDef, trailLength = 120) {
         trail.push(point.x, point.y);
       }
     },
+    startMorph(target, strategy = "normalized") {
+      const resolvedTarget = resolveCurve(target);
+      if (morphCurveB !== null && _morphAlpha !== null) {
+        const frozenAlpha = _morphAlpha;
+        const frozenA = curve;
+        const frozenB = morphCurveB;
+        const frozenStrategy = _morphStrategy;
+        curve = {
+          ...frozenB,
+          fn: (sampleT, time, params) => {
+            const a = frozenA.fn(sampleT, time, params);
+            const tB =
+              frozenStrategy === "normalized"
+                ? (sampleT / frozenA.period) * frozenB.period
+                : sampleT;
+            const b = frozenB.fn(tB, time, params);
+            return {
+              x: a.x + (b.x - a.x) * frozenAlpha,
+              y: a.y + (b.y - a.y) * frozenAlpha,
+            };
+          },
+        };
+      }
+      _morphStrategy = strategy;
+      morphCurveB = resolvedTarget;
+      _morphAlpha = 0;
+    },
+    setMorphAlpha(alpha) {
+      _morphAlpha = alpha;
+    },
+    completeMorph() {
+      if (morphCurveB !== null) {
+        curve = morphCurveB;
+      }
+      morphCurveB = null;
+      _morphAlpha = null;
+    },
     getSarmalSkeleton() {
       const steps = Math.ceil(curve.period * POINTS_PER_PERIOD_UNIT);
       const points = new Array(steps);
+      if (morphCurveB !== null && _morphAlpha !== null) {
+        for (let i = 0; i < steps; i++) {
+          const sampleT = (i / (steps - 1)) * curve.period;
+          const a = sampleSkeleton(curve, sampleT);
+          const tB =
+            _morphStrategy === "normalized"
+              ? (sampleT / curve.period) * morphCurveB.period
+              : sampleT;
+          const b = sampleSkeleton(morphCurveB, tB);
+          points[i] = {
+            x: a.x + (b.x - a.x) * _morphAlpha,
+            y: a.y + (b.y - a.y) * _morphAlpha,
+          };
+        }
+        return points;
+      }
       for (let i = 0; i < steps; i++) {
         const sampleT = (i / (steps - 1)) * curve.period;
-        const point = curve.fn(sampleT, 0, {});
-        points[i] = point;
+        points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
     },
@@ -107,6 +189,7 @@ function createEngine(curveDef, trailLength = 120) {
 }
 
 // src/renderer.ts
+var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_HEAD_RADIUS = 4;
 var DEFAULT_GLOW_SIZE = 20;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
@@ -149,6 +232,12 @@ function createRenderer(options) {
   let offsetY = 0;
   let animationId = null;
   let lastTime = 0;
+  let morphResolve = null;
+  let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
+  let morphTarget = null;
+  let morphAlpha = 0;
+  let skeletonCanvasA = null;
+  let skeletonCanvasB = null;
   function calculateBoundaries() {
     if (skeleton.length === 0) {
       return;
@@ -200,10 +289,38 @@ function createRenderer(options) {
     skeletonCtx.stroke();
   }
   function drawSkeleton() {
-    if (!skeletonCanvas || opts.skeletonColor === "transparent") {
+    if (opts.skeletonColor === "transparent") {
+      return;
+    }
+    if (engine.morphAlpha !== null) {
+      if (skeletonCanvasA) {
+        ctx.globalAlpha = (1 - morphAlpha) * DEFAULT_SKELETON_OPACITY;
+        ctx.drawImage(skeletonCanvasA, 0, 0);
+      }
+      if (skeletonCanvasB) {
+        ctx.globalAlpha = morphAlpha * DEFAULT_SKELETON_OPACITY;
+        ctx.drawImage(skeletonCanvasB, 0, 0);
+      }
+      ctx.globalAlpha = 1;
       return;
     }
-    ctx.drawImage(skeletonCanvas, 0, 0);
+    if (engine.isLiveSkeleton) {
+      if (skeleton.length < 2) {
+        return;
+      }
+      ctx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      const first = skeleton[0];
+      ctx.moveTo(first.x * scale + offsetX, first.y * scale + offsetY);
+      for (let i = 1; i < skeleton.length; i++) {
+        const p = skeleton[i];
+        ctx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
+      }
+      ctx.stroke();
+    } else if (skeletonCanvas) {
+      ctx.drawImage(skeletonCanvas, 0, 0);
+    }
   }
   function drawTrail() {
     if (trailCount < 2) {
@@ -253,10 +370,29 @@ function createRenderer(options) {
     const now = performance.now();
     const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
+    if (engine.morphAlpha !== null) {
+      morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
+      engine.setMorphAlpha(morphAlpha);
+      skeleton = engine.getSarmalSkeleton();
+      calculateBoundaries();
+      if (morphAlpha >= 1) {
+        engine.completeMorph();
+        morphResolve?.();
+        morphResolve = null;
+        morphTarget = null;
+        morphAlpha = 0;
+        skeletonCanvasA = null;
+        skeletonCanvasB = null;
+      }
+    }
     trail = engine.tick(deltaTime);
     trailCount = engine.trailCount;
     head = trailCount > 0 ? trail[trailCount - 1] : null;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (engine.isLiveSkeleton || engine.morphAlpha !== null) {
+      skeleton = engine.getSarmalSkeleton();
+      calculateBoundaries();
+    }
     drawSkeleton();
     drawTrail();
     drawHead();
@@ -264,7 +400,9 @@ function createRenderer(options) {
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
-  buildSkeletonCanvas();
+  if (!engine.isLiveSkeleton) {
+    buildSkeletonCanvas();
+  }
   return {
     start() {
       if (animationId !== null) {
@@ -297,10 +435,60 @@ function createRenderer(options) {
     seekWithTrail(t) {
       engine.seekWithTrail(t);
     },
+    morphTo(target, options2) {
+      if (morphResolve !== null) {
+        engine.completeMorph();
+        morphResolve();
+        morphResolve = null;
+        morphAlpha = 0;
+        skeletonCanvasA = null;
+        skeletonCanvasB = null;
+      }
+      morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS;
+      morphTarget = target;
+      morphAlpha = 0;
+      const currentSkeleton = engine.getSarmalSkeleton();
+      if (currentSkeleton.length >= 2) {
+        skeletonCanvasA = new OffscreenCanvas(canvas.width, canvas.height);
+        const ctxA = skeletonCanvasA.getContext("2d");
+        ctxA.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+        ctxA.lineWidth = 1.5;
+        ctxA.beginPath();
+        const first = currentSkeleton[0];
+        ctxA.moveTo(first.x * scale + offsetX, first.y * scale + offsetY);
+        for (let i = 1; i < currentSkeleton.length; i++) {
+          const p = currentSkeleton[i];
+          ctxA.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
+        }
+        ctxA.stroke();
+      }
+      engine.startMorph(target, options2?.morphStrategy);
+      if (morphTarget && !engine.isLiveSkeleton) {
+        skeletonCanvasB = new OffscreenCanvas(canvas.width, canvas.height);
+        const skeletonCtx = skeletonCanvasB.getContext("2d");
+        skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+        skeletonCtx.lineWidth = 1.5;
+        skeletonCtx.beginPath();
+        const period = morphTarget.period ?? Math.PI * 2;
+        const samples = Math.max(50, Math.round(period * 20));
+        const firstB = morphTarget.fn(0, 0, {});
+        skeletonCtx.moveTo(firstB.x * scale + offsetX, firstB.y * scale + offsetY);
+        for (let i = 1; i <= samples; i++) {
+          const t = (i / samples) * period;
+          const p = morphTarget.fn(t, 0, {});
+          skeletonCtx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
+        }
+        skeletonCtx.stroke();
+      }
+      return new Promise((resolve) => {
+        morphResolve = resolve;
+      });
+    },
   };
 }
 
 // src/renderer-svg.ts
+var DEFAULT_MORPH_DURATION_MS2 = 300;
 var TRAIL_BATCH_COUNT = 12;
 var TRAIL_FADE_CURVE2 = 1.5;
 var TRAIL_MAX_OPACITY2 = 0.88;
@@ -365,6 +553,20 @@ function createSVGRenderer(options) {
   skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY2));
   skeletonPath.setAttribute("stroke-width", "1.5");
   svg.appendChild(skeletonPath);
+  const skeletonPathA = el("path");
+  skeletonPathA.setAttribute("fill", "none");
+  skeletonPathA.setAttribute("stroke", opts.skeletonColor);
+  skeletonPathA.setAttribute("stroke-width", "1.5");
+  skeletonPathA.setAttribute("visibility", "hidden");
+  svg.appendChild(skeletonPathA);
+  const skeletonPathB = el("path");
+  skeletonPathB.setAttribute("fill", "none");
+  skeletonPathB.setAttribute("stroke", opts.skeletonColor);
+  skeletonPathB.setAttribute("stroke-width", "1.5");
+  skeletonPathB.setAttribute("visibility", "hidden");
+  svg.appendChild(skeletonPathB);
+  let morphPathABuilt = "";
+  let morphPathBBuilt = "";
   const trailPaths = [];
   for (let i = 0; i < TRAIL_BATCH_COUNT; i++) {
     const path = el("path");
@@ -424,16 +626,23 @@ function createSVGRenderer(options) {
   function py(p) {
     return (p.y * scale + offsetY).toFixed(2);
   }
-  const skeleton = engine.getSarmalSkeleton();
-  calculateBoundaries(skeleton);
-  if (skeleton.length >= 2) {
-    let d = `M${px(skeleton[0])} ${py(skeleton[0])}`;
-    for (let i = 1; i < skeleton.length; i++) {
-      d += ` L${px(skeleton[i])} ${py(skeleton[i])}`;
+  function updateSkeleton(skeleton2) {
+    if (skeleton2.length < 2) {
+      skeletonPath.setAttribute("d", "");
+      return;
+    }
+    let d = `M${px(skeleton2[0])} ${py(skeleton2[0])}`;
+    for (let i = 1; i < skeleton2.length; i++) {
+      d += ` L${px(skeleton2[i])} ${py(skeleton2[i])}`;
     }
     d += " Z";
     skeletonPath.setAttribute("d", d);
   }
+  const skeleton = engine.getSarmalSkeleton();
+  calculateBoundaries(skeleton);
+  if (!engine.isLiveSkeleton) {
+    updateSkeleton(skeleton);
+  }
   function updateTrail(trail, trailCount) {
     if (trailCount < 2) {
       for (const p of trailPaths) {
@@ -477,12 +686,78 @@ function createSVGRenderer(options) {
   let lastTime = 0;
   const prefersReducedMotion =
     typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let morphResolve = null;
+  let morphDurationMs = DEFAULT_MORPH_DURATION_MS2;
+  let morphTarget = null;
+  let morphAlpha = 0;
+  function buildSkeletonPath(target, scale2, offsetX2, offsetY2) {
+    const period = target.period ?? Math.PI * 2;
+    const samples = Math.max(50, Math.round(period * 20));
+    const points = [];
+    for (let i = 0; i <= samples; i++) {
+      const t = (i / samples) * period;
+      const p = target.fn(t, 0, {});
+      points.push(p);
+    }
+    if (points.length < 2) {
+      return "";
+    }
+    const px2 = (p) => (p.x * scale2 + offsetX2).toFixed(2);
+    const py2 = (p) => (p.y * scale2 + offsetY2).toFixed(2);
+    let d = `M${px2(points[0])} ${py2(points[0])}`;
+    for (let i = 1; i < points.length; i++) {
+      d += ` L${px2(points[i])} ${py2(points[i])}`;
+    }
+    d += " Z";
+    return d;
+  }
   function renderFrame() {
     const now = performance.now();
     const dt = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
+    if (engine.morphAlpha !== null) {
+      morphAlpha = Math.min(1, morphAlpha + dt / (morphDurationMs / 1e3));
+      engine.setMorphAlpha(morphAlpha);
+      const morphSkeleton = engine.getSarmalSkeleton();
+      calculateBoundaries(morphSkeleton);
+      if (!engine.isLiveSkeleton) {
+        updateSkeleton(morphSkeleton);
+      }
+      if (morphPathABuilt) {
+        skeletonPathA.setAttribute("d", morphPathABuilt);
+        skeletonPathA.setAttribute("visibility", "visible");
+        skeletonPathA.setAttribute(
+          "stroke-opacity",
+          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2),
+        );
+      }
+      if (morphPathBBuilt) {
+        skeletonPathB.setAttribute("d", morphPathBBuilt);
+        skeletonPathB.setAttribute("visibility", "visible");
+        skeletonPathB.setAttribute(
+          "stroke-opacity",
+          String(morphAlpha * DEFAULT_SKELETON_OPACITY2),
+        );
+      }
+      if (morphAlpha >= 1) {
+        engine.completeMorph();
+        morphResolve?.();
+        morphResolve = null;
+        morphTarget = null;
+        morphAlpha = 0;
+        morphPathABuilt = "";
+        morphPathBBuilt = "";
+        skeletonPathA.setAttribute("visibility", "hidden");
+        skeletonPathB.setAttribute("visibility", "hidden");
+      }
+    }
     const trail = engine.tick(dt);
     const trailCount = engine.trailCount;
+    if (engine.isLiveSkeleton) {
+      const liveSkeleton = engine.getSarmalSkeleton();
+      calculateBoundaries(liveSkeleton);
+      updateSkeleton(liveSkeleton);
+    }
     updateTrail(trail, trailCount);
     updateHead(trail, trailCount);
     if (!prefersReducedMotion) {
@@ -520,6 +795,38 @@ function createSVGRenderer(options) {
     seekWithTrail(t) {
       engine.seekWithTrail(t);
     },
+    morphTo(target, options2) {
+      if (morphResolve !== null) {
+        engine.completeMorph();
+        morphResolve();
+        morphResolve = null;
+        morphAlpha = 0;
+        skeletonPathA.setAttribute("visibility", "hidden");
+        skeletonPathB.setAttribute("visibility", "hidden");
+      }
+      morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS2;
+      morphTarget = target;
+      morphAlpha = 0;
+      const currentSkeleton = engine.getSarmalSkeleton();
+      if (currentSkeleton.length >= 2) {
+        const px2 = (p) => (p.x * scale + offsetX).toFixed(2);
+        const py2 = (p) => (p.y * scale + offsetY).toFixed(2);
+        morphPathABuilt = `M${px2(currentSkeleton[0])} ${py2(currentSkeleton[0])}`;
+        for (let i = 1; i < currentSkeleton.length; i++) {
+          morphPathABuilt += ` L${px2(currentSkeleton[i])} ${py2(currentSkeleton[i])}`;
+        }
+        morphPathABuilt += " Z";
+      } else {
+        morphPathABuilt = "";
+      }
+      engine.startMorph(target, options2?.morphStrategy);
+      if (morphTarget) {
+        morphPathBBuilt = buildSkeletonPath(morphTarget, scale, offsetX, offsetY);
+      }
+      return new Promise((resolve) => {
+        morphResolve = resolve;
+      });
+    },
   };
 }
 function createSarmalSVG(container, curveDef, options) {
@@ -549,6 +856,13 @@ function epitrochoid7(t, _time, _params) {
     y: 7 * Math.sin(t) - d * Math.sin(7 * t),
   };
 }
+function epitrochoid7Skeleton(t) {
+  const d = 1.275;
+  return {
+    x: 7 * Math.cos(t) - d * Math.cos(7 * t),
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+  };
+}
 function astroid(t, _time, _params) {
   const c = Math.cos(t);
   const s = Math.sin(t);
@@ -618,6 +932,7 @@ var curves = {
     fn: epitrochoid7,
     period: TWO_PI2,
     speed: 1.4,
+    skeletonFn: epitrochoid7Skeleton,
   },
   astroid: {
     name: "Astroid",
@@ -648,12 +963,14 @@ var curves = {
     fn: lissajous32,
     period: TWO_PI2,
     speed: 2,
+    skeleton: "live",
   },
   lissajous43: {
     name: "Lissajous 4:3",
     fn: lissajous43,
     period: TWO_PI2,
     speed: 1.8,
+    skeleton: "live",
   },
   epicycloid3: {
     name: "Epicycloid (n=3)",
@@ -666,6 +983,7 @@ var curves = {
     fn: lame,
     period: TWO_PI2,
     speed: 1,
+    skeleton: "live",
   },
 };