@sarmal/core 0.2.0 → 0.3.0

package/dist/index.js

@@ -7,28 +7,32 @@ var CircularBuffer = class {
     this.count = 0;
     this.capacity = capacity;
     this.data = Array.from({ length: capacity }, () => ({ x: 0, y: 0 }));
+    this.result = Array.from({ length: capacity }, () => ({ x: 0, y: 0 }));
   }
-  /**
-   * Array elements are pre-allocated and `head` pointer is manually assigned,
-   *  because AI said using `Array.shift` would be `O(n)` and this would be `O(1)`
-   *  and I don't know any better.
-   */
+  /** Mutates in-place */
   push(x, y) {
-    this.data[this.head] = { x, y };
+    const slot = this.data[this.head];
+    slot.x = x;
+    slot.y = y;
     this.head = (this.head + 1) % this.capacity;
     if (this.count < this.capacity) {
       this.count++;
     }
   }
+  /**
+   * 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 result = new Array(this.count);
     const start = this.count < this.capacity ? 0 : this.head;
     for (let i = 0; i < this.count; i++) {
-      const index = (start + i) % this.capacity;
-      const p = this.data[index];
-      result[i] = { x: p.x, y: p.y };
+      const src = this.data[(start + i) % this.capacity];
+      const dst = this.result[i];
+      dst.x = src.x;
+      dst.y = src.y;
     }
-    return result;
+    return this.result;
   }
   clear() {
     this.head = 0;
@@ -56,6 +60,9 @@ function createEngine(curveDef, trailLength = 120) {
       trail.push(point.x, point.y);
       return trail.toArray();
     },
+    get trailCount() {
+      return trail.length;
+    },
     reset() {
       t = 0;
       actualTime = 0;
@@ -80,16 +87,16 @@ var DEFAULT_GLOW_SIZE = 20;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
-var TRAIL_BATCH_SIZE = 10;
+var TRAIL_BATCH_SIZE = 20;
 var TRAIL_FADE_CURVE = 1.5;
 var TRAIL_MAX_OPACITY = 0.88;
 var TRAIL_MIN_WIDTH = 0.5;
 var TRAIL_MAX_WIDTH = 2.5;
 var GLOW_INNER_EDGE = 0.4;
 var GLOW_FALLOFF_OPACITY = 0.53;
-function hexToRgba(hex, alpha) {
+function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return `rgba(${n >> 16},${n >> 8 & 255},${n & 255},${alpha})`;
+  return `${n >> 16},${n >> 8 & 255},${n & 255}`;
 }
 function createRenderer(options) {
   const canvas = options.canvas;
@@ -105,8 +112,12 @@ function createRenderer(options) {
     headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
     glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE
   };
+  const trailRgb = hexToRgbComponents(opts.trailColor);
+  const headRgbFalloff = `rgba(${hexToRgbComponents(opts.headColor)},${GLOW_FALLOFF_OPACITY})`;
   let skeleton = [];
+  let skeletonCanvas = null;
   let trail = [];
+  let trailCount = 0;
   let head = null;
   let scale = 1;
   let offsetX = 0;
@@ -145,49 +156,49 @@ function createRenderer(options) {
     offsetX = (canvasWidth - boundsWidth) / 2 - minX * scale;
     offsetY = (canvasHeight - boundsHeight) / 2 - minY * scale;
   }
-  function transformCoordinateToPixel(p) {
-    return {
-      x: p.x * scale + offsetX,
-      y: p.y * scale + offsetY
-    };
+  function buildSkeletonCanvas() {
+    if (skeleton.length < 2) return;
+    skeletonCanvas = new OffscreenCanvas(canvas.width, canvas.height);
+    const skeletonCtx = skeletonCanvas.getContext("2d");
+    skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
+    skeletonCtx.lineWidth = 1.5;
+    skeletonCtx.beginPath();
+    const first = skeleton[0];
+    skeletonCtx.moveTo(first.x * scale + offsetX, first.y * scale + offsetY);
+    for (let i = 1; i < skeleton.length; i++) {
+      const p = skeleton[i];
+      skeletonCtx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
+    }
+    skeletonCtx.stroke();
   }
   function drawSkeleton() {
-    if (skeleton.length < 2) {
+    if (!skeletonCanvas) {
       return;
     }
-    ctx.strokeStyle = hexToRgba(opts.skeletonColor, DEFAULT_SKELETON_OPACITY);
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    const firstPixel = transformCoordinateToPixel(skeleton[0]);
-    ctx.moveTo(firstPixel.x, firstPixel.y);
-    for (let i = 1; i < skeleton.length; i++) {
-      const pixel = transformCoordinateToPixel(skeleton[i]);
-      ctx.lineTo(pixel.x, pixel.y);
-    }
-    ctx.stroke();
+    ctx.drawImage(skeletonCanvas, 0, 0);
   }
   function drawTrail() {
-    if (trail.length < 2) {
+    if (trailCount < 2) {
       return;
     }
-    for (let b = 0; b < trail.length - 1; b += TRAIL_BATCH_SIZE) {
-      const bEnd = Math.min(b + TRAIL_BATCH_SIZE, trail.length - 1);
-      const progress = (b + bEnd) / 2 / (trail.length - 1);
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    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 pixel = transformCoordinateToPixel(trail[i]);
-        if (i === b) {
-          ctx.moveTo(pixel.x, pixel.y);
+      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(pixel.x, pixel.y);
+          ctx.lineTo(point.x * scale + offsetX, point.y * scale + offsetY);
         }
       }
-      ctx.strokeStyle = hexToRgba(opts.trailColor, alpha);
+      ctx.strokeStyle = `rgba(${trailRgb},${alpha})`;
       ctx.lineWidth = lineWidth;
-      ctx.lineJoin = "round";
-      ctx.lineCap = "round";
       ctx.stroke();
     }
   }
@@ -195,10 +206,11 @@ function createRenderer(options) {
     if (!head) {
       return;
     }
-    const { x, y } = transformCoordinateToPixel(head);
+    const x = head.x * scale + offsetX;
+    const y = head.y * scale + offsetY;
     const gradient = ctx.createRadialGradient(x, y, 0, x, y, opts.glowSize);
     gradient.addColorStop(0, opts.headColor);
-    gradient.addColorStop(GLOW_INNER_EDGE, hexToRgba(opts.headColor, GLOW_FALLOFF_OPACITY));
+    gradient.addColorStop(GLOW_INNER_EDGE, headRgbFalloff);
     gradient.addColorStop(1, "transparent");
     ctx.fillStyle = gradient;
     ctx.beginPath();
@@ -214,7 +226,8 @@ function createRenderer(options) {
     const deltaTime = (now - lastTime) / 1e3;
     lastTime = now;
     trail = engine.tick(deltaTime);
-    head = trail.length > 0 ? trail[trail.length - 1] : null;
+    trailCount = engine.trailCount;
+    head = trailCount > 0 ? trail[trailCount - 1] : null;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawSkeleton();
     drawTrail();
@@ -223,6 +236,7 @@ function createRenderer(options) {
   }
   skeleton = engine.getSarmalSkeleton();
   calculateBoundaries();
+  buildSkeletonCanvas();
   return {
     start() {
       if (animationId !== null) {
@@ -252,6 +266,224 @@ function createRenderer(options) {
   };
 }
 
+// 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 = (now - lastTime) / 1e3;
+    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();
+    }
+  };
+}
+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) {
@@ -298,6 +530,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",
@@ -334,6 +594,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
   }
 };
 
@@ -344,6 +628,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