@sarmal/core 0.13.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auto-init.cjs +84 -89
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.d.cts +2 -1
- package/dist/auto-init.d.ts +2 -1
- package/dist/auto-init.js +83 -88
- package/dist/auto-init.js.map +1 -1
- package/dist/curves/artemis2.cjs +7 -10
- package/dist/curves/artemis2.d.cts +1 -1
- package/dist/curves/artemis2.d.ts +1 -1
- package/dist/curves/artemis2.js +6 -9
- package/dist/curves/astroid.cjs +4 -4
- package/dist/curves/astroid.d.cts +1 -1
- package/dist/curves/astroid.d.ts +1 -1
- package/dist/curves/astroid.js +3 -3
- package/dist/curves/deltoid.cjs +4 -4
- package/dist/curves/deltoid.d.cts +1 -1
- package/dist/curves/deltoid.d.ts +1 -1
- package/dist/curves/deltoid.js +3 -3
- package/dist/curves/epicycloid3.cjs +4 -4
- package/dist/curves/epicycloid3.d.cts +1 -1
- package/dist/curves/epicycloid3.d.ts +1 -1
- package/dist/curves/epicycloid3.js +3 -3
- package/dist/curves/epitrochoid7.cjs +5 -5
- package/dist/curves/epitrochoid7.d.cts +1 -1
- package/dist/curves/epitrochoid7.d.ts +1 -1
- package/dist/curves/epitrochoid7.js +4 -4
- package/dist/curves/index.cjs +28 -32
- package/dist/curves/index.d.cts +21 -21
- package/dist/curves/index.d.ts +21 -21
- package/dist/curves/index.js +28 -44
- package/dist/curves/lame.cjs +5 -6
- package/dist/curves/lame.d.cts +1 -1
- package/dist/curves/lame.d.ts +1 -1
- package/dist/curves/lame.js +4 -5
- package/dist/curves/lissajous32.cjs +4 -4
- package/dist/curves/lissajous32.d.cts +1 -1
- package/dist/curves/lissajous32.d.ts +1 -1
- package/dist/curves/lissajous32.js +3 -3
- package/dist/curves/lissajous43.cjs +4 -4
- package/dist/curves/lissajous43.d.cts +1 -1
- package/dist/curves/lissajous43.d.ts +1 -1
- package/dist/curves/lissajous43.js +3 -3
- package/dist/curves/rose3.cjs +4 -4
- package/dist/curves/rose3.d.cts +1 -1
- package/dist/curves/rose3.d.ts +1 -1
- package/dist/curves/rose3.js +3 -3
- package/dist/curves/rose5.cjs +4 -4
- package/dist/curves/rose5.d.cts +1 -1
- package/dist/curves/rose5.d.ts +1 -1
- package/dist/curves/rose5.js +3 -3
- package/dist/index.cjs +98 -90
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -58
- package/dist/index.d.ts +23 -58
- package/dist/index.js +98 -107
- package/dist/index.js.map +1 -1
- package/dist/types-BQosOzlf.d.cts +276 -0
- package/dist/types-BQosOzlf.d.ts +276 -0
- package/package.json +1 -1
- package/dist/types-BW0bpL1Z.d.cts +0 -290
- package/dist/types-BW0bpL1Z.d.ts +0 -290
package/dist/index.js
CHANGED
|
@@ -61,13 +61,13 @@ function resolveCurve(curveDef) {
|
|
|
61
61
|
period,
|
|
62
62
|
speed,
|
|
63
63
|
skeleton: curveDef.skeleton,
|
|
64
|
-
skeletonFn: curveDef.skeletonFn
|
|
64
|
+
skeletonFn: curveDef.skeletonFn
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
67
|
function createEngine(curveDef, trailLength = 120) {
|
|
68
68
|
if (!Number.isFinite(trailLength) || trailLength <= 0) {
|
|
69
69
|
throw new RangeError(
|
|
70
|
-
`[sarmal] trailLength must be a positive finite number, got ${trailLength}
|
|
70
|
+
`[sarmal] trailLength must be a positive finite number, got ${trailLength}`
|
|
71
71
|
);
|
|
72
72
|
}
|
|
73
73
|
let curve = resolveCurve(curveDef);
|
|
@@ -108,7 +108,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
108
108
|
actualTime += deltaTime;
|
|
109
109
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
110
110
|
const a = curve.fn(t, actualTime, EMPTY_PARAMS);
|
|
111
|
-
const tB = _morphStrategy === "normalized" ?
|
|
111
|
+
const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
|
|
112
112
|
const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
|
|
113
113
|
trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
|
|
114
114
|
} else {
|
|
@@ -132,14 +132,14 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
132
132
|
trail.clear();
|
|
133
133
|
},
|
|
134
134
|
jump(newT, { clearTrail = false } = {}) {
|
|
135
|
-
t = (
|
|
135
|
+
t = (newT % curve.period + curve.period) % curve.period;
|
|
136
136
|
if (clearTrail) {
|
|
137
137
|
trail.clear();
|
|
138
138
|
}
|
|
139
139
|
},
|
|
140
140
|
seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
141
141
|
const advance = curve.speed * step;
|
|
142
|
-
const target = (
|
|
142
|
+
const target = (targetT % curve.period + curve.period) % curve.period;
|
|
143
143
|
const targetTime = target / curve.speed;
|
|
144
144
|
t = target;
|
|
145
145
|
actualTime = targetTime;
|
|
@@ -148,7 +148,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
148
148
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
149
149
|
for (let i = count - 1; i >= 0; i--) {
|
|
150
150
|
const sampleT = target - i * advance;
|
|
151
|
-
const wrappedT = (
|
|
151
|
+
const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
|
|
152
152
|
const time = targetTime - i * step;
|
|
153
153
|
const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
|
|
154
154
|
trail.push(point.x, point.y);
|
|
@@ -165,16 +165,13 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
165
165
|
...frozenB,
|
|
166
166
|
fn: (sampleT, time, params) => {
|
|
167
167
|
const a = frozenA.fn(sampleT, time, params);
|
|
168
|
-
const tB =
|
|
169
|
-
frozenStrategy === "normalized"
|
|
170
|
-
? (sampleT / frozenA.period) * frozenB.period
|
|
171
|
-
: sampleT;
|
|
168
|
+
const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
|
|
172
169
|
const b = frozenB.fn(tB, time, params);
|
|
173
170
|
return {
|
|
174
171
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
175
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
172
|
+
y: a.y + (b.y - a.y) * frozenAlpha
|
|
176
173
|
};
|
|
177
|
-
}
|
|
174
|
+
}
|
|
178
175
|
};
|
|
179
176
|
}
|
|
180
177
|
_morphStrategy = strategy;
|
|
@@ -187,7 +184,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
187
184
|
completeMorph() {
|
|
188
185
|
if (morphCurveB !== null) {
|
|
189
186
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
190
|
-
t =
|
|
187
|
+
t = t / curve.period * morphCurveB.period;
|
|
191
188
|
}
|
|
192
189
|
curve = morphCurveB;
|
|
193
190
|
}
|
|
@@ -199,22 +196,19 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
199
196
|
const points = new Array(steps);
|
|
200
197
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
201
198
|
for (let i = 0; i < steps; i++) {
|
|
202
|
-
const sampleT =
|
|
199
|
+
const sampleT = i / (steps - 1) * curve.period;
|
|
203
200
|
const a = sampleSkeleton(curve, sampleT);
|
|
204
|
-
const tB =
|
|
205
|
-
_morphStrategy === "normalized"
|
|
206
|
-
? (sampleT / curve.period) * morphCurveB.period
|
|
207
|
-
: sampleT;
|
|
201
|
+
const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
|
|
208
202
|
const b = sampleSkeleton(morphCurveB, tB);
|
|
209
203
|
points[i] = {
|
|
210
204
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
211
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
205
|
+
y: a.y + (b.y - a.y) * _morphAlpha
|
|
212
206
|
};
|
|
213
207
|
}
|
|
214
208
|
return points;
|
|
215
209
|
}
|
|
216
210
|
for (let i = 0; i < steps; i++) {
|
|
217
|
-
const sampleT =
|
|
211
|
+
const sampleT = i / (steps - 1) * curve.period;
|
|
218
212
|
points[i] = sampleSkeleton(curve, sampleT);
|
|
219
213
|
}
|
|
220
214
|
return points;
|
|
@@ -256,7 +250,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
256
250
|
_speedTransition.reject(new Error("Speed transition cancelled"));
|
|
257
251
|
_speedTransition = null;
|
|
258
252
|
}
|
|
259
|
-
}
|
|
253
|
+
}
|
|
260
254
|
};
|
|
261
255
|
}
|
|
262
256
|
|
|
@@ -319,16 +313,13 @@ function computeTrailQuad(trail, i, trailCount, toX, toY) {
|
|
|
319
313
|
r1x: nx - n1.x * w1,
|
|
320
314
|
r1y: ny - n1.y * w1,
|
|
321
315
|
opacity,
|
|
322
|
-
progress
|
|
316
|
+
progress
|
|
323
317
|
};
|
|
324
318
|
}
|
|
325
319
|
function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
326
320
|
if (pts.length === 0) return null;
|
|
327
321
|
const first = pts[0];
|
|
328
|
-
let minX = first.x,
|
|
329
|
-
maxX = first.x,
|
|
330
|
-
minY = first.y,
|
|
331
|
-
maxY = first.y;
|
|
322
|
+
let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
|
|
332
323
|
for (const p of pts) {
|
|
333
324
|
if (p.x < minX) {
|
|
334
325
|
minX = p.x;
|
|
@@ -347,7 +338,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
347
338
|
const h = maxY - minY;
|
|
348
339
|
if (w === 0 && h === 0) {
|
|
349
340
|
throw new Error(
|
|
350
|
-
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
341
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
351
342
|
);
|
|
352
343
|
}
|
|
353
344
|
const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
|
|
@@ -358,12 +349,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
358
349
|
scaleXProportional,
|
|
359
350
|
scaleYProportional,
|
|
360
351
|
scaleXMinPadding,
|
|
361
|
-
scaleYMinPadding
|
|
352
|
+
scaleYMinPadding
|
|
362
353
|
);
|
|
363
354
|
return {
|
|
364
355
|
scale,
|
|
365
356
|
offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
|
|
366
|
-
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
357
|
+
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
367
358
|
};
|
|
368
359
|
}
|
|
369
360
|
function enginePassthroughs(engine) {
|
|
@@ -373,19 +364,16 @@ function enginePassthroughs(engine) {
|
|
|
373
364
|
setSpeed: engine.setSpeed,
|
|
374
365
|
getSpeed: engine.getSpeed,
|
|
375
366
|
resetSpeed: engine.resetSpeed,
|
|
376
|
-
setSpeedOver: engine.setSpeedOver
|
|
367
|
+
setSpeedOver: engine.setSpeedOver
|
|
377
368
|
};
|
|
378
369
|
}
|
|
379
|
-
|
|
380
|
-
// src/renderer.ts
|
|
381
|
-
var DEFAULT_SKELETON_COLOR = "#ffffff";
|
|
382
370
|
var GRADIENT = {
|
|
383
371
|
bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
|
|
384
372
|
sunset: ["#f97316", "#dc2626", "#9333ea", "#f472b6"],
|
|
385
373
|
ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
|
|
386
374
|
ice: ["#1e3a8a", "#67e8f9"],
|
|
387
375
|
fire: ["#7f1d1d", "#fbbf24"],
|
|
388
|
-
forest: ["#14532d", "#86efac"]
|
|
376
|
+
forest: ["#14532d", "#86efac"]
|
|
389
377
|
};
|
|
390
378
|
var PRESETS = {
|
|
391
379
|
bard: GRADIENT.bard,
|
|
@@ -393,20 +381,24 @@ var PRESETS = {
|
|
|
393
381
|
ocean: GRADIENT.ocean,
|
|
394
382
|
ice: GRADIENT.ice,
|
|
395
383
|
fire: GRADIENT.fire,
|
|
396
|
-
forest: GRADIENT.forest
|
|
384
|
+
forest: GRADIENT.forest
|
|
397
385
|
};
|
|
398
386
|
function hexToRgb(hex) {
|
|
399
387
|
const n = parseInt(hex.slice(1), 16);
|
|
400
|
-
return { r: n >> 16, g:
|
|
388
|
+
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
401
389
|
}
|
|
402
390
|
var lerpRgb = (a, b, t) => ({
|
|
403
391
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
404
392
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
405
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
393
|
+
b: Math.round(a.b + (b.b - a.b) * t)
|
|
406
394
|
});
|
|
407
395
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
408
|
-
if (palette.length === 0)
|
|
409
|
-
|
|
396
|
+
if (palette.length === 0) {
|
|
397
|
+
return { r: 255, g: 255, b: 255 };
|
|
398
|
+
}
|
|
399
|
+
if (palette.length === 1) {
|
|
400
|
+
return hexToRgb(palette[0]);
|
|
401
|
+
}
|
|
410
402
|
const cyclePos = (position + timeOffset) % 1;
|
|
411
403
|
const scaled = cyclePos * palette.length;
|
|
412
404
|
const idx = Math.floor(scaled);
|
|
@@ -416,13 +408,20 @@ function getPaletteColor(palette, position, timeOffset = 0) {
|
|
|
416
408
|
return lerpRgb(c1, c2, t);
|
|
417
409
|
}
|
|
418
410
|
function resolvePalette(palette, trailStyle) {
|
|
419
|
-
if (Array.isArray(palette))
|
|
420
|
-
|
|
411
|
+
if (Array.isArray(palette)) {
|
|
412
|
+
return palette;
|
|
413
|
+
}
|
|
414
|
+
if (palette && palette in PRESETS) {
|
|
415
|
+
return PRESETS[palette];
|
|
416
|
+
}
|
|
421
417
|
return trailStyle === "gradient-animated" ? GRADIENT.bard : GRADIENT.ice;
|
|
422
418
|
}
|
|
419
|
+
|
|
420
|
+
// src/renderer.ts
|
|
421
|
+
var DEFAULT_SKELETON_COLOR = "#ffffff";
|
|
423
422
|
function hexToRgbComponents(hex) {
|
|
424
423
|
const n = parseInt(hex.slice(1), 16);
|
|
425
|
-
return `${n >> 16},${
|
|
424
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
426
425
|
}
|
|
427
426
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
428
427
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -450,7 +449,7 @@ function createRenderer(options) {
|
|
|
450
449
|
const opts = {
|
|
451
450
|
skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
|
|
452
451
|
trailColor,
|
|
453
|
-
headColor: options.headColor ?? defaultHeadColor()
|
|
452
|
+
headColor: options.headColor ?? defaultHeadColor()
|
|
454
453
|
};
|
|
455
454
|
const trailRgb = hexToRgbComponents(opts.trailColor);
|
|
456
455
|
const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
|
|
@@ -551,7 +550,7 @@ function createRenderer(options) {
|
|
|
551
550
|
i,
|
|
552
551
|
trailCount,
|
|
553
552
|
toX,
|
|
554
|
-
toY
|
|
553
|
+
toY
|
|
555
554
|
);
|
|
556
555
|
if (trailStyle === "default") {
|
|
557
556
|
ctx.fillStyle = `rgba(${trailRgb},${opacity})`;
|
|
@@ -575,8 +574,7 @@ function createRenderer(options) {
|
|
|
575
574
|
}
|
|
576
575
|
const x = head.x * scale + offsetX;
|
|
577
576
|
const y = head.y * scale + offsetY;
|
|
578
|
-
const r =
|
|
579
|
-
options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
|
|
577
|
+
const r = options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
|
|
580
578
|
ctx.fillStyle = opts.headColor;
|
|
581
579
|
ctx.beginPath();
|
|
582
580
|
ctx.arc(x, y, r, 0, Math.PI * 2);
|
|
@@ -677,7 +675,7 @@ function createRenderer(options) {
|
|
|
677
675
|
return new Promise((resolve) => {
|
|
678
676
|
morphResolve = resolve;
|
|
679
677
|
});
|
|
680
|
-
}
|
|
678
|
+
}
|
|
681
679
|
};
|
|
682
680
|
if (shouldAutoStart) {
|
|
683
681
|
instance.play();
|
|
@@ -703,7 +701,7 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
703
701
|
const samples = Math.ceil(period * 50);
|
|
704
702
|
const pts = Array.from({ length: samples });
|
|
705
703
|
for (let i = 0; i < samples; i++) {
|
|
706
|
-
const t =
|
|
704
|
+
const t = i / (samples - 1) * period;
|
|
707
705
|
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
|
|
708
706
|
}
|
|
709
707
|
return pts;
|
|
@@ -714,17 +712,21 @@ function el(tag) {
|
|
|
714
712
|
function createSVGRenderer(options) {
|
|
715
713
|
const { container, engine } = options;
|
|
716
714
|
const trailColor = options.trailColor ?? "#ffffff";
|
|
715
|
+
const trailStyle = options.trailStyle ?? "default";
|
|
716
|
+
const palette = resolvePalette(options.palette, trailStyle);
|
|
717
717
|
const opts = {
|
|
718
718
|
skeletonColor: options.skeletonColor ?? "#ffffff",
|
|
719
719
|
trailColor,
|
|
720
|
-
headColor: options.headColor ??
|
|
721
|
-
|
|
720
|
+
headColor: options.headColor ?? (trailStyle !== "default" ? (() => {
|
|
721
|
+
const { r, g, b } = getPaletteColor(palette, 1);
|
|
722
|
+
return `rgb(${r},${g},${b})`;
|
|
723
|
+
})() : trailColor),
|
|
724
|
+
ariaLabel: options.ariaLabel ?? "Loading"
|
|
722
725
|
};
|
|
723
726
|
const rect = container.getBoundingClientRect();
|
|
724
727
|
const width = rect.width || 200;
|
|
725
728
|
const height = rect.height || 200;
|
|
726
|
-
const headRadius =
|
|
727
|
-
options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(width, height) / 160));
|
|
729
|
+
const headRadius = options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(width, height) / 160));
|
|
728
730
|
const svg = el("svg");
|
|
729
731
|
svg.setAttribute("width", String(width));
|
|
730
732
|
svg.setAttribute("height", String(height));
|
|
@@ -735,6 +737,7 @@ function createSVGRenderer(options) {
|
|
|
735
737
|
titleEl.textContent = opts.ariaLabel;
|
|
736
738
|
svg.appendChild(titleEl);
|
|
737
739
|
const skeletonPath = el("path");
|
|
740
|
+
skeletonPath.setAttribute("data-sarmal-role", "skeleton");
|
|
738
741
|
skeletonPath.setAttribute("fill", "none");
|
|
739
742
|
skeletonPath.setAttribute("stroke", opts.skeletonColor);
|
|
740
743
|
skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY));
|
|
@@ -762,10 +765,12 @@ function createSVGRenderer(options) {
|
|
|
762
765
|
trailPaths.push(path);
|
|
763
766
|
}
|
|
764
767
|
const headCircle = el("circle");
|
|
768
|
+
headCircle.setAttribute("data-sarmal-role", "head");
|
|
765
769
|
headCircle.setAttribute("fill", opts.headColor);
|
|
766
770
|
headCircle.setAttribute("r", String(headRadius));
|
|
767
771
|
svg.appendChild(headCircle);
|
|
768
772
|
container.appendChild(svg);
|
|
773
|
+
let gradientAnimTime = 0;
|
|
769
774
|
let scale = 1;
|
|
770
775
|
let offsetX = 0;
|
|
771
776
|
let offsetY = 0;
|
|
@@ -799,16 +804,21 @@ function createSVGRenderer(options) {
|
|
|
799
804
|
return;
|
|
800
805
|
}
|
|
801
806
|
for (let i = 0; i < trailCount - 1; i++) {
|
|
802
|
-
const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity } = computeTrailQuad(
|
|
807
|
+
const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
|
|
803
808
|
trail,
|
|
804
809
|
i,
|
|
805
810
|
trailCount,
|
|
806
811
|
px,
|
|
807
|
-
py
|
|
812
|
+
py
|
|
808
813
|
);
|
|
809
814
|
const d = `M${l0x.toFixed(2)} ${l0y.toFixed(2)} L${l1x.toFixed(2)} ${l1y.toFixed(2)} L${r1x.toFixed(2)} ${r1y.toFixed(2)} L${r0x.toFixed(2)} ${r0y.toFixed(2)} Z`;
|
|
810
815
|
trailPaths[i].setAttribute("d", d);
|
|
811
816
|
trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
|
|
817
|
+
if (trailStyle !== "default") {
|
|
818
|
+
const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
|
|
819
|
+
const { r, g, b } = getPaletteColor(palette, progress, timeOffset);
|
|
820
|
+
trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
|
|
821
|
+
}
|
|
812
822
|
}
|
|
813
823
|
for (let i = trailCount - 1; i < trailPaths.length; i++) {
|
|
814
824
|
trailPaths[i].setAttribute("d", "");
|
|
@@ -826,13 +836,15 @@ function createSVGRenderer(options) {
|
|
|
826
836
|
}
|
|
827
837
|
let animationId = null;
|
|
828
838
|
let lastTime = 0;
|
|
829
|
-
const prefersReducedMotion =
|
|
830
|
-
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
839
|
+
const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
831
840
|
let morphResolve = null;
|
|
832
841
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
833
842
|
let morphTarget = null;
|
|
834
843
|
let morphAlpha = 0;
|
|
835
844
|
function renderFrame(deltaTime) {
|
|
845
|
+
if (trailStyle === "gradient-animated") {
|
|
846
|
+
gradientAnimTime += deltaTime * 1e3;
|
|
847
|
+
}
|
|
836
848
|
if (engine.morphAlpha !== null) {
|
|
837
849
|
morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
|
|
838
850
|
engine.setMorphAlpha(morphAlpha);
|
|
@@ -841,7 +853,7 @@ function createSVGRenderer(options) {
|
|
|
841
853
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
842
854
|
skeletonPathA.setAttribute(
|
|
843
855
|
"stroke-opacity",
|
|
844
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
856
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
845
857
|
);
|
|
846
858
|
}
|
|
847
859
|
if (morphPathBBuilt) {
|
|
@@ -937,7 +949,7 @@ function createSVGRenderer(options) {
|
|
|
937
949
|
return new Promise((resolve) => {
|
|
938
950
|
morphResolve = resolve;
|
|
939
951
|
});
|
|
940
|
-
}
|
|
952
|
+
}
|
|
941
953
|
};
|
|
942
954
|
if (shouldAutoStart) {
|
|
943
955
|
instance.play();
|
|
@@ -953,22 +965,19 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
953
965
|
// src/curves/artemis2.ts
|
|
954
966
|
var TWO_PI2 = Math.PI * 2;
|
|
955
967
|
function artemis2Fn(t, _time, _params) {
|
|
956
|
-
const a = 0.35,
|
|
957
|
-
|
|
958
|
-
ox = 0.175;
|
|
959
|
-
const s = Math.sin(t),
|
|
960
|
-
c = Math.cos(t);
|
|
968
|
+
const a = 0.35, b = 0.15, ox = 0.175;
|
|
969
|
+
const s = Math.sin(t), c = Math.cos(t);
|
|
961
970
|
const denom = 1 + s * s;
|
|
962
971
|
return {
|
|
963
|
-
x:
|
|
964
|
-
y:
|
|
972
|
+
x: c * (1 + a * c) / denom - ox,
|
|
973
|
+
y: s * c * (1 + b * c) / denom
|
|
965
974
|
};
|
|
966
975
|
}
|
|
967
976
|
var artemis2 = {
|
|
968
977
|
name: "Artemis II",
|
|
969
978
|
fn: artemis2Fn,
|
|
970
979
|
period: TWO_PI2,
|
|
971
|
-
speed: 0.7
|
|
980
|
+
speed: 0.7
|
|
972
981
|
};
|
|
973
982
|
|
|
974
983
|
// src/curves/astroid.ts
|
|
@@ -978,14 +987,14 @@ function astroidFn(t, _time, _params) {
|
|
|
978
987
|
const s = Math.sin(t);
|
|
979
988
|
return {
|
|
980
989
|
x: c * c * c,
|
|
981
|
-
y: s * s * s
|
|
990
|
+
y: s * s * s
|
|
982
991
|
};
|
|
983
992
|
}
|
|
984
993
|
var astroid = {
|
|
985
994
|
name: "Astroid",
|
|
986
995
|
fn: astroidFn,
|
|
987
996
|
period: TWO_PI3,
|
|
988
|
-
speed: 1.1
|
|
997
|
+
speed: 1.1
|
|
989
998
|
};
|
|
990
999
|
|
|
991
1000
|
// src/curves/deltoid.ts
|
|
@@ -993,14 +1002,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
993
1002
|
function deltoidFn(t, _time, _params) {
|
|
994
1003
|
return {
|
|
995
1004
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
996
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1005
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
997
1006
|
};
|
|
998
1007
|
}
|
|
999
1008
|
var deltoid = {
|
|
1000
1009
|
name: "Deltoid",
|
|
1001
1010
|
fn: deltoidFn,
|
|
1002
1011
|
period: TWO_PI4,
|
|
1003
|
-
speed: 0.9
|
|
1012
|
+
speed: 0.9
|
|
1004
1013
|
};
|
|
1005
1014
|
|
|
1006
1015
|
// src/curves/epicycloid3.ts
|
|
@@ -1008,14 +1017,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
1008
1017
|
function epicycloid3Fn(t, _time, _params) {
|
|
1009
1018
|
return {
|
|
1010
1019
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
1011
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1020
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1012
1021
|
};
|
|
1013
1022
|
}
|
|
1014
1023
|
var epicycloid3 = {
|
|
1015
1024
|
name: "Epicycloid (n=3)",
|
|
1016
1025
|
fn: epicycloid3Fn,
|
|
1017
1026
|
period: TWO_PI5,
|
|
1018
|
-
speed: 0.75
|
|
1027
|
+
speed: 0.75
|
|
1019
1028
|
};
|
|
1020
1029
|
|
|
1021
1030
|
// src/curves/epitrochoid7.ts
|
|
@@ -1024,14 +1033,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
1024
1033
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
1025
1034
|
return {
|
|
1026
1035
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1027
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1036
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1028
1037
|
};
|
|
1029
1038
|
}
|
|
1030
1039
|
function epitrochoid7SkeletonFn(t) {
|
|
1031
1040
|
const d = 1.275;
|
|
1032
1041
|
return {
|
|
1033
1042
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1034
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1043
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1035
1044
|
};
|
|
1036
1045
|
}
|
|
1037
1046
|
var epitrochoid7 = {
|
|
@@ -1039,7 +1048,7 @@ var epitrochoid7 = {
|
|
|
1039
1048
|
fn: epitrochoid7Fn,
|
|
1040
1049
|
period: TWO_PI6,
|
|
1041
1050
|
speed: 1.4,
|
|
1042
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1051
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
1043
1052
|
};
|
|
1044
1053
|
|
|
1045
1054
|
// src/curves/lissajous32.ts
|
|
@@ -1048,7 +1057,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
1048
1057
|
const phi = time * 0.45;
|
|
1049
1058
|
return {
|
|
1050
1059
|
x: Math.sin(3 * t + phi),
|
|
1051
|
-
y: Math.sin(2 * t)
|
|
1060
|
+
y: Math.sin(2 * t)
|
|
1052
1061
|
};
|
|
1053
1062
|
}
|
|
1054
1063
|
var lissajous32 = {
|
|
@@ -1056,7 +1065,7 @@ var lissajous32 = {
|
|
|
1056
1065
|
fn: lissajous32Fn,
|
|
1057
1066
|
period: TWO_PI7,
|
|
1058
1067
|
speed: 2,
|
|
1059
|
-
skeleton: "live"
|
|
1068
|
+
skeleton: "live"
|
|
1060
1069
|
};
|
|
1061
1070
|
|
|
1062
1071
|
// src/curves/lissajous43.ts
|
|
@@ -1065,7 +1074,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
1065
1074
|
const phi = time * 0.38;
|
|
1066
1075
|
return {
|
|
1067
1076
|
x: Math.sin(4 * t + phi),
|
|
1068
|
-
y: Math.sin(3 * t)
|
|
1077
|
+
y: Math.sin(3 * t)
|
|
1069
1078
|
};
|
|
1070
1079
|
}
|
|
1071
1080
|
var lissajous43 = {
|
|
@@ -1073,18 +1082,17 @@ var lissajous43 = {
|
|
|
1073
1082
|
fn: lissajous43Fn,
|
|
1074
1083
|
period: TWO_PI8,
|
|
1075
1084
|
speed: 1.8,
|
|
1076
|
-
skeleton: "live"
|
|
1085
|
+
skeleton: "live"
|
|
1077
1086
|
};
|
|
1078
1087
|
|
|
1079
1088
|
// src/curves/lame.ts
|
|
1080
1089
|
var TWO_PI9 = Math.PI * 2;
|
|
1081
1090
|
function lameFn(t, time, _params) {
|
|
1082
1091
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1083
|
-
const c = Math.cos(t),
|
|
1084
|
-
s = Math.sin(t);
|
|
1092
|
+
const c = Math.cos(t), s = Math.sin(t);
|
|
1085
1093
|
return {
|
|
1086
1094
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1087
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1095
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1088
1096
|
};
|
|
1089
1097
|
}
|
|
1090
1098
|
var lame = {
|
|
@@ -1092,7 +1100,7 @@ var lame = {
|
|
|
1092
1100
|
fn: lameFn,
|
|
1093
1101
|
period: TWO_PI9,
|
|
1094
1102
|
speed: 1,
|
|
1095
|
-
skeleton: "live"
|
|
1103
|
+
skeleton: "live"
|
|
1096
1104
|
};
|
|
1097
1105
|
|
|
1098
1106
|
// src/curves/rose3.ts
|
|
@@ -1101,14 +1109,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
1101
1109
|
const r = Math.cos(3 * t);
|
|
1102
1110
|
return {
|
|
1103
1111
|
x: r * Math.cos(t),
|
|
1104
|
-
y: r * Math.sin(t)
|
|
1112
|
+
y: r * Math.sin(t)
|
|
1105
1113
|
};
|
|
1106
1114
|
}
|
|
1107
1115
|
var rose3 = {
|
|
1108
1116
|
name: "Rose (n=3)",
|
|
1109
1117
|
fn: rose3Fn,
|
|
1110
1118
|
period: TWO_PI10,
|
|
1111
|
-
speed: 1.15
|
|
1119
|
+
speed: 1.15
|
|
1112
1120
|
};
|
|
1113
1121
|
|
|
1114
1122
|
// src/curves/rose5.ts
|
|
@@ -1117,14 +1125,14 @@ function rose5Fn(t, _time, _params) {
|
|
|
1117
1125
|
const r = Math.cos(5 * t);
|
|
1118
1126
|
return {
|
|
1119
1127
|
x: r * Math.cos(t),
|
|
1120
|
-
y: r * Math.sin(t)
|
|
1128
|
+
y: r * Math.sin(t)
|
|
1121
1129
|
};
|
|
1122
1130
|
}
|
|
1123
1131
|
var rose5 = {
|
|
1124
1132
|
name: "Rose (n=5)",
|
|
1125
1133
|
fn: rose5Fn,
|
|
1126
1134
|
period: TWO_PI11,
|
|
1127
|
-
speed: 1
|
|
1135
|
+
speed: 1
|
|
1128
1136
|
};
|
|
1129
1137
|
|
|
1130
1138
|
// src/curves/index.ts
|
|
@@ -1138,7 +1146,7 @@ var curves = {
|
|
|
1138
1146
|
lissajous32,
|
|
1139
1147
|
lissajous43,
|
|
1140
1148
|
epicycloid3,
|
|
1141
|
-
lame
|
|
1149
|
+
lame
|
|
1142
1150
|
};
|
|
1143
1151
|
|
|
1144
1152
|
// src/index.ts
|
|
@@ -1148,23 +1156,6 @@ function createSarmal(canvas, curveDef, options) {
|
|
|
1148
1156
|
return createRenderer({ canvas, engine, ...rendererOpts });
|
|
1149
1157
|
}
|
|
1150
1158
|
|
|
1151
|
-
export {
|
|
1152
|
-
artemis2,
|
|
1153
|
-
astroid,
|
|
1154
|
-
createEngine,
|
|
1155
|
-
createRenderer,
|
|
1156
|
-
createSVGRenderer,
|
|
1157
|
-
createSarmal,
|
|
1158
|
-
createSarmalSVG,
|
|
1159
|
-
curves,
|
|
1160
|
-
deltoid,
|
|
1161
|
-
epicycloid3,
|
|
1162
|
-
epitrochoid7,
|
|
1163
|
-
lame,
|
|
1164
|
-
lissajous32,
|
|
1165
|
-
lissajous43,
|
|
1166
|
-
rose3,
|
|
1167
|
-
rose5,
|
|
1168
|
-
};
|
|
1169
|
-
//# sourceMappingURL=index.js.map
|
|
1159
|
+
export { artemis2, astroid, createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves, deltoid, epicycloid3, epitrochoid7, lame, lissajous32, lissajous43, rose3, rose5 };
|
|
1170
1160
|
//# sourceMappingURL=index.js.map
|
|
1161
|
+
//# sourceMappingURL=index.js.map
|