@sarmal/core 0.5.0 → 0.6.0

package/dist/auto-init.js

@@ -42,24 +42,46 @@ 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
+    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() {
@@ -68,20 +90,23 @@ function createEngine(curveDef, trailLength = 120) {
     get isLiveSkeleton() {
       return curve.skeleton === "live";
     },
+    get morphAlpha() {
+      return _morphAlpha;
+    },
     reset() {
       t = 0;
       actualTime = 0;
       trail.clear();
     },
     seek(newT, { clearTrail = false } = {}) {
-      t = (newT % curve.period + curve.period) % curve.period;
+      t = ((newT % curve.period) + curve.period) % curve.period;
       if (clearTrail) {
         trail.clear();
       }
     },
     seekWithTrail(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
       const advance = curve.speed * step;
-      const target = (targetT % curve.period + curve.period) % curve.period;
+      const target = ((targetT % curve.period) + curve.period) % curve.period;
       const targetTime = target / curve.speed;
       t = target;
       actualTime = targetTime;
@@ -96,31 +121,73 @@ 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 (curve.skeletonFn) {
-        for (let i = 0; i < steps; i++) {
-          const sampleT = i / (steps - 1) * curve.period;
-          points[i] = curve.skeletonFn(sampleT);
-        }
-      } else if (curve.skeleton === "live") {
+      if (morphCurveB !== null && _morphAlpha !== null) {
         for (let i = 0; i < steps; i++) {
-          const sampleT = i / (steps - 1) * curve.period;
-          points[i] = curve.fn(sampleT, actualTime, {});
-        }
-      } else {
-        for (let i = 0; i < steps; i++) {
-          const sampleT = i / (steps - 1) * curve.period;
-          points[i] = curve.fn(sampleT, 0, {});
+          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;
+        points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
-    }
+    },
   };
 }
 
 // src/renderer.ts
+var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_HEAD_RADIUS = 4;
 var DEFAULT_GLOW_SIZE = 20;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
@@ -135,7 +202,7 @@ var GLOW_INNER_EDGE = 0.4;
 var GLOW_FALLOFF_OPACITY = 0.53;
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return `${n >> 16},${n >> 8 & 255},${n & 255}`;
+  return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
 }
 function createRenderer(options) {
   const canvas = options.canvas;
@@ -149,7 +216,7 @@ function createRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
-    glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE
+    glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE,
   };
   const trailRgb = hexToRgbComponents(opts.trailColor);
   const headRgbFalloff = `rgba(${hexToRgbComponents(opts.headColor)},${GLOW_FALLOFF_OPACITY})`;
@@ -163,12 +230,21 @@ 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;
     }
     const first = skeleton[0];
