@sarmal/core 0.4.2 → 0.5.0

package/dist/index.js

@@ -48,6 +48,8 @@ function createEngine(curveDef, trailLength = 120) {
     fn: curveDef.fn,
     period: curveDef.period ?? TWO_PI,
     speed: curveDef.speed ?? 1,
+    skeleton: curveDef.skeleton,
+    skeletonFn: curveDef.skeletonFn
   };
   const trail = new CircularBuffer(trailLength);
   let t = 0;
@@ -63,20 +65,23 @@ function createEngine(curveDef, trailLength = 120) {
     get trailCount() {
       return trail.length;
     },
+    get isLiveSkeleton() {
+      return curve.skeleton === "live";
+    },
     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;
@@ -94,13 +99,24 @@ function createEngine(curveDef, trailLength = 120) {
     getSarmalSkeleton() {
       const steps = Math.ceil(curve.period * POINTS_PER_PERIOD_UNIT);
       const points = new Array(steps);
-      for (let i = 0; i < steps; i++) {
-        const sampleT = (i / (steps - 1)) * curve.period;
-        const point = curve.fn(sampleT, 0, {});
-        points[i] = point;
+      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") {
+        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, {});
+        }
       }
       return points;
-    },
+    }
   };
 }
 
@@ -119,7 +135,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;
@@ -133,7 +149,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})`;
@@ -152,10 +168,7 @@ function createRenderer(options) {
       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;
@@ -198,10 +211,26 @@ function createRenderer(options) {
     skeletonCtx.stroke();
   }
   function drawSkeleton() {
-    if (!skeletonCanvas || opts.skeletonColor === "transparent") {
+    if (opts.skeletonColor === "transparent") {
       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) {
@@ -255,6 +284,10 @@ function createRenderer(options) {
     trailCount = engine.trailCount;
     head = trailCount > 0 ? trail[trailCount - 1] : null;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (engine.isLiveSkeleton) {
+      skeleton = engine.getSarmalSkeleton();
+      calculateBoundaries();
+    }
     drawSkeleton();
     drawTrail();
     drawHead();
@@ -262,7 +295,9 @@ function createRenderer(options) {
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
-  buildSkeletonCanvas();
+  if (!engine.isLiveSkeleton) {
+    buildSkeletonCanvas();
+  }
   return {
     start() {
       if (animationId !== null) {
@@ -294,7 +329,7 @@ function createRenderer(options) {
     },
     seekWithTrail(t) {
       engine.seekWithTrail(t);
-    },
+    }
   };
 }
 
@@ -320,7 +355,7 @@ function createSVGRenderer(options) {
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? 4,
     glowSize: options.glowSize ?? 20,
-    ariaLabel: options.ariaLabel ?? "Loading",
+    ariaLabel: options.ariaLabel ?? "Loading"
   };
   const uid = ++instanceCount;
   const gradientId = `sarmal-glow-${uid}`;
@@ -390,10 +425,7 @@ function createSVGRenderer(options) {
       return;
     }
     const first = skeleton2[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 skeleton2) {
       if (p.x < minX) {
         minX = p.x;
@@ -422,16 +454,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) {
@@ -473,14 +512,18 @@ function createSVGRenderer(options) {
   }
   let animationId = null;
   let lastTime = 0;
-  const prefersReducedMotion =
-    typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   function renderFrame() {
     const now = performance.now();
     const dt = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
     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) {
@@ -517,7 +560,7 @@ function createSVGRenderer(options) {
     },
     seekWithTrail(t) {
       engine.seekWithTrail(t);
-    },
+    }
   };
 }
 function createSarmalSVG(container, curveDef, options) {
@@ -529,22 +572,26 @@ function createSarmalSVG(container, curveDef, options) {
 // 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)
   };
 }
 function astroid(t, _time, _params) {
@@ -552,56 +599,55 @@ 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 = {
@@ -609,62 +655,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
   },
   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"
   },
   lissajous43: {
     name: "Lissajous 4:3",
     fn: lissajous43,
     period: TWO_PI2,
     speed: 1.8,
+    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"
+  }
 };
 
 // src/index.ts
@@ -676,4 +726,4 @@ function createSarmal(canvas, curveDef, options) {
 
 export { createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves };
 //# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map