@sarmal/core 0.17.1 → 0.18.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 +113 -89
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.js +112 -88
- package/dist/auto-init.js.map +1 -1
- package/dist/curves/artemis2.cjs +10 -7
- package/dist/curves/artemis2.d.cts +1 -1
- package/dist/curves/artemis2.d.ts +1 -1
- package/dist/curves/artemis2.js +9 -6
- 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 +53 -40
- package/dist/curves/index.d.cts +29 -29
- package/dist/curves/index.d.ts +29 -29
- package/dist/curves/index.js +69 -40
- package/dist/curves/lame.cjs +6 -5
- package/dist/curves/lame.d.cts +1 -1
- package/dist/curves/lame.d.ts +1 -1
- package/dist/curves/lame.js +5 -4
- 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/curves/rose52.cjs +5 -5
- package/dist/curves/rose52.d.cts +1 -1
- package/dist/curves/rose52.d.ts +1 -1
- package/dist/curves/rose52.js +4 -4
- package/dist/curves/star.cjs +8 -5
- package/dist/curves/star.d.cts +1 -1
- package/dist/curves/star.d.ts +1 -1
- package/dist/curves/star.js +7 -4
- package/dist/curves/star4.cjs +8 -5
- package/dist/curves/star4.d.cts +1 -1
- package/dist/curves/star4.d.ts +1 -1
- package/dist/curves/star4.js +7 -4
- package/dist/curves/star7.cjs +8 -5
- package/dist/curves/star7.d.cts +1 -1
- package/dist/curves/star7.d.ts +1 -1
- package/dist/curves/star7.js +7 -4
- package/dist/index.cjs +125 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +74 -35
- package/dist/index.d.ts +74 -35
- package/dist/index.js +143 -93
- package/dist/index.js.map +1 -1
- package/dist/types-frtEoAq6.d.cts +317 -0
- package/dist/types-frtEoAq6.d.ts +317 -0
- package/package.json +1 -1
- package/dist/types-BL9HhEmk.d.cts +0 -299
- package/dist/types-BL9HhEmk.d.ts +0 -299
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
// src/engine.ts
|
|
4
4
|
var TWO_PI = Math.PI * 2;
|
|
@@ -63,13 +63,13 @@ function resolveCurve(curveDef) {
|
|
|
63
63
|
period,
|
|
64
64
|
speed,
|
|
65
65
|
skeleton: curveDef.skeleton,
|
|
66
|
-
skeletonFn: curveDef.skeletonFn
|
|
66
|
+
skeletonFn: curveDef.skeletonFn,
|
|
67
67
|
};
|
|
68
68
|
}
|
|
69
69
|
function createEngine(curveDef, trailLength = 120) {
|
|
70
70
|
if (!Number.isFinite(trailLength) || trailLength <= 0) {
|
|
71
71
|
throw new RangeError(
|
|
72
|
-
`[sarmal] trailLength must be a positive finite number, got ${trailLength}
|
|
72
|
+
`[sarmal] trailLength must be a positive finite number, got ${trailLength}`,
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
75
|
let curve = resolveCurve(curveDef);
|
|
@@ -110,7 +110,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
110
110
|
actualTime += deltaTime;
|
|
111
111
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
112
112
|
const a = curve.fn(t, actualTime, EMPTY_PARAMS);
|
|
113
|
-
const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
|
|
113
|
+
const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
|
|
114
114
|
const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
|
|
115
115
|
trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
|
|
116
116
|
} else {
|
|
@@ -122,6 +122,9 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
122
122
|
get trailCount() {
|
|
123
123
|
return trail.length;
|
|
124
124
|
},
|
|
125
|
+
get trailLength() {
|
|
126
|
+
return trailLength;
|
|
127
|
+
},
|
|
125
128
|
get isLiveSkeleton() {
|
|
126
129
|
return curve.skeleton === "live";
|
|
127
130
|
},
|
|
@@ -134,14 +137,14 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
134
137
|
trail.clear();
|
|
135
138
|
},
|
|
136
139
|
jump(newT, { clearTrail = false } = {}) {
|
|
137
|
-
t = (newT % curve.period + curve.period) % curve.period;
|
|
140
|
+
t = ((newT % curve.period) + curve.period) % curve.period;
|
|
138
141
|
if (clearTrail) {
|
|
139
142
|
trail.clear();
|
|
140
143
|
}
|
|
141
144
|
},
|
|
142
145
|
seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
143
146
|
const advance = curve.speed * step;
|
|
144
|
-
const target = (targetT % curve.period + curve.period) % curve.period;
|
|
147
|
+
const target = ((targetT % curve.period) + curve.period) % curve.period;
|
|
145
148
|
const targetTime = target / curve.speed;
|
|
146
149
|
t = target;
|
|
147
150
|
actualTime = targetTime;
|
|
@@ -150,7 +153,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
150
153
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
151
154
|
for (let i = count - 1; i >= 0; i--) {
|
|
152
155
|
const sampleT = target - i * advance;
|
|
153
|
-
const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
|
|
156
|
+
const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
|
|
154
157
|
const time = targetTime - i * step;
|
|
155
158
|
const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
|
|
156
159
|
trail.push(point.x, point.y);
|
|
@@ -167,13 +170,16 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
167
170
|
...frozenB,
|
|
168
171
|
fn: (sampleT, time, params) => {
|
|
169
172
|
const a = frozenA.fn(sampleT, time, params);
|
|
170
|
-
const tB =
|
|
173
|
+
const tB =
|
|
174
|
+
frozenStrategy === "normalized"
|
|
175
|
+
? (sampleT / frozenA.period) * frozenB.period
|
|
176
|
+
: sampleT;
|
|
171
177
|
const b = frozenB.fn(tB, time, params);
|
|
172
178
|
return {
|
|
173
179
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
174
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
180
|
+
y: a.y + (b.y - a.y) * frozenAlpha,
|
|
175
181
|
};
|
|
176
|
-
}
|
|
182
|
+
},
|
|
177
183
|
};
|
|
178
184
|
}
|
|
179
185
|
_morphStrategy = strategy;
|
|
@@ -186,7 +192,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
186
192
|
completeMorph() {
|
|
187
193
|
if (morphCurveB !== null) {
|
|
188
194
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
189
|
-
t = t / curve.period * morphCurveB.period;
|
|
195
|
+
t = (t / curve.period) * morphCurveB.period;
|
|
190
196
|
}
|
|
191
197
|
curve = morphCurveB;
|
|
192
198
|
}
|
|
@@ -198,19 +204,22 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
198
204
|
const points = new Array(steps);
|
|
199
205
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
200
206
|
for (let i = 0; i < steps; i++) {
|
|
201
|
-
const sampleT = i / (steps - 1) * curve.period;
|
|
207
|
+
const sampleT = (i / (steps - 1)) * curve.period;
|
|
202
208
|
const a = sampleSkeleton(curve, sampleT);
|
|
203
|
-
const tB =
|
|
209
|
+
const tB =
|
|
210
|
+
_morphStrategy === "normalized"
|
|
211
|
+
? (sampleT / curve.period) * morphCurveB.period
|
|
212
|
+
: sampleT;
|
|
204
213
|
const b = sampleSkeleton(morphCurveB, tB);
|
|
205
214
|
points[i] = {
|
|
206
215
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
207
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
216
|
+
y: a.y + (b.y - a.y) * _morphAlpha,
|
|
208
217
|
};
|
|
209
218
|
}
|
|
210
219
|
return points;
|
|
211
220
|
}
|
|
212
221
|
for (let i = 0; i < steps; i++) {
|
|
213
|
-
const sampleT = i / (steps - 1) * curve.period;
|
|
222
|
+
const sampleT = (i / (steps - 1)) * curve.period;
|
|
214
223
|
points[i] = sampleSkeleton(curve, sampleT);
|
|
215
224
|
}
|
|
216
225
|
return points;
|
|
@@ -252,7 +261,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
252
261
|
_speedTransition.reject(new Error("Speed transition cancelled"));
|
|
253
262
|
_speedTransition = null;
|
|
254
263
|
}
|
|
255
|
-
}
|
|
264
|
+
},
|
|
256
265
|
};
|
|
257
266
|
}
|
|
258
267
|
|
|
@@ -315,13 +324,16 @@ function computeTrailQuad(trail, i, trailCount, toX, toY) {
|
|
|
315
324
|
r1x: nx - n1.x * w1,
|
|
316
325
|
r1y: ny - n1.y * w1,
|
|
317
326
|
opacity,
|
|
318
|
-
progress
|
|
327
|
+
progress,
|
|
319
328
|
};
|
|
320
329
|
}
|
|
321
330
|
function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
322
331
|
if (pts.length === 0) return null;
|
|
323
332
|
const first = pts[0];
|
|
324
|
-
let minX = first.x,
|
|
333
|
+
let minX = first.x,
|
|
334
|
+
maxX = first.x,
|
|
335
|
+
minY = first.y,
|
|
336
|
+
maxY = first.y;
|
|
325
337
|
for (const p of pts) {
|
|
326
338
|
if (p.x < minX) {
|
|
327
339
|
minX = p.x;
|
|
@@ -340,7 +352,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
340
352
|
const h = maxY - minY;
|
|
341
353
|
if (w === 0 && h === 0) {
|
|
342
354
|
throw new Error(
|
|
343
|
-
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
355
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
|
|
344
356
|
);
|
|
345
357
|
}
|
|
346
358
|
const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
|
|
@@ -351,12 +363,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
351
363
|
scaleXProportional,
|
|
352
364
|
scaleYProportional,
|
|
353
365
|
scaleXMinPadding,
|
|
354
|
-
scaleYMinPadding
|
|
366
|
+
scaleYMinPadding,
|
|
355
367
|
);
|
|
356
368
|
return {
|
|
357
369
|
scale,
|
|
358
370
|
offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
|
|
359
|
-
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
371
|
+
offsetY: (logicalHeight - h * scale) / 2 - minY * scale,
|
|
360
372
|
};
|
|
361
373
|
}
|
|
362
374
|
function enginePassthroughs(engine) {
|
|
@@ -366,7 +378,7 @@ function enginePassthroughs(engine) {
|
|
|
366
378
|
setSpeed: engine.setSpeed,
|
|
367
379
|
getSpeed: engine.getSpeed,
|
|
368
380
|
resetSpeed: engine.resetSpeed,
|
|
369
|
-
setSpeedOver: engine.setSpeedOver
|
|
381
|
+
setSpeedOver: engine.setSpeedOver,
|
|
370
382
|
};
|
|
371
383
|
}
|
|
372
384
|
var palettes = {
|
|
@@ -375,16 +387,16 @@ var palettes = {
|
|
|
375
387
|
ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
|
|
376
388
|
ice: ["#1e3a8a", "#67e8f9"],
|
|
377
389
|
fire: ["#7f1d1d", "#fbbf24"],
|
|
378
|
-
forest: ["#14532d", "#86efac"]
|
|
390
|
+
forest: ["#14532d", "#86efac"],
|
|
379
391
|
};
|
|
380
392
|
function hexToRgb(hex) {
|
|
381
393
|
const n = parseInt(hex.slice(1), 16);
|
|
382
|
-
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
394
|
+
return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
|
|
383
395
|
}
|
|
384
396
|
var lerpRgb = (a, b, t) => ({
|
|
385
397
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
386
398
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
387
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
399
|
+
b: Math.round(a.b + (b.b - a.b) * t),
|
|
388
400
|
});
|
|
389
401
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
390
402
|
if (palette.length === 0) {
|
|
@@ -393,7 +405,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
|
|
|
393
405
|
if (palette.length === 1) {
|
|
394
406
|
return hexToRgb(palette[0]);
|
|
395
407
|
}
|
|
396
|
-
const cyclePos = (position + timeOffset) % 1;
|
|
408
|
+
const cyclePos = (((position + timeOffset) % 1) + 1) % 1;
|
|
397
409
|
const scaled = cyclePos * palette.length;
|
|
398
410
|
const idx = Math.floor(scaled);
|
|
399
411
|
const t = scaled - idx;
|
|
@@ -407,7 +419,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
|
|
|
407
419
|
"trailColor",
|
|
408
420
|
"headColor",
|
|
409
421
|
"skeletonColor",
|
|
410
|
-
"trailStyle"
|
|
422
|
+
"trailStyle",
|
|
411
423
|
]);
|
|
412
424
|
function validateRenderOptions(partial) {
|
|
413
425
|
for (const key of Object.keys(partial)) {
|
|
@@ -432,7 +444,7 @@ function assertTrailColor(value) {
|
|
|
432
444
|
if (typeof value === "string") {
|
|
433
445
|
if (!HEX_COLOR_RE.test(value)) {
|
|
434
446
|
throw new TypeError(
|
|
435
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"
|
|
447
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`,
|
|
436
448
|
);
|
|
437
449
|
}
|
|
438
450
|
return;
|
|
@@ -440,21 +452,21 @@ function assertTrailColor(value) {
|
|
|
440
452
|
if (Array.isArray(value)) {
|
|
441
453
|
if (value.length < 2) {
|
|
442
454
|
throw new RangeError(
|
|
443
|
-
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}
|
|
455
|
+
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`,
|
|
444
456
|
);
|
|
445
457
|
}
|
|
446
458
|
for (let i = 0; i < value.length; i++) {
|
|
447
459
|
const entry = value[i];
|
|
448
460
|
if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
|
|
449
461
|
throw new TypeError(
|
|
450
|
-
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}
|
|
462
|
+
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`,
|
|
451
463
|
);
|
|
452
464
|
}
|
|
453
465
|
}
|
|
454
466
|
return;
|
|
455
467
|
}
|
|
456
468
|
throw new TypeError(
|
|
457
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}
|
|
469
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`,
|
|
458
470
|
);
|
|
459
471
|
}
|
|
460
472
|
function assertHeadColor(value) {
|
|
@@ -463,7 +475,7 @@ function assertHeadColor(value) {
|
|
|
463
475
|
}
|
|
464
476
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
465
477
|
throw new TypeError(
|
|
466
|
-
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}
|
|
478
|
+
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`,
|
|
467
479
|
);
|
|
468
480
|
}
|
|
469
481
|
}
|
|
@@ -473,14 +485,14 @@ function assertSkeletonColor(value) {
|
|
|
473
485
|
}
|
|
474
486
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
475
487
|
throw new TypeError(
|
|
476
|
-
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}
|
|
488
|
+
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`,
|
|
477
489
|
);
|
|
478
490
|
}
|
|
479
491
|
}
|
|
480
492
|
function assertTrailStyle(value) {
|
|
481
493
|
if (!TRAIL_STYLES.includes(value)) {
|
|
482
494
|
throw new RangeError(
|
|
483
|
-
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}
|
|
495
|
+
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`,
|
|
484
496
|
);
|
|
485
497
|
}
|
|
486
498
|
}
|
|
@@ -502,13 +514,13 @@ function resolveHeadColor(trailColor, trailStyle) {
|
|
|
502
514
|
function warnIfTrailColorMismatch(trailColor, trailStyle) {
|
|
503
515
|
if (trailStyle === "default" && Array.isArray(trailColor)) {
|
|
504
516
|
console.warn(
|
|
505
|
-
'[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
|
|
517
|
+
'[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.',
|
|
506
518
|
);
|
|
507
519
|
return;
|
|
508
520
|
}
|
|
509
521
|
if (trailStyle !== "default" && typeof trailColor === "string") {
|
|
510
522
|
console.warn(
|
|
511
|
-
`[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient
|
|
523
|
+
`[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`,
|
|
512
524
|
);
|
|
513
525
|
}
|
|
514
526
|
}
|
|
@@ -518,7 +530,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
|
|
|
518
530
|
var WHITE_HEX = "#ffffff";
|
|
519
531
|
function hexToRgbComponents(hex) {
|
|
520
532
|
const n = parseInt(hex.slice(1), 16);
|
|
521
|
-
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
533
|
+
return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
|
|
522
534
|
}
|
|
523
535
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
524
536
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -643,7 +655,7 @@ function createRenderer(options) {
|
|
|
643
655
|
i,
|
|
644
656
|
trailCount,
|
|
645
657
|
toX,
|
|
646
|
-
toY
|
|
658
|
+
toY,
|
|
647
659
|
);
|
|
648
660
|
if (trailStyle === "default") {
|
|
649
661
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -804,7 +816,7 @@ function createRenderer(options) {
|
|
|
804
816
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
805
817
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
806
818
|
}
|
|
807
|
-
}
|
|
819
|
+
},
|
|
808
820
|
};
|
|
809
821
|
if (shouldAutoStart) {
|
|
810
822
|
instance.play();
|
|
@@ -813,10 +825,12 @@ function createRenderer(options) {
|
|
|
813
825
|
}
|
|
814
826
|
|
|
815
827
|
// src/renderer-svg.ts
|
|
816
|
-
var MAX_TRAIL_SEGMENTS = 200;
|
|
817
828
|
var EMPTY_PARAMS2 = {};
|
|
829
|
+
var HIGH_TRAIL_LENGTH_THRESHOLD = 5e3;
|
|
818
830
|
function pointsToPathString(pts, scale, offsetX, offsetY) {
|
|
819
|
-
if (pts.length < 2)
|
|
831
|
+
if (pts.length < 2) {
|
|
832
|
+
return "";
|
|
833
|
+
}
|
|
820
834
|
const px = (p) => (p.x * scale + offsetX).toFixed(2);
|
|
821
835
|
const py = (p) => (p.y * scale + offsetY).toFixed(2);
|
|
822
836
|
let d = `M${px(pts[0])} ${py(pts[0])}`;
|
|
@@ -830,7 +844,7 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
830
844
|
const samples = Math.ceil(period * 50);
|
|
831
845
|
const pts = Array.from({ length: samples });
|
|
832
846
|
for (let i = 0; i < samples; i++) {
|
|
833
|
-
const t = i / (samples - 1) * period;
|
|
847
|
+
const t = (i / (samples - 1)) * period;
|
|
834
848
|
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
|
|
835
849
|
}
|
|
836
850
|
return pts;
|
|
@@ -840,6 +854,12 @@ function el(tag) {
|
|
|
840
854
|
}
|
|
841
855
|
function createSVGRenderer(options) {
|
|
842
856
|
const { container, engine } = options;
|
|
857
|
+
const poolSize = engine.trailLength;
|
|
858
|
+
if (poolSize > HIGH_TRAIL_LENGTH_THRESHOLD) {
|
|
859
|
+
console.warn(
|
|
860
|
+
`[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`,
|
|
861
|
+
);
|
|
862
|
+
}
|
|
843
863
|
let trailStyle = options.trailStyle ?? "default";
|
|
844
864
|
let trailColor = options.trailColor ?? "#ffffff";
|
|
845
865
|
let skeletonColor = options.skeletonColor ?? "#ffffff";
|
|
@@ -887,7 +907,7 @@ function createSVGRenderer(options) {
|
|
|
887
907
|
let morphPathABuilt = "";
|
|
888
908
|
let morphPathBBuilt = "";
|
|
889
909
|
const trailPaths = [];
|
|
890
|
-
for (let i = 0; i <
|
|
910
|
+
for (let i = 0; i < poolSize; i++) {
|
|
891
911
|
const path = el("path");
|
|
892
912
|
path.setAttribute("fill", trailSolid);
|
|
893
913
|
svg.appendChild(path);
|
|
@@ -932,24 +952,22 @@ function createSVGRenderer(options) {
|
|
|
932
952
|
}
|
|
933
953
|
return;
|
|
934
954
|
}
|
|
935
|
-
const
|
|
936
|
-
|
|
937
|
-
for (let i = startIdx; i < trailCount - 1; i++) {
|
|
938
|
-
const j = i - startIdx;
|
|
955
|
+
const drawnCount = trailCount - 1;
|
|
956
|
+
for (let i = 0; i < drawnCount; i++) {
|
|
939
957
|
const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
|
|
940
958
|
trail,
|
|
941
959
|
i,
|
|
942
960
|
trailCount,
|
|
943
961
|
px,
|
|
944
|
-
py
|
|
962
|
+
py,
|
|
945
963
|
);
|
|
946
964
|
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`;
|
|
947
|
-
trailPaths[
|
|
948
|
-
trailPaths[
|
|
965
|
+
trailPaths[i].setAttribute("d", d);
|
|
966
|
+
trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
|
|
949
967
|
if (trailStyle !== "default") {
|
|
950
968
|
const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
|
|
951
969
|
const { r, g, b } = getPaletteColor(trailPalette, progress, timeOffset);
|
|
952
|
-
trailPaths[
|
|
970
|
+
trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
|
|
953
971
|
}
|
|
954
972
|
}
|
|
955
973
|
for (let i = drawnCount; i < trailPaths.length; i++) {
|
|
@@ -968,7 +986,8 @@ function createSVGRenderer(options) {
|
|
|
968
986
|
}
|
|
969
987
|
let animationId = null;
|
|
970
988
|
let lastTime = 0;
|
|
971
|
-
const prefersReducedMotion =
|
|
989
|
+
const prefersReducedMotion =
|
|
990
|
+
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
972
991
|
let morphResolve = null;
|
|
973
992
|
let morphReject = null;
|
|
974
993
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
@@ -986,7 +1005,7 @@ function createSVGRenderer(options) {
|
|
|
986
1005
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
987
1006
|
skeletonPathA.setAttribute(
|
|
988
1007
|
"stroke-opacity",
|
|
989
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
1008
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY),
|
|
990
1009
|
);
|
|
991
1010
|
}
|
|
992
1011
|
if (morphPathBBuilt) {
|
|
@@ -1135,7 +1154,7 @@ function createSVGRenderer(options) {
|
|
|
1135
1154
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
1136
1155
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
1137
1156
|
}
|
|
1138
|
-
}
|
|
1157
|
+
},
|
|
1139
1158
|
};
|
|
1140
1159
|
if (shouldAutoStart) {
|
|
1141
1160
|
instance.play();
|
|
@@ -1151,19 +1170,22 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
1151
1170
|
// src/curves/artemis2.ts
|
|
1152
1171
|
var TWO_PI2 = Math.PI * 2;
|
|
1153
1172
|
function artemis2Fn(t, _time, _params) {
|
|
1154
|
-
const a = 0.35,
|
|
1155
|
-
|
|
1173
|
+
const a = 0.35,
|
|
1174
|
+
b = 0.15,
|
|
1175
|
+
ox = 0.175;
|
|
1176
|
+
const s = Math.sin(t),
|
|
1177
|
+
c = Math.cos(t);
|
|
1156
1178
|
const denom = 1 + s * s;
|
|
1157
1179
|
return {
|
|
1158
|
-
x: c * (1 + a * c) / denom - ox,
|
|
1159
|
-
y: s * c * (1 + b * c) / denom
|
|
1180
|
+
x: (c * (1 + a * c)) / denom - ox,
|
|
1181
|
+
y: (s * c * (1 + b * c)) / denom,
|
|
1160
1182
|
};
|
|
1161
1183
|
}
|
|
1162
1184
|
var artemis2 = {
|
|
1163
1185
|
name: "Artemis II",
|
|
1164
1186
|
fn: artemis2Fn,
|
|
1165
1187
|
period: TWO_PI2,
|
|
1166
|
-
speed: 0.7
|
|
1188
|
+
speed: 0.7,
|
|
1167
1189
|
};
|
|
1168
1190
|
|
|
1169
1191
|
// src/curves/astroid.ts
|
|
@@ -1173,14 +1195,14 @@ function astroidFn(t, _time, _params) {
|
|
|
1173
1195
|
const s = Math.sin(t);
|
|
1174
1196
|
return {
|
|
1175
1197
|
x: c * c * c,
|
|
1176
|
-
y: s * s * s
|
|
1198
|
+
y: s * s * s,
|
|
1177
1199
|
};
|
|
1178
1200
|
}
|
|
1179
1201
|
var astroid = {
|
|
1180
1202
|
name: "Astroid",
|
|
1181
1203
|
fn: astroidFn,
|
|
1182
1204
|
period: TWO_PI3,
|
|
1183
|
-
speed: 1.1
|
|
1205
|
+
speed: 1.1,
|
|
1184
1206
|
};
|
|
1185
1207
|
|
|
1186
1208
|
// src/curves/deltoid.ts
|
|
@@ -1188,14 +1210,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
1188
1210
|
function deltoidFn(t, _time, _params) {
|
|
1189
1211
|
return {
|
|
1190
1212
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
1191
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1213
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t),
|
|
1192
1214
|
};
|
|
1193
1215
|
}
|
|
1194
1216
|
var deltoid = {
|
|
1195
1217
|
name: "Deltoid",
|
|
1196
1218
|
fn: deltoidFn,
|
|
1197
1219
|
period: TWO_PI4,
|
|
1198
|
-
speed: 0.9
|
|
1220
|
+
speed: 0.9,
|
|
1199
1221
|
};
|
|
1200
1222
|
|
|
1201
1223
|
// src/curves/epicycloid3.ts
|
|
@@ -1203,14 +1225,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
1203
1225
|
function epicycloid3Fn(t, _time, _params) {
|
|
1204
1226
|
return {
|
|
1205
1227
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
1206
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1228
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t),
|
|
1207
1229
|
};
|
|
1208
1230
|
}
|
|
1209
1231
|
var epicycloid3 = {
|
|
1210
1232
|
name: "Epicycloid (n=3)",
|
|
1211
1233
|
fn: epicycloid3Fn,
|
|
1212
1234
|
period: TWO_PI5,
|
|
1213
|
-
speed: 0.75
|
|
1235
|
+
speed: 0.75,
|
|
1214
1236
|
};
|
|
1215
1237
|
|
|
1216
1238
|
// src/curves/epitrochoid7.ts
|
|
@@ -1219,14 +1241,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
1219
1241
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
1220
1242
|
return {
|
|
1221
1243
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1222
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1244
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t),
|
|
1223
1245
|
};
|
|
1224
1246
|
}
|
|
1225
1247
|
function epitrochoid7SkeletonFn(t) {
|
|
1226
1248
|
const d = 1.275;
|
|
1227
1249
|
return {
|
|
1228
1250
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1229
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1251
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t),
|
|
1230
1252
|
};
|
|
1231
1253
|
}
|
|
1232
1254
|
var epitrochoid7 = {
|
|
@@ -1234,7 +1256,7 @@ var epitrochoid7 = {
|
|
|
1234
1256
|
fn: epitrochoid7Fn,
|
|
1235
1257
|
period: TWO_PI6,
|
|
1236
1258
|
speed: 1.4,
|
|
1237
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1259
|
+
skeletonFn: epitrochoid7SkeletonFn,
|
|
1238
1260
|
};
|
|
1239
1261
|
|
|
1240
1262
|
// src/curves/lissajous32.ts
|
|
@@ -1243,7 +1265,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
1243
1265
|
const phi = time * 0.45;
|
|
1244
1266
|
return {
|
|
1245
1267
|
x: Math.sin(3 * t + phi),
|
|
1246
|
-
y: Math.sin(2 * t)
|
|
1268
|
+
y: Math.sin(2 * t),
|
|
1247
1269
|
};
|
|
1248
1270
|
}
|
|
1249
1271
|
var lissajous32 = {
|
|
@@ -1251,7 +1273,7 @@ var lissajous32 = {
|
|
|
1251
1273
|
fn: lissajous32Fn,
|
|
1252
1274
|
period: TWO_PI7,
|
|
1253
1275
|
speed: 2,
|
|
1254
|
-
skeleton: "live"
|
|
1276
|
+
skeleton: "live",
|
|
1255
1277
|
};
|
|
1256
1278
|
|
|
1257
1279
|
// src/curves/lissajous43.ts
|
|
@@ -1260,7 +1282,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
1260
1282
|
const phi = time * 0.38;
|
|
1261
1283
|
return {
|
|
1262
1284
|
x: Math.sin(4 * t + phi),
|
|
1263
|
-
y: Math.sin(3 * t)
|
|
1285
|
+
y: Math.sin(3 * t),
|
|
1264
1286
|
};
|
|
1265
1287
|
}
|
|
1266
1288
|
var lissajous43 = {
|
|
@@ -1268,17 +1290,18 @@ var lissajous43 = {
|
|
|
1268
1290
|
fn: lissajous43Fn,
|
|
1269
1291
|
period: TWO_PI8,
|
|
1270
1292
|
speed: 1.8,
|
|
1271
|
-
skeleton: "live"
|
|
1293
|
+
skeleton: "live",
|
|
1272
1294
|
};
|
|
1273
1295
|
|
|
1274
1296
|
// src/curves/lame.ts
|
|
1275
1297
|
var TWO_PI9 = Math.PI * 2;
|
|
1276
1298
|
function lameFn(t, time, _params) {
|
|
1277
1299
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1278
|
-
const c = Math.cos(t),
|
|
1300
|
+
const c = Math.cos(t),
|
|
1301
|
+
s = Math.sin(t);
|
|
1279
1302
|
return {
|
|
1280
1303
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1281
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1304
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p),
|
|
1282
1305
|
};
|
|
1283
1306
|
}
|
|
1284
1307
|
var lame = {
|
|
@@ -1286,7 +1309,7 @@ var lame = {
|
|
|
1286
1309
|
fn: lameFn,
|
|
1287
1310
|
period: TWO_PI9,
|
|
1288
1311
|
speed: 1,
|
|
1289
|
-
skeleton: "live"
|
|
1312
|
+
skeleton: "live",
|
|
1290
1313
|
};
|
|
1291
1314
|
|
|
1292
1315
|
// src/curves/rose3.ts
|
|
@@ -1295,14 +1318,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
1295
1318
|
const r = Math.cos(3 * t);
|
|
1296
1319
|
return {
|
|
1297
1320
|
x: r * Math.cos(t),
|
|
1298
|
-
y: r * Math.sin(t)
|
|
1321
|
+
y: r * Math.sin(t),
|
|
1299
1322
|
};
|
|
1300
1323
|
}
|
|
1301
1324
|
var rose3 = {
|
|
1302
1325
|
name: "Rose (n=3)",
|
|
1303
1326
|
fn: rose3Fn,
|
|
1304
1327
|
period: TWO_PI10,
|
|
1305
|
-
speed: 1.15
|
|
1328
|
+
speed: 1.15,
|
|
1306
1329
|
};
|
|
1307
1330
|
|
|
1308
1331
|
// src/curves/rose5.ts
|
|
@@ -1311,78 +1334,87 @@ function rose5Fn(t, _time, _params) {
|
|
|
1311
1334
|
const r = Math.cos(5 * t);
|
|
1312
1335
|
return {
|
|
1313
1336
|
x: r * Math.cos(t),
|
|
1314
|
-
y: r * Math.sin(t)
|
|
1337
|
+
y: r * Math.sin(t),
|
|
1315
1338
|
};
|
|
1316
1339
|
}
|
|
1317
1340
|
var rose5 = {
|
|
1318
1341
|
name: "Rose (n=5)",
|
|
1319
1342
|
fn: rose5Fn,
|
|
1320
1343
|
period: TWO_PI11,
|
|
1321
|
-
speed: 1
|
|
1344
|
+
speed: 1,
|
|
1322
1345
|
};
|
|
1323
1346
|
|
|
1324
1347
|
// src/curves/rose52.ts
|
|
1325
1348
|
var FOUR_PI = Math.PI * 4;
|
|
1326
1349
|
function rose52Fn(t, _time, _params) {
|
|
1327
|
-
const r = Math.cos(5 / 2 * t);
|
|
1350
|
+
const r = Math.cos((5 / 2) * t);
|
|
1328
1351
|
return {
|
|
1329
1352
|
x: r * Math.cos(t),
|
|
1330
|
-
y: r * Math.sin(t)
|
|
1353
|
+
y: r * Math.sin(t),
|
|
1331
1354
|
};
|
|
1332
1355
|
}
|
|
1333
1356
|
var rose52 = {
|
|
1334
1357
|
name: "Rose (n=5/2)",
|
|
1335
1358
|
fn: rose52Fn,
|
|
1336
1359
|
period: FOUR_PI,
|
|
1337
|
-
speed: 0.8
|
|
1360
|
+
speed: 0.8,
|
|
1338
1361
|
};
|
|
1339
1362
|
|
|
1340
1363
|
// src/curves/star.ts
|
|
1341
1364
|
var TWO_PI12 = Math.PI * 2;
|
|
1342
1365
|
function starFn(t, _time, _params) {
|
|
1343
|
-
const r =
|
|
1366
|
+
const r =
|
|
1367
|
+
Math.abs(Math.cos((5 / 2) * t)) +
|
|
1368
|
+
0.35 * Math.abs(Math.cos((15 / 2) * t)) +
|
|
1369
|
+
0.15 * Math.abs(Math.cos((25 / 2) * t));
|
|
1344
1370
|
return {
|
|
1345
1371
|
x: r * Math.cos(t),
|
|
1346
|
-
y: r * Math.sin(t)
|
|
1372
|
+
y: r * Math.sin(t),
|
|
1347
1373
|
};
|
|
1348
1374
|
}
|
|
1349
1375
|
var star = {
|
|
1350
1376
|
name: "Star",
|
|
1351
1377
|
fn: starFn,
|
|
1352
1378
|
period: TWO_PI12,
|
|
1353
|
-
speed: 1
|
|
1379
|
+
speed: 1,
|
|
1354
1380
|
};
|
|
1355
1381
|
|
|
1356
1382
|
// src/curves/star4.ts
|
|
1357
1383
|
var TWO_PI13 = Math.PI * 2;
|
|
1358
1384
|
function star4Fn(t, _time, _params) {
|
|
1359
|
-
const r =
|
|
1385
|
+
const r =
|
|
1386
|
+
Math.abs(Math.cos(2 * t)) +
|
|
1387
|
+
0.35 * Math.abs(Math.cos(6 * t)) +
|
|
1388
|
+
0.15 * Math.abs(Math.cos(10 * t));
|
|
1360
1389
|
return {
|
|
1361
1390
|
x: r * Math.cos(t),
|
|
1362
|
-
y: r * Math.sin(t)
|
|
1391
|
+
y: r * Math.sin(t),
|
|
1363
1392
|
};
|
|
1364
1393
|
}
|
|
1365
1394
|
var star4 = {
|
|
1366
1395
|
name: "Star (4-arm)",
|
|
1367
1396
|
fn: star4Fn,
|
|
1368
1397
|
period: TWO_PI13,
|
|
1369
|
-
speed: 1
|
|
1398
|
+
speed: 1,
|
|
1370
1399
|
};
|
|
1371
1400
|
|
|
1372
1401
|
// src/curves/star7.ts
|
|
1373
1402
|
var TWO_PI14 = Math.PI * 2;
|
|
1374
1403
|
function star7Fn(t, _time, _params) {
|
|
1375
|
-
const r =
|
|
1404
|
+
const r =
|
|
1405
|
+
Math.abs(Math.cos((7 / 2) * t)) +
|
|
1406
|
+
0.35 * Math.abs(Math.cos((21 / 2) * t)) +
|
|
1407
|
+
0.15 * Math.abs(Math.cos((35 / 2) * t));
|
|
1376
1408
|
return {
|
|
1377
1409
|
x: r * Math.cos(t),
|
|
1378
|
-
y: r * Math.sin(t)
|
|
1410
|
+
y: r * Math.sin(t),
|
|
1379
1411
|
};
|
|
1380
1412
|
}
|
|
1381
1413
|
var star7 = {
|
|
1382
1414
|
name: "Star (7-arm)",
|
|
1383
1415
|
fn: star7Fn,
|
|
1384
1416
|
period: TWO_PI14,
|
|
1385
|
-
speed: 1
|
|
1417
|
+
speed: 1,
|
|
1386
1418
|
};
|
|
1387
1419
|
|
|
1388
1420
|
// src/curves/index.ts
|
|
@@ -1400,7 +1432,7 @@ var curves = {
|
|
|
1400
1432
|
lissajous32,
|
|
1401
1433
|
lissajous43,
|
|
1402
1434
|
epicycloid3,
|
|
1403
|
-
lame
|
|
1435
|
+
lame,
|
|
1404
1436
|
};
|
|
1405
1437
|
|
|
1406
1438
|
// src/index.ts
|
|
@@ -1428,4 +1460,4 @@ exports.palettes = palettes;
|
|
|
1428
1460
|
exports.rose3 = rose3;
|
|
1429
1461
|
exports.rose5 = rose5;
|
|
1430
1462
|
//# sourceMappingURL=index.cjs.map
|
|
1431
|
-
//# sourceMappingURL=index.cjs.map
|
|
1463
|
+
//# sourceMappingURL=index.cjs.map
|