-    let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
+    let minX = first.x,
+      maxX = first.x,
+      minY = first.y,
+      maxY = first.y;
     for (const p of skeleton) {
       if (p.x < minX) {
         minX = p.x;
@@ -214,6 +290,18 @@ function createRenderer(options) {
     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;
+    }
     if (engine.isLiveSkeleton) {
       if (skeleton.length < 2) {
         return;
@@ -280,11 +368,26 @@ 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) {
+    if (engine.isLiveSkeleton || engine.morphAlpha !== null) {
       skeleton = engine.getSarmalSkeleton();
       calculateBoundaries();
     }
@@ -329,33 +432,85 @@ 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/curves.ts
 var TWO_PI2 = Math.PI * 2;
 function artemis2(t, _time, _params) {
-  const a = 0.35, b = 0.15, ox = 0.175;
-  const s = Math.sin(t), c = Math.cos(t);
+  const a = 0.35,
+    b = 0.15,
+    ox = 0.175;
+  const s = Math.sin(t),
+    c = Math.cos(t);
   const denom = 1 + s * s;
   return {
-    x: c * (1 + a * c) / denom - ox,
-    y: s * c * (1 + b * c) / denom
+    x: (c * (1 + a * c)) / denom - ox,
+    y: (s * c * (1 + b * c)) / denom,
   };
 }
 function epitrochoid7(t, _time, _params) {
   const d = 1 + 0.55 * Math.sin(t * 0.5);
   return {
     x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t)
+    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)
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
   };
 }
 function astroid(t, _time, _params) {
@@ -363,55 +518,56 @@ function astroid(t, _time, _params) {
   const s = Math.sin(t);
   return {
     x: c * c * c,
-    y: s * s * s
+    y: s * s * s,
   };
 }
 function deltoid(t, _time, _params) {
   return {
     x: 2 * Math.cos(t) + Math.cos(2 * t),
-    y: 2 * Math.sin(t) - Math.sin(2 * t)
+    y: 2 * Math.sin(t) - Math.sin(2 * t),
   };
 }
 function rose5(t, _time, _params) {
   const r = Math.cos(5 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t)
+    y: r * Math.sin(t),
   };
 }
 function rose3(t, _time, _params) {
   const r = Math.cos(3 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t)
+    y: r * Math.sin(t),
   };
 }
 function lissajous32(t, time, _params) {
   const phi = time * 0.45;
   return {
     x: Math.sin(3 * t + phi),
-    y: Math.sin(2 * t)
+    y: Math.sin(2 * t),
   };
 }
 function lissajous43(t, time, _params) {
   const phi = time * 0.38;
   return {
     x: Math.sin(4 * t + phi),
-    y: Math.sin(3 * t)
+    y: Math.sin(3 * t),
   };
 }
 function epicycloid3(t, _time, _params) {
   return {
     x: 4 * Math.cos(t) - Math.cos(4 * t),
-    y: 4 * Math.sin(t) - Math.sin(4 * t)
+    y: 4 * Math.sin(t) - Math.sin(4 * t),
   };
 }
 function lame(t, time, _params) {
   const p = 1.75 + 1.25 * Math.sin(time * 0.48);
-  const c = Math.cos(t), s = Math.sin(t);
+  const c = Math.cos(t),
+    s = Math.sin(t);
   return {
     x: Math.sign(c) * Math.pow(Math.abs(c), p),
-    y: Math.sign(s) * Math.pow(Math.abs(s), p)
+    y: Math.sign(s) * Math.pow(Math.abs(s), p),
   };
 }
 var curves = {
@@ -419,66 +575,66 @@ var curves = {
     name: "Artemis II",
     fn: artemis2,
     period: TWO_PI2,
-    speed: 0.7
+    speed: 0.7,
   },
   epitrochoid7: {
     name: "Epitrochoid",
     fn: epitrochoid7,
     period: TWO_PI2,
     speed: 1.4,
-    skeletonFn: epitrochoid7Skeleton
+    skeletonFn: epitrochoid7Skeleton,
   },
   astroid: {
     name: "Astroid",
     fn: astroid,
     period: TWO_PI2,
-    speed: 1.1
+    speed: 1.1,
   },
   deltoid: {
     name: "Deltoid",
     fn: deltoid,
     period: TWO_PI2,
-    speed: 0.9
+    speed: 0.9,
   },
   rose5: {
     name: "Rose (n=5)",
     fn: rose5,
     period: TWO_PI2,
-    speed: 1
+    speed: 1,
   },
   rose3: {
     name: "Rose (n=3)",
     fn: rose3,
     period: TWO_PI2,
-    speed: 1.15
+    speed: 1.15,
   },
   lissajous32: {
     name: "Lissajous 3:2",
     fn: lissajous32,
     period: TWO_PI2,
     speed: 2,
-    skeleton: "live"
+    skeleton: "live",
   },
   lissajous43: {
     name: "Lissajous 4:3",
     fn: lissajous43,
     period: TWO_PI2,
     speed: 1.8,
-    skeleton: "live"
+    skeleton: "live",
   },
   epicycloid3: {
     name: "Epicycloid (n=3)",
     fn: epicycloid3,
     period: TWO_PI2,
-    speed: 0.75
+    speed: 0.75,
   },
   lame: {
     name: "Lam\xE9 Curve",
     fn: lame,
     period: TWO_PI2,
     speed: 1,
-    skeleton: "live"
-  }
+    skeleton: "live",
+  },
 };
 
 // src/index.ts
@@ -501,12 +657,12 @@ function init() {
       return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
     }
     const sarmal = createSarmal(canvas, curveDef, {
-      ...canvas.dataset.trailColor && { trailColor: canvas.dataset.trailColor },
-      ...canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor },
-      ...canvas.dataset.headColor && { headColor: canvas.dataset.headColor },
-      ...canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) },
-      ...canvas.dataset.glowSize && { glowSize: parseInt(canvas.dataset.glowSize, 10) },
-      ...canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) }
+      ...(canvas.dataset.trailColor && { trailColor: canvas.dataset.trailColor }),
+      ...(canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor }),
+      ...(canvas.dataset.headColor && { headColor: canvas.dataset.headColor }),
+      ...(canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) }),
+      ...(canvas.dataset.glowSize && { glowSize: parseInt(canvas.dataset.glowSize, 10) }),
+      ...(canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) }),
     });
     sarmal.start();
   });
@@ -517,4 +673,4 @@ if (document.readyState === "loading") {
   init();
 }
 //# sourceMappingURL=auto-init.js.map
-//# sourceMappingURL=auto-init.js.map
+//# sourceMappingURL=auto-init.js.map