@sarmal/core 0.7.1 → 0.8.0

package/dist/auto-init.js

@@ -49,7 +49,7 @@ function resolveCurve(curveDef) {
     period: curveDef.period ?? TWO_PI,
     speed: curveDef.speed ?? 1,
     skeleton: curveDef.skeleton,
-    skeletonFn: curveDef.skeletonFn
+    skeletonFn: curveDef.skeletonFn,
   };
 }
 function createEngine(curveDef, trailLength = 120) {
@@ -75,7 +75,7 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime += deltaTime;
       if (morphCurveB !== null && _morphAlpha !== null) {
         const a = curve.fn(t, actualTime, {});
-        const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
+        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 {
@@ -99,14 +99,14 @@ function createEngine(curveDef, trailLength = 120) {
       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;
@@ -132,13 +132,16 @@ function createEngine(curveDef, trailLength = 120) {
           ...frozenB,
           fn: (sampleT, time, params) => {
             const a = frozenA.fn(sampleT, time, params);
-            const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
+            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
+              y: a.y + (b.y - a.y) * frozenAlpha,
             };
-          }
+          },
         };
       }
       _morphStrategy = strategy;
@@ -151,7 +154,7 @@ function createEngine(curveDef, trailLength = 120) {
     completeMorph() {
       if (morphCurveB !== null) {
         if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
-          t = t / curve.period * morphCurveB.period;
+          t = (t / curve.period) * morphCurveB.period;
         }
         curve = morphCurveB;
       }
@@ -163,43 +166,74 @@ function createEngine(curveDef, trailLength = 120) {
       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 sampleT = (i / (steps - 1)) * curve.period;
           const a = sampleSkeleton(curve, sampleT);
-          const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : 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
+            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 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";
 var DEFAULT_SKELETON_OPACITY = 0.15;
 var FIT_PADDING = 0.1;
-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 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 computeTangent(trail, i) {
+  const count = trail.length;
+  if (count < 2) {
+    return { x: 1, y: 0 };
+  }
+  if (i === 0) {
+    const dx2 = trail[1].x - trail[0].x;
+    const dy2 = trail[1].y - trail[0].y;
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    return { x: dx2 / len2, y: dy2 / len2 };
+  }
+  if (i === count - 1) {
+    const dx2 = trail[count - 1].x - trail[count - 2].x;
+    const dy2 = trail[count - 1].y - trail[count - 2].y;
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
+    return { x: dx2 / len2, y: dy2 / len2 };
+  }
+  const dx = trail[i + 1].x - trail[i - 1].x;
+  const dy = trail[i + 1].y - trail[i - 1].y;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  return { x: dx / len, y: dy / len };
+}
+function computeNormal(trail, i) {
+  const tangent = computeTangent(trail, i);
+  return { x: -tangent.y, y: tangent.x };
+}
+function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
+  target.style.width = `${logicalWidth}px`;
+  target.style.height = `${logicalHeight}px`;
+  target.width = logicalWidth * dpr;
+  target.height = logicalHeight * dpr;
 }
 function createRenderer(options) {
   const canvas = options.canvas;
@@ -213,10 +247,19 @@ function createRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     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})`;
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  function setupCanvas() {
+    const rect = canvas.getBoundingClientRect();
+    const lw = rect.width || 200;
+    const lh = rect.height || 200;
+    applyDprSizing(canvas, lw, lh, dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  setupCanvas();
+  let logicalWidth = canvas.width / dpr;
+  let logicalHeight = canvas.height / dpr;
   let skeleton = [];
   let skeletonCanvas = null;
   let trail = [];
@@ -233,7 +276,10 @@ function createRenderer(options) {
   function computeBoundaries(pts) {
     if (pts.length === 0) return null;
     const first = pts[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 pts) {
       if (p.x < minX) minX = p.x;
       if (p.x > maxX) maxX = p.x;
@@ -242,17 +288,15 @@ function createRenderer(options) {
     }
     const width = maxX - minX;
     const height = maxY - minY;
-    const canvasWidth = canvas.width;
-    const canvasHeight = canvas.height;
-    const scaleX = canvasWidth / (width * (1 + FIT_PADDING * 2));
-    const scaleY = canvasHeight / (height * (1 + FIT_PADDING * 2));
+    const scaleX = logicalWidth / (width * (1 + FIT_PADDING * 2));
+    const scaleY = logicalHeight / (height * (1 + FIT_PADDING * 2));
     const s = Math.min(scaleX, scaleY);
     const boundsWidth = width * s;
     const boundsHeight = height * s;
     return {
       scale: s,
-      offsetX: (canvasWidth - boundsWidth) / 2 - minX * s,
-      offsetY: (canvasHeight - boundsHeight) / 2 - minY * s
+      offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
+      offsetY: (logicalHeight - boundsHeight) / 2 - minY * s,
     };
   }
   function calculateBoundaries() {
@@ -267,6 +311,7 @@ function createRenderer(options) {
     if (skeleton.length < 2) return;
     skeletonCanvas = new OffscreenCanvas(canvas.width, canvas.height);
     const skeletonCtx = skeletonCanvas.getContext("2d");
+    skeletonCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
     skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
     skeletonCtx.lineWidth = 1.5;
     skeletonCtx.beginPath();
@@ -312,32 +357,41 @@ function createRenderer(options) {
       }
       ctx.stroke();
     } else if (skeletonCanvas) {
-      ctx.drawImage(skeletonCanvas, 0, 0);
+      ctx.drawImage(skeletonCanvas, 0, 0, logicalWidth, logicalHeight);
     }
   }
   function drawTrail() {
     if (trailCount < 2) {
       return;
     }
-    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);
+    for (let i = 0; i < trailCount - 1; i++) {
+      const progress = i / (trailCount - 1);
+      const nextProgress = (i + 1) / (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);
+      const width = TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
+      const nextWidth = TRAIL_MIN_WIDTH + nextProgress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH);
+      const curr = trail[i];
+      const next = trail[i + 1];
+      const n0 = computeNormal(trail, i);
+      const n1 = computeNormal(trail, i + 1);
+      const halfW0 = width / 2;
+      const halfW1 = nextWidth / 2;
+      const l0x = curr.x * scale + offsetX + n0.x * halfW0;
+      const l0y = curr.y * scale + offsetY + n0.y * halfW0;
+      const r0x = curr.x * scale + offsetX - n0.x * halfW0;
+      const r0y = curr.y * scale + offsetY - n0.y * halfW0;
+      const l1x = next.x * scale + offsetX + n1.x * halfW1;
+      const l1y = next.y * scale + offsetY + n1.y * halfW1;
+      const r1x = next.x * scale + offsetX - n1.x * halfW1;
+      const r1y = next.y * scale + offsetY - n1.y * halfW1;
+      ctx.fillStyle = `rgba(${trailRgb},${alpha})`;
       ctx.beginPath();
-      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(point.x * scale + offsetX, point.y * scale + offsetY);
-        }
-      }
-      ctx.strokeStyle = `rgba(${trailRgb},${alpha})`;
-      ctx.lineWidth = lineWidth;
-      ctx.stroke();
+      ctx.moveTo(l0x, l0y);
+      ctx.lineTo(l1x, l1y);
+      ctx.lineTo(r1x, r1y);
+      ctx.lineTo(r0x, r0y);
+      ctx.closePath();
+      ctx.fill();
     }
   }
   function drawHead() {
@@ -346,14 +400,6 @@ function createRenderer(options) {
     }
     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, headRgbFalloff);
-    gradient.addColorStop(1, "transparent");
-    ctx.fillStyle = gradient;
-    ctx.beginPath();
-    ctx.arc(x, y, opts.glowSize, 0, Math.PI * 2);
-    ctx.fill();
     ctx.fillStyle = opts.headColor;
     ctx.beginPath();
     ctx.arc(x, y, opts.headRadius, 0, Math.PI * 2);
@@ -387,7 +433,7 @@ function createRenderer(options) {
     trail = engine.tick(deltaTime);
     trailCount = engine.trailCount;
     head = trailCount > 0 ? trail[trailCount - 1] : null;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.clearRect(0, 0, logicalWidth, logicalHeight);
     if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       skeleton = engine.getSarmalSkeleton();
       calculateBoundaries();
@@ -447,33 +493,36 @@ function createRenderer(options) {
       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) {
@@ -481,55 +530,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 = {
@@ -537,66 +587,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
@@ -619,12 +669,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();
   });
@@ -635,4 +685,4 @@ if (document.readyState === "loading") {
   init();
 }
 //# sourceMappingURL=auto-init.js.map
-//# sourceMappingURL=auto-init.js.map
+//# sourceMappingURL=auto-init.js.map