@sarmal/core 0.25.1 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auto-init.cjs +170 -206
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.js +169 -205
- package/dist/auto-init.js.map +1 -1
- package/dist/curves/artemis2.cjs +14 -20
- package/dist/curves/artemis2.cjs.map +1 -1
- package/dist/curves/artemis2.d.cts +1 -1
- package/dist/curves/artemis2.d.ts +1 -1
- package/dist/curves/artemis2.js +13 -19
- package/dist/curves/artemis2.js.map +1 -1
- package/dist/curves/astroid.cjs +7 -7
- package/dist/curves/astroid.cjs.map +1 -1
- package/dist/curves/astroid.d.cts +1 -1
- package/dist/curves/astroid.d.ts +1 -1
- package/dist/curves/astroid.js +6 -6
- package/dist/curves/astroid.js.map +1 -1
- package/dist/curves/deltoid.cjs +6 -6
- package/dist/curves/deltoid.cjs.map +1 -1
- package/dist/curves/deltoid.d.cts +1 -1
- package/dist/curves/deltoid.d.ts +1 -1
- package/dist/curves/deltoid.js +5 -5
- package/dist/curves/deltoid.js.map +1 -1
- package/dist/curves/epicycloid3.cjs +6 -6
- package/dist/curves/epicycloid3.cjs.map +1 -1
- package/dist/curves/epicycloid3.d.cts +1 -1
- package/dist/curves/epicycloid3.d.ts +1 -1
- package/dist/curves/epicycloid3.js +5 -5
- package/dist/curves/epicycloid3.js.map +1 -1
- package/dist/curves/epitrochoid7.cjs +10 -10
- package/dist/curves/epitrochoid7.cjs.map +1 -1
- package/dist/curves/epitrochoid7.d.cts +1 -1
- package/dist/curves/epitrochoid7.d.ts +1 -1
- package/dist/curves/epitrochoid7.js +9 -9
- package/dist/curves/epitrochoid7.js.map +1 -1
- package/dist/curves/index.cjs +81 -97
- package/dist/curves/index.cjs.map +1 -1
- package/dist/curves/index.d.cts +29 -29
- package/dist/curves/index.d.ts +29 -29
- package/dist/curves/index.js +81 -113
- package/dist/curves/index.js.map +1 -1
- package/dist/curves/lame.cjs +7 -8
- package/dist/curves/lame.cjs.map +1 -1
- package/dist/curves/lame.d.cts +1 -1
- package/dist/curves/lame.d.ts +1 -1
- package/dist/curves/lame.js +6 -7
- package/dist/curves/lame.js.map +1 -1
- package/dist/curves/lissajous32.cjs +7 -7
- package/dist/curves/lissajous32.cjs.map +1 -1
- package/dist/curves/lissajous32.d.cts +1 -1
- package/dist/curves/lissajous32.d.ts +1 -1
- package/dist/curves/lissajous32.js +6 -6
- package/dist/curves/lissajous32.js.map +1 -1
- package/dist/curves/lissajous43.cjs +7 -7
- package/dist/curves/lissajous43.cjs.map +1 -1
- package/dist/curves/lissajous43.d.cts +1 -1
- package/dist/curves/lissajous43.d.ts +1 -1
- package/dist/curves/lissajous43.js +6 -6
- package/dist/curves/lissajous43.js.map +1 -1
- package/dist/curves/rose3.cjs +7 -7
- package/dist/curves/rose3.cjs.map +1 -1
- package/dist/curves/rose3.d.cts +1 -1
- package/dist/curves/rose3.d.ts +1 -1
- package/dist/curves/rose3.js +6 -6
- package/dist/curves/rose3.js.map +1 -1
- package/dist/curves/rose5.cjs +7 -7
- package/dist/curves/rose5.cjs.map +1 -1
- package/dist/curves/rose5.d.cts +1 -1
- package/dist/curves/rose5.d.ts +1 -1
- package/dist/curves/rose5.js +6 -6
- package/dist/curves/rose5.js.map +1 -1
- package/dist/curves/rose52.cjs +7 -7
- package/dist/curves/rose52.cjs.map +1 -1
- package/dist/curves/rose52.d.cts +1 -1
- package/dist/curves/rose52.d.ts +1 -1
- package/dist/curves/rose52.js +6 -6
- package/dist/curves/rose52.js.map +1 -1
- package/dist/curves/star.cjs +7 -10
- package/dist/curves/star.cjs.map +1 -1
- package/dist/curves/star.d.cts +1 -1
- package/dist/curves/star.d.ts +1 -1
- package/dist/curves/star.js +6 -9
- package/dist/curves/star.js.map +1 -1
- package/dist/curves/star4.cjs +7 -10
- package/dist/curves/star4.cjs.map +1 -1
- package/dist/curves/star4.d.cts +2 -2
- package/dist/curves/star4.d.ts +2 -2
- package/dist/curves/star4.js +6 -9
- package/dist/curves/star4.js.map +1 -1
- package/dist/curves/star7.cjs +7 -10
- package/dist/curves/star7.cjs.map +1 -1
- package/dist/curves/star7.d.cts +2 -2
- package/dist/curves/star7.d.ts +2 -2
- package/dist/curves/star7.js +6 -9
- package/dist/curves/star7.js.map +1 -1
- package/dist/index.cjs +158 -192
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +43 -95
- package/dist/index.d.ts +43 -95
- package/dist/index.js +158 -213
- package/dist/index.js.map +1 -1
- package/dist/types-zbxUgcmZ.d.cts +325 -0
- package/dist/types-zbxUgcmZ.d.ts +325 -0
- package/package.json +1 -1
- package/dist/types-Z9i1_AQZ.d.cts +0 -339
- package/dist/types-Z9i1_AQZ.d.ts +0 -339
package/dist/auto-init.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,32 +63,32 @@ 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);
|
|
76
76
|
const trail = new CircularBuffer(trailLength);
|
|
77
|
-
let
|
|
77
|
+
let phase = 0;
|
|
78
78
|
let actualTime = 0;
|
|
79
79
|
let userSpeedOverride = null;
|
|
80
80
|
let morphCurveB = null;
|
|
81
81
|
let _morphAlpha = null;
|
|
82
82
|
let _morphStrategy = "normalized";
|
|
83
83
|
let _speedTransition = null;
|
|
84
|
-
function sampleSkeleton(c,
|
|
84
|
+
function sampleSkeleton(c, samplePhase) {
|
|
85
85
|
if (c.skeletonFn) {
|
|
86
|
-
return c.skeletonFn(
|
|
86
|
+
return c.skeletonFn(samplePhase);
|
|
87
87
|
}
|
|
88
88
|
if (c.skeleton === "live") {
|
|
89
|
-
return c.fn(
|
|
89
|
+
return c.fn(samplePhase, actualTime, EMPTY_PARAMS);
|
|
90
90
|
}
|
|
91
|
-
return c.fn(
|
|
91
|
+
return c.fn(samplePhase, 0, EMPTY_PARAMS);
|
|
92
92
|
}
|
|
93
93
|
return {
|
|
94
94
|
tick(deltaTime) {
|
|
@@ -106,15 +106,15 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
106
106
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
107
107
|
effectiveSpeed = lerp(effectiveSpeed, morphCurveB.speed, _morphAlpha);
|
|
108
108
|
}
|
|
109
|
-
|
|
109
|
+
phase = (phase + effectiveSpeed * deltaTime) % curve.period;
|
|
110
110
|
actualTime += deltaTime;
|
|
111
111
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
112
|
-
const a = curve.fn(
|
|
113
|
-
const
|
|
114
|
-
const b = morphCurveB.fn(
|
|
112
|
+
const a = curve.fn(phase, actualTime, EMPTY_PARAMS);
|
|
113
|
+
const phaseB = _morphStrategy === "normalized" ? phase / curve.period * morphCurveB.period : phase;
|
|
114
|
+
const b = morphCurveB.fn(phaseB, actualTime, EMPTY_PARAMS);
|
|
115
115
|
trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
|
|
116
116
|
} else {
|
|
117
|
-
const point = curve.fn(
|
|
117
|
+
const point = curve.fn(phase, actualTime, EMPTY_PARAMS);
|
|
118
118
|
trail.push(point.x, point.y);
|
|
119
119
|
}
|
|
120
120
|
return trail.toArray();
|
|
@@ -132,30 +132,30 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
132
132
|
return _morphAlpha;
|
|
133
133
|
},
|
|
134
134
|
reset() {
|
|
135
|
-
|
|
135
|
+
phase = 0;
|
|
136
136
|
actualTime = 0;
|
|
137
137
|
trail.clear();
|
|
138
138
|
},
|
|
139
|
-
jump(
|
|
140
|
-
|
|
139
|
+
jump(newPhase, { clearTrail = false } = {}) {
|
|
140
|
+
phase = (newPhase % curve.period + curve.period) % curve.period;
|
|
141
141
|
if (clearTrail) {
|
|
142
142
|
trail.clear();
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
|
-
seek(
|
|
145
|
+
seek(targetPhase, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
146
146
|
const advance = curve.speed * step;
|
|
147
|
-
const target = (
|
|
147
|
+
const target = (targetPhase % curve.period + curve.period) % curve.period;
|
|
148
148
|
const targetTime = target / curve.speed;
|
|
149
|
-
|
|
149
|
+
phase = target;
|
|
150
150
|
actualTime = targetTime;
|
|
151
151
|
trail.clear();
|
|
152
152
|
const pointsFromStart = Math.floor(target / advance) + 1;
|
|
153
153
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
154
154
|
for (let i = count - 1; i >= 0; i--) {
|
|
155
|
-
const
|
|
156
|
-
const
|
|
157
|
-
const
|
|
158
|
-
const point = curve.fn(
|
|
155
|
+
const samplePhase = target - i * advance;
|
|
156
|
+
const wrappedPhase = (samplePhase % curve.period + curve.period) % curve.period;
|
|
157
|
+
const elapsed = targetTime - i * step;
|
|
158
|
+
const point = curve.fn(wrappedPhase, elapsed, EMPTY_PARAMS);
|
|
159
159
|
trail.push(point.x, point.y);
|
|
160
160
|
}
|
|
161
161
|
},
|
|
@@ -168,18 +168,15 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
168
168
|
const frozenStrategy = _morphStrategy;
|
|
169
169
|
curve = {
|
|
170
170
|
...frozenB,
|
|
171
|
-
fn: (
|
|
172
|
-
const a = frozenA.fn(
|
|
173
|
-
const
|
|
174
|
-
|
|
175
|
-
? (sampleT / frozenA.period) * frozenB.period
|
|
176
|
-
: sampleT;
|
|
177
|
-
const b = frozenB.fn(tB, time, params);
|
|
171
|
+
fn: (samplePhase, elapsed, params) => {
|
|
172
|
+
const a = frozenA.fn(samplePhase, elapsed, params);
|
|
173
|
+
const phaseB = frozenStrategy === "normalized" ? samplePhase / frozenA.period * frozenB.period : samplePhase;
|
|
174
|
+
const b = frozenB.fn(phaseB, elapsed, params);
|
|
178
175
|
return {
|
|
179
176
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
180
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
177
|
+
y: a.y + (b.y - a.y) * frozenAlpha
|
|
181
178
|
};
|
|
182
|
-
}
|
|
179
|
+
}
|
|
183
180
|
};
|
|
184
181
|
}
|
|
185
182
|
_morphStrategy = strategy;
|
|
@@ -192,7 +189,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
192
189
|
completeMorph() {
|
|
193
190
|
if (morphCurveB !== null) {
|
|
194
191
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
195
|
-
|
|
192
|
+
phase = phase / curve.period * morphCurveB.period;
|
|
196
193
|
}
|
|
197
194
|
curve = morphCurveB;
|
|
198
195
|
}
|
|
@@ -204,23 +201,20 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
204
201
|
const points2 = new Array(steps);
|
|
205
202
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
206
203
|
for (let i = 0; i < steps; i++) {
|
|
207
|
-
const
|
|
208
|
-
const a = sampleSkeleton(curve,
|
|
209
|
-
const
|
|
210
|
-
|
|
211
|
-
? (sampleT / curve.period) * morphCurveB.period
|
|
212
|
-
: sampleT;
|
|
213
|
-
const b = sampleSkeleton(morphCurveB, tB);
|
|
204
|
+
const samplePhase = i / (steps - 1) * curve.period;
|
|
205
|
+
const a = sampleSkeleton(curve, samplePhase);
|
|
206
|
+
const phaseB = _morphStrategy === "normalized" ? samplePhase / curve.period * morphCurveB.period : samplePhase;
|
|
207
|
+
const b = sampleSkeleton(morphCurveB, phaseB);
|
|
214
208
|
points2[i] = {
|
|
215
209
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
216
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
210
|
+
y: a.y + (b.y - a.y) * _morphAlpha
|
|
217
211
|
};
|
|
218
212
|
}
|
|
219
213
|
return points2;
|
|
220
214
|
}
|
|
221
215
|
for (let i = 0; i < steps; i++) {
|
|
222
|
-
const
|
|
223
|
-
points2[i] = sampleSkeleton(curve,
|
|
216
|
+
const samplePhase = i / (steps - 1) * curve.period;
|
|
217
|
+
points2[i] = sampleSkeleton(curve, samplePhase);
|
|
224
218
|
}
|
|
225
219
|
return points2;
|
|
226
220
|
},
|
|
@@ -261,7 +255,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
261
255
|
_speedTransition.reject(new Error("Speed transition cancelled"));
|
|
262
256
|
_speedTransition = null;
|
|
263
257
|
}
|
|
264
|
-
}
|
|
258
|
+
}
|
|
265
259
|
};
|
|
266
260
|
}
|
|
267
261
|
|
|
@@ -300,15 +294,7 @@ function computeNormal(trail, i) {
|
|
|
300
294
|
const tangent = computeTangent(trail, i);
|
|
301
295
|
return { x: -tangent.y, y: tangent.x };
|
|
302
296
|
}
|
|
303
|
-
function computeTrailQuad(
|
|
304
|
-
trail,
|
|
305
|
-
i,
|
|
306
|
-
trailCount,
|
|
307
|
-
toX,
|
|
308
|
-
toY,
|
|
309
|
-
minWidth = TRAIL_MIN_WIDTH,
|
|
310
|
-
maxWidth = TRAIL_MAX_WIDTH,
|
|
311
|
-
) {
|
|
297
|
+
function computeTrailQuad(trail, i, trailCount, toX, toY, minWidth = TRAIL_MIN_WIDTH, maxWidth = TRAIL_MAX_WIDTH) {
|
|
312
298
|
const progress = i / (trailCount - 1);
|
|
313
299
|
const nextProgress = (i + 1) / (trailCount - 1);
|
|
314
300
|
const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
|
|
@@ -332,16 +318,13 @@ function computeTrailQuad(
|
|
|
332
318
|
r1x: nx - n1.x * w1,
|
|
333
319
|
r1y: ny - n1.y * w1,
|
|
334
320
|
opacity,
|
|
335
|
-
progress
|
|
321
|
+
progress
|
|
336
322
|
};
|
|
337
323
|
}
|
|
338
324
|
function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_PADDING_MIN) {
|
|
339
325
|
if (pts.length === 0) return null;
|
|
340
326
|
const first = pts[0];
|
|
341
|
-
let minX = first.x,
|
|
342
|
-
maxX = first.x,
|
|
343
|
-
minY = first.y,
|
|
344
|
-
maxY = first.y;
|
|
327
|
+
let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
|
|
345
328
|
for (const p of pts) {
|
|
346
329
|
if (p.x < minX) {
|
|
347
330
|
minX = p.x;
|
|
@@ -360,7 +343,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_
|
|
|
360
343
|
const h = maxY - minY;
|
|
361
344
|
if (w === 0 && h === 0) {
|
|
362
345
|
throw new Error(
|
|
363
|
-
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
346
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
364
347
|
);
|
|
365
348
|
}
|
|
366
349
|
const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
|
|
@@ -371,12 +354,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight, minPaddingPx = FIT_
|
|
|
371
354
|
scaleXProportional,
|
|
372
355
|
scaleYProportional,
|
|
373
356
|
scaleXMinPadding,
|
|
374
|
-
scaleYMinPadding
|
|
357
|
+
scaleYMinPadding
|
|
375
358
|
);
|
|
376
359
|
return {
|
|
377
360
|
scale,
|
|
378
361
|
offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
|
|
379
|
-
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
362
|
+
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
380
363
|
};
|
|
381
364
|
}
|
|
382
365
|
function enginePassthroughs(engine) {
|
|
@@ -387,17 +370,17 @@ function enginePassthroughs(engine) {
|
|
|
387
370
|
getSpeed: engine.getSpeed,
|
|
388
371
|
resetSpeed: engine.resetSpeed,
|
|
389
372
|
setSpeedOver: engine.setSpeedOver,
|
|
390
|
-
getSarmalSkeleton: engine.getSarmalSkeleton
|
|
373
|
+
getSarmalSkeleton: engine.getSarmalSkeleton
|
|
391
374
|
};
|
|
392
375
|
}
|
|
393
376
|
function hexToRgb(hex) {
|
|
394
377
|
const n = parseInt(hex.slice(1), 16);
|
|
395
|
-
return { r: n >> 16, g:
|
|
378
|
+
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
396
379
|
}
|
|
397
380
|
var lerpRgb = (a, b, t) => ({
|
|
398
381
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
399
382
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
400
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
383
|
+
b: Math.round(a.b + (b.b - a.b) * t)
|
|
401
384
|
});
|
|
402
385
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
403
386
|
if (palette.length === 0) {
|
|
@@ -406,7 +389,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
|
|
|
406
389
|
if (palette.length === 1) {
|
|
407
390
|
return hexToRgb(palette[0]);
|
|
408
391
|
}
|
|
409
|
-
const cyclePos = ((
|
|
392
|
+
const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
|
|
410
393
|
const scaled = cyclePos * palette.length;
|
|
411
394
|
const idx = Math.floor(scaled);
|
|
412
395
|
const t = scaled - idx;
|
|
@@ -421,7 +404,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
|
|
|
421
404
|
"headColor",
|
|
422
405
|
"skeletonColor",
|
|
423
406
|
"trailStyle",
|
|
424
|
-
"headRadius"
|
|
407
|
+
"headRadius"
|
|
425
408
|
]);
|
|
426
409
|
function validateRenderOptions(partial) {
|
|
427
410
|
for (const key of Object.keys(partial)) {
|
|
@@ -449,7 +432,7 @@ function assertTrailColor(value) {
|
|
|
449
432
|
if (typeof value === "string") {
|
|
450
433
|
if (!HEX_COLOR_RE.test(value)) {
|
|
451
434
|
throw new TypeError(
|
|
452
|
-
`[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}"`
|
|
453
436
|
);
|
|
454
437
|
}
|
|
455
438
|
return;
|
|
@@ -457,21 +440,21 @@ function assertTrailColor(value) {
|
|
|
457
440
|
if (Array.isArray(value)) {
|
|
458
441
|
if (value.length < 2) {
|
|
459
442
|
throw new RangeError(
|
|
460
|
-
`[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}`
|
|
461
444
|
);
|
|
462
445
|
}
|
|
463
446
|
for (let i = 0; i < value.length; i++) {
|
|
464
447
|
const entry = value[i];
|
|
465
448
|
if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
|
|
466
449
|
throw new TypeError(
|
|
467
|
-
`[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)}`
|
|
468
451
|
);
|
|
469
452
|
}
|
|
470
453
|
}
|
|
471
454
|
return;
|
|
472
455
|
}
|
|
473
456
|
throw new TypeError(
|
|
474
|
-
`[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)}`
|
|
475
458
|
);
|
|
476
459
|
}
|
|
477
460
|
function assertHeadColor(value) {
|
|
@@ -480,7 +463,7 @@ function assertHeadColor(value) {
|
|
|
480
463
|
}
|
|
481
464
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
482
465
|
throw new TypeError(
|
|
483
|
-
`[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)}`
|
|
484
467
|
);
|
|
485
468
|
}
|
|
486
469
|
}
|
|
@@ -490,26 +473,26 @@ function assertSkeletonColor(value) {
|
|
|
490
473
|
}
|
|
491
474
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
492
475
|
throw new TypeError(
|
|
493
|
-
`[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)}`
|
|
494
477
|
);
|
|
495
478
|
}
|
|
496
479
|
}
|
|
497
480
|
function assertTrailStyle(value) {
|
|
498
481
|
if (!TRAIL_STYLES.includes(value)) {
|
|
499
482
|
throw new RangeError(
|
|
500
|
-
`[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)}`
|
|
501
484
|
);
|
|
502
485
|
}
|
|
503
486
|
}
|
|
504
487
|
function assertHeadRadius(value) {
|
|
505
488
|
if (typeof value !== "number") {
|
|
506
489
|
throw new TypeError(
|
|
507
|
-
`[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}
|
|
490
|
+
`[sarmal] setRenderOptions: headRadius must be a number, got ${JSON.stringify(value)}`
|
|
508
491
|
);
|
|
509
492
|
}
|
|
510
493
|
if (!Number.isFinite(value) || value <= 0) {
|
|
511
494
|
throw new TypeError(
|
|
512
|
-
`[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}
|
|
495
|
+
`[sarmal] setRenderOptions: headRadius must be a finite positive number, got ${value}`
|
|
513
496
|
);
|
|
514
497
|
}
|
|
515
498
|
}
|
|
@@ -531,13 +514,13 @@ function resolveHeadColor(trailColor, trailStyle) {
|
|
|
531
514
|
function warnIfTrailColorMismatch(trailColor, trailStyle) {
|
|
532
515
|
if (trailStyle === "default" && Array.isArray(trailColor)) {
|
|
533
516
|
console.warn(
|
|
534
|
-
'[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
|
|
517
|
+
'[sarmal] trailColor is an array but trailStyle is "default"; only the first color will be used. Pass a gradient trailStyle to use the whole palette.'
|
|
535
518
|
);
|
|
536
519
|
return;
|
|
537
520
|
}
|
|
538
521
|
if (trailStyle !== "default" && typeof trailColor === "string") {
|
|
539
522
|
console.warn(
|
|
540
|
-
`[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient
|
|
523
|
+
`[sarmal] trailColor is a single color but trailStyle is "${trailStyle}"; the trail will render as a solid color. Pass an array of hex colors to use a real gradient.`
|
|
541
524
|
);
|
|
542
525
|
}
|
|
543
526
|
}
|
|
@@ -547,7 +530,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
|
|
|
547
530
|
var WHITE_HEX = "#ffffff";
|
|
548
531
|
function hexToRgbComponents(hex) {
|
|
549
532
|
const n = parseInt(hex.slice(1), 16);
|
|
550
|
-
return `${n >> 16},${
|
|
533
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
551
534
|
}
|
|
552
535
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
553
536
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -674,7 +657,7 @@ function createRenderer(options) {
|
|
|
674
657
|
i,
|
|
675
658
|
trailCount,
|
|
676
659
|
toX,
|
|
677
|
-
toY
|
|
660
|
+
toY
|
|
678
661
|
);
|
|
679
662
|
if (trailStyle === "default") {
|
|
680
663
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -754,8 +737,8 @@ function createRenderer(options) {
|
|
|
754
737
|
if (!engine.isLiveSkeleton) {
|
|
755
738
|
buildSkeletonCanvas();
|
|
756
739
|
}
|
|
757
|
-
if (options.
|
|
758
|
-
engine.seek(options.
|
|
740
|
+
if (options.initialPhase !== void 0) {
|
|
741
|
+
engine.seek(options.initialPhase);
|
|
759
742
|
}
|
|
760
743
|
renderFrame(0);
|
|
761
744
|
const shouldAutoStart = options.autoStart !== false;
|
|
@@ -839,7 +822,7 @@ function createRenderer(options) {
|
|
|
839
822
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
840
823
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
841
824
|
}
|
|
842
|
-
}
|
|
825
|
+
}
|
|
843
826
|
};
|
|
844
827
|
const pauseOnHidden = options.pauseOnHidden !== false;
|
|
845
828
|
function handleVisibilityChange() {
|
|
@@ -889,8 +872,8 @@ function sampleCurveSkeleton(curveDef) {
|
|
|
889
872
|
const samples = Math.ceil(period * 50);
|
|
890
873
|
const pts = Array.from({ length: samples });
|
|
891
874
|
for (let i = 0; i < samples; i++) {
|
|
892
|
-
const
|
|
893
|
-
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(
|
|
875
|
+
const phase = i / (samples - 1) * period;
|
|
876
|
+
pts[i] = curveDef.skeletonFn ? curveDef.skeletonFn(phase) : curveDef.fn(phase, 0, EMPTY_PARAMS2);
|
|
894
877
|
}
|
|
895
878
|
return pts;
|
|
896
879
|
}
|
|
@@ -902,7 +885,7 @@ function createSVGRenderer(options) {
|
|
|
902
885
|
const poolSize = engine.trailLength;
|
|
903
886
|
if (poolSize > HIGH_TRAIL_LENGTH_THRESHOLD) {
|
|
904
887
|
console.warn(
|
|
905
|
-
`[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails
|
|
888
|
+
`[sarmal] High trailLength in SVG renderer (${poolSize}). Consider using the canvas renderer for long trails.`
|
|
906
889
|
);
|
|
907
890
|
}
|
|
908
891
|
let trailStyle = options.trailStyle ?? "default";
|
|
@@ -921,9 +904,9 @@ function createSVGRenderer(options) {
|
|
|
921
904
|
return rect.width && rect.height ? Math.min(rect.width, rect.height) : 200;
|
|
922
905
|
}
|
|
923
906
|
const containerPx = getContainerPixelSize();
|
|
924
|
-
const svgTrailMinWidth =
|
|
925
|
-
const svgTrailMaxWidth =
|
|
926
|
-
const svgSkeletonStrokeWidth = String(
|
|
907
|
+
const svgTrailMinWidth = TRAIL_MIN_WIDTH * viewSize / containerPx;
|
|
908
|
+
const svgTrailMaxWidth = TRAIL_MAX_WIDTH * viewSize / containerPx;
|
|
909
|
+
const svgSkeletonStrokeWidth = String(SKELETON_STROKE_WIDTH_PX * viewSize / containerPx);
|
|
927
910
|
headRadius = options.headRadius ?? SVG_DEFAULT_HEAD_RADIUS;
|
|
928
911
|
container.setAttribute("viewBox", `0 0 ${viewSize} ${viewSize}`);
|
|
929
912
|
container.setAttribute("role", "img");
|
|
@@ -1011,7 +994,7 @@ function createSVGRenderer(options) {
|
|
|
1011
994
|
px,
|
|
1012
995
|
py,
|
|
1013
996
|
svgTrailMinWidth,
|
|
1014
|
-
svgTrailMaxWidth
|
|
997
|
+
svgTrailMaxWidth
|
|
1015
998
|
);
|
|
1016
999
|
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`;
|
|
1017
1000
|
trailPaths[i].setAttribute("d", d);
|
|
@@ -1039,8 +1022,7 @@ function createSVGRenderer(options) {
|
|
|
1039
1022
|
let animationId = null;
|
|
1040
1023
|
let lastTime = 0;
|
|
1041
1024
|
let pausedByVisibility = false;
|
|
1042
|
-
const prefersReducedMotion =
|
|
1043
|
-
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
1025
|
+
const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
1044
1026
|
let morphResolve = null;
|
|
1045
1027
|
let morphReject = null;
|
|
1046
1028
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
@@ -1058,7 +1040,7 @@ function createSVGRenderer(options) {
|
|
|
1058
1040
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
1059
1041
|
skeletonPathA.setAttribute(
|
|
1060
1042
|
"stroke-opacity",
|
|
1061
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
1043
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY)
|
|
1062
1044
|
);
|
|
1063
1045
|
}
|
|
1064
1046
|
if (morphPathBBuilt) {
|
|
@@ -1101,8 +1083,8 @@ function createSVGRenderer(options) {
|
|
|
1101
1083
|
animationId = requestAnimationFrame(loop);
|
|
1102
1084
|
}
|
|
1103
1085
|
}
|
|
1104
|
-
if (options.
|
|
1105
|
-
engine.seek(options.
|
|
1086
|
+
if (options.initialPhase !== void 0) {
|
|
1087
|
+
engine.seek(options.initialPhase);
|
|
1106
1088
|
}
|
|
1107
1089
|
renderFrame(0);
|
|
1108
1090
|
const shouldAutoStart = options.autoStart !== false;
|
|
@@ -1212,7 +1194,7 @@ function createSVGRenderer(options) {
|
|
|
1212
1194
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
1213
1195
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
1214
1196
|
}
|
|
1215
|
-
}
|
|
1197
|
+
}
|
|
1216
1198
|
};
|
|
1217
1199
|
const pauseOnHidden = options.pauseOnHidden !== false;
|
|
1218
1200
|
function handleVisibilityChange() {
|
|
@@ -1250,15 +1232,9 @@ var PERIOD = 2 * Math.PI;
|
|
|
1250
1232
|
function catmullRom1D(p0, p1, p2, p3, u) {
|
|
1251
1233
|
const u2 = u * u;
|
|
1252
1234
|
const u3 = u2 * u;
|
|
1253
|
-
return (
|
|
1254
|
-
0.5 *
|
|
1255
|
-
(2 * p1 +
|
|
1256
|
-
(-p0 + p2) * u +
|
|
1257
|
-
(2 * p0 - 5 * p1 + 4 * p2 - p3) * u2 +
|
|
1258
|
-
(-p0 + 3 * p1 - 3 * p2 + p3) * u3)
|
|
1259
|
-
);
|
|
1235
|
+
return 0.5 * (2 * p1 + (-p0 + p2) * u + (2 * p0 - 5 * p1 + 4 * p2 - p3) * u2 + (-p0 + 3 * p1 - 3 * p2 + p3) * u3);
|
|
1260
1236
|
}
|
|
1261
|
-
function evaluateCatmullRom(points2,
|
|
1237
|
+
function evaluateCatmullRom(points2, phase) {
|
|
1262
1238
|
const N = points2.length;
|
|
1263
1239
|
if (N === 0) {
|
|
1264
1240
|
return { x: 0, y: 0 };
|
|
@@ -1266,13 +1242,13 @@ function evaluateCatmullRom(points2, t) {
|
|
|
1266
1242
|
if (N === 1) {
|
|
1267
1243
|
return { x: points2[0][0], y: points2[0][1] };
|
|
1268
1244
|
}
|
|
1269
|
-
|
|
1245
|
+
phase = (phase % PERIOD + PERIOD) % PERIOD;
|
|
1270
1246
|
const segmentSize = PERIOD / N;
|
|
1271
|
-
let i = Math.floor(
|
|
1247
|
+
let i = Math.floor(phase / segmentSize);
|
|
1272
1248
|
if (i >= N) {
|
|
1273
1249
|
i = N - 1;
|
|
1274
1250
|
}
|
|
1275
|
-
let u = (
|
|
1251
|
+
let u = (phase - i * segmentSize) / segmentSize;
|
|
1276
1252
|
u = Math.max(0, Math.min(1, u));
|
|
1277
1253
|
const p0 = points2[(i - 1 + N) % N];
|
|
1278
1254
|
const p1 = points2[i];
|
|
@@ -1280,7 +1256,7 @@ function evaluateCatmullRom(points2, t) {
|
|
|
1280
1256
|
const p3 = points2[(i + 2) % N];
|
|
1281
1257
|
return {
|
|
1282
1258
|
x: catmullRom1D(p0[0], p1[0], p2[0], p3[0], u),
|
|
1283
|
-
y: catmullRom1D(p0[1], p1[1], p2[1], p3[1], u)
|
|
1259
|
+
y: catmullRom1D(p0[1], p1[1], p2[1], p3[1], u)
|
|
1284
1260
|
};
|
|
1285
1261
|
}
|
|
1286
1262
|
function drawCurve(points2, opts) {
|
|
@@ -1290,20 +1266,20 @@ function drawCurve(points2, opts) {
|
|
|
1290
1266
|
const first = points2[0];
|
|
1291
1267
|
if (points2.every((p) => p[0] === first[0] && p[1] === first[1])) {
|
|
1292
1268
|
console.warn(
|
|
1293
|
-
"[sarmal].drawCurve: all control points are identical. The curve will be a single point."
|
|
1269
|
+
"[sarmal].drawCurve: all control points are identical. The curve will be a single point."
|
|
1294
1270
|
);
|
|
1295
1271
|
}
|
|
1296
1272
|
const maxAbs = points2.reduce((m, p) => Math.max(m, Math.abs(p[0]), Math.abs(p[1])), 0);
|
|
1297
1273
|
if (maxAbs > 2) {
|
|
1298
1274
|
console.warn(
|
|
1299
|
-
`[sarmal].drawCurve: control points extend to \xB1${maxAbs.toFixed(1)}, which may render off-screen. Coordinates should be in [-1, 1]
|
|
1275
|
+
`[sarmal].drawCurve: control points extend to \xB1${maxAbs.toFixed(1)}, which may render off-screen. Coordinates should be in [-1, 1].`
|
|
1300
1276
|
);
|
|
1301
1277
|
}
|
|
1302
1278
|
const pts = points2.map(([x, y]) => [x, y]);
|
|
1303
1279
|
return {
|
|
1304
1280
|
name: opts?.name ?? "drawn",
|
|
1305
|
-
fn: (
|
|
1306
|
-
period: PERIOD
|
|
1281
|
+
fn: (phase) => evaluateCatmullRom(pts, phase),
|
|
1282
|
+
period: PERIOD
|
|
1307
1283
|
};
|
|
1308
1284
|
}
|
|
1309
1285
|
|
|
@@ -1329,74 +1305,74 @@ var points = [
|
|
|
1329
1305
|
[-0.69, -0.84],
|
|
1330
1306
|
[-0.87, -0.66],
|
|
1331
1307
|
[-0.9, -0.47],
|
|
1332
|
-
[-0.76, -0.35]
|
|
1308
|
+
[-0.76, -0.35]
|
|
1333
1309
|
];
|
|
1334
1310
|
var artemis2 = {
|
|
1335
1311
|
...drawCurve(points, { name: "Artemis II" }),
|
|
1336
|
-
speed: 0.7
|
|
1312
|
+
speed: 0.7
|
|
1337
1313
|
};
|
|
1338
1314
|
|
|
1339
1315
|
// src/curves/astroid.ts
|
|
1340
1316
|
var TWO_PI2 = Math.PI * 2;
|
|
1341
|
-
function astroidFn(
|
|
1342
|
-
const c = Math.cos(
|
|
1343
|
-
const s = Math.sin(
|
|
1317
|
+
function astroidFn(phase, _elapsed, _params) {
|
|
1318
|
+
const c = Math.cos(phase);
|
|
1319
|
+
const s = Math.sin(phase);
|
|
1344
1320
|
return {
|
|
1345
1321
|
x: c * c * c,
|
|
1346
|
-
y: s * s * s
|
|
1322
|
+
y: s * s * s
|
|
1347
1323
|
};
|
|
1348
1324
|
}
|
|
1349
1325
|
var astroid = {
|
|
1350
1326
|
name: "Astroid",
|
|
1351
1327
|
fn: astroidFn,
|
|
1352
1328
|
period: TWO_PI2,
|
|
1353
|
-
speed: 1.1
|
|
1329
|
+
speed: 1.1
|
|
1354
1330
|
};
|
|
1355
1331
|
|
|
1356
1332
|
// src/curves/deltoid.ts
|
|
1357
1333
|
var TWO_PI3 = Math.PI * 2;
|
|
1358
|
-
function deltoidFn(
|
|
1334
|
+
function deltoidFn(phase, _elapsed, _params) {
|
|
1359
1335
|
return {
|
|
1360
|
-
x: 2 * Math.cos(
|
|
1361
|
-
y: 2 * Math.sin(
|
|
1336
|
+
x: 2 * Math.cos(phase) + Math.cos(2 * phase),
|
|
1337
|
+
y: 2 * Math.sin(phase) - Math.sin(2 * phase)
|
|
1362
1338
|
};
|
|
1363
1339
|
}
|
|
1364
1340
|
var deltoid = {
|
|
1365
1341
|
name: "Deltoid",
|
|
1366
1342
|
fn: deltoidFn,
|
|
1367
1343
|
period: TWO_PI3,
|
|
1368
|
-
speed: 0.9
|
|
1344
|
+
speed: 0.9
|
|
1369
1345
|
};
|
|
1370
1346
|
|
|
1371
1347
|
// src/curves/epicycloid3.ts
|
|
1372
1348
|
var TWO_PI4 = Math.PI * 2;
|
|
1373
|
-
function epicycloid3Fn(
|
|
1349
|
+
function epicycloid3Fn(phase, _elapsed, _params) {
|
|
1374
1350
|
return {
|
|
1375
|
-
x: 4 * Math.cos(
|
|
1376
|
-
y: 4 * Math.sin(
|
|
1351
|
+
x: 4 * Math.cos(phase) - Math.cos(4 * phase),
|
|
1352
|
+
y: 4 * Math.sin(phase) - Math.sin(4 * phase)
|
|
1377
1353
|
};
|
|
1378
1354
|
}
|
|
1379
1355
|
var epicycloid3 = {
|
|
1380
1356
|
name: "Epicycloid (n=3)",
|
|
1381
1357
|
fn: epicycloid3Fn,
|
|
1382
1358
|
period: TWO_PI4,
|
|
1383
|
-
speed: 0.75
|
|
1359
|
+
speed: 0.75
|
|
1384
1360
|
};
|
|
1385
1361
|
|
|
1386
1362
|
// src/curves/epitrochoid7.ts
|
|
1387
1363
|
var TWO_PI5 = Math.PI * 2;
|
|
1388
|
-
function epitrochoid7Fn(
|
|
1389
|
-
const d = 1 + 0.55 * Math.sin(
|
|
1364
|
+
function epitrochoid7Fn(phase, _elapsed, _params) {
|
|
1365
|
+
const d = 1 + 0.55 * Math.sin(phase * 0.5);
|
|
1390
1366
|
return {
|
|
1391
|
-
x: 7 * Math.cos(
|
|
1392
|
-
y: 7 * Math.sin(
|
|
1367
|
+
x: 7 * Math.cos(phase) - d * Math.cos(7 * phase),
|
|
1368
|
+
y: 7 * Math.sin(phase) - d * Math.sin(7 * phase)
|
|
1393
1369
|
};
|
|
1394
1370
|
}
|
|
1395
|
-
function epitrochoid7SkeletonFn(
|
|
1371
|
+
function epitrochoid7SkeletonFn(phase) {
|
|
1396
1372
|
const d = 1.275;
|
|
1397
1373
|
return {
|
|
1398
|
-
x: 7 * Math.cos(
|
|
1399
|
-
y: 7 * Math.sin(
|
|
1374
|
+
x: 7 * Math.cos(phase) - d * Math.cos(7 * phase),
|
|
1375
|
+
y: 7 * Math.sin(phase) - d * Math.sin(7 * phase)
|
|
1400
1376
|
};
|
|
1401
1377
|
}
|
|
1402
1378
|
var epitrochoid7 = {
|
|
@@ -1404,16 +1380,16 @@ var epitrochoid7 = {
|
|
|
1404
1380
|
fn: epitrochoid7Fn,
|
|
1405
1381
|
period: TWO_PI5,
|
|
1406
1382
|
speed: 1.4,
|
|
1407
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
1383
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
1408
1384
|
};
|
|
1409
1385
|
|
|
1410
1386
|
// src/curves/lissajous32.ts
|
|
1411
1387
|
var TWO_PI6 = Math.PI * 2;
|
|
1412
|
-
function lissajous32Fn(
|
|
1413
|
-
const phi =
|
|
1388
|
+
function lissajous32Fn(phase, elapsed, _params) {
|
|
1389
|
+
const phi = elapsed * 0.45;
|
|
1414
1390
|
return {
|
|
1415
|
-
x: Math.sin(3 *
|
|
1416
|
-
y: Math.sin(2 *
|
|
1391
|
+
x: Math.sin(3 * phase + phi),
|
|
1392
|
+
y: Math.sin(2 * phase)
|
|
1417
1393
|
};
|
|
1418
1394
|
}
|
|
1419
1395
|
var lissajous32 = {
|
|
@@ -1421,16 +1397,16 @@ var lissajous32 = {
|
|
|
1421
1397
|
fn: lissajous32Fn,
|
|
1422
1398
|
period: TWO_PI6,
|
|
1423
1399
|
speed: 2,
|
|
1424
|
-
skeleton: "live"
|
|
1400
|
+
skeleton: "live"
|
|
1425
1401
|
};
|
|
1426
1402
|
|
|
1427
1403
|
// src/curves/lissajous43.ts
|
|
1428
1404
|
var TWO_PI7 = Math.PI * 2;
|
|
1429
|
-
function lissajous43Fn(
|
|
1430
|
-
const phi =
|
|
1405
|
+
function lissajous43Fn(phase, elapsed, _params) {
|
|
1406
|
+
const phi = elapsed * 0.38;
|
|
1431
1407
|
return {
|
|
1432
|
-
x: Math.sin(4 *
|
|
1433
|
-
y: Math.sin(3 *
|
|
1408
|
+
x: Math.sin(4 * phase + phi),
|
|
1409
|
+
y: Math.sin(3 * phase)
|
|
1434
1410
|
};
|
|
1435
1411
|
}
|
|
1436
1412
|
var lissajous43 = {
|
|
@@ -1438,18 +1414,17 @@ var lissajous43 = {
|
|
|
1438
1414
|
fn: lissajous43Fn,
|
|
1439
1415
|
period: TWO_PI7,
|
|
1440
1416
|
speed: 1.8,
|
|
1441
|
-
skeleton: "live"
|
|
1417
|
+
skeleton: "live"
|
|
1442
1418
|
};
|
|
1443
1419
|
|
|
1444
1420
|
// src/curves/lame.ts
|
|
1445
1421
|
var TWO_PI8 = Math.PI * 2;
|
|
1446
|
-
function lameFn(
|
|
1447
|
-
const p = 1.75 + 1.25 * Math.sin(
|
|
1448
|
-
const c = Math.cos(
|
|
1449
|
-
s = Math.sin(t);
|
|
1422
|
+
function lameFn(phase, elapsed, _params) {
|
|
1423
|
+
const p = 1.75 + 1.25 * Math.sin(elapsed * 0.48);
|
|
1424
|
+
const c = Math.cos(phase), s = Math.sin(phase);
|
|
1450
1425
|
return {
|
|
1451
1426
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1452
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1427
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
1453
1428
|
};
|
|
1454
1429
|
}
|
|
1455
1430
|
var lame = {
|
|
@@ -1457,112 +1432,103 @@ var lame = {
|
|
|
1457
1432
|
fn: lameFn,
|
|
1458
1433
|
period: TWO_PI8,
|
|
1459
1434
|
speed: 1,
|
|
1460
|
-
skeleton: "live"
|
|
1435
|
+
skeleton: "live"
|
|
1461
1436
|
};
|
|
1462
1437
|
|
|
1463
1438
|
// src/curves/rose3.ts
|
|
1464
1439
|
var TWO_PI9 = Math.PI * 2;
|
|
1465
|
-
function rose3Fn(
|
|
1466
|
-
const r = Math.cos(3 *
|
|
1440
|
+
function rose3Fn(phase, _elapsed, _params) {
|
|
1441
|
+
const r = Math.cos(3 * phase);
|
|
1467
1442
|
return {
|
|
1468
|
-
x: r * Math.cos(
|
|
1469
|
-
y: r * Math.sin(
|
|
1443
|
+
x: r * Math.cos(phase),
|
|
1444
|
+
y: r * Math.sin(phase)
|
|
1470
1445
|
};
|
|
1471
1446
|
}
|
|
1472
1447
|
var rose3 = {
|
|
1473
1448
|
name: "Rose (n=3)",
|
|
1474
1449
|
fn: rose3Fn,
|
|
1475
1450
|
period: TWO_PI9,
|
|
1476
|
-
speed: 1.15
|
|
1451
|
+
speed: 1.15
|
|
1477
1452
|
};
|
|
1478
1453
|
|
|
1479
1454
|
// src/curves/rose5.ts
|
|
1480
1455
|
var TWO_PI10 = Math.PI * 2;
|
|
1481
|
-
function rose5Fn(
|
|
1482
|
-
const r = Math.cos(5 *
|
|
1456
|
+
function rose5Fn(phase, _elapsed, _params) {
|
|
1457
|
+
const r = Math.cos(5 * phase);
|
|
1483
1458
|
return {
|
|
1484
|
-
x: r * Math.cos(
|
|
1485
|
-
y: r * Math.sin(
|
|
1459
|
+
x: r * Math.cos(phase),
|
|
1460
|
+
y: r * Math.sin(phase)
|
|
1486
1461
|
};
|
|
1487
1462
|
}
|
|
1488
1463
|
var rose5 = {
|
|
1489
1464
|
name: "Rose (n=5)",
|
|
1490
1465
|
fn: rose5Fn,
|
|
1491
1466
|
period: TWO_PI10,
|
|
1492
|
-
speed: 1
|
|
1467
|
+
speed: 1
|
|
1493
1468
|
};
|
|
1494
1469
|
|
|
1495
1470
|
// src/curves/rose52.ts
|
|
1496
1471
|
var FOUR_PI = Math.PI * 4;
|
|
1497
|
-
function rose52Fn(
|
|
1498
|
-
const r = Math.cos(
|
|
1472
|
+
function rose52Fn(phase, _elapsed, _params) {
|
|
1473
|
+
const r = Math.cos(5 / 2 * phase);
|
|
1499
1474
|
return {
|
|
1500
|
-
x: r * Math.cos(
|
|
1501
|
-
y: r * Math.sin(
|
|
1475
|
+
x: r * Math.cos(phase),
|
|
1476
|
+
y: r * Math.sin(phase)
|
|
1502
1477
|
};
|
|
1503
1478
|
}
|
|
1504
1479
|
var rose52 = {
|
|
1505
1480
|
name: "Rose (n=5/2)",
|
|
1506
1481
|
fn: rose52Fn,
|
|
1507
1482
|
period: FOUR_PI,
|
|
1508
|
-
speed: 0.8
|
|
1483
|
+
speed: 0.8
|
|
1509
1484
|
};
|
|
1510
1485
|
|
|
1511
1486
|
// src/curves/star.ts
|
|
1512
1487
|
var TWO_PI11 = Math.PI * 2;
|
|
1513
|
-
function starFn(
|
|
1514
|
-
const r =
|
|
1515
|
-
Math.abs(Math.cos((5 / 2) * t)) +
|
|
1516
|
-
0.35 * Math.abs(Math.cos((15 / 2) * t)) +
|
|
1517
|
-
0.15 * Math.abs(Math.cos((25 / 2) * t));
|
|
1488
|
+
function starFn(phase, _elapsed, _params) {
|
|
1489
|
+
const r = Math.abs(Math.cos(5 / 2 * phase)) + 0.35 * Math.abs(Math.cos(15 / 2 * phase)) + 0.15 * Math.abs(Math.cos(25 / 2 * phase));
|
|
1518
1490
|
return {
|
|
1519
|
-
x: r * Math.cos(
|
|
1520
|
-
y: r * Math.sin(
|
|
1491
|
+
x: r * Math.cos(phase),
|
|
1492
|
+
y: r * Math.sin(phase)
|
|
1521
1493
|
};
|
|
1522
1494
|
}
|
|
1523
1495
|
var star = {
|
|
1524
1496
|
name: "Star",
|
|
1525
1497
|
fn: starFn,
|
|
1526
1498
|
period: TWO_PI11,
|
|
1527
|
-
speed: 1
|
|
1499
|
+
speed: 1
|
|
1528
1500
|
};
|
|
1529
1501
|
|
|
1530
1502
|
// src/curves/star4.ts
|
|
1531
1503
|
var TWO_PI12 = Math.PI * 2;
|
|
1532
|
-
function star4Fn(
|
|
1533
|
-
const r =
|
|
1534
|
-
Math.abs(Math.cos(2 * t)) +
|
|
1535
|
-
0.35 * Math.abs(Math.cos(6 * t)) +
|
|
1536
|
-
0.15 * Math.abs(Math.cos(10 * t));
|
|
1504
|
+
function star4Fn(phase, _elapsed, _params) {
|
|
1505
|
+
const r = Math.abs(Math.cos(2 * phase)) + 0.35 * Math.abs(Math.cos(6 * phase)) + 0.15 * Math.abs(Math.cos(10 * phase));
|
|
1537
1506
|
return {
|
|
1538
|
-
x: r * Math.cos(
|
|
1539
|
-
y: r * Math.sin(
|
|
1507
|
+
x: r * Math.cos(phase),
|
|
1508
|
+
y: r * Math.sin(phase)
|
|
1540
1509
|
};
|
|
1541
1510
|
}
|
|
1542
1511
|
var star4 = {
|
|
1543
1512
|
name: "Star (4-arm)",
|
|
1544
1513
|
fn: star4Fn,
|
|
1545
1514
|
period: TWO_PI12,
|
|
1546
|
-
speed: 1
|
|
1515
|
+
speed: 1
|
|
1547
1516
|
};
|
|
1548
1517
|
|
|
1549
1518
|
// src/curves/star7.ts
|
|
1550
1519
|
var TWO_PI13 = Math.PI * 2;
|
|
1551
|
-
function star7Fn(
|
|
1552
|
-
const r =
|
|
1553
|
-
Math.abs(Math.cos((7 / 2) * t)) +
|
|
1554
|
-
0.35 * Math.abs(Math.cos((21 / 2) * t)) +
|
|
1555
|
-
0.15 * Math.abs(Math.cos((35 / 2) * t));
|
|
1520
|
+
function star7Fn(phase, _elapsed, _params) {
|
|
1521
|
+
const r = Math.abs(Math.cos(7 / 2 * phase)) + 0.35 * Math.abs(Math.cos(21 / 2 * phase)) + 0.15 * Math.abs(Math.cos(35 / 2 * phase));
|
|
1556
1522
|
return {
|
|
1557
|
-
x: r * Math.cos(
|
|
1558
|
-
y: r * Math.sin(
|
|
1523
|
+
x: r * Math.cos(phase),
|
|
1524
|
+
y: r * Math.sin(phase)
|
|
1559
1525
|
};
|
|
1560
1526
|
}
|
|
1561
1527
|
var star7 = {
|
|
1562
1528
|
name: "Star (7-arm)",
|
|
1563
1529
|
fn: star7Fn,
|
|
1564
1530
|
period: TWO_PI13,
|
|
1565
|
-
speed: 1
|
|
1531
|
+
speed: 1
|
|
1566
1532
|
};
|
|
1567
1533
|
|
|
1568
1534
|
// src/curves/index.ts
|
|
@@ -1580,7 +1546,7 @@ var curves = {
|
|
|
1580
1546
|
lissajous32,
|
|
1581
1547
|
lissajous43,
|
|
1582
1548
|
epicycloid3,
|
|
1583
|
-
lame
|
|
1549
|
+
lame
|
|
1584
1550
|
};
|
|
1585
1551
|
|
|
1586
1552
|
// src/index.ts
|
|
@@ -1597,21 +1563,22 @@ function parseTrailColor(value) {
|
|
|
1597
1563
|
if (Array.isArray(parsed)) {
|
|
1598
1564
|
return parsed;
|
|
1599
1565
|
}
|
|
1600
|
-
} catch {
|
|
1566
|
+
} catch {
|
|
1567
|
+
}
|
|
1601
1568
|
return value;
|
|
1602
1569
|
}
|
|
1603
1570
|
function buildOptions(el2) {
|
|
1604
1571
|
return {
|
|
1605
|
-
...
|
|
1606
|
-
trailColor: parseTrailColor(el2.dataset.trailColor)
|
|
1607
|
-
}
|
|
1608
|
-
...
|
|
1609
|
-
...
|
|
1610
|
-
...
|
|
1611
|
-
...
|
|
1612
|
-
...
|
|
1613
|
-
trailStyle: el2.dataset.trailStyle
|
|
1614
|
-
}
|
|
1572
|
+
...el2.dataset.trailColor && {
|
|
1573
|
+
trailColor: parseTrailColor(el2.dataset.trailColor)
|
|
1574
|
+
},
|
|
1575
|
+
...el2.dataset.skeletonColor && { skeletonColor: el2.dataset.skeletonColor },
|
|
1576
|
+
...el2.dataset.headColor && { headColor: el2.dataset.headColor },
|
|
1577
|
+
...el2.dataset.headRadius && { headRadius: parseFloat(el2.dataset.headRadius) },
|
|
1578
|
+
...el2.dataset.trailLength && { trailLength: parseInt(el2.dataset.trailLength, 10) },
|
|
1579
|
+
...el2.dataset.trailStyle && {
|
|
1580
|
+
trailStyle: el2.dataset.trailStyle
|
|
1581
|
+
}
|
|
1615
1582
|
};
|
|
1616
1583
|
}
|
|
1617
1584
|
function init() {
|
|
@@ -1626,10 +1593,7 @@ function init() {
|
|
|
1626
1593
|
return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
|
|
1627
1594
|
}
|
|
1628
1595
|
const options = buildOptions(el2);
|
|
1629
|
-
const instance =
|
|
1630
|
-
el2 instanceof HTMLCanvasElement
|
|
1631
|
-
? createSarmal(el2, curveDef, options)
|
|
1632
|
-
: createSarmalSVG(el2, curveDef, options);
|
|
1596
|
+
const instance = el2 instanceof HTMLCanvasElement ? createSarmal(el2, curveDef, options) : createSarmalSVG(el2, curveDef, options);
|
|
1633
1597
|
if (el2.dataset.speed) {
|
|
1634
1598
|
instance.setSpeed(parseFloat(el2.dataset.speed));
|
|
1635
1599
|
}
|
|
@@ -1645,4 +1609,4 @@ if (document.readyState === "loading") {
|
|
|
1645
1609
|
|
|
1646
1610
|
exports.init = init;
|
|
1647
1611
|
//# sourceMappingURL=auto-init.cjs.map
|
|
1648
|
-
//# sourceMappingURL=auto-init.cjs.map
|
|
1612
|
+
//# sourceMappingURL=auto-init.cjs.map
|