@sarmal/core 0.9.0 → 0.9.7
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 +255 -154
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.d.cts +1 -2
- package/dist/auto-init.d.ts +1 -2
- package/dist/auto-init.js +254 -153
- package/dist/auto-init.js.map +1 -1
- package/dist/curves/artemis2.cjs +26 -0
- package/dist/curves/artemis2.cjs.map +1 -0
- package/dist/curves/artemis2.d.cts +9 -0
- package/dist/curves/artemis2.d.ts +9 -0
- package/dist/curves/artemis2.js +24 -0
- package/dist/curves/artemis2.js.map +1 -0
- package/dist/curves/astroid.cjs +22 -0
- package/dist/curves/astroid.cjs.map +1 -0
- package/dist/curves/astroid.d.cts +9 -0
- package/dist/curves/astroid.d.ts +9 -0
- package/dist/curves/astroid.js +20 -0
- package/dist/curves/astroid.js.map +1 -0
- package/dist/curves/deltoid.cjs +20 -0
- package/dist/curves/deltoid.cjs.map +1 -0
- package/dist/curves/deltoid.d.cts +9 -0
- package/dist/curves/deltoid.d.ts +9 -0
- package/dist/curves/deltoid.js +18 -0
- package/dist/curves/deltoid.js.map +1 -0
- package/dist/curves/epicycloid3.cjs +20 -0
- package/dist/curves/epicycloid3.cjs.map +1 -0
- package/dist/curves/epicycloid3.d.cts +9 -0
- package/dist/curves/epicycloid3.d.ts +9 -0
- package/dist/curves/epicycloid3.js +18 -0
- package/dist/curves/epicycloid3.js.map +1 -0
- package/dist/curves/epitrochoid7.cjs +29 -0
- package/dist/curves/epitrochoid7.cjs.map +1 -0
- package/dist/curves/epitrochoid7.d.cts +9 -0
- package/dist/curves/epitrochoid7.d.ts +9 -0
- package/dist/curves/epitrochoid7.js +27 -0
- package/dist/curves/epitrochoid7.js.map +1 -0
- package/dist/curves/index.cjs +206 -0
- package/dist/curves/index.cjs.map +1 -0
- package/dist/curves/index.d.cts +19 -0
- package/dist/curves/index.d.ts +19 -0
- package/dist/curves/index.js +206 -0
- package/dist/curves/index.js.map +1 -0
- package/dist/curves/lame.cjs +24 -0
- package/dist/curves/lame.cjs.map +1 -0
- package/dist/curves/lame.d.cts +9 -0
- package/dist/curves/lame.d.ts +9 -0
- package/dist/curves/lame.js +22 -0
- package/dist/curves/lame.js.map +1 -0
- package/dist/curves/lissajous32.cjs +22 -0
- package/dist/curves/lissajous32.cjs.map +1 -0
- package/dist/curves/lissajous32.d.cts +9 -0
- package/dist/curves/lissajous32.d.ts +9 -0
- package/dist/curves/lissajous32.js +20 -0
- package/dist/curves/lissajous32.js.map +1 -0
- package/dist/curves/lissajous43.cjs +22 -0
- package/dist/curves/lissajous43.cjs.map +1 -0
- package/dist/curves/lissajous43.d.cts +9 -0
- package/dist/curves/lissajous43.d.ts +9 -0
- package/dist/curves/lissajous43.js +20 -0
- package/dist/curves/lissajous43.js.map +1 -0
- package/dist/curves/rose3.cjs +21 -0
- package/dist/curves/rose3.cjs.map +1 -0
- package/dist/curves/rose3.d.cts +9 -0
- package/dist/curves/rose3.d.ts +9 -0
- package/dist/curves/rose3.js +19 -0
- package/dist/curves/rose3.js.map +1 -0
- package/dist/curves/rose5.cjs +21 -0
- package/dist/curves/rose5.cjs.map +1 -0
- package/dist/curves/rose5.d.cts +9 -0
- package/dist/curves/rose5.d.ts +9 -0
- package/dist/curves/rose5.js +19 -0
- package/dist/curves/rose5.js.map +1 -0
- package/dist/index.cjs +263 -154
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +64 -233
- package/dist/index.d.ts +64 -233
- package/dist/index.js +270 -154
- package/dist/index.js.map +1 -1
- package/dist/types-cR2xOewv.d.cts +234 -0
- package/dist/types-cR2xOewv.d.ts +234 -0
- package/package.json +14 -3
package/dist/index.js
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
// src/engine.ts
|
|
2
2
|
var TWO_PI = Math.PI * 2;
|
|
3
3
|
var POINTS_PER_PERIOD_UNIT = 50;
|
|
4
|
+
function lerp(start, end, t) {
|
|
5
|
+
return start + (end - start) * t;
|
|
6
|
+
}
|
|
7
|
+
var EMPTY_PARAMS = {};
|
|
4
8
|
var CircularBuffer = class {
|
|
5
9
|
constructor(capacity) {
|
|
6
10
|
this.head = 0;
|
|
@@ -43,16 +47,29 @@ var CircularBuffer = class {
|
|
|
43
47
|
}
|
|
44
48
|
};
|
|
45
49
|
function resolveCurve(curveDef) {
|
|
50
|
+
const period = curveDef.period ?? TWO_PI;
|
|
51
|
+
if (!Number.isFinite(period) || period <= 0) {
|
|
52
|
+
throw new RangeError(`[sarmal] period must be a positive finite number, got ${period}`);
|
|
53
|
+
}
|
|
54
|
+
const speed = curveDef.speed ?? 1;
|
|
55
|
+
if (!Number.isFinite(speed)) {
|
|
56
|
+
throw new RangeError(`[sarmal] speed must be a finite number, got ${speed}`);
|
|
57
|
+
}
|
|
46
58
|
return {
|
|
47
59
|
name: curveDef.name,
|
|
48
60
|
fn: curveDef.fn,
|
|
49
|
-
period
|
|
50
|
-
speed
|
|
61
|
+
period,
|
|
62
|
+
speed,
|
|
51
63
|
skeleton: curveDef.skeleton,
|
|
52
|
-
skeletonFn: curveDef.skeletonFn
|
|
64
|
+
skeletonFn: curveDef.skeletonFn,
|
|
53
65
|
};
|
|
54
66
|
}
|
|
55
67
|
function createEngine(curveDef, trailLength = 120) {
|
|
68
|
+
if (!Number.isFinite(trailLength) || trailLength <= 0) {
|
|
69
|
+
throw new RangeError(
|
|
70
|
+
`[sarmal] trailLength must be a positive finite number, got ${trailLength}`,
|
|
71
|
+
);
|
|
72
|
+
}
|
|
56
73
|
let curve = resolveCurve(curveDef);
|
|
57
74
|
const trail = new CircularBuffer(trailLength);
|
|
58
75
|
let t = 0;
|
|
@@ -65,21 +82,25 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
65
82
|
return c.skeletonFn(sampleT);
|
|
66
83
|
}
|
|
67
84
|
if (c.skeleton === "live") {
|
|
68
|
-
return c.fn(sampleT, actualTime,
|
|
85
|
+
return c.fn(sampleT, actualTime, EMPTY_PARAMS);
|
|
69
86
|
}
|
|
70
|
-
return c.fn(sampleT, 0,
|
|
87
|
+
return c.fn(sampleT, 0, EMPTY_PARAMS);
|
|
71
88
|
}
|
|
72
89
|
return {
|
|
73
90
|
tick(deltaTime) {
|
|
74
|
-
|
|
91
|
+
let effectiveSpeed = curve.speed;
|
|
92
|
+
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
93
|
+
effectiveSpeed = lerp(curve.speed, morphCurveB.speed, _morphAlpha);
|
|
94
|
+
}
|
|
95
|
+
t = (t + effectiveSpeed * deltaTime) % curve.period;
|
|
75
96
|
actualTime += deltaTime;
|
|
76
97
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
77
|
-
const a = curve.fn(t, actualTime,
|
|
78
|
-
const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
|
|
79
|
-
const b = morphCurveB.fn(tB, actualTime,
|
|
98
|
+
const a = curve.fn(t, actualTime, EMPTY_PARAMS);
|
|
99
|
+
const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
|
|
100
|
+
const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
|
|
80
101
|
trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
|
|
81
102
|
} else {
|
|
82
|
-
const point = curve.fn(t, actualTime,
|
|
103
|
+
const point = curve.fn(t, actualTime, EMPTY_PARAMS);
|
|
83
104
|
trail.push(point.x, point.y);
|
|
84
105
|
}
|
|
85
106
|
return trail.toArray();
|
|
@@ -99,14 +120,14 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
99
120
|
trail.clear();
|
|
100
121
|
},
|
|
101
122
|
seek(newT, { clearTrail = false } = {}) {
|
|
102
|
-
t = (newT % curve.period + curve.period) % curve.period;
|
|
123
|
+
t = ((newT % curve.period) + curve.period) % curve.period;
|
|
103
124
|
if (clearTrail) {
|
|
104
125
|
trail.clear();
|
|
105
126
|
}
|
|
106
127
|
},
|
|
107
128
|
seekWithTrail(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
108
129
|
const advance = curve.speed * step;
|
|
109
|
-
const target = (targetT % curve.period + curve.period) % curve.period;
|
|
130
|
+
const target = ((targetT % curve.period) + curve.period) % curve.period;
|
|
110
131
|
const targetTime = target / curve.speed;
|
|
111
132
|
t = target;
|
|
112
133
|
actualTime = targetTime;
|
|
@@ -115,9 +136,9 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
115
136
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
116
137
|
for (let i = count - 1; i >= 0; i--) {
|
|
117
138
|
const sampleT = target - i * advance;
|
|
118
|
-
const wrappedT = sampleT
|
|
139
|
+
const wrappedT = ((sampleT % curve.period) + curve.period) % curve.period;
|
|
119
140
|
const time = targetTime - i * step;
|
|
120
|
-
const point = curve.fn(wrappedT, time,
|
|
141
|
+
const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
|
|
121
142
|
trail.push(point.x, point.y);
|
|
122
143
|
}
|
|
123
144
|
},
|
|
@@ -132,13 +153,16 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
132
153
|
...frozenB,
|
|
133
154
|
fn: (sampleT, time, params) => {
|
|
134
155
|
const a = frozenA.fn(sampleT, time, params);
|
|
135
|
-
const tB =
|
|
156
|
+
const tB =
|
|
157
|
+
frozenStrategy === "normalized"
|
|
158
|
+
? (sampleT / frozenA.period) * frozenB.period
|
|
159
|
+
: sampleT;
|
|
136
160
|
const b = frozenB.fn(tB, time, params);
|
|
137
161
|
return {
|
|
138
162
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
139
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
163
|
+
y: a.y + (b.y - a.y) * frozenAlpha,
|
|
140
164
|
};
|
|
141
|
-
}
|
|
165
|
+
},
|
|
142
166
|
};
|
|
143
167
|
}
|
|
144
168
|
_morphStrategy = strategy;
|
|
@@ -151,7 +175,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
151
175
|
completeMorph() {
|
|
152
176
|
if (morphCurveB !== null) {
|
|
153
177
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
154
|
-
t = t / curve.period * morphCurveB.period;
|
|
178
|
+
t = (t / curve.period) * morphCurveB.period;
|
|
155
179
|
}
|
|
156
180
|
curve = morphCurveB;
|
|
157
181
|
}
|
|
@@ -163,23 +187,26 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
163
187
|
const points = new Array(steps);
|
|
164
188
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
165
189
|
for (let i = 0; i < steps; i++) {
|
|
166
|
-
const sampleT = i / (steps - 1) * curve.period;
|
|
190
|
+
const sampleT = (i / (steps - 1)) * curve.period;
|
|
167
191
|
const a = sampleSkeleton(curve, sampleT);
|
|
168
|
-
const tB =
|
|
192
|
+
const tB =
|
|
193
|
+
_morphStrategy === "normalized"
|
|
194
|
+
? (sampleT / curve.period) * morphCurveB.period
|
|
195
|
+
: sampleT;
|
|
169
196
|
const b = sampleSkeleton(morphCurveB, tB);
|
|
170
197
|
points[i] = {
|
|
171
198
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
172
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
199
|
+
y: a.y + (b.y - a.y) * _morphAlpha,
|
|
173
200
|
};
|
|
174
201
|
}
|
|
175
202
|
return points;
|
|
176
203
|
}
|
|
177
204
|
for (let i = 0; i < steps; i++) {
|
|
178
|
-
const sampleT = i / (steps - 1) * curve.period;
|
|
205
|
+
const sampleT = (i / (steps - 1)) * curve.period;
|
|
179
206
|
points[i] = sampleSkeleton(curve, sampleT);
|
|
180
207
|
}
|
|
181
208
|
return points;
|
|
182
|
-
}
|
|
209
|
+
},
|
|
183
210
|
};
|
|
184
211
|
}
|
|
185
212
|
|
|
@@ -199,7 +226,7 @@ var GRADIENT = {
|
|
|
199
226
|
ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
|
|
200
227
|
ice: ["#1e3a8a", "#67e8f9"],
|
|
201
228
|
fire: ["#7f1d1d", "#fbbf24"],
|
|
202
|
-
forest: ["#14532d", "#86efac"]
|
|
229
|
+
forest: ["#14532d", "#86efac"],
|
|
203
230
|
};
|
|
204
231
|
var PRESETS = {
|
|
205
232
|
bard: GRADIENT.bard,
|
|
@@ -207,16 +234,16 @@ var PRESETS = {
|
|
|
207
234
|
ocean: GRADIENT.ocean,
|
|
208
235
|
ice: GRADIENT.ice,
|
|
209
236
|
fire: GRADIENT.fire,
|
|
210
|
-
forest: GRADIENT.forest
|
|
237
|
+
forest: GRADIENT.forest,
|
|
211
238
|
};
|
|
212
239
|
function hexToRgb(hex) {
|
|
213
240
|
const n = parseInt(hex.slice(1), 16);
|
|
214
|
-
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
241
|
+
return { r: n >> 16, g: (n >> 8) & 255, b: n & 255 };
|
|
215
242
|
}
|
|
216
243
|
var lerpRgb = (a, b, t) => ({
|
|
217
244
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
218
245
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
219
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
246
|
+
b: Math.round(a.b + (b.b - a.b) * t),
|
|
220
247
|
});
|
|
221
248
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
222
249
|
if (palette.length === 0) return { r: 255, g: 255, b: 255 };
|
|
@@ -236,7 +263,7 @@ function resolvePalette(palette, trailStyle) {
|
|
|
236
263
|
}
|
|
237
264
|
function hexToRgbComponents(hex) {
|
|
238
265
|
const n = parseInt(hex.slice(1), 16);
|
|
239
|
-
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
266
|
+
return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
|
|
240
267
|
}
|
|
241
268
|
function computeTangent(trail, i) {
|
|
242
269
|
const count = trail.length;
|
|
@@ -281,7 +308,7 @@ function createRenderer(options) {
|
|
|
281
308
|
skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
|
|
282
309
|
trailColor: options.trailColor ?? "#ffffff",
|
|
283
310
|
headColor: options.headColor ?? "#ffffff",
|
|
284
|
-
headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
|
|
311
|
+
headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
|
|
285
312
|
};
|
|
286
313
|
const trailStyle = options.trailStyle ?? "default";
|
|
287
314
|
const palette = resolvePalette(options.palette, trailStyle);
|
|
@@ -314,15 +341,31 @@ function createRenderer(options) {
|
|
|
314
341
|
function computeBoundaries(pts) {
|
|
315
342
|
if (pts.length === 0) return null;
|
|
316
343
|
const first = pts[0];
|
|
317
|
-
let minX = first.x,
|
|
344
|
+
let minX = first.x,
|
|
345
|
+
maxX = first.x,
|
|
346
|
+
minY = first.y,
|
|
347
|
+
maxY = first.y;
|
|
318
348
|
for (const p of pts) {
|
|
319
|
-
if (p.x < minX)
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
if (p.
|
|
349
|
+
if (p.x < minX) {
|
|
350
|
+
minX = p.x;
|
|
351
|
+
}
|
|
352
|
+
if (p.x > maxX) {
|
|
353
|
+
maxX = p.x;
|
|
354
|
+
}
|
|
355
|
+
if (p.y < minY) {
|
|
356
|
+
minY = p.y;
|
|
357
|
+
}
|
|
358
|
+
if (p.y > maxY) {
|
|
359
|
+
maxY = p.y;
|
|
360
|
+
}
|
|
323
361
|
}
|
|
324
362
|
const width = maxX - minX;
|
|
325
363
|
const height = maxY - minY;
|
|
364
|
+
if (width === 0 && height === 0) {
|
|
365
|
+
throw new Error(
|
|
366
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
|
|
367
|
+
);
|
|
368
|
+
}
|
|
326
369
|
const scaleX = logicalWidth / (width * (1 + FIT_PADDING * 2));
|
|
327
370
|
const scaleY = logicalHeight / (height * (1 + FIT_PADDING * 2));
|
|
328
371
|
const s = Math.min(scaleX, scaleY);
|
|
@@ -331,7 +374,7 @@ function createRenderer(options) {
|
|
|
331
374
|
return {
|
|
332
375
|
scale: s,
|
|
333
376
|
offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
|
|
334
|
-
offsetY: (logicalHeight - boundsHeight) / 2 - minY * s
|
|
377
|
+
offsetY: (logicalHeight - boundsHeight) / 2 - minY * s,
|
|
335
378
|
};
|
|
336
379
|
}
|
|
337
380
|
function calculateBoundaries() {
|
|
@@ -537,7 +580,7 @@ function createRenderer(options) {
|
|
|
537
580
|
return new Promise((resolve) => {
|
|
538
581
|
morphResolve = resolve;
|
|
539
582
|
});
|
|
540
|
-
}
|
|
583
|
+
},
|
|
541
584
|
};
|
|
542
585
|
}
|
|
543
586
|
|
|
@@ -550,6 +593,7 @@ var TRAIL_MIN_WIDTH2 = 0.5;
|
|
|
550
593
|
var TRAIL_MAX_WIDTH2 = 2.5;
|
|
551
594
|
var DEFAULT_SKELETON_OPACITY2 = 0.15;
|
|
552
595
|
var FIT_PADDING2 = 0.1;
|
|
596
|
+
var EMPTY_PARAMS2 = {};
|
|
553
597
|
function el(tag) {
|
|
554
598
|
return document.createElementNS("http://www.w3.org/2000/svg", tag);
|
|
555
599
|
}
|
|
@@ -560,7 +604,7 @@ function createSVGRenderer(options) {
|
|
|
560
604
|
trailColor: options.trailColor ?? "#ffffff",
|
|
561
605
|
headColor: options.headColor ?? "#ffffff",
|
|
562
606
|
headRadius: options.headRadius ?? 4,
|
|
563
|
-
ariaLabel: options.ariaLabel ?? "Loading"
|
|
607
|
+
ariaLabel: options.ariaLabel ?? "Loading",
|
|
564
608
|
};
|
|
565
609
|
const rect = container.getBoundingClientRect();
|
|
566
610
|
const width = rect.width || 200;
|
|
@@ -614,7 +658,10 @@ function createSVGRenderer(options) {
|
|
|
614
658
|
return;
|
|
615
659
|
}
|
|
616
660
|
const first = skeleton2[0];
|
|
617
|
-
let minX = first.x,
|
|
661
|
+
let minX = first.x,
|
|
662
|
+
maxX = first.x,
|
|
663
|
+
minY = first.y,
|
|
664
|
+
maxY = first.y;
|
|
618
665
|
for (const p of skeleton2) {
|
|
619
666
|
if (p.x < minX) {
|
|
620
667
|
minX = p.x;
|
|
@@ -631,6 +678,11 @@ function createSVGRenderer(options) {
|
|
|
631
678
|
}
|
|
632
679
|
const w = maxX - minX;
|
|
633
680
|
const h = maxY - minY;
|
|
681
|
+
if (w === 0 && h === 0) {
|
|
682
|
+
throw new Error(
|
|
683
|
+
"[sarmal] All skeleton points are identical. Check that your curve fn returns distinct points for different values of t.",
|
|
684
|
+
);
|
|
685
|
+
}
|
|
634
686
|
const scaleX = width / (w * (1 + FIT_PADDING2 * 2));
|
|
635
687
|
const scaleY = height / (h * (1 + FIT_PADDING2 * 2));
|
|
636
688
|
scale = Math.min(scaleX, scaleY);
|
|
@@ -713,7 +765,8 @@ function createSVGRenderer(options) {
|
|
|
713
765
|
}
|
|
714
766
|
let animationId = null;
|
|
715
767
|
let lastTime = 0;
|
|
716
|
-
const prefersReducedMotion =
|
|
768
|
+
const prefersReducedMotion =
|
|
769
|
+
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
717
770
|
let morphResolve = null;
|
|
718
771
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS2;
|
|
719
772
|
let morphTarget = null;
|
|
@@ -723,8 +776,8 @@ function createSVGRenderer(options) {
|
|
|
723
776
|
const samples = Math.max(50, Math.round(period * 20));
|
|
724
777
|
const points = [];
|
|
725
778
|
for (let i = 0; i <= samples; i++) {
|
|
726
|
-
const t = i / samples * period;
|
|
727
|
-
const p = target.fn(t, 0,
|
|
779
|
+
const t = (i / samples) * period;
|
|
780
|
+
const p = target.fn(t, 0, EMPTY_PARAMS2);
|
|
728
781
|
points.push(p);
|
|
729
782
|
}
|
|
730
783
|
if (points.length < 2) {
|
|
@@ -751,13 +804,16 @@ function createSVGRenderer(options) {
|
|
|
751
804
|
skeletonPathA.setAttribute("visibility", "visible");
|
|
752
805
|
skeletonPathA.setAttribute(
|
|
753
806
|
"stroke-opacity",
|
|
754
|
-
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2)
|
|
807
|
+
String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2),
|
|
755
808
|
);
|
|
756
809
|
}
|
|
757
810
|
if (morphPathBBuilt) {
|
|
758
811
|
skeletonPathB.setAttribute("d", morphPathBBuilt);
|
|
759
812
|
skeletonPathB.setAttribute("visibility", "visible");
|
|
760
|
-
skeletonPathB.setAttribute(
|
|
813
|
+
skeletonPathB.setAttribute(
|
|
814
|
+
"stroke-opacity",
|
|
815
|
+
String(morphAlpha * DEFAULT_SKELETON_OPACITY2),
|
|
816
|
+
);
|
|
761
817
|
}
|
|
762
818
|
if (morphAlpha >= 1) {
|
|
763
819
|
engine.completeMorph();
|
|
@@ -849,7 +905,7 @@ function createSVGRenderer(options) {
|
|
|
849
905
|
return new Promise((resolve) => {
|
|
850
906
|
morphResolve = resolve;
|
|
851
907
|
});
|
|
852
|
-
}
|
|
908
|
+
},
|
|
853
909
|
};
|
|
854
910
|
}
|
|
855
911
|
function createSarmalSVG(container, curveDef, options) {
|
|
@@ -858,152 +914,195 @@ function createSarmalSVG(container, curveDef, options) {
|
|
|
858
914
|
return createSVGRenderer({ container, engine, ...rendererOpts });
|
|
859
915
|
}
|
|
860
916
|
|
|
861
|
-
// src/curves.ts
|
|
917
|
+
// src/curves/artemis2.ts
|
|
862
918
|
var TWO_PI2 = Math.PI * 2;
|
|
863
|
-
function
|
|
864
|
-
const a = 0.35,
|
|
865
|
-
|
|
919
|
+
function artemis2Fn(t, _time, _params) {
|
|
920
|
+
const a = 0.35,
|
|
921
|
+
b = 0.15,
|
|
922
|
+
ox = 0.175;
|
|
923
|
+
const s = Math.sin(t),
|
|
924
|
+
c = Math.cos(t);
|
|
866
925
|
const denom = 1 + s * s;
|
|
867
926
|
return {
|
|
868
|
-
x: c * (1 + a * c) / denom - ox,
|
|
869
|
-
y: s * c * (1 + b * c) / denom
|
|
870
|
-
};
|
|
871
|
-
}
|
|
872
|
-
function epitrochoid7(t, _time, _params) {
|
|
873
|
-
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
874
|
-
return {
|
|
875
|
-
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
876
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
927
|
+
x: (c * (1 + a * c)) / denom - ox,
|
|
928
|
+
y: (s * c * (1 + b * c)) / denom,
|
|
877
929
|
};
|
|
878
930
|
}
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
931
|
+
var artemis2 = {
|
|
932
|
+
name: "Artemis II",
|
|
933
|
+
fn: artemis2Fn,
|
|
934
|
+
period: TWO_PI2,
|
|
935
|
+
speed: 0.7,
|
|
936
|
+
};
|
|
937
|
+
|
|
938
|
+
// src/curves/astroid.ts
|
|
939
|
+
var TWO_PI3 = Math.PI * 2;
|
|
940
|
+
function astroidFn(t, _time, _params) {
|
|
887
941
|
const c = Math.cos(t);
|
|
888
942
|
const s = Math.sin(t);
|
|
889
943
|
return {
|
|
890
944
|
x: c * c * c,
|
|
891
|
-
y: s * s * s
|
|
945
|
+
y: s * s * s,
|
|
892
946
|
};
|
|
893
947
|
}
|
|
894
|
-
|
|
948
|
+
var astroid = {
|
|
949
|
+
name: "Astroid",
|
|
950
|
+
fn: astroidFn,
|
|
951
|
+
period: TWO_PI3,
|
|
952
|
+
speed: 1.1,
|
|
953
|
+
};
|
|
954
|
+
|
|
955
|
+
// src/curves/deltoid.ts
|
|
956
|
+
var TWO_PI4 = Math.PI * 2;
|
|
957
|
+
function deltoidFn(t, _time, _params) {
|
|
895
958
|
return {
|
|
896
959
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
897
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
960
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t),
|
|
898
961
|
};
|
|
899
962
|
}
|
|
900
|
-
|
|
901
|
-
|
|
963
|
+
var deltoid = {
|
|
964
|
+
name: "Deltoid",
|
|
965
|
+
fn: deltoidFn,
|
|
966
|
+
period: TWO_PI4,
|
|
967
|
+
speed: 0.9,
|
|
968
|
+
};
|
|
969
|
+
|
|
970
|
+
// src/curves/epicycloid3.ts
|
|
971
|
+
var TWO_PI5 = Math.PI * 2;
|
|
972
|
+
function epicycloid3Fn(t, _time, _params) {
|
|
902
973
|
return {
|
|
903
|
-
x:
|
|
904
|
-
y:
|
|
974
|
+
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
975
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t),
|
|
905
976
|
};
|
|
906
977
|
}
|
|
907
|
-
|
|
908
|
-
|
|
978
|
+
var epicycloid3 = {
|
|
979
|
+
name: "Epicycloid (n=3)",
|
|
980
|
+
fn: epicycloid3Fn,
|
|
981
|
+
period: TWO_PI5,
|
|
982
|
+
speed: 0.75,
|
|
983
|
+
};
|
|
984
|
+
|
|
985
|
+
// src/curves/epitrochoid7.ts
|
|
986
|
+
var TWO_PI6 = Math.PI * 2;
|
|
987
|
+
function epitrochoid7Fn(t, _time, _params) {
|
|
988
|
+
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
909
989
|
return {
|
|
910
|
-
x:
|
|
911
|
-
y:
|
|
990
|
+
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
991
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t),
|
|
912
992
|
};
|
|
913
993
|
}
|
|
914
|
-
function
|
|
994
|
+
function epitrochoid7SkeletonFn(t) {
|
|
995
|
+
const d = 1.275;
|
|
996
|
+
return {
|
|
997
|
+
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
998
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t),
|
|
999
|
+
};
|
|
1000
|
+
}
|
|
1001
|
+
var epitrochoid7 = {
|
|
1002
|
+
name: "Epitrochoid",
|
|
1003
|
+
fn: epitrochoid7Fn,
|
|
1004
|
+
period: TWO_PI6,
|
|
1005
|
+
speed: 1.4,
|
|
1006
|
+
skeletonFn: epitrochoid7SkeletonFn,
|
|
1007
|
+
};
|
|
1008
|
+
|
|
1009
|
+
// src/curves/lissajous32.ts
|
|
1010
|
+
var TWO_PI7 = Math.PI * 2;
|
|
1011
|
+
function lissajous32Fn(t, time, _params) {
|
|
915
1012
|
const phi = time * 0.45;
|
|
916
1013
|
return {
|
|
917
1014
|
x: Math.sin(3 * t + phi),
|
|
918
|
-
y: Math.sin(2 * t)
|
|
1015
|
+
y: Math.sin(2 * t),
|
|
919
1016
|
};
|
|
920
1017
|
}
|
|
921
|
-
|
|
1018
|
+
var lissajous32 = {
|
|
1019
|
+
name: "Lissajous 3:2",
|
|
1020
|
+
fn: lissajous32Fn,
|
|
1021
|
+
period: TWO_PI7,
|
|
1022
|
+
speed: 2,
|
|
1023
|
+
skeleton: "live",
|
|
1024
|
+
};
|
|
1025
|
+
|
|
1026
|
+
// src/curves/lissajous43.ts
|
|
1027
|
+
var TWO_PI8 = Math.PI * 2;
|
|
1028
|
+
function lissajous43Fn(t, time, _params) {
|
|
922
1029
|
const phi = time * 0.38;
|
|
923
1030
|
return {
|
|
924
1031
|
x: Math.sin(4 * t + phi),
|
|
925
|
-
y: Math.sin(3 * t)
|
|
1032
|
+
y: Math.sin(3 * t),
|
|
1033
|
+
};
|
|
1034
|
+
}
|
|
1035
|
+
var lissajous43 = {
|
|
1036
|
+
name: "Lissajous 4:3",
|
|
1037
|
+
fn: lissajous43Fn,
|
|
1038
|
+
period: TWO_PI8,
|
|
1039
|
+
speed: 1.8,
|
|
1040
|
+
skeleton: "live",
|
|
1041
|
+
};
|
|
1042
|
+
|
|
1043
|
+
// src/curves/lame.ts
|
|
1044
|
+
var TWO_PI9 = Math.PI * 2;
|
|
1045
|
+
function lameFn(t, time, _params) {
|
|
1046
|
+
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
1047
|
+
const c = Math.cos(t),
|
|
1048
|
+
s = Math.sin(t);
|
|
1049
|
+
return {
|
|
1050
|
+
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
1051
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p),
|
|
926
1052
|
};
|
|
927
1053
|
}
|
|
928
|
-
|
|
1054
|
+
var lame = {
|
|
1055
|
+
name: "Lam\xE9 Curve",
|
|
1056
|
+
fn: lameFn,
|
|
1057
|
+
period: TWO_PI9,
|
|
1058
|
+
speed: 1,
|
|
1059
|
+
skeleton: "live",
|
|
1060
|
+
};
|
|
1061
|
+
|
|
1062
|
+
// src/curves/rose3.ts
|
|
1063
|
+
var TWO_PI10 = Math.PI * 2;
|
|
1064
|
+
function rose3Fn(t, _time, _params) {
|
|
1065
|
+
const r = Math.cos(3 * t);
|
|
929
1066
|
return {
|
|
930
|
-
x:
|
|
931
|
-
y:
|
|
1067
|
+
x: r * Math.cos(t),
|
|
1068
|
+
y: r * Math.sin(t),
|
|
932
1069
|
};
|
|
933
1070
|
}
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
1071
|
+
var rose3 = {
|
|
1072
|
+
name: "Rose (n=3)",
|
|
1073
|
+
fn: rose3Fn,
|
|
1074
|
+
period: TWO_PI10,
|
|
1075
|
+
speed: 1.15,
|
|
1076
|
+
};
|
|
1077
|
+
|
|
1078
|
+
// src/curves/rose5.ts
|
|
1079
|
+
var TWO_PI11 = Math.PI * 2;
|
|
1080
|
+
function rose5Fn(t, _time, _params) {
|
|
1081
|
+
const r = Math.cos(5 * t);
|
|
937
1082
|
return {
|
|
938
|
-
x:
|
|
939
|
-
y:
|
|
1083
|
+
x: r * Math.cos(t),
|
|
1084
|
+
y: r * Math.sin(t),
|
|
940
1085
|
};
|
|
941
1086
|
}
|
|
1087
|
+
var rose5 = {
|
|
1088
|
+
name: "Rose (n=5)",
|
|
1089
|
+
fn: rose5Fn,
|
|
1090
|
+
period: TWO_PI11,
|
|
1091
|
+
speed: 1,
|
|
1092
|
+
};
|
|
1093
|
+
|
|
1094
|
+
// src/curves/index.ts
|
|
942
1095
|
var curves = {
|
|
943
|
-
artemis2
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
speed: 1.4,
|
|
954
|
-
skeletonFn: epitrochoid7Skeleton
|
|
955
|
-
},
|
|
956
|
-
astroid: {
|
|
957
|
-
name: "Astroid",
|
|
958
|
-
fn: astroid,
|
|
959
|
-
period: TWO_PI2,
|
|
960
|
-
speed: 1.1
|
|
961
|
-
},
|
|
962
|
-
deltoid: {
|
|
963
|
-
name: "Deltoid",
|
|
964
|
-
fn: deltoid,
|
|
965
|
-
period: TWO_PI2,
|
|
966
|
-
speed: 0.9
|
|
967
|
-
},
|
|
968
|
-
rose5: {
|
|
969
|
-
name: "Rose (n=5)",
|
|
970
|
-
fn: rose5,
|
|
971
|
-
period: TWO_PI2,
|
|
972
|
-
speed: 1
|
|
973
|
-
},
|
|
974
|
-
rose3: {
|
|
975
|
-
name: "Rose (n=3)",
|
|
976
|
-
fn: rose3,
|
|
977
|
-
period: TWO_PI2,
|
|
978
|
-
speed: 1.15
|
|
979
|
-
},
|
|
980
|
-
lissajous32: {
|
|
981
|
-
name: "Lissajous 3:2",
|
|
982
|
-
fn: lissajous32,
|
|
983
|
-
period: TWO_PI2,
|
|
984
|
-
speed: 2,
|
|
985
|
-
skeleton: "live"
|
|
986
|
-
},
|
|
987
|
-
lissajous43: {
|
|
988
|
-
name: "Lissajous 4:3",
|
|
989
|
-
fn: lissajous43,
|
|
990
|
-
period: TWO_PI2,
|
|
991
|
-
speed: 1.8,
|
|
992
|
-
skeleton: "live"
|
|
993
|
-
},
|
|
994
|
-
epicycloid3: {
|
|
995
|
-
name: "Epicycloid (n=3)",
|
|
996
|
-
fn: epicycloid3,
|
|
997
|
-
period: TWO_PI2,
|
|
998
|
-
speed: 0.75
|
|
999
|
-
},
|
|
1000
|
-
lame: {
|
|
1001
|
-
name: "Lam\xE9 Curve",
|
|
1002
|
-
fn: lame,
|
|
1003
|
-
period: TWO_PI2,
|
|
1004
|
-
speed: 1,
|
|
1005
|
-
skeleton: "live"
|
|
1006
|
-
}
|
|
1096
|
+
artemis2,
|
|
1097
|
+
epitrochoid7,
|
|
1098
|
+
astroid,
|
|
1099
|
+
deltoid,
|
|
1100
|
+
rose5,
|
|
1101
|
+
rose3,
|
|
1102
|
+
lissajous32,
|
|
1103
|
+
lissajous43,
|
|
1104
|
+
epicycloid3,
|
|
1105
|
+
lame,
|
|
1007
1106
|
};
|
|
1008
1107
|
|
|
1009
1108
|
// src/index.ts
|
|
@@ -1013,6 +1112,23 @@ function createSarmal(canvas, curveDef, options) {
|
|
|
1013
1112
|
return createRenderer({ canvas, engine, ...rendererOpts });
|
|
1014
1113
|
}
|
|
1015
1114
|
|
|
1016
|
-
export {
|
|
1115
|
+
export {
|
|
1116
|
+
artemis2,
|
|
1117
|
+
astroid,
|
|
1118
|
+
createEngine,
|
|
1119
|
+
createRenderer,
|
|
1120
|
+
createSVGRenderer,
|
|
1121
|
+
createSarmal,
|
|
1122
|
+
createSarmalSVG,
|
|
1123
|
+
curves,
|
|
1124
|
+
deltoid,
|
|
1125
|
+
epicycloid3,
|
|
1126
|
+
epitrochoid7,
|
|
1127
|
+
lame,
|
|
1128
|
+
lissajous32,
|
|
1129
|
+
lissajous43,
|
|
1130
|
+
rose3,
|
|
1131
|
+
rose5,
|
|
1132
|
+
};
|
|
1133
|
+
//# sourceMappingURL=index.js.map
|
|
1017
1134
|
//# sourceMappingURL=index.js.map
|
|
1018
|
-
//# sourceMappingURL=index.js.map
|