@sarmal/core 0.16.0 → 0.17.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/README.md +4 -4
- package/dist/auto-init.cjs +145 -89
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.js +144 -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 +101 -33
- package/dist/curves/index.cjs.map +1 -1
- package/dist/curves/index.d.cts +29 -21
- package/dist/curves/index.d.ts +29 -21
- package/dist/curves/index.js +97 -45
- package/dist/curves/index.js.map +1 -1
- 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/curves/rose52.cjs +21 -0
- package/dist/curves/rose52.cjs.map +1 -0
- package/dist/curves/rose52.d.cts +9 -0
- package/dist/curves/rose52.d.ts +9 -0
- package/dist/curves/rose52.js +19 -0
- package/dist/curves/rose52.js.map +1 -0
- package/dist/curves/star.cjs +21 -0
- package/dist/curves/star.cjs.map +1 -0
- package/dist/curves/star.d.cts +8 -0
- package/dist/curves/star.d.ts +8 -0
- package/dist/curves/star.js +19 -0
- package/dist/curves/star.js.map +1 -0
- package/dist/curves/star4.cjs +21 -0
- package/dist/curves/star4.cjs.map +1 -0
- package/dist/curves/star4.d.cts +9 -0
- package/dist/curves/star4.d.ts +9 -0
- package/dist/curves/star4.js +19 -0
- package/dist/curves/star4.js.map +1 -0
- package/dist/curves/star7.cjs +21 -0
- package/dist/curves/star7.cjs.map +1 -0
- package/dist/curves/star7.d.cts +9 -0
- package/dist/curves/star7.d.ts +9 -0
- package/dist/curves/star7.js +19 -0
- package/dist/curves/star7.js.map +1 -0
- package/dist/index.cjs +139 -85
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +39 -72
- package/dist/index.d.ts +39 -72
- package/dist/index.js +139 -103
- 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,13 +502,13 @@ 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
|
}
|
|
@@ -527,7 +518,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
|
|
|
527
518
|
var WHITE_HEX = "#ffffff";
|
|
528
519
|
function hexToRgbComponents(hex) {
|
|
529
520
|
const n = parseInt(hex.slice(1), 16);
|
|
530
|
-
return `${n >> 16},${
|
|
521
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
531
522
|
}
|
|
532
523
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
533
524
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -652,7 +643,7 @@ function createRenderer(options) {
|
|
|
652
643
|
i,
|
|
653
644
|
trailCount,
|
|
654
645
|
toX,
|
|
655
|
-
toY
|
|
646
|
+
toY
|
|
656
647
|
);
|
|
657
648
|
if (trailStyle === "default") {
|
|
658
649
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -813,7 +804,7 @@ function createRenderer(options) {
|
|
|
813
804
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
814
805
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
815
806
|
}
|
|
816
|
-
}
|
|
807
|
+
}
|
|
817
808
|
};
|
|
818
809
|
if (shouldAutoStart) {
|
|
819
810
|
instance.play();
|
|
@@ -839,7 +830,7 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
839
830
|
const samples = Math.ceil(period * 50);
|
|
840
831
|
const pts = Array.from({ length: samples });
|
|
841
832
|
for (let i = 0; i < samples; i++) {
|
|
842
|
-
const t =
|
|
833
|
+
const t = i / (samples - 1) * period;
|
|
843
834
|
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
|
|
844
835
|
}
|
|
845
836
|
return pts;
|
|
@@ -950,7 +941,7 @@ function createSVGRenderer(options) {
|
|
|
950
941
|
i,
|
|
951
942
|
trailCount,
|
|
952
943
|
px,
|
|
953
|
-
py
|
|
944
|
+
py
|
|
954
945
|
);
|
|
955
946
|
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`;
|
|
956
947
|
trailPaths[j].setAttribute("d", d);
|
|
@@ -977,8 +968,7 @@ function createSVGRenderer(options) {
|
|
|
977
968
|
}
|
|
978
969
|
let animationId = null;
|
|
979
970
|
let lastTime = 0;
|
|
980
|
-
const prefersReducedMotion =
|
|
981
|
-
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
971
|
+
const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
982
972
|
let morphResolve = null;
|
|
983
973
|
let morphReject = null;
|
|
984
974
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
@@ -996,7 +986,7 @@ function createSVGRenderer(options) {
|
|
|
996
986
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
997
987
|
skeletonPathA.setAttribute(
|
|
998
988
|
"stroke-opacity",
|
|
999
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
989
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
1000
990
|
);
|
|
1001
991
|
}
|
|
1002
992
|
if (morphPathBBuilt) {
|
|
@@ -1145,7 +1135,7 @@ function createSVGRenderer(options) {
|
|
|
1145
1135
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
1146
1136
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
1147
1137
|
}
|
|
1148
|
-
}
|
|
1138
|
+
}
|
|
1149
1139
|
};
|
|
1150
1140
|
if (shouldAutoStart) {
|
|
1151
1141
|
instance.play();
|
|
@@ -1161,22 +1151,19 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
1161
1151
|
// src/curves/artemis2.ts
|
|
1162
1152
|
var TWO_PI2 = Math.PI * 2;
|
|
1163
1153
|
function artemis2Fn(t, _time, _params) {
|
|
1164
|
-
const a = 0.35,
|
|
1165
|
-
|
|
1166
|
-
ox = 0.175;
|
|
1167
|
-
const s = Math.sin(t),
|
|
1168
|
-
c = Math.cos(t);
|
|
1154
|
+
const a = 0.35, b = 0.15, ox = 0.175;
|
|
1155
|
+
const s = Math.sin(t), c = Math.cos(t);
|
|
1169
1156
|
const denom = 1 + s * s;
|
|
1170
1157
|
return {
|
|
1171
|
-
x:
|
|
1172
|
-
y:
|
|
1158
|
+
x: c * (1 + a * c) / denom - ox,
|
|
1159
|
+
y: s * c * (1 + b * c) / denom
|
|
1173
1160
|
};
|
|
1174
1161
|
}
|
|
1175
1162
|
var artemis2 = {
|
|
1176
1163
|
name: "Artemis II",
|
|
1177
1164
|
fn: artemis2Fn,
|
|
1178
1165
|
period: TWO_PI2,
|
|
1179
|
-
speed: 0.7
|
|
1166
|
+
speed: 0.7
|
|
1180
1167
|
};
|
|
1181
1168
|
|
|
1182
1169
|
// src/curves/astroid.ts
|
|
@@ -1186,14 +1173,14 @@ function astroidFn(t, _time, _params) {
|
|
|
1186
1173
|
const s = Math.sin(t);
|
|
1187
1174
|
return {
|
|
1188
1175
|
x: c * c * c,
|
|
1189
|
-
y: s * s * s
|
|
1176
|
+
y: s * s * s
|
|
1190
1177
|
};
|
|
1191
1178
|
}
|
|
1192
1179
|
var astroid = {
|
|
1193
1180
|
name: "Astroid",
|
|
1194
1181
|
fn: astroidFn,
|
|
1195
1182
|
period: TWO_PI3,
|
|
1196
|
-
speed: 1.1
|
|
1183
|
+
speed: 1.1
|
|
1197
1184
|
};
|
|
1198
1185
|
|
|
1199
1186
|
// src/curves/deltoid.ts
|
|
@@ -1201,14 +1188,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
1201
1188
|
function deltoidFn(t, _time, _params) {
|
|
1202
1189
|
return {
|
|
1203
1190
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
1204
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1191
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1205
1192
|
};
|
|
1206
1193
|
}
|
|
1207
1194
|
var deltoid = {
|
|
1208
1195
|
name: "Deltoid",
|
|
1209
1196
|
fn: deltoidFn,
|
|
1210
1197
|
period: TWO_PI4,
|
|
1211
|
-
speed: 0.9
|
|
1198
|
+
speed: 0.9
|
|
1212
1199
|
};
|
|
1213
1200
|
|
|
1214
1201
|
// src/curves/epicycloid3.ts
|
|
@@ -1216,14 +1203,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
1216
1203
|
function epicycloid3Fn(t, _time, _params) {
|
|
1217
1204
|
return {
|
|
1218
1205
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
1219
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1206
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1220
1207
|
};
|
|
1221
1208
|
}
|
|
1222
1209
|
var epicycloid3 = {
|
|
1223
1210
|
name: "Epicycloid (n=3)",
|
|
1224
1211
|
fn: epicycloid3Fn,
|
|
1225
1212
|
period: TWO_PI5,
|
|
1226
|
-
speed: 0.75
|
|
1213
|
+
speed: 0.75
|
|
1227
1214
|
};
|
|
1228
1215
|
|
|
1229
1216
|
// src/curves/epitrochoid7.ts
|
|
@@ -1232,14 +1219,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
1232
1219
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
1233
1220
|
return {
|
|
1234
1221
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1235
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1222
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1236
1223
|
};
|
|
1237
1224
|
}
|
|
1238
1225
|
function epitrochoid7SkeletonFn(t) {
|
|
1239
1226
|
const d = 1.275;
|
|
1240
1227
|
return {
|
|
1241
1228
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1242
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1229
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1243
1230
|
};
|
|
1244
1231
|
}
|
|
1245
1232
|
var epitrochoid7 = {
|
|
@@ -1247,7 +1234,7 @@ var epitrochoid7 = {
|
|
|
1247
1234
|
fn: epitrochoid7Fn,
|
|
1248
1235
|
period: TWO_PI6,
|
|
1249
1236
|
speed: 1.4,
|
|
1250
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1237
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
1251
1238
|
};
|
|
1252
1239
|
|
|
1253
1240
|
// src/curves/lissajous32.ts
|
|
@@ -1256,7 +1243,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
1256
1243
|
const phi = time * 0.45;
|
|
1257
1244
|
return {
|
|
1258
1245
|
x: Math.sin(3 * t + phi),
|
|
1259
|
-
y: Math.sin(2 * t)
|
|
1246
|
+
y: Math.sin(2 * t)
|
|
1260
1247
|
};
|
|
1261
1248
|
}
|
|
1262
1249
|
var lissajous32 = {
|
|
@@ -1264,7 +1251,7 @@ var lissajous32 = {
|
|
|
1264
1251
|
fn: lissajous32Fn,
|
|
1265
1252
|
period: TWO_PI7,
|
|
1266
1253
|
speed: 2,
|
|
1267
|
-
skeleton: "live"
|
|
1254
|
+
skeleton: "live"
|
|
1268
1255
|
};
|
|
1269
1256
|
|
|
1270
1257
|
// src/curves/lissajous43.ts
|
|
@@ -1273,7 +1260,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
1273
1260
|
const phi = time * 0.38;
|
|
1274
1261
|
return {
|
|
1275
1262
|
x: Math.sin(4 * t + phi),
|
|
1276
|
-
y: Math.sin(3 * t)
|
|
1263
|
+
y: Math.sin(3 * t)
|
|
1277
1264
|
};
|
|
1278
1265
|
}
|
|
1279
1266
|
var lissajous43 = {
|
|
@@ -1281,18 +1268,17 @@ var lissajous43 = {
|
|
|
1281
1268
|
fn: lissajous43Fn,
|
|
1282
1269
|
period: TWO_PI8,
|
|
1283
1270
|
speed: 1.8,
|
|
1284
|
-
skeleton: "live"
|
|
1271
|
+
skeleton: "live"
|
|
1285
1272
|
};
|
|
1286
1273
|
|
|
1287
1274
|
// src/curves/lame.ts
|
|
1288
1275
|
var TWO_PI9 = Math.PI * 2;
|
|
1289
1276
|
function lameFn(t, time, _params) {
|
|
1290
1277
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1291
|
-
const c = Math.cos(t),
|
|
1292
|
-
s = Math.sin(t);
|
|
1278
|
+
const c = Math.cos(t), s = Math.sin(t);
|
|
1293
1279
|
return {
|
|
1294
1280
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1295
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1281
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1296
1282
|
};
|
|
1297
1283
|
}
|
|
1298
1284
|
var lame = {
|
|
@@ -1300,7 +1286,7 @@ var lame = {
|
|
|
1300
1286
|
fn: lameFn,
|
|
1301
1287
|
period: TWO_PI9,
|
|
1302
1288
|
speed: 1,
|
|
1303
|
-
skeleton: "live"
|
|
1289
|
+
skeleton: "live"
|
|
1304
1290
|
};
|
|
1305
1291
|
|
|
1306
1292
|
// src/curves/rose3.ts
|
|
@@ -1309,14 +1295,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
1309
1295
|
const r = Math.cos(3 * t);
|
|
1310
1296
|
return {
|
|
1311
1297
|
x: r * Math.cos(t),
|
|
1312
|
-
y: r * Math.sin(t)
|
|
1298
|
+
y: r * Math.sin(t)
|
|
1313
1299
|
};
|
|
1314
1300
|
}
|
|
1315
1301
|
var rose3 = {
|
|
1316
1302
|
name: "Rose (n=3)",
|
|
1317
1303
|
fn: rose3Fn,
|
|
1318
1304
|
period: TWO_PI10,
|
|
1319
|
-
speed: 1.15
|
|
1305
|
+
speed: 1.15
|
|
1320
1306
|
};
|
|
1321
1307
|
|
|
1322
1308
|
// src/curves/rose5.ts
|
|
@@ -1325,14 +1311,78 @@ function rose5Fn(t, _time, _params) {
|
|
|
1325
1311
|
const r = Math.cos(5 * t);
|
|
1326
1312
|
return {
|
|
1327
1313
|
x: r * Math.cos(t),
|
|
1328
|
-
y: r * Math.sin(t)
|
|
1314
|
+
y: r * Math.sin(t)
|
|
1329
1315
|
};
|
|
1330
1316
|
}
|
|
1331
1317
|
var rose5 = {
|
|
1332
1318
|
name: "Rose (n=5)",
|
|
1333
1319
|
fn: rose5Fn,
|
|
1334
1320
|
period: TWO_PI11,
|
|
1335
|
-
speed: 1
|
|
1321
|
+
speed: 1
|
|
1322
|
+
};
|
|
1323
|
+
|
|
1324
|
+
// src/curves/rose52.ts
|
|
1325
|
+
var FOUR_PI = Math.PI * 4;
|
|
1326
|
+
function rose52Fn(t, _time, _params) {
|
|
1327
|
+
const r = Math.cos(5 / 2 * t);
|
|
1328
|
+
return {
|
|
1329
|
+
x: r * Math.cos(t),
|
|
1330
|
+
y: r * Math.sin(t)
|
|
1331
|
+
};
|
|
1332
|
+
}
|
|
1333
|
+
var rose52 = {
|
|
1334
|
+
name: "Rose (n=5/2)",
|
|
1335
|
+
fn: rose52Fn,
|
|
1336
|
+
period: FOUR_PI,
|
|
1337
|
+
speed: 0.8
|
|
1338
|
+
};
|
|
1339
|
+
|
|
1340
|
+
// src/curves/star.ts
|
|
1341
|
+
var TWO_PI12 = Math.PI * 2;
|
|
1342
|
+
function starFn(t, _time, _params) {
|
|
1343
|
+
const r = Math.abs(Math.cos(5 / 2 * t)) + 0.35 * Math.abs(Math.cos(15 / 2 * t)) + 0.15 * Math.abs(Math.cos(25 / 2 * t));
|
|
1344
|
+
return {
|
|
1345
|
+
x: r * Math.cos(t),
|
|
1346
|
+
y: r * Math.sin(t)
|
|
1347
|
+
};
|
|
1348
|
+
}
|
|
1349
|
+
var star = {
|
|
1350
|
+
name: "Star",
|
|
1351
|
+
fn: starFn,
|
|
1352
|
+
period: TWO_PI12,
|
|
1353
|
+
speed: 1
|
|
1354
|
+
};
|
|
1355
|
+
|
|
1356
|
+
// src/curves/star4.ts
|
|
1357
|
+
var TWO_PI13 = Math.PI * 2;
|
|
1358
|
+
function star4Fn(t, _time, _params) {
|
|
1359
|
+
const r = Math.abs(Math.cos(2 * t)) + 0.35 * Math.abs(Math.cos(6 * t)) + 0.15 * Math.abs(Math.cos(10 * t));
|
|
1360
|
+
return {
|
|
1361
|
+
x: r * Math.cos(t),
|
|
1362
|
+
y: r * Math.sin(t)
|
|
1363
|
+
};
|
|
1364
|
+
}
|
|
1365
|
+
var star4 = {
|
|
1366
|
+
name: "Star (4-arm)",
|
|
1367
|
+
fn: star4Fn,
|
|
1368
|
+
period: TWO_PI13,
|
|
1369
|
+
speed: 1
|
|
1370
|
+
};
|
|
1371
|
+
|
|
1372
|
+
// src/curves/star7.ts
|
|
1373
|
+
var TWO_PI14 = Math.PI * 2;
|
|
1374
|
+
function star7Fn(t, _time, _params) {
|
|
1375
|
+
const r = Math.abs(Math.cos(7 / 2 * t)) + 0.35 * Math.abs(Math.cos(21 / 2 * t)) + 0.15 * Math.abs(Math.cos(35 / 2 * t));
|
|
1376
|
+
return {
|
|
1377
|
+
x: r * Math.cos(t),
|
|
1378
|
+
y: r * Math.sin(t)
|
|
1379
|
+
};
|
|
1380
|
+
}
|
|
1381
|
+
var star7 = {
|
|
1382
|
+
name: "Star (7-arm)",
|
|
1383
|
+
fn: star7Fn,
|
|
1384
|
+
period: TWO_PI14,
|
|
1385
|
+
speed: 1
|
|
1336
1386
|
};
|
|
1337
1387
|
|
|
1338
1388
|
// src/curves/index.ts
|
|
@@ -1341,12 +1391,16 @@ var curves = {
|
|
|
1341
1391
|
epitrochoid7,
|
|
1342
1392
|
astroid,
|
|
1343
1393
|
deltoid,
|
|
1344
|
-
rose5,
|
|
1345
1394
|
rose3,
|
|
1395
|
+
rose5,
|
|
1396
|
+
rose52,
|
|
1397
|
+
star,
|
|
1398
|
+
star4,
|
|
1399
|
+
star7,
|
|
1346
1400
|
lissajous32,
|
|
1347
1401
|
lissajous43,
|
|
1348
1402
|
epicycloid3,
|
|
1349
|
-
lame
|
|
1403
|
+
lame
|
|
1350
1404
|
};
|
|
1351
1405
|
|
|
1352
1406
|
// src/index.ts
|
|
@@ -1374,4 +1428,4 @@ exports.palettes = palettes;
|
|
|
1374
1428
|
exports.rose3 = rose3;
|
|
1375
1429
|
exports.rose5 = rose5;
|
|
1376
1430
|
//# sourceMappingURL=index.cjs.map
|
|
1377
|
-
//# sourceMappingURL=index.cjs.map
|
|
1431
|
+
//# sourceMappingURL=index.cjs.map
|