@sarmal/core 0.8.0 → 0.9.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,16 +132,13 @@ 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;
@@ -154,7 +151,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;
       }
@@ -166,26 +163,23 @@ 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;
-    },
+    }
   };
 }
 
@@ -199,9 +193,50 @@ 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 GRADIENT = {
+  bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
+  sunset: ["#f97316", "#dc2626", "#9333ea", "#f472b6"],
+  ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
+  ice: ["#1e3a8a", "#67e8f9"],
+  fire: ["#7f1d1d", "#fbbf24"],
+  forest: ["#14532d", "#86efac"]
+};
+var PRESETS = {
+  bard: GRADIENT.bard,
+  sunset: GRADIENT.sunset,
+  ocean: GRADIENT.ocean,
+  ice: GRADIENT.ice,
+  fire: GRADIENT.fire,
+  forest: GRADIENT.forest
+};
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
+}
+var lerpRgb = (a, b, t) => ({
+  r: Math.round(a.r + (b.r - a.r) * t),
+  g: Math.round(a.g + (b.g - a.g) * t),
+  b: Math.round(a.b + (b.b - a.b) * t)
+});
+function getPaletteColor(palette, position, timeOffset = 0) {
+  if (palette.length === 0) return { r: 255, g: 255, b: 255 };
+  if (palette.length === 1) return hexToRgb(palette[0]);
+  const cyclePos = (position + timeOffset) % 1;
+  const scaled = cyclePos * palette.length;
+  const idx = Math.floor(scaled);
+  const t = scaled - idx;
+  const c1 = hexToRgb(palette[idx % palette.length]);
+  const c2 = hexToRgb(palette[(idx + 1) % palette.length]);
+  return lerpRgb(c1, c2, t);
+}
+function resolvePalette(palette, trailStyle) {
+  if (Array.isArray(palette)) return palette;
+  if (palette && palette in PRESETS) return PRESETS[palette];
+  return trailStyle === "gradient-animated" ? GRADIENT.bard : GRADIENT.ice;
+}
 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;
@@ -246,8 +281,10 @@ function createRenderer(options) {
     skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
-    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
+    headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
   };
+  const trailStyle = options.trailStyle ?? "default";
+  const palette = resolvePalette(options.palette, trailStyle);
   const trailRgb = hexToRgbComponents(opts.trailColor);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
@@ -273,13 +310,11 @@ function createRenderer(options) {
   let morphResolve = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphAlpha = 0;
+  let gradientAnimTime = 0;
   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;
@@ -296,7 +331,7 @@ function createRenderer(options) {
     return {
       scale: s,
       offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
-      offsetY: (logicalHeight - boundsHeight) / 2 - minY * s,
+      offsetY: (logicalHeight - boundsHeight) / 2 - minY * s
     };
   }
   function calculateBoundaries() {
@@ -384,7 +419,13 @@ function createRenderer(options) {
       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})`;
+      if (trailStyle === "default") {
+        ctx.fillStyle = `rgba(${trailRgb},${alpha})`;
+      } else {
+        const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
+        const color = getPaletteColor(palette, progress, timeOffset);
+        ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${alpha})`;
+      }
       ctx.beginPath();
       ctx.moveTo(l0x, l0y);
       ctx.lineTo(l1x, l1y);
@@ -409,6 +450,9 @@ function createRenderer(options) {
     const now = performance.now();
     const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
+    if (trailStyle === "gradient-animated") {
+      gradientAnimTime += deltaTime * 1e3;
+    }
     if (engine.morphAlpha !== null) {
       morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
@@ -493,36 +537,33 @@ 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) {
@@ -530,56 +571,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 = {
@@ -587,66 +627,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
@@ -669,12 +709,11 @@ 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.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) }
     });
     sarmal.start();
   });
@@ -685,4 +724,4 @@ if (document.readyState === "loading") {
   init();
 }
 //# sourceMappingURL=auto-init.js.map
-//# sourceMappingURL=auto-init.js.map
+//# sourceMappingURL=auto-init.js.map