@sarmal/core 0.15.0 → 0.15.1
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 +86 -94
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.d.cts +3 -1
- package/dist/auto-init.d.ts +3 -1
- package/dist/auto-init.js +85 -93
- 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 +78 -94
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +29 -66
- package/dist/index.d.ts +29 -66
- package/dist/index.js +78 -112
- package/dist/index.js.map +1 -1
- package/dist/types-BL9HhEmk.d.cts +246 -259
- package/dist/types-BL9HhEmk.d.ts +246 -259
- package/package.json +1 -1
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" ?
|
|
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 {
|
|
@@ -134,14 +134,14 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
134
134
|
trail.clear();
|
|
135
135
|
},
|
|
136
136
|
jump(newT, { clearTrail = false } = {}) {
|
|
137
|
-
t = (
|
|
137
|
+
t = (newT % curve.period + curve.period) % curve.period;
|
|
138
138
|
if (clearTrail) {
|
|
139
139
|
trail.clear();
|
|
140
140
|
}
|
|
141
141
|
},
|
|
142
142
|
seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
143
143
|
const advance = curve.speed * step;
|
|
144
|
-
const target = (
|
|
144
|
+
const target = (targetT % curve.period + curve.period) % curve.period;
|
|
145
145
|
const targetTime = target / curve.speed;
|
|
146
146
|
t = target;
|
|
147
147
|
actualTime = targetTime;
|
|
@@ -150,7 +150,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
150
150
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
151
151
|
for (let i = count - 1; i >= 0; i--) {
|
|
152
152
|
const sampleT = target - i * advance;
|
|
153
|
-
const wrappedT = (
|
|
153
|
+
const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
|
|
154
154
|
const time = targetTime - i * step;
|
|
155
155
|
const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
|
|
156
156
|
trail.push(point.x, point.y);
|
|
@@ -167,16 +167,13 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
167
167
|
...frozenB,
|
|
168
168
|
fn: (sampleT, time, params) => {
|
|
169
169
|
const a = frozenA.fn(sampleT, time, params);
|
|
170
|
-
const tB =
|
|
171
|
-
frozenStrategy === "normalized"
|
|
172
|
-
? (sampleT / frozenA.period) * frozenB.period
|
|
173
|
-
: sampleT;
|
|
170
|
+
const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
|
|
174
171
|
const b = frozenB.fn(tB, time, params);
|
|
175
172
|
return {
|
|
176
173
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
177
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
174
|
+
y: a.y + (b.y - a.y) * frozenAlpha
|
|
178
175
|
};
|
|
179
|
-
}
|
|
176
|
+
}
|
|
180
177
|
};
|
|
181
178
|
}
|
|
182
179
|
_morphStrategy = strategy;
|
|
@@ -189,7 +186,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
189
186
|
completeMorph() {
|
|
190
187
|
if (morphCurveB !== null) {
|
|
191
188
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
192
|
-
t =
|
|
189
|
+
t = t / curve.period * morphCurveB.period;
|
|
193
190
|
}
|
|
194
191
|
curve = morphCurveB;
|
|
195
192
|
}
|
|
@@ -201,22 +198,19 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
201
198
|
const points = new Array(steps);
|
|
202
199
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
203
200
|
for (let i = 0; i < steps; i++) {
|
|
204
|
-
const sampleT =
|
|
201
|
+
const sampleT = i / (steps - 1) * curve.period;
|
|
205
202
|
const a = sampleSkeleton(curve, sampleT);
|
|
206
|
-
const tB =
|
|
207
|
-
_morphStrategy === "normalized"
|
|
208
|
-
? (sampleT / curve.period) * morphCurveB.period
|
|
209
|
-
: sampleT;
|
|
203
|
+
const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
|
|
210
204
|
const b = sampleSkeleton(morphCurveB, tB);
|
|
211
205
|
points[i] = {
|
|
212
206
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
213
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
207
|
+
y: a.y + (b.y - a.y) * _morphAlpha
|
|
214
208
|
};
|
|
215
209
|
}
|
|
216
210
|
return points;
|
|
217
211
|
}
|
|
218
212
|
for (let i = 0; i < steps; i++) {
|
|
219
|
-
const sampleT =
|
|
213
|
+
const sampleT = i / (steps - 1) * curve.period;
|
|
220
214
|
points[i] = sampleSkeleton(curve, sampleT);
|
|
221
215
|
}
|
|
222
216
|
return points;
|
|
@@ -258,7 +252,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
258
252
|
_speedTransition.reject(new Error("Speed transition cancelled"));
|
|
259
253
|
_speedTransition = null;
|
|
260
254
|
}
|
|
261
|
-
}
|
|
255
|
+
}
|
|
262
256
|
};
|
|
263
257
|
}
|
|
264
258
|
|
|
@@ -321,16 +315,13 @@ function computeTrailQuad(trail, i, trailCount, toX, toY) {
|
|
|
321
315
|
r1x: nx - n1.x * w1,
|
|
322
316
|
r1y: ny - n1.y * w1,
|
|
323
317
|
opacity,
|
|
324
|
-
progress
|
|
318
|
+
progress
|
|
325
319
|
};
|
|
326
320
|
}
|
|
327
321
|
function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
328
322
|
if (pts.length === 0) return null;
|
|
329
323
|
const first = pts[0];
|
|
330
|
-
let minX = first.x,
|
|
331
|
-
maxX = first.x,
|
|
332
|
-
minY = first.y,
|
|
333
|
-
maxY = first.y;
|
|
324
|
+
let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
|
|
334
325
|
for (const p of pts) {
|
|
335
326
|
if (p.x < minX) {
|
|
336
327
|
minX = p.x;
|
|
@@ -349,7 +340,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
349
340
|
const h = maxY - minY;
|
|
350
341
|
if (w === 0 && h === 0) {
|
|
351
342
|
throw new Error(
|
|
352
|
-
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
343
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
353
344
|
);
|
|
354
345
|
}
|
|
355
346
|
const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
|
|
@@ -360,12 +351,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
360
351
|
scaleXProportional,
|
|
361
352
|
scaleYProportional,
|
|
362
353
|
scaleXMinPadding,
|
|
363
|
-
scaleYMinPadding
|
|
354
|
+
scaleYMinPadding
|
|
364
355
|
);
|
|
365
356
|
return {
|
|
366
357
|
scale,
|
|
367
358
|
offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
|
|
368
|
-
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
359
|
+
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
369
360
|
};
|
|
370
361
|
}
|
|
371
362
|
function enginePassthroughs(engine) {
|
|
@@ -375,7 +366,7 @@ function enginePassthroughs(engine) {
|
|
|
375
366
|
setSpeed: engine.setSpeed,
|
|
376
367
|
getSpeed: engine.getSpeed,
|
|
377
368
|
resetSpeed: engine.resetSpeed,
|
|
378
|
-
setSpeedOver: engine.setSpeedOver
|
|
369
|
+
setSpeedOver: engine.setSpeedOver
|
|
379
370
|
};
|
|
380
371
|
}
|
|
381
372
|
var palettes = {
|
|
@@ -384,16 +375,16 @@ var palettes = {
|
|
|
384
375
|
ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
|
|
385
376
|
ice: ["#1e3a8a", "#67e8f9"],
|
|
386
377
|
fire: ["#7f1d1d", "#fbbf24"],
|
|
387
|
-
forest: ["#14532d", "#86efac"]
|
|
378
|
+
forest: ["#14532d", "#86efac"]
|
|
388
379
|
};
|
|
389
380
|
function hexToRgb(hex) {
|
|
390
381
|
const n = parseInt(hex.slice(1), 16);
|
|
391
|
-
return { r: n >> 16, g:
|
|
382
|
+
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
392
383
|
}
|
|
393
384
|
var lerpRgb = (a, b, t) => ({
|
|
394
385
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
395
386
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
396
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
387
|
+
b: Math.round(a.b + (b.b - a.b) * t)
|
|
397
388
|
});
|
|
398
389
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
399
390
|
if (palette.length === 0) {
|
|
@@ -416,7 +407,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
|
|
|
416
407
|
"trailColor",
|
|
417
408
|
"headColor",
|
|
418
409
|
"skeletonColor",
|
|
419
|
-
"trailStyle"
|
|
410
|
+
"trailStyle"
|
|
420
411
|
]);
|
|
421
412
|
function validateRenderOptions(partial) {
|
|
422
413
|
for (const key of Object.keys(partial)) {
|
|
@@ -441,7 +432,7 @@ function assertTrailColor(value) {
|
|
|
441
432
|
if (typeof value === "string") {
|
|
442
433
|
if (!HEX_COLOR_RE.test(value)) {
|
|
443
434
|
throw new TypeError(
|
|
444
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"
|
|
435
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
|
|
445
436
|
);
|
|
446
437
|
}
|
|
447
438
|
return;
|
|
@@ -449,21 +440,21 @@ function assertTrailColor(value) {
|
|
|
449
440
|
if (Array.isArray(value)) {
|
|
450
441
|
if (value.length < 2) {
|
|
451
442
|
throw new RangeError(
|
|
452
|
-
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}
|
|
443
|
+
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`
|
|
453
444
|
);
|
|
454
445
|
}
|
|
455
446
|
for (let i = 0; i < value.length; i++) {
|
|
456
447
|
const entry = value[i];
|
|
457
448
|
if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
|
|
458
449
|
throw new TypeError(
|
|
459
|
-
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}
|
|
450
|
+
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
|
|
460
451
|
);
|
|
461
452
|
}
|
|
462
453
|
}
|
|
463
454
|
return;
|
|
464
455
|
}
|
|
465
456
|
throw new TypeError(
|
|
466
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}
|
|
457
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
|
|
467
458
|
);
|
|
468
459
|
}
|
|
469
460
|
function assertHeadColor(value) {
|
|
@@ -472,7 +463,7 @@ function assertHeadColor(value) {
|
|
|
472
463
|
}
|
|
473
464
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
474
465
|
throw new TypeError(
|
|
475
|
-
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}
|
|
466
|
+
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
|
|
476
467
|
);
|
|
477
468
|
}
|
|
478
469
|
}
|
|
@@ -482,14 +473,14 @@ function assertSkeletonColor(value) {
|
|
|
482
473
|
}
|
|
483
474
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
484
475
|
throw new TypeError(
|
|
485
|
-
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}
|
|
476
|
+
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
|
|
486
477
|
);
|
|
487
478
|
}
|
|
488
479
|
}
|
|
489
480
|
function assertTrailStyle(value) {
|
|
490
481
|
if (!TRAIL_STYLES.includes(value)) {
|
|
491
482
|
throw new RangeError(
|
|
492
|
-
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}
|
|
483
|
+
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`
|
|
493
484
|
);
|
|
494
485
|
}
|
|
495
486
|
}
|
|
@@ -511,22 +502,23 @@ function resolveHeadColor(trailColor, trailStyle) {
|
|
|
511
502
|
function warnIfTrailColorMismatch(trailColor, trailStyle) {
|
|
512
503
|
if (trailStyle === "default" && Array.isArray(trailColor)) {
|
|
513
504
|
console.warn(
|
|
514
|
-
'[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.'
|
|
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.'
|
|
515
506
|
);
|
|
516
507
|
return;
|
|
517
508
|
}
|
|
518
509
|
if (trailStyle !== "default" && typeof trailColor === "string") {
|
|
519
510
|
console.warn(
|
|
520
|
-
`[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
|
|
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.`
|
|
521
512
|
);
|
|
522
513
|
}
|
|
523
514
|
}
|
|
515
|
+
var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
|
|
524
516
|
|
|
525
517
|
// src/renderer.ts
|
|
526
518
|
var WHITE_HEX = "#ffffff";
|
|
527
519
|
function hexToRgbComponents(hex) {
|
|
528
520
|
const n = parseInt(hex.slice(1), 16);
|
|
529
|
-
return `${n >> 16},${
|
|
521
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
530
522
|
}
|
|
531
523
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
532
524
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -551,9 +543,8 @@ function createRenderer(options) {
|
|
|
551
543
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
552
544
|
const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
|
|
553
545
|
function setupCanvas() {
|
|
554
|
-
const
|
|
555
|
-
const
|
|
556
|
-
const lh = rect.height || 200;
|
|
546
|
+
const lw = canvas.offsetWidth || 200;
|
|
547
|
+
const lh = canvas.offsetHeight || 200;
|
|
557
548
|
applyDprSizing(canvas, lw, lh, dpr);
|
|
558
549
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
559
550
|
}
|
|
@@ -651,7 +642,7 @@ function createRenderer(options) {
|
|
|
651
642
|
i,
|
|
652
643
|
trailCount,
|
|
653
644
|
toX,
|
|
654
|
-
toY
|
|
645
|
+
toY
|
|
655
646
|
);
|
|
656
647
|
if (trailStyle === "default") {
|
|
657
648
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -675,8 +666,7 @@ function createRenderer(options) {
|
|
|
675
666
|
}
|
|
676
667
|
const x = head.x * scale + offsetX;
|
|
677
668
|
const y = head.y * scale + offsetY;
|
|
678
|
-
const r =
|
|
679
|
-
options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
|
|
669
|
+
const r = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
|
|
680
670
|
ctx.fillStyle = headColor;
|
|
681
671
|
ctx.beginPath();
|
|
682
672
|
ctx.arc(x, y, r, 0, Math.PI * 2);
|
|
@@ -805,7 +795,7 @@ function createRenderer(options) {
|
|
|
805
795
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
806
796
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
807
797
|
}
|
|
808
|
-
}
|
|
798
|
+
}
|
|
809
799
|
};
|
|
810
800
|
if (shouldAutoStart) {
|
|
811
801
|
instance.play();
|
|
@@ -831,7 +821,7 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
831
821
|
const samples = Math.ceil(period * 50);
|
|
832
822
|
const pts = Array.from({ length: samples });
|
|
833
823
|
for (let i = 0; i < samples; i++) {
|
|
834
|
-
const t =
|
|
824
|
+
const t = i / (samples - 1) * period;
|
|
835
825
|
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
|
|
836
826
|
}
|
|
837
827
|
return pts;
|
|
@@ -850,11 +840,10 @@ function createSVGRenderer(options) {
|
|
|
850
840
|
let trailPalette = resolveTrailPalette(trailColor);
|
|
851
841
|
const ariaLabel = options.ariaLabel ?? "Loading";
|
|
852
842
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
853
|
-
const
|
|
854
|
-
const width =
|
|
855
|
-
const height =
|
|
856
|
-
const headRadius =
|
|
857
|
-
options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(width, height) / 160));
|
|
843
|
+
const htmlContainer = container;
|
|
844
|
+
const width = htmlContainer.offsetWidth || 200;
|
|
845
|
+
const height = htmlContainer.offsetHeight || 200;
|
|
846
|
+
const headRadius = options.headRadius ?? getHeadDotRadius(width, height);
|
|
858
847
|
const svg = el("svg");
|
|
859
848
|
svg.setAttribute("width", String(width));
|
|
860
849
|
svg.setAttribute("height", String(height));
|
|
@@ -940,7 +929,7 @@ function createSVGRenderer(options) {
|
|
|
940
929
|
i,
|
|
941
930
|
trailCount,
|
|
942
931
|
px,
|
|
943
|
-
py
|
|
932
|
+
py
|
|
944
933
|
);
|
|
945
934
|
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`;
|
|
946
935
|
trailPaths[i].setAttribute("d", d);
|
|
@@ -967,8 +956,7 @@ function createSVGRenderer(options) {
|
|
|
967
956
|
}
|
|
968
957
|
let animationId = null;
|
|
969
958
|
let lastTime = 0;
|
|
970
|
-
const prefersReducedMotion =
|
|
971
|
-
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
959
|
+
const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
972
960
|
let morphResolve = null;
|
|
973
961
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
974
962
|
let morphTarget = null;
|
|
@@ -985,7 +973,7 @@ function createSVGRenderer(options) {
|
|
|
985
973
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
986
974
|
skeletonPathA.setAttribute(
|
|
987
975
|
"stroke-opacity",
|
|
988
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
976
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
989
977
|
);
|
|
990
978
|
}
|
|
991
979
|
if (morphPathBBuilt) {
|
|
@@ -1126,7 +1114,7 @@ function createSVGRenderer(options) {
|
|
|
1126
1114
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
1127
1115
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
1128
1116
|
}
|
|
1129
|
-
}
|
|
1117
|
+
}
|
|
1130
1118
|
};
|
|
1131
1119
|
if (shouldAutoStart) {
|
|
1132
1120
|
instance.play();
|
|
@@ -1142,22 +1130,19 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
1142
1130
|
// src/curves/artemis2.ts
|
|
1143
1131
|
var TWO_PI2 = Math.PI * 2;
|
|
1144
1132
|
function artemis2Fn(t, _time, _params) {
|
|
1145
|
-
const a = 0.35,
|
|
1146
|
-
|
|
1147
|
-
ox = 0.175;
|
|
1148
|
-
const s = Math.sin(t),
|
|
1149
|
-
c = Math.cos(t);
|
|
1133
|
+
const a = 0.35, b = 0.15, ox = 0.175;
|
|
1134
|
+
const s = Math.sin(t), c = Math.cos(t);
|
|
1150
1135
|
const denom = 1 + s * s;
|
|
1151
1136
|
return {
|
|
1152
|
-
x:
|
|
1153
|
-
y:
|
|
1137
|
+
x: c * (1 + a * c) / denom - ox,
|
|
1138
|
+
y: s * c * (1 + b * c) / denom
|
|
1154
1139
|
};
|
|
1155
1140
|
}
|
|
1156
1141
|
var artemis2 = {
|
|
1157
1142
|
name: "Artemis II",
|
|
1158
1143
|
fn: artemis2Fn,
|
|
1159
1144
|
period: TWO_PI2,
|
|
1160
|
-
speed: 0.7
|
|
1145
|
+
speed: 0.7
|
|
1161
1146
|
};
|
|
1162
1147
|
|
|
1163
1148
|
// src/curves/astroid.ts
|
|
@@ -1167,14 +1152,14 @@ function astroidFn(t, _time, _params) {
|
|
|
1167
1152
|
const s = Math.sin(t);
|
|
1168
1153
|
return {
|
|
1169
1154
|
x: c * c * c,
|
|
1170
|
-
y: s * s * s
|
|
1155
|
+
y: s * s * s
|
|
1171
1156
|
};
|
|
1172
1157
|
}
|
|
1173
1158
|
var astroid = {
|
|
1174
1159
|
name: "Astroid",
|
|
1175
1160
|
fn: astroidFn,
|
|
1176
1161
|
period: TWO_PI3,
|
|
1177
|
-
speed: 1.1
|
|
1162
|
+
speed: 1.1
|
|
1178
1163
|
};
|
|
1179
1164
|
|
|
1180
1165
|
// src/curves/deltoid.ts
|
|
@@ -1182,14 +1167,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
1182
1167
|
function deltoidFn(t, _time, _params) {
|
|
1183
1168
|
return {
|
|
1184
1169
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
1185
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1170
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1186
1171
|
};
|
|
1187
1172
|
}
|
|
1188
1173
|
var deltoid = {
|
|
1189
1174
|
name: "Deltoid",
|
|
1190
1175
|
fn: deltoidFn,
|
|
1191
1176
|
period: TWO_PI4,
|
|
1192
|
-
speed: 0.9
|
|
1177
|
+
speed: 0.9
|
|
1193
1178
|
};
|
|
1194
1179
|
|
|
1195
1180
|
// src/curves/epicycloid3.ts
|
|
@@ -1197,14 +1182,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
1197
1182
|
function epicycloid3Fn(t, _time, _params) {
|
|
1198
1183
|
return {
|
|
1199
1184
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
1200
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1185
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1201
1186
|
};
|
|
1202
1187
|
}
|
|
1203
1188
|
var epicycloid3 = {
|
|
1204
1189
|
name: "Epicycloid (n=3)",
|
|
1205
1190
|
fn: epicycloid3Fn,
|
|
1206
1191
|
period: TWO_PI5,
|
|
1207
|
-
speed: 0.75
|
|
1192
|
+
speed: 0.75
|
|
1208
1193
|
};
|
|
1209
1194
|
|
|
1210
1195
|
// src/curves/epitrochoid7.ts
|
|
@@ -1213,14 +1198,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
1213
1198
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
1214
1199
|
return {
|
|
1215
1200
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1216
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1201
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1217
1202
|
};
|
|
1218
1203
|
}
|
|
1219
1204
|
function epitrochoid7SkeletonFn(t) {
|
|
1220
1205
|
const d = 1.275;
|
|
1221
1206
|
return {
|
|
1222
1207
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1223
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1208
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1224
1209
|
};
|
|
1225
1210
|
}
|
|
1226
1211
|
var epitrochoid7 = {
|
|
@@ -1228,7 +1213,7 @@ var epitrochoid7 = {
|
|
|
1228
1213
|
fn: epitrochoid7Fn,
|
|
1229
1214
|
period: TWO_PI6,
|
|
1230
1215
|
speed: 1.4,
|
|
1231
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1216
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
1232
1217
|
};
|
|
1233
1218
|
|
|
1234
1219
|
// src/curves/lissajous32.ts
|
|
@@ -1237,7 +1222,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
1237
1222
|
const phi = time * 0.45;
|
|
1238
1223
|
return {
|
|
1239
1224
|
x: Math.sin(3 * t + phi),
|
|
1240
|
-
y: Math.sin(2 * t)
|
|
1225
|
+
y: Math.sin(2 * t)
|
|
1241
1226
|
};
|
|
1242
1227
|
}
|
|
1243
1228
|
var lissajous32 = {
|
|
@@ -1245,7 +1230,7 @@ var lissajous32 = {
|
|
|
1245
1230
|
fn: lissajous32Fn,
|
|
1246
1231
|
period: TWO_PI7,
|
|
1247
1232
|
speed: 2,
|
|
1248
|
-
skeleton: "live"
|
|
1233
|
+
skeleton: "live"
|
|
1249
1234
|
};
|
|
1250
1235
|
|
|
1251
1236
|
// src/curves/lissajous43.ts
|
|
@@ -1254,7 +1239,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
1254
1239
|
const phi = time * 0.38;
|
|
1255
1240
|
return {
|
|
1256
1241
|
x: Math.sin(4 * t + phi),
|
|
1257
|
-
y: Math.sin(3 * t)
|
|
1242
|
+
y: Math.sin(3 * t)
|
|
1258
1243
|
};
|
|
1259
1244
|
}
|
|
1260
1245
|
var lissajous43 = {
|
|
@@ -1262,18 +1247,17 @@ var lissajous43 = {
|
|
|
1262
1247
|
fn: lissajous43Fn,
|
|
1263
1248
|
period: TWO_PI8,
|
|
1264
1249
|
speed: 1.8,
|
|
1265
|
-
skeleton: "live"
|
|
1250
|
+
skeleton: "live"
|
|
1266
1251
|
};
|
|
1267
1252
|
|
|
1268
1253
|
// src/curves/lame.ts
|
|
1269
1254
|
var TWO_PI9 = Math.PI * 2;
|
|
1270
1255
|
function lameFn(t, time, _params) {
|
|
1271
1256
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1272
|
-
const c = Math.cos(t),
|
|
1273
|
-
s = Math.sin(t);
|
|
1257
|
+
const c = Math.cos(t), s = Math.sin(t);
|
|
1274
1258
|
return {
|
|
1275
1259
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1276
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1260
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1277
1261
|
};
|
|
1278
1262
|
}
|
|
1279
1263
|
var lame = {
|
|
@@ -1281,7 +1265,7 @@ var lame = {
|
|
|
1281
1265
|
fn: lameFn,
|
|
1282
1266
|
period: TWO_PI9,
|
|
1283
1267
|
speed: 1,
|
|
1284
|
-
skeleton: "live"
|
|
1268
|
+
skeleton: "live"
|
|
1285
1269
|
};
|
|
1286
1270
|
|
|
1287
1271
|
// src/curves/rose3.ts
|
|
@@ -1290,14 +1274,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
1290
1274
|
const r = Math.cos(3 * t);
|
|
1291
1275
|
return {
|
|
1292
1276
|
x: r * Math.cos(t),
|
|
1293
|
-
y: r * Math.sin(t)
|
|
1277
|
+
y: r * Math.sin(t)
|
|
1294
1278
|
};
|
|
1295
1279
|
}
|
|
1296
1280
|
var rose3 = {
|
|
1297
1281
|
name: "Rose (n=3)",
|
|
1298
1282
|
fn: rose3Fn,
|
|
1299
1283
|
period: TWO_PI10,
|
|
1300
|
-
speed: 1.15
|
|
1284
|
+
speed: 1.15
|
|
1301
1285
|
};
|
|
1302
1286
|
|
|
1303
1287
|
// src/curves/rose5.ts
|
|
@@ -1306,14 +1290,14 @@ function rose5Fn(t, _time, _params) {
|
|
|
1306
1290
|
const r = Math.cos(5 * t);
|
|
1307
1291
|
return {
|
|
1308
1292
|
x: r * Math.cos(t),
|
|
1309
|
-
y: r * Math.sin(t)
|
|
1293
|
+
y: r * Math.sin(t)
|
|
1310
1294
|
};
|
|
1311
1295
|
}
|
|
1312
1296
|
var rose5 = {
|
|
1313
1297
|
name: "Rose (n=5)",
|
|
1314
1298
|
fn: rose5Fn,
|
|
1315
1299
|
period: TWO_PI11,
|
|
1316
|
-
speed: 1
|
|
1300
|
+
speed: 1
|
|
1317
1301
|
};
|
|
1318
1302
|
|
|
1319
1303
|
// src/curves/index.ts
|
|
@@ -1327,7 +1311,7 @@ var curves = {
|
|
|
1327
1311
|
lissajous32,
|
|
1328
1312
|
lissajous43,
|
|
1329
1313
|
epicycloid3,
|
|
1330
|
-
lame
|
|
1314
|
+
lame
|
|
1331
1315
|
};
|
|
1332
1316
|
|
|
1333
1317
|
// src/index.ts
|
|
@@ -1355,4 +1339,4 @@ exports.palettes = palettes;
|
|
|
1355
1339
|
exports.rose3 = rose3;
|
|
1356
1340
|
exports.rose5 = rose5;
|
|
1357
1341
|
//# sourceMappingURL=index.cjs.map
|
|
1358
|
-
//# sourceMappingURL=index.cjs.map
|
|
1342
|
+
//# sourceMappingURL=index.cjs.map
|