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