@sarmal/core 0.8.0 → 0.9.1

package/dist/auto-init.js

@@ -199,6 +199,47 @@ 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}`;
@@ -248,6 +289,8 @@ function createRenderer(options) {
     headColor: options.headColor ?? "#ffffff",
     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,6 +316,7 @@ 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];
@@ -384,7 +428,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 +459,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);
@@ -497,9 +550,9 @@ function createRenderer(options) {
   };
 }
 
-// src/curves.ts
+// src/curves/artemis2.ts
 var TWO_PI2 = Math.PI * 2;
-function artemis2(t, _time, _params) {
+function artemis2Fn(t, _time, _params) {
   const a = 0.35,
     b = 0.15,
     ox = 0.175;
@@ -511,21 +564,16 @@ function artemis2(t, _time, _params) {
     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),
-  };
-}
-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) {
+var artemis2 = {
+  name: "Artemis II",
+  fn: artemis2Fn,
+  period: TWO_PI2,
+  speed: 0.7,
+};
+
+// src/curves/astroid.ts
+var TWO_PI3 = Math.PI * 2;
+function astroidFn(t, _time, _params) {
   const c = Math.cos(t);
   const s = Math.sin(t);
   return {
@@ -533,47 +581,104 @@ function astroid(t, _time, _params) {
     y: s * s * s,
   };
 }
-function deltoid(t, _time, _params) {
+var astroid = {
+  name: "Astroid",
+  fn: astroidFn,
+  period: TWO_PI3,
+  speed: 1.1,
+};
+
+// src/curves/deltoid.ts
+var TWO_PI4 = Math.PI * 2;
+function deltoidFn(t, _time, _params) {
   return {
     x: 2 * Math.cos(t) + Math.cos(2 * t),
     y: 2 * Math.sin(t) - Math.sin(2 * t),
   };
 }
-function rose5(t, _time, _params) {
-  const r = Math.cos(5 * t);
+var deltoid = {
+  name: "Deltoid",
+  fn: deltoidFn,
+  period: TWO_PI4,
+  speed: 0.9,
+};
+
+// src/curves/epicycloid3.ts
+var TWO_PI5 = Math.PI * 2;
+function epicycloid3Fn(t, _time, _params) {
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: 4 * Math.cos(t) - Math.cos(4 * t),
+    y: 4 * Math.sin(t) - Math.sin(4 * t),
   };
 }
-function rose3(t, _time, _params) {
-  const r = Math.cos(3 * t);
+var epicycloid3 = {
+  name: "Epicycloid (n=3)",
+  fn: epicycloid3Fn,
+  period: TWO_PI5,
+  speed: 0.75,
+};
+
+// src/curves/epitrochoid7.ts
+var TWO_PI6 = Math.PI * 2;
+function epitrochoid7Fn(t, _time, _params) {
+  const d = 1 + 0.55 * Math.sin(t * 0.5);
   return {
-    x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    x: 7 * Math.cos(t) - d * Math.cos(7 * t),
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+  };
+}
+function epitrochoid7SkeletonFn(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 lissajous32(t, time, _params) {
+var epitrochoid7 = {
+  name: "Epitrochoid",
+  fn: epitrochoid7Fn,
+  period: TWO_PI6,
+  speed: 1.4,
+  skeletonFn: epitrochoid7SkeletonFn,
+};
+
+// src/curves/lissajous32.ts
+var TWO_PI7 = Math.PI * 2;
+function lissajous32Fn(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) {
+var lissajous32 = {
+  name: "Lissajous 3:2",
+  fn: lissajous32Fn,
+  period: TWO_PI7,
+  speed: 2,
+  skeleton: "live",
+};
+
+// src/curves/lissajous43.ts
+var TWO_PI8 = Math.PI * 2;
+function lissajous43Fn(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) {
+var lissajous43 = {
+  name: "Lissajous 4:3",
+  fn: lissajous43Fn,
+  period: TWO_PI8,
+  speed: 1.8,
+  skeleton: "live",
+};
+
+// src/curves/lame.ts
+var TWO_PI9 = Math.PI * 2;
+function lameFn(t, time, _params) {
   const p = 1.75 + 1.25 * Math.sin(time * 0.48);
   const c = Math.cos(t),
     s = Math.sin(t);
@@ -582,71 +687,58 @@ function lame(t, time, _params) {
     y: Math.sign(s) * Math.pow(Math.abs(s), p),
   };
 }
+var lame = {
+  name: "Lam\xE9 Curve",
+  fn: lameFn,
+  period: TWO_PI9,
+  speed: 1,
+  skeleton: "live",
+};
+
+// src/curves/rose3.ts
+var TWO_PI10 = Math.PI * 2;
+function rose3Fn(t, _time, _params) {
+  const r = Math.cos(3 * t);
+  return {
+    x: r * Math.cos(t),
+    y: r * Math.sin(t),
+  };
+}
+var rose3 = {
+  name: "Rose (n=3)",
+  fn: rose3Fn,
+  period: TWO_PI10,
+  speed: 1.15,
+};
+
+// src/curves/rose5.ts
+var TWO_PI11 = Math.PI * 2;
+function rose5Fn(t, _time, _params) {
+  const r = Math.cos(5 * t);
+  return {
+    x: r * Math.cos(t),
+    y: r * Math.sin(t),
+  };
+}
+var rose5 = {
+  name: "Rose (n=5)",
+  fn: rose5Fn,
+  period: TWO_PI11,
+  speed: 1,
+};
+
+// src/curves/index.ts
 var curves = {
-  artemis2: {
-    name: "Artemis II",
-    fn: artemis2,
-    period: TWO_PI2,
-    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,
-  },
-  deltoid: {
-    name: "Deltoid",
-    fn: deltoid,
-    period: TWO_PI2,
-    speed: 0.9,
-  },
-  rose5: {
-    name: "Rose (n=5)",
-    fn: rose5,
-    period: TWO_PI2,
-    speed: 1,
-  },
-  rose3: {
-    name: "Rose (n=3)",
-    fn: rose3,
-    period: TWO_PI2,
-    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,
-  },
-  lame: {
-    name: "Lam\xE9 Curve",
-    fn: lame,
-    period: TWO_PI2,
-    speed: 1,
-    skeleton: "live",
-  },
+  artemis2,
+  epitrochoid7,
+  astroid,
+  deltoid,
+  rose5,
+  rose3,
+  lissajous32,
+  lissajous43,
+  epicycloid3,
+  lame,
 };
 
 // src/index.ts
@@ -657,6 +749,15 @@ function createSarmal(canvas, curveDef, options) {
 }
 
 // src/auto-init.ts
+function parsePalette(value) {
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed)) {
+      return parsed;
+    }
+  } catch {}
+  return value;
+}
 function init() {
   const canvases = document.querySelectorAll("canvas[data-sarmal]");
   canvases.forEach((canvas) => {
@@ -673,16 +774,21 @@ function init() {
       ...(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.trailStyle && {
+        trailStyle: canvas.dataset.trailStyle,
+      }),
+      ...(canvas.dataset.palette && { palette: parsePalette(canvas.dataset.palette) }),
     });
     sarmal.start();
   });
 }
 if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", init);
+  document.addEventListener("DOMContentLoaded", () => {
+    requestAnimationFrame(init);
+  });
 } else {
-  init();
+  requestAnimationFrame(init);
 }
 //# sourceMappingURL=auto-init.js.map
 //# sourceMappingURL=auto-init.js.map