@sarmal/core 0.2.1 → 0.4.0

package/dist/index.js

@@ -9,7 +9,7 @@ var CircularBuffer = class {
     this.data = Array.from({ length: capacity }, () => ({ x: 0, y: 0 }));
     this.result = Array.from({ length: capacity }, () => ({ x: 0, y: 0 }));
   }
-  /** Mutates the pre-allocated slot in-place — no allocation */
+  /** Mutates in-place */
   push(x, y) {
     const slot = this.data[this.head];
     slot.x = x;
@@ -20,9 +20,9 @@ var CircularBuffer = class {
     }
   }
   /**
-   * Copies ordered points into the pre-allocated result buffer and returns it.
-   * The same array reference is returned every call — result.length is always `capacity`.
-   * Read only indices 0..count-1; the rest are stale pre-allocated slots.
+   * Copies ordered points into the pre-allocated result buffer and returns it
+   * Note: The *same* array reference is returned every call,
+   *  so `result.length` is also always `capacity`
    */
   toArray() {
     const start = this.count < this.capacity ? 0 : this.head;
@@ -68,6 +68,30 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime = 0;
       trail.clear();
     },
+    seek(newT, { clearTrail = false } = {}) {
+      t = (newT % curve.period + curve.period) % curve.period;
+      if (clearTrail) {
+        trail.clear();
+      }
+    },
+    seekWithTrail(targetT, { wrap = false } = {}) {
+      const STEP = 1 / 60;
+      const advance = curve.speed * STEP;
+      const target = (targetT % curve.period + curve.period) % curve.period;
+      const targetTime = target / curve.speed;
+      t = target;
+      actualTime = targetTime;
+      trail.clear();
+      const pointsFromStart = Math.floor(target / advance) + 1;
+      const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
+      for (let step = count - 1; step >= 0; step--) {
+        const sampleT = target - step * advance;
+        const wrappedT = sampleT < 0 ? sampleT + curve.period : sampleT;
+        const time = targetTime - step * STEP;
+        const point = curve.fn(wrappedT, time, {});
+        trail.push(point.x, point.y);
+      }
+    },
     getSarmalSkeleton() {
       const steps = Math.ceil(curve.period * POINTS_PER_PERIOD_UNIT);
       const points = new Array(steps);
@@ -131,10 +155,18 @@ function createRenderer(options) {
     const first = skeleton[0];
     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;
-      if (p.x > maxX) maxX = p.x;
-      if (p.y < minY) minY = p.y;
-      if (p.y > maxY) maxY = p.y;
+      if (p.x < minX) {
+        minX = p.x;
+      }
+      if (p.x > maxX) {
+        maxX = p.x;
+      }
+      if (p.y < minY) {
+        minY = p.y;
+      }
+      if (p.y > maxY) {
+        maxY = p.y;
+      }
     }
     const width = maxX - minX;
     const height = maxY - minY;
@@ -151,38 +183,42 @@ function createRenderer(options) {
   function buildSkeletonCanvas() {
     if (skeleton.length < 2) return;
     skeletonCanvas = new OffscreenCanvas(canvas.width, canvas.height);
-    const sCtx = skeletonCanvas.getContext("2d");
-    sCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
-    sCtx.lineWidth = 1.5;
-    sCtx.beginPath();
+    const skeletonCtx = skeletonCanvas.getContext("2d");
+    skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+    skeletonCtx.lineWidth = 1.5;
+    skeletonCtx.beginPath();
     const first = skeleton[0];
-    sCtx.moveTo(first.x * scale + offsetX, first.y * scale + offsetY);
+    skeletonCtx.moveTo(first.x * scale + offsetX, first.y * scale + offsetY);
     for (let i = 1; i < skeleton.length; i++) {
       const p = skeleton[i];
-      sCtx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
+      skeletonCtx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
     }
-    sCtx.stroke();
+    skeletonCtx.stroke();
   }
   function drawSkeleton() {
-    if (!skeletonCanvas) return;
+    if (!skeletonCanvas) {
+      return;
+    }
     ctx.drawImage(skeletonCanvas, 0, 0);
   }
   function drawTrail() {
-    if (trailCount < 2) return;
+    if (trailCount < 2) {
+      return;
+    }
     ctx.lineJoin = "round";
     ctx.lineCap = "round";
-    for (let b = 0; b < trailCount - 1; b += TRAIL_BATCH_SIZE) {
-      const bEnd = Math.min(b + TRAIL_BATCH_SIZE, trailCount - 1);
-      const progress = (b + bEnd) / 2 / (trailCount - 1);
+    for (let batchIndex = 0; batchIndex < trailCount - 1; batchIndex += TRAIL_BATCH_SIZE) {
+      const bEnd = Math.min(batchIndex + TRAIL_BATCH_SIZE, trailCount - 1);
+      const progress = (batchIndex + bEnd) / 2 / (trailCount - 1);
       const alpha = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
       const lineWidth = TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
       ctx.beginPath();
-      for (let i = b; i <= bEnd; i++) {
-        const p = trail[i];
-        if (i === b) {
-          ctx.moveTo(p.x * scale + offsetX, p.y * scale + offsetY);
+      for (let i = batchIndex; i <= bEnd; i++) {
+        const point = trail[i];
+        if (i === batchIndex) {
+          ctx.moveTo(point.x * scale + offsetX, point.y * scale + offsetY);
         } else {
-          ctx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
+          ctx.lineTo(point.x * scale + offsetX, point.y * scale + offsetY);
         }
       }
       ctx.strokeStyle = `rgba(${trailRgb},${alpha})`;
@@ -191,7 +227,9 @@ function createRenderer(options) {
     }
   }
   function drawHead() {
-    if (!head) return;
+    if (!head) {
+      return;
+    }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
     const gradient = ctx.createRadialGradient(x, y, 0, x, y, opts.glowSize);
@@ -209,7 +247,7 @@ function createRenderer(options) {
   }
   function render() {
     const now = performance.now();
-    const deltaTime = (now - lastTime) / 1e3;
+    const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
     trail = engine.tick(deltaTime);
     trailCount = engine.trailCount;
@@ -225,12 +263,16 @@ function createRenderer(options) {
   buildSkeletonCanvas();
   return {
     start() {
-      if (animationId !== null) return;
+      if (animationId !== null) {
+        return;
+      }
       lastTime = performance.now();
       render();
     },
     stop() {
-      if (animationId === null) return;
+      if (animationId === null) {
+        return;
+      }
       cancelAnimationFrame(animationId);
       animationId = null;
     },
@@ -244,10 +286,240 @@ function createRenderer(options) {
         cancelAnimationFrame(animationId);
         animationId = null;
       }
+    },
+    seek(t, options2) {
+      engine.seek(t, options2);
+    },
+    seekWithTrail(t) {
+      engine.seekWithTrail(t);
     }
   };
 }
 
+// src/renderer-svg.ts
+var TRAIL_BATCH_COUNT = 12;
+var TRAIL_FADE_CURVE2 = 1.5;
+var TRAIL_MAX_OPACITY2 = 0.88;
+var TRAIL_MIN_WIDTH2 = 0.5;
+var TRAIL_MAX_WIDTH2 = 2.5;
+var DEFAULT_SKELETON_OPACITY2 = 0.15;
+var DEFAULT_GLOW_INNER_STOP = 0.4;
+var DEFAULT_GLOW_FALLOFF_OPACITY = 0.53;
+var FIT_PADDING2 = 0.1;
+var instanceCount = 0;
+function el(tag) {
+  return document.createElementNS("http://www.w3.org/2000/svg", tag);
+}
+function createSVGRenderer(options) {
+  const { container, engine } = options;
+  const opts = {
+    skeletonColor: options.skeletonColor ?? "#ffffff",
+    trailColor: options.trailColor ?? "#ffffff",
+    headColor: options.headColor ?? "#ffffff",
+    headRadius: options.headRadius ?? 4,
+    glowSize: options.glowSize ?? 20,
+    ariaLabel: options.ariaLabel ?? "Loading"
+  };
+  const uid = ++instanceCount;
+  const gradientId = `sarmal-glow-${uid}`;
+  const rect = container.getBoundingClientRect();
+  const width = rect.width || 200;
+  const height = rect.height || 200;
+  const svg = el("svg");
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("role", "img");
+  svg.setAttribute("aria-label", opts.ariaLabel);
+  const titleEl = el("title");
+  titleEl.textContent = opts.ariaLabel;
+  svg.appendChild(titleEl);
+  const defs = el("defs");
+  const gradient = el("radialGradient");
+  gradient.id = gradientId;
+  gradient.setAttribute("cx", "50%");
+  gradient.setAttribute("cy", "50%");
+  gradient.setAttribute("r", "50%");
+  const stop0 = el("stop");
+  stop0.setAttribute("offset", "0%");
+  stop0.setAttribute("stop-color", opts.headColor);
+  stop0.setAttribute("stop-opacity", "1");
+  const stopMid = el("stop");
+  stopMid.setAttribute("offset", `${DEFAULT_GLOW_INNER_STOP * 100}%`);
+  stopMid.setAttribute("stop-color", opts.headColor);
+  stopMid.setAttribute("stop-opacity", String(DEFAULT_GLOW_FALLOFF_OPACITY));
+  const stop1 = el("stop");
+  stop1.setAttribute("offset", "100%");
+  stop1.setAttribute("stop-color", opts.headColor);
+  stop1.setAttribute("stop-opacity", "0");
+  gradient.append(stop0, stopMid, stop1);
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  const skeletonPath = el("path");
+  skeletonPath.setAttribute("fill", "none");
+  skeletonPath.setAttribute("stroke", opts.skeletonColor);
+  skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY2));
+  skeletonPath.setAttribute("stroke-width", "1.5");
+  svg.appendChild(skeletonPath);
+  const trailPaths = [];
+  for (let i = 0; i < TRAIL_BATCH_COUNT; i++) {
+    const path = el("path");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", opts.trailColor);
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    svg.appendChild(path);
+    trailPaths.push(path);
+  }
+  const glowCircle = el("circle");
+  glowCircle.setAttribute("fill", `url(#${gradientId})`);
+  glowCircle.setAttribute("r", String(opts.glowSize));
+  svg.appendChild(glowCircle);
+  const headCircle = el("circle");
+  headCircle.setAttribute("fill", opts.headColor);
+  headCircle.setAttribute("r", String(opts.headRadius));
+  svg.appendChild(headCircle);
+  container.appendChild(svg);
+  let scale = 1;
+  let offsetX = 0;
+  let offsetY = 0;
+  function calculateBoundaries(skeleton2) {
+    if (skeleton2.length === 0) {
+      return;
+    }
+    const first = skeleton2[0];
+    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;
+      }
+      if (p.x > maxX) {
+        maxX = p.x;
+      }
+      if (p.y < minY) {
+        minY = p.y;
+      }
+      if (p.y > maxY) {
+        maxY = p.y;
+      }
+    }
+    const w = maxX - minX;
+    const h = maxY - minY;
+    const scaleX = width / (w * (1 + FIT_PADDING2 * 2));
+    const scaleY = height / (h * (1 + FIT_PADDING2 * 2));
+    scale = Math.min(scaleX, scaleY);
+    offsetX = (width - w * scale) / 2 - minX * scale;
+    offsetY = (height - h * scale) / 2 - minY * scale;
+  }
+  function px(p) {
+    return (p.x * scale + offsetX).toFixed(2);
+  }
+  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])}`;
+    }
+    d += " Z";
+    skeletonPath.setAttribute("d", d);
+  }
+  function updateTrail(trail, trailCount) {
+    if (trailCount < 2) {
+      for (const p of trailPaths) {
+        p.setAttribute("d", "");
+      }
+      return;
+    }
+    const batchSize = Math.ceil(trailCount / TRAIL_BATCH_COUNT);
+    for (let b = 0; b < TRAIL_BATCH_COUNT; b++) {
+      const start = b * batchSize;
+      const end = Math.min(start + batchSize, trailCount - 1);
+      if (start >= trailCount - 1) {
+        trailPaths[b].setAttribute("d", "");
+        continue;
+      }
+      const progress = (start + end) / 2 / (trailCount - 1);
+      const opacity = Math.pow(progress, TRAIL_FADE_CURVE2) * TRAIL_MAX_OPACITY2;
+      const strokeWidth = TRAIL_MIN_WIDTH2 + progress * (TRAIL_MAX_WIDTH2 - TRAIL_MIN_WIDTH2);
+      let d = `M${px(trail[start])} ${py(trail[start])}`;
+      for (let i = start + 1; i <= end; i++) {
+        d += ` L${px(trail[i])} ${py(trail[i])}`;
+      }
+      trailPaths[b].setAttribute("d", d);
+      trailPaths[b].setAttribute("stroke-opacity", opacity.toFixed(3));
+      trailPaths[b].setAttribute("stroke-width", strokeWidth.toFixed(2));
+    }
+  }
+  function updateHead(trail, trailCount) {
+    if (trailCount === 0) {
+      return;
+    }
+    const head = trail[trailCount - 1];
+    const x = px(head);
+    const y = py(head);
+    glowCircle.setAttribute("cx", x);
+    glowCircle.setAttribute("cy", y);
+    headCircle.setAttribute("cx", x);
+    headCircle.setAttribute("cy", y);
+  }
+  let animationId = null;
+  let lastTime = 0;
+  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;
+    updateTrail(trail, trailCount);
+    updateHead(trail, trailCount);
+    if (!prefersReducedMotion) {
+      animationId = requestAnimationFrame(renderFrame);
+    }
+  }
+  return {
+    start() {
+      if (animationId !== null) {
+        return;
+      }
+      lastTime = performance.now();
+      renderFrame();
+    },
+    stop() {
+      if (animationId === null) {
+        return;
+      }
+      cancelAnimationFrame(animationId);
+      animationId = null;
+    },
+    reset() {
+      engine.reset();
+    },
+    destroy() {
+      if (animationId !== null) {
+        cancelAnimationFrame(animationId);
+        animationId = null;
+      }
+      svg.remove();
+    },
+    seek(t, options2) {
+      engine.seek(t, options2);
+    },
+    seekWithTrail(t) {
+      engine.seekWithTrail(t);
+    }
+  };
+}
+function createSarmalSVG(container, curveDef, options) {
+  const { trailLength, ...rendererOpts } = options ?? {};
+  const engine = createEngine(curveDef, trailLength);
+  return createSVGRenderer({ container, engine, ...rendererOpts });
+}
+
 // src/curves.ts
 var TWO_PI2 = Math.PI * 2;
 function artemis2(t, _time, _params) {
@@ -294,6 +566,34 @@ function rose3(t, _time, _params) {
     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)
+  };
+}
+function lissajous43(t, time, _params) {
+  const phi = time * 0.38;
+  return {
+    x: Math.sin(4 * t + phi),
+    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)
+  };
+}
+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);
+  return {
+    x: Math.sign(c) * Math.pow(Math.abs(c), p),
+    y: Math.sign(s) * Math.pow(Math.abs(s), p)
+  };
+}
 var curves = {
   artemis2: {
     name: "Artemis II",
@@ -330,6 +630,30 @@ var curves = {
     fn: rose3,
     period: TWO_PI2,
     speed: 1.15
+  },
+  lissajous32: {
+    name: "Lissajous 3:2",
+    fn: lissajous32,
+    period: TWO_PI2,
+    speed: 2
+  },
+  lissajous43: {
+    name: "Lissajous 4:3",
+    fn: lissajous43,
+    period: TWO_PI2,
+    speed: 1.8
+  },
+  epicycloid3: {
+    name: "Epicycloid (n=3)",
+    fn: epicycloid3,
+    period: TWO_PI2,
+    speed: 0.75
+  },
+  lame: {
+    name: "Lam\xE9 Curve",
+    fn: lame,
+    period: TWO_PI2,
+    speed: 1
   }
 };
 
@@ -340,6 +664,6 @@ function createSarmal(canvas, curveDef, options) {
   return createRenderer({ canvas, engine, ...rendererOpts });
 }
 
-export { createEngine, createRenderer, createSarmal, curves };
+export { createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map