@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.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,7 +364,7 @@ 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
370
|
var palettes = {
|
|
@@ -382,16 +373,16 @@ var palettes = {
|
|
|
382
373
|
ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
|
|
383
374
|
ice: ["#1e3a8a", "#67e8f9"],
|
|
384
375
|
fire: ["#7f1d1d", "#fbbf24"],
|
|
385
|
-
forest: ["#14532d", "#86efac"]
|
|
376
|
+
forest: ["#14532d", "#86efac"]
|
|
386
377
|
};
|
|
387
378
|
function hexToRgb(hex) {
|
|
388
379
|
const n = parseInt(hex.slice(1), 16);
|
|
389
|
-
return { r: n >> 16, g:
|
|
380
|
+
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
390
381
|
}
|
|
391
382
|
var lerpRgb = (a, b, t) => ({
|
|
392
383
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
393
384
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
394
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
385
|
+
b: Math.round(a.b + (b.b - a.b) * t)
|
|
395
386
|
});
|
|
396
387
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
397
388
|
if (palette.length === 0) {
|
|
@@ -414,7 +405,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
|
|
|
414
405
|
"trailColor",
|
|
415
406
|
"headColor",
|
|
416
407
|
"skeletonColor",
|
|
417
|
-
"trailStyle"
|
|
408
|
+
"trailStyle"
|
|
418
409
|
]);
|
|
419
410
|
function validateRenderOptions(partial) {
|
|
420
411
|
for (const key of Object.keys(partial)) {
|
|
@@ -439,7 +430,7 @@ function assertTrailColor(value) {
|
|
|
439
430
|
if (typeof value === "string") {
|
|
440
431
|
if (!HEX_COLOR_RE.test(value)) {
|
|
441
432
|
throw new TypeError(
|
|
442
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"
|
|
433
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`
|
|
443
434
|
);
|
|
444
435
|
}
|
|
445
436
|
return;
|
|
@@ -447,21 +438,21 @@ function assertTrailColor(value) {
|
|
|
447
438
|
if (Array.isArray(value)) {
|
|
448
439
|
if (value.length < 2) {
|
|
449
440
|
throw new RangeError(
|
|
450
|
-
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}
|
|
441
|
+
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`
|
|
451
442
|
);
|
|
452
443
|
}
|
|
453
444
|
for (let i = 0; i < value.length; i++) {
|
|
454
445
|
const entry = value[i];
|
|
455
446
|
if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
|
|
456
447
|
throw new TypeError(
|
|
457
|
-
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}
|
|
448
|
+
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`
|
|
458
449
|
);
|
|
459
450
|
}
|
|
460
451
|
}
|
|
461
452
|
return;
|
|
462
453
|
}
|
|
463
454
|
throw new TypeError(
|
|
464
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}
|
|
455
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`
|
|
465
456
|
);
|
|
466
457
|
}
|
|
467
458
|
function assertHeadColor(value) {
|
|
@@ -470,7 +461,7 @@ function assertHeadColor(value) {
|
|
|
470
461
|
}
|
|
471
462
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
472
463
|
throw new TypeError(
|
|
473
|
-
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}
|
|
464
|
+
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`
|
|
474
465
|
);
|
|
475
466
|
}
|
|
476
467
|
}
|
|
@@ -480,14 +471,14 @@ function assertSkeletonColor(value) {
|
|
|
480
471
|
}
|
|
481
472
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
482
473
|
throw new TypeError(
|
|
483
|
-
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}
|
|
474
|
+
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`
|
|
484
475
|
);
|
|
485
476
|
}
|
|
486
477
|
}
|
|
487
478
|
function assertTrailStyle(value) {
|
|
488
479
|
if (!TRAIL_STYLES.includes(value)) {
|
|
489
480
|
throw new RangeError(
|
|
490
|
-
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}
|
|
481
|
+
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`
|
|
491
482
|
);
|
|
492
483
|
}
|
|
493
484
|
}
|
|
@@ -509,22 +500,23 @@ function resolveHeadColor(trailColor, trailStyle) {
|
|
|
509
500
|
function warnIfTrailColorMismatch(trailColor, trailStyle) {
|
|
510
501
|
if (trailStyle === "default" && Array.isArray(trailColor)) {
|
|
511
502
|
console.warn(
|
|
512
|
-
'[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.'
|
|
503
|
+
'[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.'
|
|
513
504
|
);
|
|
514
505
|
return;
|
|
515
506
|
}
|
|
516
507
|
if (trailStyle !== "default" && typeof trailColor === "string") {
|
|
517
508
|
console.warn(
|
|
518
|
-
`[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
|
|
509
|
+
`[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.`
|
|
519
510
|
);
|
|
520
511
|
}
|
|
521
512
|
}
|
|
513
|
+
var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
|
|
522
514
|
|
|
523
515
|
// src/renderer.ts
|
|
524
516
|
var WHITE_HEX = "#ffffff";
|
|
525
517
|
function hexToRgbComponents(hex) {
|
|
526
518
|
const n = parseInt(hex.slice(1), 16);
|
|
527
|
-
return `${n >> 16},${
|
|
519
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
528
520
|
}
|
|
529
521
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
530
522
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -549,9 +541,8 @@ function createRenderer(options) {
|
|
|
549
541
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
550
542
|
const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
|
|
551
543
|
function setupCanvas() {
|
|
552
|
-
const
|
|
553
|
-
const
|
|
554
|
-
const lh = rect.height || 200;
|
|
544
|
+
const lw = canvas.offsetWidth || 200;
|
|
545
|
+
const lh = canvas.offsetHeight || 200;
|
|
555
546
|
applyDprSizing(canvas, lw, lh, dpr);
|
|
556
547
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
557
548
|
}
|
|
@@ -649,7 +640,7 @@ function createRenderer(options) {
|
|
|
649
640
|
i,
|
|
650
641
|
trailCount,
|
|
651
642
|
toX,
|
|
652
|
-
toY
|
|
643
|
+
toY
|
|
653
644
|
);
|
|
654
645
|
if (trailStyle === "default") {
|
|
655
646
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -673,8 +664,7 @@ function createRenderer(options) {
|
|
|
673
664
|
}
|
|
674
665
|
const x = head.x * scale + offsetX;
|
|
675
666
|
const y = head.y * scale + offsetY;
|
|
676
|
-
const r =
|
|
677
|
-
options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
|
|
667
|
+
const r = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
|
|
678
668
|
ctx.fillStyle = headColor;
|
|
679
669
|
ctx.beginPath();
|
|
680
670
|
ctx.arc(x, y, r, 0, Math.PI * 2);
|
|
@@ -803,7 +793,7 @@ function createRenderer(options) {
|
|
|
803
793
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
804
794
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
805
795
|
}
|
|
806
|
-
}
|
|
796
|
+
}
|
|
807
797
|
};
|
|
808
798
|
if (shouldAutoStart) {
|
|
809
799
|
instance.play();
|
|
@@ -829,7 +819,7 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
829
819
|
const samples = Math.ceil(period * 50);
|
|
830
820
|
const pts = Array.from({ length: samples });
|
|
831
821
|
for (let i = 0; i < samples; i++) {
|
|
832
|
-
const t =
|
|
822
|
+
const t = i / (samples - 1) * period;
|
|
833
823
|
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
|
|
834
824
|
}
|
|
835
825
|
return pts;
|
|
@@ -848,11 +838,10 @@ function createSVGRenderer(options) {
|
|
|
848
838
|
let trailPalette = resolveTrailPalette(trailColor);
|
|
849
839
|
const ariaLabel = options.ariaLabel ?? "Loading";
|
|
850
840
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
851
|
-
const
|
|
852
|
-
const width =
|
|
853
|
-
const height =
|
|
854
|
-
const headRadius =
|
|
855
|
-
options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(width, height) / 160));
|
|
841
|
+
const htmlContainer = container;
|
|
842
|
+
const width = htmlContainer.offsetWidth || 200;
|
|
843
|
+
const height = htmlContainer.offsetHeight || 200;
|
|
844
|
+
const headRadius = options.headRadius ?? getHeadDotRadius(width, height);
|
|
856
845
|
const svg = el("svg");
|
|
857
846
|
svg.setAttribute("width", String(width));
|
|
858
847
|
svg.setAttribute("height", String(height));
|
|
@@ -938,7 +927,7 @@ function createSVGRenderer(options) {
|
|
|
938
927
|
i,
|
|
939
928
|
trailCount,
|
|
940
929
|
px,
|
|
941
|
-
py
|
|
930
|
+
py
|
|
942
931
|
);
|
|
943
932
|
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`;
|
|
944
933
|
trailPaths[i].setAttribute("d", d);
|
|
@@ -965,8 +954,7 @@ function createSVGRenderer(options) {
|
|
|
965
954
|
}
|
|
966
955
|
let animationId = null;
|
|
967
956
|
let lastTime = 0;
|
|
968
|
-
const prefersReducedMotion =
|
|
969
|
-
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
957
|
+
const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
970
958
|
let morphResolve = null;
|
|
971
959
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
972
960
|
let morphTarget = null;
|
|
@@ -983,7 +971,7 @@ function createSVGRenderer(options) {
|
|
|
983
971
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
984
972
|
skeletonPathA.setAttribute(
|
|
985
973
|
"stroke-opacity",
|
|
986
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
974
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
987
975
|
);
|
|
988
976
|
}
|
|
989
977
|
if (morphPathBBuilt) {
|
|
@@ -1124,7 +1112,7 @@ function createSVGRenderer(options) {
|
|
|
1124
1112
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
1125
1113
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
1126
1114
|
}
|
|
1127
|
-
}
|
|
1115
|
+
}
|
|
1128
1116
|
};
|
|
1129
1117
|
if (shouldAutoStart) {
|
|
1130
1118
|
instance.play();
|
|
@@ -1140,22 +1128,19 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
1140
1128
|
// src/curves/artemis2.ts
|
|
1141
1129
|
var TWO_PI2 = Math.PI * 2;
|
|
1142
1130
|
function artemis2Fn(t, _time, _params) {
|
|
1143
|
-
const a = 0.35,
|
|
1144
|
-
|
|
1145
|
-
ox = 0.175;
|
|
1146
|
-
const s = Math.sin(t),
|
|
1147
|
-
c = Math.cos(t);
|
|
1131
|
+
const a = 0.35, b = 0.15, ox = 0.175;
|
|
1132
|
+
const s = Math.sin(t), c = Math.cos(t);
|
|
1148
1133
|
const denom = 1 + s * s;
|
|
1149
1134
|
return {
|
|
1150
|
-
x:
|
|
1151
|
-
y:
|
|
1135
|
+
x: c * (1 + a * c) / denom - ox,
|
|
1136
|
+
y: s * c * (1 + b * c) / denom
|
|
1152
1137
|
};
|
|
1153
1138
|
}
|
|
1154
1139
|
var artemis2 = {
|
|
1155
1140
|
name: "Artemis II",
|
|
1156
1141
|
fn: artemis2Fn,
|
|
1157
1142
|
period: TWO_PI2,
|
|
1158
|
-
speed: 0.7
|
|
1143
|
+
speed: 0.7
|
|
1159
1144
|
};
|
|
1160
1145
|
|
|
1161
1146
|
// src/curves/astroid.ts
|
|
@@ -1165,14 +1150,14 @@ function astroidFn(t, _time, _params) {
|
|
|
1165
1150
|
const s = Math.sin(t);
|
|
1166
1151
|
return {
|
|
1167
1152
|
x: c * c * c,
|
|
1168
|
-
y: s * s * s
|
|
1153
|
+
y: s * s * s
|
|
1169
1154
|
};
|
|
1170
1155
|
}
|
|
1171
1156
|
var astroid = {
|
|
1172
1157
|
name: "Astroid",
|
|
1173
1158
|
fn: astroidFn,
|
|
1174
1159
|
period: TWO_PI3,
|
|
1175
|
-
speed: 1.1
|
|
1160
|
+
speed: 1.1
|
|
1176
1161
|
};
|
|
1177
1162
|
|
|
1178
1163
|
// src/curves/deltoid.ts
|
|
@@ -1180,14 +1165,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
1180
1165
|
function deltoidFn(t, _time, _params) {
|
|
1181
1166
|
return {
|
|
1182
1167
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
1183
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1168
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1184
1169
|
};
|
|
1185
1170
|
}
|
|
1186
1171
|
var deltoid = {
|
|
1187
1172
|
name: "Deltoid",
|
|
1188
1173
|
fn: deltoidFn,
|
|
1189
1174
|
period: TWO_PI4,
|
|
1190
|
-
speed: 0.9
|
|
1175
|
+
speed: 0.9
|
|
1191
1176
|
};
|
|
1192
1177
|
|
|
1193
1178
|
// src/curves/epicycloid3.ts
|
|
@@ -1195,14 +1180,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
1195
1180
|
function epicycloid3Fn(t, _time, _params) {
|
|
1196
1181
|
return {
|
|
1197
1182
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
1198
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1183
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1199
1184
|
};
|
|
1200
1185
|
}
|
|
1201
1186
|
var epicycloid3 = {
|
|
1202
1187
|
name: "Epicycloid (n=3)",
|
|
1203
1188
|
fn: epicycloid3Fn,
|
|
1204
1189
|
period: TWO_PI5,
|
|
1205
|
-
speed: 0.75
|
|
1190
|
+
speed: 0.75
|
|
1206
1191
|
};
|
|
1207
1192
|
|
|
1208
1193
|
// src/curves/epitrochoid7.ts
|
|
@@ -1211,14 +1196,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
1211
1196
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
1212
1197
|
return {
|
|
1213
1198
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1214
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1199
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1215
1200
|
};
|
|
1216
1201
|
}
|
|
1217
1202
|
function epitrochoid7SkeletonFn(t) {
|
|
1218
1203
|
const d = 1.275;
|
|
1219
1204
|
return {
|
|
1220
1205
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1221
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1206
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1222
1207
|
};
|
|
1223
1208
|
}
|
|
1224
1209
|
var epitrochoid7 = {
|
|
@@ -1226,7 +1211,7 @@ var epitrochoid7 = {
|
|
|
1226
1211
|
fn: epitrochoid7Fn,
|
|
1227
1212
|
period: TWO_PI6,
|
|
1228
1213
|
speed: 1.4,
|
|
1229
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1214
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
1230
1215
|
};
|
|
1231
1216
|
|
|
1232
1217
|
// src/curves/lissajous32.ts
|
|
@@ -1235,7 +1220,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
1235
1220
|
const phi = time * 0.45;
|
|
1236
1221
|
return {
|
|
1237
1222
|
x: Math.sin(3 * t + phi),
|
|
1238
|
-
y: Math.sin(2 * t)
|
|
1223
|
+
y: Math.sin(2 * t)
|
|
1239
1224
|
};
|
|
1240
1225
|
}
|
|
1241
1226
|
var lissajous32 = {
|
|
@@ -1243,7 +1228,7 @@ var lissajous32 = {
|
|
|
1243
1228
|
fn: lissajous32Fn,
|
|
1244
1229
|
period: TWO_PI7,
|
|
1245
1230
|
speed: 2,
|
|
1246
|
-
skeleton: "live"
|
|
1231
|
+
skeleton: "live"
|
|
1247
1232
|
};
|
|
1248
1233
|
|
|
1249
1234
|
// src/curves/lissajous43.ts
|
|
@@ -1252,7 +1237,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
1252
1237
|
const phi = time * 0.38;
|
|
1253
1238
|
return {
|
|
1254
1239
|
x: Math.sin(4 * t + phi),
|
|
1255
|
-
y: Math.sin(3 * t)
|
|
1240
|
+
y: Math.sin(3 * t)
|
|
1256
1241
|
};
|
|
1257
1242
|
}
|
|
1258
1243
|
var lissajous43 = {
|
|
@@ -1260,18 +1245,17 @@ var lissajous43 = {
|
|
|
1260
1245
|
fn: lissajous43Fn,
|
|
1261
1246
|
period: TWO_PI8,
|
|
1262
1247
|
speed: 1.8,
|
|
1263
|
-
skeleton: "live"
|
|
1248
|
+
skeleton: "live"
|
|
1264
1249
|
};
|
|
1265
1250
|
|
|
1266
1251
|
// src/curves/lame.ts
|
|
1267
1252
|
var TWO_PI9 = Math.PI * 2;
|
|
1268
1253
|
function lameFn(t, time, _params) {
|
|
1269
1254
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1270
|
-
const c = Math.cos(t),
|
|
1271
|
-
s = Math.sin(t);
|
|
1255
|
+
const c = Math.cos(t), s = Math.sin(t);
|
|
1272
1256
|
return {
|
|
1273
1257
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1274
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1258
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1275
1259
|
};
|
|
1276
1260
|
}
|
|
1277
1261
|
var lame = {
|
|
@@ -1279,7 +1263,7 @@ var lame = {
|
|
|
1279
1263
|
fn: lameFn,
|
|
1280
1264
|
period: TWO_PI9,
|
|
1281
1265
|
speed: 1,
|
|
1282
|
-
skeleton: "live"
|
|
1266
|
+
skeleton: "live"
|
|
1283
1267
|
};
|
|
1284
1268
|
|
|
1285
1269
|
// src/curves/rose3.ts
|
|
@@ -1288,14 +1272,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
1288
1272
|
const r = Math.cos(3 * t);
|
|
1289
1273
|
return {
|
|
1290
1274
|
x: r * Math.cos(t),
|
|
1291
|
-
y: r * Math.sin(t)
|
|
1275
|
+
y: r * Math.sin(t)
|
|
1292
1276
|
};
|
|
1293
1277
|
}
|
|
1294
1278
|
var rose3 = {
|
|
1295
1279
|
name: "Rose (n=3)",
|
|
1296
1280
|
fn: rose3Fn,
|
|
1297
1281
|
period: TWO_PI10,
|
|
1298
|
-
speed: 1.15
|
|
1282
|
+
speed: 1.15
|
|
1299
1283
|
};
|
|
1300
1284
|
|
|
1301
1285
|
// src/curves/rose5.ts
|
|
@@ -1304,14 +1288,14 @@ function rose5Fn(t, _time, _params) {
|
|
|
1304
1288
|
const r = Math.cos(5 * t);
|
|
1305
1289
|
return {
|
|
1306
1290
|
x: r * Math.cos(t),
|
|
1307
|
-
y: r * Math.sin(t)
|
|
1291
|
+
y: r * Math.sin(t)
|
|
1308
1292
|
};
|
|
1309
1293
|
}
|
|
1310
1294
|
var rose5 = {
|
|
1311
1295
|
name: "Rose (n=5)",
|
|
1312
1296
|
fn: rose5Fn,
|
|
1313
1297
|
period: TWO_PI11,
|
|
1314
|
-
speed: 1
|
|
1298
|
+
speed: 1
|
|
1315
1299
|
};
|
|
1316
1300
|
|
|
1317
1301
|
// src/curves/index.ts
|
|
@@ -1325,7 +1309,7 @@ var curves = {
|
|
|
1325
1309
|
lissajous32,
|
|
1326
1310
|
lissajous43,
|
|
1327
1311
|
epicycloid3,
|
|
1328
|
-
lame
|
|
1312
|
+
lame
|
|
1329
1313
|
};
|
|
1330
1314
|
|
|
1331
1315
|
// src/index.ts
|
|
@@ -1335,24 +1319,6 @@ function createSarmal(canvas, curveDef, options) {
|
|
|
1335
1319
|
return createRenderer({ canvas, engine, ...rendererOpts });
|
|
1336
1320
|
}
|
|
1337
1321
|
|
|
1338
|
-
export {
|
|
1339
|
-
artemis2,
|
|
1340
|
-
astroid,
|
|
1341
|
-
createEngine,
|
|
1342
|
-
createRenderer,
|
|
1343
|
-
createSVGRenderer,
|
|
1344
|
-
createSarmal,
|
|
1345
|
-
createSarmalSVG,
|
|
1346
|
-
curves,
|
|
1347
|
-
deltoid,
|
|
1348
|
-
epicycloid3,
|
|
1349
|
-
epitrochoid7,
|
|
1350
|
-
lame,
|
|
1351
|
-
lissajous32,
|
|
1352
|
-
lissajous43,
|
|
1353
|
-
palettes,
|
|
1354
|
-
rose3,
|
|
1355
|
-
rose5,
|
|
1356
|
-
};
|
|
1357
|
-
//# sourceMappingURL=index.js.map
|
|
1322
|
+
export { artemis2, astroid, createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves, deltoid, epicycloid3, epitrochoid7, lame, lissajous32, lissajous43, palettes, rose3, rose5 };
|
|
1358
1323
|
//# sourceMappingURL=index.js.map
|
|
1324
|
+
//# sourceMappingURL=index.js.map
|