@sarmal/core 0.17.0 → 0.17.3
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 +89 -110
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.js +88 -109
- 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 +40 -53
- package/dist/curves/index.d.cts +29 -29
- package/dist/curves/index.d.ts +29 -29
- package/dist/curves/index.js +40 -69
- 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 +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 +5 -8
- package/dist/curves/star.d.cts +1 -1
- package/dist/curves/star.d.ts +1 -1
- package/dist/curves/star.js +4 -7
- package/dist/curves/star4.cjs +5 -8
- package/dist/curves/star4.d.cts +1 -1
- package/dist/curves/star4.d.ts +1 -1
- package/dist/curves/star4.js +4 -7
- package/dist/curves/star7.cjs +5 -8
- package/dist/curves/star7.d.cts +1 -1
- package/dist/curves/star7.d.ts +1 -1
- package/dist/curves/star7.js +4 -7
- package/dist/index.cjs +83 -106
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +42 -78
- package/dist/index.d.ts +42 -78
- package/dist/index.js +83 -124
- 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) {
|
|
@@ -400,7 +391,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
|
|
|
400
391
|
if (palette.length === 1) {
|
|
401
392
|
return hexToRgb(palette[0]);
|
|
402
393
|
}
|
|
403
|
-
const cyclePos = (position + timeOffset) % 1;
|
|
394
|
+
const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
|
|
404
395
|
const scaled = cyclePos * palette.length;
|
|
405
396
|
const idx = Math.floor(scaled);
|
|
406
397
|
const t = scaled - idx;
|
|
@@ -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,13 +500,13 @@ 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
|
}
|
|
@@ -525,7 +516,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
|
|
|
525
516
|
var WHITE_HEX = "#ffffff";
|
|
526
517
|
function hexToRgbComponents(hex) {
|
|
527
518
|
const n = parseInt(hex.slice(1), 16);
|
|
528
|
-
return `${n >> 16},${
|
|
519
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
529
520
|
}
|
|
530
521
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
531
522
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -650,7 +641,7 @@ function createRenderer(options) {
|
|
|
650
641
|
i,
|
|
651
642
|
trailCount,
|
|
652
643
|
toX,
|
|
653
|
-
toY
|
|
644
|
+
toY
|
|
654
645
|
);
|
|
655
646
|
if (trailStyle === "default") {
|
|
656
647
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -811,7 +802,7 @@ function createRenderer(options) {
|
|
|
811
802
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
812
803
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
813
804
|
}
|
|
814
|
-
}
|
|
805
|
+
}
|
|
815
806
|
};
|
|
816
807
|
if (shouldAutoStart) {
|
|
817
808
|
instance.play();
|
|
@@ -837,7 +828,7 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
837
828
|
const samples = Math.ceil(period * 50);
|
|
838
829
|
const pts = Array.from({ length: samples });
|
|
839
830
|
for (let i = 0; i < samples; i++) {
|
|
840
|
-
const t =
|
|
831
|
+
const t = i / (samples - 1) * period;
|
|
841
832
|
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(t) : curveDef.fn(t, 0, EMPTY_PARAMS2);
|
|
842
833
|
}
|
|
843
834
|
return pts;
|
|
@@ -948,7 +939,7 @@ function createSVGRenderer(options) {
|
|
|
948
939
|
i,
|
|
949
940
|
trailCount,
|
|
950
941
|
px,
|
|
951
|
-
py
|
|
942
|
+
py
|
|
952
943
|
);
|
|
953
944
|
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`;
|
|
954
945
|
trailPaths[j].setAttribute("d", d);
|
|
@@ -975,8 +966,7 @@ function createSVGRenderer(options) {
|
|
|
975
966
|
}
|
|
976
967
|
let animationId = null;
|
|
977
968
|
let lastTime = 0;
|
|
978
|
-
const prefersReducedMotion =
|
|
979
|
-
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
969
|
+
const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
980
970
|
let morphResolve = null;
|
|
981
971
|
let morphReject = null;
|
|
982
972
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
@@ -994,7 +984,7 @@ function createSVGRenderer(options) {
|
|
|
994
984
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
995
985
|
skeletonPathA.setAttribute(
|
|
996
986
|
"stroke-opacity",
|
|
997
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
987
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
998
988
|
);
|
|
999
989
|
}
|
|
1000
990
|
if (morphPathBBuilt) {
|
|
@@ -1143,7 +1133,7 @@ function createSVGRenderer(options) {
|
|
|
1143
1133
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
1144
1134
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
1145
1135
|
}
|
|
1146
|
-
}
|
|
1136
|
+
}
|
|
1147
1137
|
};
|
|
1148
1138
|
if (shouldAutoStart) {
|
|
1149
1139
|
instance.play();
|
|
@@ -1159,22 +1149,19 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
1159
1149
|
// src/curves/artemis2.ts
|
|
1160
1150
|
var TWO_PI2 = Math.PI * 2;
|
|
1161
1151
|
function artemis2Fn(t, _time, _params) {
|
|
1162
|
-
const a = 0.35,
|
|
1163
|
-
|
|
1164
|
-
ox = 0.175;
|
|
1165
|
-
const s = Math.sin(t),
|
|
1166
|
-
c = Math.cos(t);
|
|
1152
|
+
const a = 0.35, b = 0.15, ox = 0.175;
|
|
1153
|
+
const s = Math.sin(t), c = Math.cos(t);
|
|
1167
1154
|
const denom = 1 + s * s;
|
|
1168
1155
|
return {
|
|
1169
|
-
x:
|
|
1170
|
-
y:
|
|
1156
|
+
x: c * (1 + a * c) / denom - ox,
|
|
1157
|
+
y: s * c * (1 + b * c) / denom
|
|
1171
1158
|
};
|
|
1172
1159
|
}
|
|
1173
1160
|
var artemis2 = {
|
|
1174
1161
|
name: "Artemis II",
|
|
1175
1162
|
fn: artemis2Fn,
|
|
1176
1163
|
period: TWO_PI2,
|
|
1177
|
-
speed: 0.7
|
|
1164
|
+
speed: 0.7
|
|
1178
1165
|
};
|
|
1179
1166
|
|
|
1180
1167
|
// src/curves/astroid.ts
|
|
@@ -1184,14 +1171,14 @@ function astroidFn(t, _time, _params) {
|
|
|
1184
1171
|
const s = Math.sin(t);
|
|
1185
1172
|
return {
|
|
1186
1173
|
x: c * c * c,
|
|
1187
|
-
y: s * s * s
|
|
1174
|
+
y: s * s * s
|
|
1188
1175
|
};
|
|
1189
1176
|
}
|
|
1190
1177
|
var astroid = {
|
|
1191
1178
|
name: "Astroid",
|
|
1192
1179
|
fn: astroidFn,
|
|
1193
1180
|
period: TWO_PI3,
|
|
1194
|
-
speed: 1.1
|
|
1181
|
+
speed: 1.1
|
|
1195
1182
|
};
|
|
1196
1183
|
|
|
1197
1184
|
// src/curves/deltoid.ts
|
|
@@ -1199,14 +1186,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
1199
1186
|
function deltoidFn(t, _time, _params) {
|
|
1200
1187
|
return {
|
|
1201
1188
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
1202
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1189
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
1203
1190
|
};
|
|
1204
1191
|
}
|
|
1205
1192
|
var deltoid = {
|
|
1206
1193
|
name: "Deltoid",
|
|
1207
1194
|
fn: deltoidFn,
|
|
1208
1195
|
period: TWO_PI4,
|
|
1209
|
-
speed: 0.9
|
|
1196
|
+
speed: 0.9
|
|
1210
1197
|
};
|
|
1211
1198
|
|
|
1212
1199
|
// src/curves/epicycloid3.ts
|
|
@@ -1214,14 +1201,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
1214
1201
|
function epicycloid3Fn(t, _time, _params) {
|
|
1215
1202
|
return {
|
|
1216
1203
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
1217
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1204
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
1218
1205
|
};
|
|
1219
1206
|
}
|
|
1220
1207
|
var epicycloid3 = {
|
|
1221
1208
|
name: "Epicycloid (n=3)",
|
|
1222
1209
|
fn: epicycloid3Fn,
|
|
1223
1210
|
period: TWO_PI5,
|
|
1224
|
-
speed: 0.75
|
|
1211
|
+
speed: 0.75
|
|
1225
1212
|
};
|
|
1226
1213
|
|
|
1227
1214
|
// src/curves/epitrochoid7.ts
|
|
@@ -1230,14 +1217,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
1230
1217
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
1231
1218
|
return {
|
|
1232
1219
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1233
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1220
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1234
1221
|
};
|
|
1235
1222
|
}
|
|
1236
1223
|
function epitrochoid7SkeletonFn(t) {
|
|
1237
1224
|
const d = 1.275;
|
|
1238
1225
|
return {
|
|
1239
1226
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
1240
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1227
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
1241
1228
|
};
|
|
1242
1229
|
}
|
|
1243
1230
|
var epitrochoid7 = {
|
|
@@ -1245,7 +1232,7 @@ var epitrochoid7 = {
|
|
|
1245
1232
|
fn: epitrochoid7Fn,
|
|
1246
1233
|
period: TWO_PI6,
|
|
1247
1234
|
speed: 1.4,
|
|
1248
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1235
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
1249
1236
|
};
|
|
1250
1237
|
|
|
1251
1238
|
// src/curves/lissajous32.ts
|
|
@@ -1254,7 +1241,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
1254
1241
|
const phi = time * 0.45;
|
|
1255
1242
|
return {
|
|
1256
1243
|
x: Math.sin(3 * t + phi),
|
|
1257
|
-
y: Math.sin(2 * t)
|
|
1244
|
+
y: Math.sin(2 * t)
|
|
1258
1245
|
};
|
|
1259
1246
|
}
|
|
1260
1247
|
var lissajous32 = {
|
|
@@ -1262,7 +1249,7 @@ var lissajous32 = {
|
|
|
1262
1249
|
fn: lissajous32Fn,
|
|
1263
1250
|
period: TWO_PI7,
|
|
1264
1251
|
speed: 2,
|
|
1265
|
-
skeleton: "live"
|
|
1252
|
+
skeleton: "live"
|
|
1266
1253
|
};
|
|
1267
1254
|
|
|
1268
1255
|
// src/curves/lissajous43.ts
|
|
@@ -1271,7 +1258,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
1271
1258
|
const phi = time * 0.38;
|
|
1272
1259
|
return {
|
|
1273
1260
|
x: Math.sin(4 * t + phi),
|
|
1274
|
-
y: Math.sin(3 * t)
|
|
1261
|
+
y: Math.sin(3 * t)
|
|
1275
1262
|
};
|
|
1276
1263
|
}
|
|
1277
1264
|
var lissajous43 = {
|
|
@@ -1279,18 +1266,17 @@ var lissajous43 = {
|
|
|
1279
1266
|
fn: lissajous43Fn,
|
|
1280
1267
|
period: TWO_PI8,
|
|
1281
1268
|
speed: 1.8,
|
|
1282
|
-
skeleton: "live"
|
|
1269
|
+
skeleton: "live"
|
|
1283
1270
|
};
|
|
1284
1271
|
|
|
1285
1272
|
// src/curves/lame.ts
|
|
1286
1273
|
var TWO_PI9 = Math.PI * 2;
|
|
1287
1274
|
function lameFn(t, time, _params) {
|
|
1288
1275
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1289
|
-
const c = Math.cos(t),
|
|
1290
|
-
s = Math.sin(t);
|
|
1276
|
+
const c = Math.cos(t), s = Math.sin(t);
|
|
1291
1277
|
return {
|
|
1292
1278
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1293
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1279
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1294
1280
|
};
|
|
1295
1281
|
}
|
|
1296
1282
|
var lame = {
|
|
@@ -1298,7 +1284,7 @@ var lame = {
|
|
|
1298
1284
|
fn: lameFn,
|
|
1299
1285
|
period: TWO_PI9,
|
|
1300
1286
|
speed: 1,
|
|
1301
|
-
skeleton: "live"
|
|
1287
|
+
skeleton: "live"
|
|
1302
1288
|
};
|
|
1303
1289
|
|
|
1304
1290
|
// src/curves/rose3.ts
|
|
@@ -1307,14 +1293,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
1307
1293
|
const r = Math.cos(3 * t);
|
|
1308
1294
|
return {
|
|
1309
1295
|
x: r * Math.cos(t),
|
|
1310
|
-
y: r * Math.sin(t)
|
|
1296
|
+
y: r * Math.sin(t)
|
|
1311
1297
|
};
|
|
1312
1298
|
}
|
|
1313
1299
|
var rose3 = {
|
|
1314
1300
|
name: "Rose (n=3)",
|
|
1315
1301
|
fn: rose3Fn,
|
|
1316
1302
|
period: TWO_PI10,
|
|
1317
|
-
speed: 1.15
|
|
1303
|
+
speed: 1.15
|
|
1318
1304
|
};
|
|
1319
1305
|
|
|
1320
1306
|
// src/curves/rose5.ts
|
|
@@ -1323,87 +1309,78 @@ function rose5Fn(t, _time, _params) {
|
|
|
1323
1309
|
const r = Math.cos(5 * t);
|
|
1324
1310
|
return {
|
|
1325
1311
|
x: r * Math.cos(t),
|
|
1326
|
-
y: r * Math.sin(t)
|
|
1312
|
+
y: r * Math.sin(t)
|
|
1327
1313
|
};
|
|
1328
1314
|
}
|
|
1329
1315
|
var rose5 = {
|
|
1330
1316
|
name: "Rose (n=5)",
|
|
1331
1317
|
fn: rose5Fn,
|
|
1332
1318
|
period: TWO_PI11,
|
|
1333
|
-
speed: 1
|
|
1319
|
+
speed: 1
|
|
1334
1320
|
};
|
|
1335
1321
|
|
|
1336
1322
|
// src/curves/rose52.ts
|
|
1337
1323
|
var FOUR_PI = Math.PI * 4;
|
|
1338
1324
|
function rose52Fn(t, _time, _params) {
|
|
1339
|
-
const r = Math.cos(
|
|
1325
|
+
const r = Math.cos(5 / 2 * t);
|
|
1340
1326
|
return {
|
|
1341
1327
|
x: r * Math.cos(t),
|
|
1342
|
-
y: r * Math.sin(t)
|
|
1328
|
+
y: r * Math.sin(t)
|
|
1343
1329
|
};
|
|
1344
1330
|
}
|
|
1345
1331
|
var rose52 = {
|
|
1346
1332
|
name: "Rose (n=5/2)",
|
|
1347
1333
|
fn: rose52Fn,
|
|
1348
1334
|
period: FOUR_PI,
|
|
1349
|
-
speed: 0.8
|
|
1335
|
+
speed: 0.8
|
|
1350
1336
|
};
|
|
1351
1337
|
|
|
1352
1338
|
// src/curves/star.ts
|
|
1353
1339
|
var TWO_PI12 = Math.PI * 2;
|
|
1354
1340
|
function starFn(t, _time, _params) {
|
|
1355
|
-
const r =
|
|
1356
|
-
Math.abs(Math.cos((5 / 2) * t)) +
|
|
1357
|
-
0.35 * Math.abs(Math.cos((15 / 2) * t)) +
|
|
1358
|
-
0.15 * Math.abs(Math.cos((25 / 2) * t));
|
|
1341
|
+
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));
|
|
1359
1342
|
return {
|
|
1360
1343
|
x: r * Math.cos(t),
|
|
1361
|
-
y: r * Math.sin(t)
|
|
1344
|
+
y: r * Math.sin(t)
|
|
1362
1345
|
};
|
|
1363
1346
|
}
|
|
1364
1347
|
var star = {
|
|
1365
1348
|
name: "Star",
|
|
1366
1349
|
fn: starFn,
|
|
1367
1350
|
period: TWO_PI12,
|
|
1368
|
-
speed: 1
|
|
1351
|
+
speed: 1
|
|
1369
1352
|
};
|
|
1370
1353
|
|
|
1371
1354
|
// src/curves/star4.ts
|
|
1372
1355
|
var TWO_PI13 = Math.PI * 2;
|
|
1373
1356
|
function star4Fn(t, _time, _params) {
|
|
1374
|
-
const r =
|
|
1375
|
-
Math.abs(Math.cos(2 * t)) +
|
|
1376
|
-
0.35 * Math.abs(Math.cos(6 * t)) +
|
|
1377
|
-
0.15 * Math.abs(Math.cos(10 * t));
|
|
1357
|
+
const r = Math.abs(Math.cos(2 * t)) + 0.35 * Math.abs(Math.cos(6 * t)) + 0.15 * Math.abs(Math.cos(10 * t));
|
|
1378
1358
|
return {
|
|
1379
1359
|
x: r * Math.cos(t),
|
|
1380
|
-
y: r * Math.sin(t)
|
|
1360
|
+
y: r * Math.sin(t)
|
|
1381
1361
|
};
|
|
1382
1362
|
}
|
|
1383
1363
|
var star4 = {
|
|
1384
1364
|
name: "Star (4-arm)",
|
|
1385
1365
|
fn: star4Fn,
|
|
1386
1366
|
period: TWO_PI13,
|
|
1387
|
-
speed: 1
|
|
1367
|
+
speed: 1
|
|
1388
1368
|
};
|
|
1389
1369
|
|
|
1390
1370
|
// src/curves/star7.ts
|
|
1391
1371
|
var TWO_PI14 = Math.PI * 2;
|
|
1392
1372
|
function star7Fn(t, _time, _params) {
|
|
1393
|
-
const r =
|
|
1394
|
-
Math.abs(Math.cos((7 / 2) * t)) +
|
|
1395
|
-
0.35 * Math.abs(Math.cos((21 / 2) * t)) +
|
|
1396
|
-
0.15 * Math.abs(Math.cos((35 / 2) * t));
|
|
1373
|
+
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));
|
|
1397
1374
|
return {
|
|
1398
1375
|
x: r * Math.cos(t),
|
|
1399
|
-
y: r * Math.sin(t)
|
|
1376
|
+
y: r * Math.sin(t)
|
|
1400
1377
|
};
|
|
1401
1378
|
}
|
|
1402
1379
|
var star7 = {
|
|
1403
1380
|
name: "Star (7-arm)",
|
|
1404
1381
|
fn: star7Fn,
|
|
1405
1382
|
period: TWO_PI14,
|
|
1406
|
-
speed: 1
|
|
1383
|
+
speed: 1
|
|
1407
1384
|
};
|
|
1408
1385
|
|
|
1409
1386
|
// src/curves/index.ts
|
|
@@ -1421,7 +1398,7 @@ var curves = {
|
|
|
1421
1398
|
lissajous32,
|
|
1422
1399
|
lissajous43,
|
|
1423
1400
|
epicycloid3,
|
|
1424
|
-
lame
|
|
1401
|
+
lame
|
|
1425
1402
|
};
|
|
1426
1403
|
|
|
1427
1404
|
// src/index.ts
|
|
@@ -1431,24 +1408,6 @@ function createSarmal(canvas, curveDef, options) {
|
|
|
1431
1408
|
return createRenderer({ canvas, engine, ...rendererOpts });
|
|
1432
1409
|
}
|
|
1433
1410
|
|
|
1434
|
-
export {
|
|
1435
|
-
artemis2,
|
|
1436
|
-
astroid,
|
|
1437
|
-
createEngine,
|
|
1438
|
-
createRenderer,
|
|
1439
|
-
createSVGRenderer,
|
|
1440
|
-
createSarmal,
|
|
1441
|
-
createSarmalSVG,
|
|
1442
|
-
curves,
|
|
1443
|
-
deltoid,
|
|
1444
|
-
epicycloid3,
|
|
1445
|
-
epitrochoid7,
|
|
1446
|
-
lame,
|
|
1447
|
-
lissajous32,
|
|
1448
|
-
lissajous43,
|
|
1449
|
-
palettes,
|
|
1450
|
-
rose3,
|
|
1451
|
-
rose5,
|
|
1452
|
-
};
|
|
1453
|
-
//# sourceMappingURL=index.js.map
|
|
1411
|
+
export { artemis2, astroid, createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves, deltoid, epicycloid3, epitrochoid7, lame, lissajous32, lissajous43, palettes, rose3, rose5 };
|
|
1454
1412
|
//# sourceMappingURL=index.js.map
|
|
1413
|
+
//# sourceMappingURL=index.js.map
|