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