@sarmal/core 0.17.3 → 0.19.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/README.md +1 -12
- package/dist/auto-init.cjs +124 -92
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.js +123 -91
- package/dist/auto-init.js.map +1 -1
- package/dist/curves/artemis2.cjs +10 -7
- package/dist/curves/artemis2.d.cts +1 -1
- package/dist/curves/artemis2.d.ts +1 -1
- package/dist/curves/artemis2.js +9 -6
- 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 +53 -40
- package/dist/curves/index.d.cts +29 -29
- package/dist/curves/index.d.ts +29 -29
- package/dist/curves/index.js +69 -40
- package/dist/curves/lame.cjs +6 -5
- package/dist/curves/lame.d.cts +1 -1
- package/dist/curves/lame.d.ts +1 -1
- package/dist/curves/lame.js +5 -4
- 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 +8 -5
- package/dist/curves/star.d.cts +1 -1
- package/dist/curves/star.d.ts +1 -1
- package/dist/curves/star.js +7 -4
- package/dist/curves/star4.cjs +8 -5
- package/dist/curves/star4.d.cts +1 -1
- package/dist/curves/star4.d.ts +1 -1
- package/dist/curves/star4.js +7 -4
- package/dist/curves/star7.cjs +8 -5
- package/dist/curves/star7.d.cts +1 -1
- package/dist/curves/star7.d.ts +1 -1
- package/dist/curves/star7.js +7 -4
- package/dist/index.cjs +159 -118
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +78 -37
- package/dist/index.d.ts +78 -37
- package/dist/index.js +177 -118
- package/dist/index.js.map +1 -1
- package/dist/types-frtEoAq6.d.cts +317 -0
- package/dist/types-frtEoAq6.d.ts +317 -0
- package/package.json +1 -1
- package/dist/types-BL9HhEmk.d.cts +0 -299
- package/dist/types-BL9HhEmk.d.ts +0 -299
package/dist/auto-init.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" ? t / curve.period * morphCurveB.period : t;
|
|
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 {
|
|
@@ -120,6 +120,9 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
120
120
|
get trailCount() {
|
|
121
121
|
return trail.length;
|
|
122
122
|
},
|
|
123
|
+
get trailLength() {
|
|
124
|
+
return trailLength;
|
|
125
|
+
},
|
|
123
126
|
get isLiveSkeleton() {
|
|
124
127
|
return curve.skeleton === "live";
|
|
125
128
|
},
|
|
@@ -132,14 +135,14 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
132
135
|
trail.clear();
|
|
133
136
|
},
|
|
134
137
|
jump(newT, { clearTrail = false } = {}) {
|
|
135
|
-
t = (newT % curve.period + curve.period) % curve.period;
|
|
138
|
+
t = ((newT % curve.period) + curve.period) % curve.period;
|
|
136
139
|
if (clearTrail) {
|
|
137
140
|
trail.clear();
|
|
138
141
|
}
|
|
139
142
|
},
|
|
140
143
|
seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
141
144
|
const advance = curve.speed * step;
|
|
142
|
-
const target = (targetT % curve.period + curve.period) % curve.period;
|
|
145
|
+
const target = ((targetT % curve.period) + curve.period) % curve.period;
|
|
143
146
|
const targetTime = target / curve.speed;
|
|
144
147
|
t = target;
|
|
145
148
|
actualTime = targetTime;
|
|
@@ -148,7 +151,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
148
151
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
149
152
|
for (let i = count - 1; i >= 0; i--) {
|
|
150
153
|
const sampleT = target - i * advance;
|
|
151
|
-
const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
|
|
154
|
+
const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
|
|
152
155
|
const time = targetTime - i * step;
|
|
153
156
|
const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
|
|
154
157
|
trail.push(point.x, point.y);
|
|
@@ -165,13 +168,16 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
165
168
|
...frozenB,
|
|
166
169
|
fn: (sampleT, time, params) => {
|
|
167
170
|
const a = frozenA.fn(sampleT, time, params);
|
|
168
|
-
const tB =
|
|
171
|
+
const tB =
|
|
172
|
+
frozenStrategy === "normalized"
|
|
173
|
+
? (sampleT / frozenA.period) * frozenB.period
|
|
174
|
+
: sampleT;
|
|
169
175
|
const b = frozenB.fn(tB, time, params);
|
|
170
176
|
return {
|
|
171
177
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
172
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
178
|
+
y: a.y + (b.y - a.y) * frozenAlpha,
|
|
173
179
|
};
|
|
174
|
-
}
|
|
180
|
+
},
|
|
175
181
|
};
|
|
176
182
|
}
|
|
177
183
|
_morphStrategy = strategy;
|
|
@@ -184,7 +190,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
184
190
|
completeMorph() {
|
|
185
191
|
if (morphCurveB !== null) {
|
|
186
192
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
187
|
-
t = t / curve.period * morphCurveB.period;
|
|
193
|
+
t = (t / curve.period) * morphCurveB.period;
|
|
188
194
|
}
|
|
189
195
|
curve = morphCurveB;
|
|
190
196
|
}
|
|
@@ -196,19 +202,22 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
196
202
|
const points = new Array(steps);
|
|
197
203
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
198
204
|
for (let i = 0; i < steps; i++) {
|
|
199
|
-
const sampleT = i / (steps - 1) * curve.period;
|
|
205
|
+
const sampleT = (i / (steps - 1)) * curve.period;
|
|
200
206
|
const a = sampleSkeleton(curve, sampleT);
|
|
201
|
-
const tB =
|
|
207
|
+
const tB =
|
|
208
|
+
_morphStrategy === "normalized"
|
|
209
|
+
? (sampleT / curve.period) * morphCurveB.period
|
|
210
|
+
: sampleT;
|
|
202
211
|
const b = sampleSkeleton(morphCurveB, tB);
|
|
203
212
|
points[i] = {
|
|
204
213
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
205
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
214
|
+
y: a.y + (b.y - a.y) * _morphAlpha,
|
|
206
215
|
};
|
|
207
216
|
}
|
|
208
217
|
return points;
|
|
209
218
|
}
|
|
210
219
|
for (let i = 0; i < steps; i++) {
|
|
211
|
-
const sampleT = i / (steps - 1) * curve.period;
|
|
220
|
+
const sampleT = (i / (steps - 1)) * curve.period;
|
|
212
221
|
points[i] = sampleSkeleton(curve, sampleT);
|
|
213
222
|
}
|
|
214
223
|
return points;
|
|
@@ -250,7 +259,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
250
259
|
_speedTransition.reject(new Error("Speed transition cancelled"));
|
|
251
260
|
_speedTransition = null;
|
|
252
261
|
}
|
|
253
|
-
}
|
|
262
|
+
},
|
|
254
263
|
};
|
|
255
264
|
}
|
|
256
265
|
|
|
@@ -289,12 +298,20 @@ function computeNormal(trail, i) {
|
|
|
289
298
|
const tangent = computeTangent(trail, i);
|
|
290
299
|
return { x: -tangent.y, y: tangent.x };
|
|
291
300
|
}
|
|
292
|
-
function computeTrailQuad(
|
|
301
|
+
function computeTrailQuad(
|
|
302
|
+
trail,
|
|
303
|
+
i,
|
|
304
|
+
trailCount,
|
|
305
|
+
toX,
|
|
306
|
+
toY,
|
|
307
|
+
minWidth = TRAIL_MIN_WIDTH,
|
|
308
|
+
maxWidth = TRAIL_MAX_WIDTH,
|
|
309
|
+
) {
|
|
293
310
|
const progress = i / (trailCount - 1);
|
|
294
311
|
const nextProgress = (i + 1) / (trailCount - 1);
|
|
295
312
|
const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
|
|
296
|
-
const w0 = (
|
|
297
|
-
const w1 = (
|
|
313
|
+
const w0 = (minWidth + progress * (maxWidth - minWidth)) / 2;
|
|
314
|
+
const w1 = (minWidth + nextProgress * (maxWidth - minWidth)) / 2;
|
|
298
315
|
const curr = trail[i];
|
|
299
316
|
const next = trail[i + 1];
|
|
300
317
|
const n0 = computeNormal(trail, i);
|
|
@@ -313,13 +330,16 @@ function computeTrailQuad(trail, i, trailCount, toX, toY) {
|
|
|
313
330
|
r1x: nx - n1.x * w1,
|
|
314
331
|
r1y: ny - n1.y * w1,
|
|
315
332
|
opacity,
|
|
316
|
-
progress
|
|
333
|
+
progress,
|
|
317
334
|
};
|
|
318
335
|
}
|
|
319
336
|
function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
320
337
|
if (pts.length === 0) return null;
|
|
321
338
|
const first = pts[0];
|
|
322
|
-
let minX = first.x,
|
|
339
|
+
let minX = first.x,
|
|
340
|
+
maxX = first.x,
|
|
341
|
+
minY = first.y,
|
|
342
|
+
maxY = first.y;
|
|
323
343
|
for (const p of pts) {
|
|
324
344
|
if (p.x < minX) {
|
|
325
345
|
minX = p.x;
|
|
@@ -338,7 +358,7 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
338
358
|
const h = maxY - minY;
|
|
339
359
|
if (w === 0 && h === 0) {
|
|
340
360
|
throw new Error(
|
|
341
|
-
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
361
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
|
|
342
362
|
);
|
|
343
363
|
}
|
|
344
364
|
const scaleXProportional = logicalWidth / (w * (1 + FIT_PADDING * 2));
|
|
@@ -349,12 +369,12 @@ function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
|
349
369
|
scaleXProportional,
|
|
350
370
|
scaleYProportional,
|
|
351
371
|
scaleXMinPadding,
|
|
352
|
-
scaleYMinPadding
|
|
372
|
+
scaleYMinPadding,
|
|
353
373
|
);
|
|
354
374
|
return {
|
|
355
375
|
scale,
|
|
356
376
|
offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
|
|
357
|
-
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
377
|
+
offsetY: (logicalHeight - h * scale) / 2 - minY * scale,
|
|
358
378
|
};
|
|
359
379
|
}
|
|
360
380
|
function enginePassthroughs(engine) {
|
|
@@ -364,17 +384,17 @@ function enginePassthroughs(engine) {
|
|
|
364
384
|
setSpeed: engine.setSpeed,
|
|
365
385
|
getSpeed: engine.getSpeed,
|
|
366
386
|
resetSpeed: engine.resetSpeed,
|
|
367
|
-
setSpeedOver: engine.setSpeedOver
|
|
387
|
+
setSpeedOver: engine.setSpeedOver,
|
|
368
388
|
};
|
|
369
389
|
}
|
|
370
390
|
function hexToRgb(hex) {
|
|
371
391
|
const n = parseInt(hex.slice(1), 16);
|
|
372
|
-
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
392
|
+
return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
|
|
373
393
|
}
|
|
374
394
|
var lerpRgb = (a, b, t) => ({
|
|
375
395
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
376
396
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
377
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
397
|
+
b: Math.round(a.b + (b.b - a.b) * t),
|
|
378
398
|
});
|
|
379
399
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
380
400
|
if (palette.length === 0) {
|
|
@@ -383,7 +403,7 @@ function getPaletteColor(palette, position, timeOffset = 0) {
|
|
|
383
403
|
if (palette.length === 1) {
|
|
384
404
|
return hexToRgb(palette[0]);
|
|
385
405
|
}
|
|
386
|
-
const cyclePos = ((position + timeOffset) % 1 + 1) % 1;
|
|
406
|
+
const cyclePos = (((position + timeOffset) % 1) + 1) % 1;
|
|
387
407
|
const scaled = cyclePos * palette.length;
|
|
388
408
|
const idx = Math.floor(scaled);
|
|
389
409
|
const t = scaled - idx;
|
|
@@ -397,7 +417,7 @@ var RENDER_OPTION_KEYS = /* @__PURE__ */ new Set([
|
|
|
397
417
|
"trailColor",
|
|
398
418
|
"headColor",
|
|
399
419
|
"skeletonColor",
|
|
400
|
-
"trailStyle"
|
|
420
|
+
"trailStyle",
|
|
401
421
|
]);
|
|
402
422
|
function validateRenderOptions(partial) {
|
|
403
423
|
for (const key of Object.keys(partial)) {
|
|
@@ -422,7 +442,7 @@ function assertTrailColor(value) {
|
|
|
422
442
|
if (typeof value === "string") {
|
|
423
443
|
if (!HEX_COLOR_RE.test(value)) {
|
|
424
444
|
throw new TypeError(
|
|
425
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"
|
|
445
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string, got "${value}"`,
|
|
426
446
|
);
|
|
427
447
|
}
|
|
428
448
|
return;
|
|
@@ -430,21 +450,21 @@ function assertTrailColor(value) {
|
|
|
430
450
|
if (Array.isArray(value)) {
|
|
431
451
|
if (value.length < 2) {
|
|
432
452
|
throw new RangeError(
|
|
433
|
-
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}
|
|
453
|
+
`[sarmal] setRenderOptions: trailColor array must have at least 2 entries, got ${value.length}`,
|
|
434
454
|
);
|
|
435
455
|
}
|
|
436
456
|
for (let i = 0; i < value.length; i++) {
|
|
437
457
|
const entry = value[i];
|
|
438
458
|
if (typeof entry !== "string" || !HEX_COLOR_RE.test(entry)) {
|
|
439
459
|
throw new TypeError(
|
|
440
|
-
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}
|
|
460
|
+
`[sarmal] setRenderOptions: trailColor[${i}] must be a 6-digit hex string, got ${JSON.stringify(entry)}`,
|
|
441
461
|
);
|
|
442
462
|
}
|
|
443
463
|
}
|
|
444
464
|
return;
|
|
445
465
|
}
|
|
446
466
|
throw new TypeError(
|
|
447
|
-
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}
|
|
467
|
+
`[sarmal] setRenderOptions: trailColor must be a 6-digit hex string or an array of hex strings, got ${JSON.stringify(value)}`,
|
|
448
468
|
);
|
|
449
469
|
}
|
|
450
470
|
function assertHeadColor(value) {
|
|
@@ -453,7 +473,7 @@ function assertHeadColor(value) {
|
|
|
453
473
|
}
|
|
454
474
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
455
475
|
throw new TypeError(
|
|
456
|
-
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}
|
|
476
|
+
`[sarmal] setRenderOptions: headColor must be a 6-digit hex string or null, got ${JSON.stringify(value)}`,
|
|
457
477
|
);
|
|
458
478
|
}
|
|
459
479
|
}
|
|
@@ -463,14 +483,14 @@ function assertSkeletonColor(value) {
|
|
|
463
483
|
}
|
|
464
484
|
if (typeof value !== "string" || !HEX_COLOR_RE.test(value)) {
|
|
465
485
|
throw new TypeError(
|
|
466
|
-
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}
|
|
486
|
+
`[sarmal] setRenderOptions: skeletonColor must be a 6-digit hex string or "transparent", got ${JSON.stringify(value)}`,
|
|
467
487
|
);
|
|
468
488
|
}
|
|
469
489
|
}
|
|
470
490
|
function assertTrailStyle(value) {
|
|
471
491
|
if (!TRAIL_STYLES.includes(value)) {
|
|
472
492
|
throw new RangeError(
|
|
473
|
-
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}
|
|
493
|
+
`[sarmal] setRenderOptions: trailStyle must be one of "default", "gradient-static", "gradient-animated", got ${JSON.stringify(value)}`,
|
|
474
494
|
);
|
|
475
495
|
}
|
|
476
496
|
}
|
|
@@ -492,13 +512,13 @@ function resolveHeadColor(trailColor, trailStyle) {
|
|
|
492
512
|
function warnIfTrailColorMismatch(trailColor, trailStyle) {
|
|
493
513
|
if (trailStyle === "default" && Array.isArray(trailColor)) {
|
|
494
514
|
console.warn(
|
|
495
|
-
'[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
|
+
'[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.',
|
|
496
516
|
);
|
|
497
517
|
return;
|
|
498
518
|
}
|
|
499
519
|
if (trailStyle !== "default" && typeof trailColor === "string") {
|
|
500
520
|
console.warn(
|
|
501
|
-
`[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
|
+
`[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.`,
|
|
502
522
|
);
|
|
503
523
|
}
|
|
504
524
|
}
|
|
@@ -508,7 +528,7 @@ var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160)
|
|
|
508
528
|
var WHITE_HEX = "#ffffff";
|
|
509
529
|
function hexToRgbComponents(hex) {
|
|
510
530
|
const n = parseInt(hex.slice(1), 16);
|
|
511
|
-
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
531
|
+
return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
|
|
512
532
|
}
|
|
513
533
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
514
534
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -633,7 +653,7 @@ function createRenderer(options) {
|
|
|
633
653
|
i,
|
|
634
654
|
trailCount,
|
|
635
655
|
toX,
|
|
636
|
-
toY
|
|
656
|
+
toY,
|
|
637
657
|
);
|
|
638
658
|
if (trailStyle === "default") {
|
|
639
659
|
ctx.fillStyle = `rgba(${trailSolidRgb},${opacity})`;
|
|
@@ -794,7 +814,7 @@ function createRenderer(options) {
|
|
|
794
814
|
if (partial.trailColor !== void 0 || partial.trailStyle !== void 0) {
|
|
795
815
|
warnIfTrailColorMismatch(trailColor, trailStyle);
|
|
796
816
|
}
|
|
797
|
-
}
|
|
817
|
+
},
|
|
798
818
|
};
|
|
799
819
|
if (shouldAutoStart) {
|
|
800
820
|
instance.play();
|
|
@@ -805,19 +825,22 @@ function createRenderer(options) {
|
|
|
805
825
|
// src/curves/artemis2.ts
|
|
806
826
|
var TWO_PI2 = Math.PI * 2;
|
|
807
827
|
function artemis2Fn(t, _time, _params) {
|
|
808
|
-
const a = 0.35,
|
|
809
|
-
|
|
828
|
+
const a = 0.35,
|
|
829
|
+
b = 0.15,
|
|
830
|
+
ox = 0.175;
|
|
831
|
+
const s = Math.sin(t),
|
|
832
|
+
c = Math.cos(t);
|
|
810
833
|
const denom = 1 + s * s;
|
|
811
834
|
return {
|
|
812
|
-
x: c * (1 + a * c) / denom - ox,
|
|
813
|
-
y: s * c * (1 + b * c) / denom
|
|
835
|
+
x: (c * (1 + a * c)) / denom - ox,
|
|
836
|
+
y: (s * c * (1 + b * c)) / denom,
|
|
814
837
|
};
|
|
815
838
|
}
|
|
816
839
|
var artemis2 = {
|
|
817
840
|
name: "Artemis II",
|
|
818
841
|
fn: artemis2Fn,
|
|
819
842
|
period: TWO_PI2,
|
|
820
|
-
speed: 0.7
|
|
843
|
+
speed: 0.7,
|
|
821
844
|
};
|
|
822
845
|
|
|
823
846
|
// src/curves/astroid.ts
|
|
@@ -827,14 +850,14 @@ function astroidFn(t, _time, _params) {
|
|
|
827
850
|
const s = Math.sin(t);
|
|
828
851
|
return {
|
|
829
852
|
x: c * c * c,
|
|
830
|
-
y: s * s * s
|
|
853
|
+
y: s * s * s,
|
|
831
854
|
};
|
|
832
855
|
}
|
|
833
856
|
var astroid = {
|
|
834
857
|
name: "Astroid",
|
|
835
858
|
fn: astroidFn,
|
|
836
859
|
period: TWO_PI3,
|
|
837
|
-
speed: 1.1
|
|
860
|
+
speed: 1.1,
|
|
838
861
|
};
|
|
839
862
|
|
|
840
863
|
// src/curves/deltoid.ts
|
|
@@ -842,14 +865,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
842
865
|
function deltoidFn(t, _time, _params) {
|
|
843
866
|
return {
|
|
844
867
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
845
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
868
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t),
|
|
846
869
|
};
|
|
847
870
|
}
|
|
848
871
|
var deltoid = {
|
|
849
872
|
name: "Deltoid",
|
|
850
873
|
fn: deltoidFn,
|
|
851
874
|
period: TWO_PI4,
|
|
852
|
-
speed: 0.9
|
|
875
|
+
speed: 0.9,
|
|
853
876
|
};
|
|
854
877
|
|
|
855
878
|
// src/curves/epicycloid3.ts
|
|
@@ -857,14 +880,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
857
880
|
function epicycloid3Fn(t, _time, _params) {
|
|
858
881
|
return {
|
|
859
882
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
860
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
883
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t),
|
|
861
884
|
};
|
|
862
885
|
}
|
|
863
886
|
var epicycloid3 = {
|
|
864
887
|
name: "Epicycloid (n=3)",
|
|
865
888
|
fn: epicycloid3Fn,
|
|
866
889
|
period: TWO_PI5,
|
|
867
|
-
speed: 0.75
|
|
890
|
+
speed: 0.75,
|
|
868
891
|
};
|
|
869
892
|
|
|
870
893
|
// src/curves/epitrochoid7.ts
|
|
@@ -873,14 +896,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
873
896
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
874
897
|
return {
|
|
875
898
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
876
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
899
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t),
|
|
877
900
|
};
|
|
878
901
|
}
|
|
879
902
|
function epitrochoid7SkeletonFn(t) {
|
|
880
903
|
const d = 1.275;
|
|
881
904
|
return {
|
|
882
905
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
883
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
906
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t),
|
|
884
907
|
};
|
|
885
908
|
}
|
|
886
909
|
var epitrochoid7 = {
|
|
@@ -888,7 +911,7 @@ var epitrochoid7 = {
|
|
|
888
911
|
fn: epitrochoid7Fn,
|
|
889
912
|
period: TWO_PI6,
|
|
890
913
|
speed: 1.4,
|
|
891
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
914
|
+
skeletonFn: epitrochoid7SkeletonFn,
|
|
892
915
|
};
|
|
893
916
|
|
|
894
917
|
// src/curves/lissajous32.ts
|
|
@@ -897,7 +920,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
897
920
|
const phi = time * 0.45;
|
|
898
921
|
return {
|
|
899
922
|
x: Math.sin(3 * t + phi),
|
|
900
|
-
y: Math.sin(2 * t)
|
|
923
|
+
y: Math.sin(2 * t),
|
|
901
924
|
};
|
|
902
925
|
}
|
|
903
926
|
var lissajous32 = {
|
|
@@ -905,7 +928,7 @@ var lissajous32 = {
|
|
|
905
928
|
fn: lissajous32Fn,
|
|
906
929
|
period: TWO_PI7,
|
|
907
930
|
speed: 2,
|
|
908
|
-
skeleton: "live"
|
|
931
|
+
skeleton: "live",
|
|
909
932
|
};
|
|
910
933
|
|
|
911
934
|
// src/curves/lissajous43.ts
|
|
@@ -914,7 +937,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
914
937
|
const phi = time * 0.38;
|
|
915
938
|
return {
|
|
916
939
|
x: Math.sin(4 * t + phi),
|
|
917
|
-
y: Math.sin(3 * t)
|
|
940
|
+
y: Math.sin(3 * t),
|
|
918
941
|
};
|
|
919
942
|
}
|
|
920
943
|
var lissajous43 = {
|
|
@@ -922,17 +945,18 @@ var lissajous43 = {
|
|
|
922
945
|
fn: lissajous43Fn,
|
|
923
946
|
period: TWO_PI8,
|
|
924
947
|
speed: 1.8,
|
|
925
|
-
skeleton: "live"
|
|
948
|
+
skeleton: "live",
|
|
926
949
|
};
|
|
927
950
|
|
|
928
951
|
// src/curves/lame.ts
|
|
929
952
|
var TWO_PI9 = Math.PI * 2;
|
|
930
953
|
function lameFn(t, time, _params) {
|
|
931
954
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
932
|
-
const c = Math.cos(t),
|
|
955
|
+
const c = Math.cos(t),
|
|
956
|
+
s = Math.sin(t);
|
|
933
957
|
return {
|
|
934
958
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
935
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
959
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p),
|
|
936
960
|
};
|
|
937
961
|
}
|
|
938
962
|
var lame = {
|
|
@@ -940,7 +964,7 @@ var lame = {
|
|
|
940
964
|
fn: lameFn,
|
|
941
965
|
period: TWO_PI9,
|
|
942
966
|
speed: 1,
|
|
943
|
-
skeleton: "live"
|
|
967
|
+
skeleton: "live",
|
|
944
968
|
};
|
|
945
969
|
|
|
946
970
|
// src/curves/rose3.ts
|
|
@@ -949,14 +973,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
949
973
|
const r = Math.cos(3 * t);
|
|
950
974
|
return {
|
|
951
975
|
x: r * Math.cos(t),
|
|
952
|
-
y: r * Math.sin(t)
|
|
976
|
+
y: r * Math.sin(t),
|
|
953
977
|
};
|
|
954
978
|
}
|
|
955
979
|
var rose3 = {
|
|
956
980
|
name: "Rose (n=3)",
|
|
957
981
|
fn: rose3Fn,
|
|
958
982
|
period: TWO_PI10,
|
|
959
|
-
speed: 1.15
|
|
983
|
+
speed: 1.15,
|
|
960
984
|
};
|
|
961
985
|
|
|
962
986
|
// src/curves/rose5.ts
|
|
@@ -965,78 +989,87 @@ function rose5Fn(t, _time, _params) {
|
|
|
965
989
|
const r = Math.cos(5 * t);
|
|
966
990
|
return {
|
|
967
991
|
x: r * Math.cos(t),
|
|
968
|
-
y: r * Math.sin(t)
|
|
992
|
+
y: r * Math.sin(t),
|
|
969
993
|
};
|
|
970
994
|
}
|
|
971
995
|
var rose5 = {
|
|
972
996
|
name: "Rose (n=5)",
|
|
973
997
|
fn: rose5Fn,
|
|
974
998
|
period: TWO_PI11,
|
|
975
|
-
speed: 1
|
|
999
|
+
speed: 1,
|
|
976
1000
|
};
|
|
977
1001
|
|
|
978
1002
|
// src/curves/rose52.ts
|
|
979
1003
|
var FOUR_PI = Math.PI * 4;
|
|
980
1004
|
function rose52Fn(t, _time, _params) {
|
|
981
|
-
const r = Math.cos(5 / 2 * t);
|
|
1005
|
+
const r = Math.cos((5 / 2) * t);
|
|
982
1006
|
return {
|
|
983
1007
|
x: r * Math.cos(t),
|
|
984
|
-
y: r * Math.sin(t)
|
|
1008
|
+
y: r * Math.sin(t),
|
|
985
1009
|
};
|
|
986
1010
|
}
|
|
987
1011
|
var rose52 = {
|
|
988
1012
|
name: "Rose (n=5/2)",
|
|
989
1013
|
fn: rose52Fn,
|
|
990
1014
|
period: FOUR_PI,
|
|
991
|
-
speed: 0.8
|
|
1015
|
+
speed: 0.8,
|
|
992
1016
|
};
|
|
993
1017
|
|
|
994
1018
|
// src/curves/star.ts
|
|
995
1019
|
var TWO_PI12 = Math.PI * 2;
|
|
996
1020
|
function starFn(t, _time, _params) {
|
|
997
|
-
const r =
|
|
1021
|
+
const r =
|
|
1022
|
+
Math.abs(Math.cos((5 / 2) * t)) +
|
|
1023
|
+
0.35 * Math.abs(Math.cos((15 / 2) * t)) +
|
|
1024
|
+
0.15 * Math.abs(Math.cos((25 / 2) * t));
|
|
998
1025
|
return {
|
|
999
1026
|
x: r * Math.cos(t),
|
|
1000
|
-
y: r * Math.sin(t)
|
|
1027
|
+
y: r * Math.sin(t),
|
|
1001
1028
|
};
|
|
1002
1029
|
}
|
|
1003
1030
|
var star = {
|
|
1004
1031
|
name: "Star",
|
|
1005
1032
|
fn: starFn,
|
|
1006
1033
|
period: TWO_PI12,
|
|
1007
|
-
speed: 1
|
|
1034
|
+
speed: 1,
|
|
1008
1035
|
};
|
|
1009
1036
|
|
|
1010
1037
|
// src/curves/star4.ts
|
|
1011
1038
|
var TWO_PI13 = Math.PI * 2;
|
|
1012
1039
|
function star4Fn(t, _time, _params) {
|
|
1013
|
-
const r =
|
|
1040
|
+
const r =
|
|
1041
|
+
Math.abs(Math.cos(2 * t)) +
|
|
1042
|
+
0.35 * Math.abs(Math.cos(6 * t)) +
|
|
1043
|
+
0.15 * Math.abs(Math.cos(10 * t));
|
|
1014
1044
|
return {
|
|
1015
1045
|
x: r * Math.cos(t),
|
|
1016
|
-
y: r * Math.sin(t)
|
|
1046
|
+
y: r * Math.sin(t),
|
|
1017
1047
|
};
|
|
1018
1048
|
}
|
|
1019
1049
|
var star4 = {
|
|
1020
1050
|
name: "Star (4-arm)",
|
|
1021
1051
|
fn: star4Fn,
|
|
1022
1052
|
period: TWO_PI13,
|
|
1023
|
-
speed: 1
|
|
1053
|
+
speed: 1,
|
|
1024
1054
|
};
|
|
1025
1055
|
|
|
1026
1056
|
// src/curves/star7.ts
|
|
1027
1057
|
var TWO_PI14 = Math.PI * 2;
|
|
1028
1058
|
function star7Fn(t, _time, _params) {
|
|
1029
|
-
const r =
|
|
1059
|
+
const r =
|
|
1060
|
+
Math.abs(Math.cos((7 / 2) * t)) +
|
|
1061
|
+
0.35 * Math.abs(Math.cos((21 / 2) * t)) +
|
|
1062
|
+
0.15 * Math.abs(Math.cos((35 / 2) * t));
|
|
1030
1063
|
return {
|
|
1031
1064
|
x: r * Math.cos(t),
|
|
1032
|
-
y: r * Math.sin(t)
|
|
1065
|
+
y: r * Math.sin(t),
|
|
1033
1066
|
};
|
|
1034
1067
|
}
|
|
1035
1068
|
var star7 = {
|
|
1036
1069
|
name: "Star (7-arm)",
|
|
1037
1070
|
fn: star7Fn,
|
|
1038
1071
|
period: TWO_PI14,
|
|
1039
|
-
speed: 1
|
|
1072
|
+
speed: 1,
|
|
1040
1073
|
};
|
|
1041
1074
|
|
|
1042
1075
|
// src/curves/index.ts
|
|
@@ -1054,7 +1087,7 @@ var curves = {
|
|
|
1054
1087
|
lissajous32,
|
|
1055
1088
|
lissajous43,
|
|
1056
1089
|
epicycloid3,
|
|
1057
|
-
lame
|
|
1090
|
+
lame,
|
|
1058
1091
|
};
|
|
1059
1092
|
|
|
1060
1093
|
// src/index.ts
|
|
@@ -1071,8 +1104,7 @@ function parseTrailColor(value) {
|
|
|
1071
1104
|
if (Array.isArray(parsed)) {
|
|
1072
1105
|
return parsed;
|
|
1073
1106
|
}
|
|
1074
|
-
} catch {
|
|
1075
|
-
}
|
|
1107
|
+
} catch {}
|
|
1076
1108
|
return value;
|
|
1077
1109
|
}
|
|
1078
1110
|
function init() {
|
|
@@ -1087,16 +1119,16 @@ function init() {
|
|
|
1087
1119
|
return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
|
|
1088
1120
|
}
|
|
1089
1121
|
const instance = createSarmal(canvas, curveDef, {
|
|
1090
|
-
...canvas.dataset.trailColor && {
|
|
1091
|
-
trailColor: parseTrailColor(canvas.dataset.trailColor)
|
|
1092
|
-
},
|
|
1093
|
-
...canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor },
|
|
1094
|
-
...canvas.dataset.headColor && { headColor: canvas.dataset.headColor },
|
|
1095
|
-
...canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) },
|
|
1096
|
-
...canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) },
|
|
1097
|
-
...canvas.dataset.trailStyle && {
|
|
1098
|
-
trailStyle: canvas.dataset.trailStyle
|
|
1099
|
-
}
|
|
1122
|
+
...(canvas.dataset.trailColor && {
|
|
1123
|
+
trailColor: parseTrailColor(canvas.dataset.trailColor),
|
|
1124
|
+
}),
|
|
1125
|
+
...(canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor }),
|
|
1126
|
+
...(canvas.dataset.headColor && { headColor: canvas.dataset.headColor }),
|
|
1127
|
+
...(canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) }),
|
|
1128
|
+
...(canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) }),
|
|
1129
|
+
...(canvas.dataset.trailStyle && {
|
|
1130
|
+
trailStyle: canvas.dataset.trailStyle,
|
|
1131
|
+
}),
|
|
1100
1132
|
});
|
|
1101
1133
|
if (canvas.dataset.speed) {
|
|
1102
1134
|
instance.setSpeed(parseFloat(canvas.dataset.speed));
|
|
@@ -1113,4 +1145,4 @@ if (document.readyState === "loading") {
|
|
|
1113
1145
|
|
|
1114
1146
|
export { init };
|
|
1115
1147
|
//# sourceMappingURL=auto-init.js.map
|
|
1116
|
-
//# sourceMappingURL=auto-init.js.map
|
|
1148
|
+
//# sourceMappingURL=auto-init.js.map
|