@sarmal/core 0.9.7 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auto-init.cjs +171 -166
- package/dist/auto-init.cjs.map +1 -1
- package/dist/auto-init.d.cts +2 -1
- package/dist/auto-init.d.ts +2 -1
- package/dist/auto-init.js +170 -165
- package/dist/auto-init.js.map +1 -1
- package/dist/curves/artemis2.cjs +7 -10
- package/dist/curves/artemis2.d.cts +1 -1
- package/dist/curves/artemis2.d.ts +1 -1
- package/dist/curves/artemis2.js +6 -9
- 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 +28 -32
- package/dist/curves/index.d.cts +11 -11
- package/dist/curves/index.d.ts +11 -11
- package/dist/curves/index.js +28 -44
- package/dist/curves/lame.cjs +5 -6
- package/dist/curves/lame.d.cts +1 -1
- package/dist/curves/lame.d.ts +1 -1
- package/dist/curves/lame.js +4 -5
- 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/index.cjs +211 -283
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -64
- package/dist/index.d.ts +31 -64
- package/dist/index.js +211 -300
- package/dist/index.js.map +1 -1
- package/dist/types-DcyISvnH.d.cts +230 -0
- package/dist/types-DcyISvnH.d.ts +230 -0
- package/package.json +2 -1
- package/dist/types-cR2xOewv.d.cts +0 -234
- package/dist/types-cR2xOewv.d.ts +0 -234
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);
|
|
@@ -98,7 +98,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
98
98
|
actualTime += deltaTime;
|
|
99
99
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
100
100
|
const a = curve.fn(t, actualTime, EMPTY_PARAMS);
|
|
101
|
-
const tB = _morphStrategy === "normalized" ?
|
|
101
|
+
const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
|
|
102
102
|
const b = morphCurveB.fn(tB, actualTime, EMPTY_PARAMS);
|
|
103
103
|
trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
|
|
104
104
|
} else {
|
|
@@ -121,15 +121,15 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
121
121
|
actualTime = 0;
|
|
122
122
|
trail.clear();
|
|
123
123
|
},
|
|
124
|
-
|
|
125
|
-
t = (
|
|
124
|
+
jump(newT, { clearTrail = false } = {}) {
|
|
125
|
+
t = (newT % curve.period + curve.period) % curve.period;
|
|
126
126
|
if (clearTrail) {
|
|
127
127
|
trail.clear();
|
|
128
128
|
}
|
|
129
129
|
},
|
|
130
|
-
|
|
130
|
+
seek(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
|
|
131
131
|
const advance = curve.speed * step;
|
|
132
|
-
const target = (
|
|
132
|
+
const target = (targetT % curve.period + curve.period) % curve.period;
|
|
133
133
|
const targetTime = target / curve.speed;
|
|
134
134
|
t = target;
|
|
135
135
|
actualTime = targetTime;
|
|
@@ -138,7 +138,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
138
138
|
const count = wrap ? trailLength : Math.min(trailLength, pointsFromStart);
|
|
139
139
|
for (let i = count - 1; i >= 0; i--) {
|
|
140
140
|
const sampleT = target - i * advance;
|
|
141
|
-
const wrappedT = (
|
|
141
|
+
const wrappedT = (sampleT % curve.period + curve.period) % curve.period;
|
|
142
142
|
const time = targetTime - i * step;
|
|
143
143
|
const point = curve.fn(wrappedT, time, EMPTY_PARAMS);
|
|
144
144
|
trail.push(point.x, point.y);
|
|
@@ -155,16 +155,13 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
155
155
|
...frozenB,
|
|
156
156
|
fn: (sampleT, time, params) => {
|
|
157
157
|
const a = frozenA.fn(sampleT, time, params);
|
|
158
|
-
const tB =
|
|
159
|
-
frozenStrategy === "normalized"
|
|
160
|
-
? (sampleT / frozenA.period) * frozenB.period
|
|
161
|
-
: sampleT;
|
|
158
|
+
const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
|
|
162
159
|
const b = frozenB.fn(tB, time, params);
|
|
163
160
|
return {
|
|
164
161
|
x: a.x + (b.x - a.x) * frozenAlpha,
|
|
165
|
-
y: a.y + (b.y - a.y) * frozenAlpha
|
|
162
|
+
y: a.y + (b.y - a.y) * frozenAlpha
|
|
166
163
|
};
|
|
167
|
-
}
|
|
164
|
+
}
|
|
168
165
|
};
|
|
169
166
|
}
|
|
170
167
|
_morphStrategy = strategy;
|
|
@@ -177,7 +174,7 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
177
174
|
completeMorph() {
|
|
178
175
|
if (morphCurveB !== null) {
|
|
179
176
|
if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
|
|
180
|
-
t =
|
|
177
|
+
t = t / curve.period * morphCurveB.period;
|
|
181
178
|
}
|
|
182
179
|
curve = morphCurveB;
|
|
183
180
|
}
|
|
@@ -189,46 +186,132 @@ function createEngine(curveDef, trailLength = 120) {
|
|
|
189
186
|
const points = new Array(steps);
|
|
190
187
|
if (morphCurveB !== null && _morphAlpha !== null) {
|
|
191
188
|
for (let i = 0; i < steps; i++) {
|
|
192
|
-
const sampleT =
|
|
189
|
+
const sampleT = i / (steps - 1) * curve.period;
|
|
193
190
|
const a = sampleSkeleton(curve, sampleT);
|
|
194
|
-
const tB =
|
|
195
|
-
_morphStrategy === "normalized"
|
|
196
|
-
? (sampleT / curve.period) * morphCurveB.period
|
|
197
|
-
: sampleT;
|
|
191
|
+
const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
|
|
198
192
|
const b = sampleSkeleton(morphCurveB, tB);
|
|
199
193
|
points[i] = {
|
|
200
194
|
x: a.x + (b.x - a.x) * _morphAlpha,
|
|
201
|
-
y: a.y + (b.y - a.y) * _morphAlpha
|
|
195
|
+
y: a.y + (b.y - a.y) * _morphAlpha
|
|
202
196
|
};
|
|
203
197
|
}
|
|
204
198
|
return points;
|
|
205
199
|
}
|
|
206
200
|
for (let i = 0; i < steps; i++) {
|
|
207
|
-
const sampleT =
|
|
201
|
+
const sampleT = i / (steps - 1) * curve.period;
|
|
208
202
|
points[i] = sampleSkeleton(curve, sampleT);
|
|
209
203
|
}
|
|
210
204
|
return points;
|
|
211
|
-
}
|
|
205
|
+
}
|
|
212
206
|
};
|
|
213
207
|
}
|
|
214
208
|
|
|
215
|
-
// src/renderer.ts
|
|
209
|
+
// src/renderer-shared.ts
|
|
216
210
|
var DEFAULT_MORPH_DURATION_MS = 300;
|
|
217
|
-
var DEFAULT_HEAD_RADIUS = 4;
|
|
218
|
-
var DEFAULT_SKELETON_COLOR = "#ffffff";
|
|
219
211
|
var DEFAULT_SKELETON_OPACITY = 0.15;
|
|
220
212
|
var FIT_PADDING = 0.1;
|
|
221
213
|
var TRAIL_FADE_CURVE = 1.5;
|
|
222
214
|
var TRAIL_MAX_OPACITY = 0.88;
|
|
223
215
|
var TRAIL_MIN_WIDTH = 0.5;
|
|
224
216
|
var TRAIL_MAX_WIDTH = 2.5;
|
|
217
|
+
function computeTangent(trail, i) {
|
|
218
|
+
const count = trail.length;
|
|
219
|
+
if (count < 2) {
|
|
220
|
+
return { x: 1, y: 0 };
|
|
221
|
+
}
|
|
222
|
+
if (i === 0) {
|
|
223
|
+
const dx2 = trail[1].x - trail[0].x;
|
|
224
|
+
const dy2 = trail[1].y - trail[0].y;
|
|
225
|
+
const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
|
|
226
|
+
return { x: dx2 / len2, y: dy2 / len2 };
|
|
227
|
+
}
|
|
228
|
+
if (i === count - 1) {
|
|
229
|
+
const dx2 = trail[count - 1].x - trail[count - 2].x;
|
|
230
|
+
const dy2 = trail[count - 1].y - trail[count - 2].y;
|
|
231
|
+
const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
|
|
232
|
+
return { x: dx2 / len2, y: dy2 / len2 };
|
|
233
|
+
}
|
|
234
|
+
const dx = trail[i + 1].x - trail[i - 1].x;
|
|
235
|
+
const dy = trail[i + 1].y - trail[i - 1].y;
|
|
236
|
+
const len = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
237
|
+
return { x: dx / len, y: dy / len };
|
|
238
|
+
}
|
|
239
|
+
function computeNormal(trail, i) {
|
|
240
|
+
const tangent = computeTangent(trail, i);
|
|
241
|
+
return { x: -tangent.y, y: tangent.x };
|
|
242
|
+
}
|
|
243
|
+
function computeTrailQuad(trail, i, trailCount, toX, toY) {
|
|
244
|
+
const progress = i / (trailCount - 1);
|
|
245
|
+
const nextProgress = (i + 1) / (trailCount - 1);
|
|
246
|
+
const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
|
|
247
|
+
const w0 = (TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH)) / 2;
|
|
248
|
+
const w1 = (TRAIL_MIN_WIDTH + nextProgress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH)) / 2;
|
|
249
|
+
const curr = trail[i];
|
|
250
|
+
const next = trail[i + 1];
|
|
251
|
+
const n0 = computeNormal(trail, i);
|
|
252
|
+
const n1 = computeNormal(trail, i + 1);
|
|
253
|
+
const cx = toX(curr);
|
|
254
|
+
const cy = toY(curr);
|
|
255
|
+
const nx = toX(next);
|
|
256
|
+
const ny = toY(next);
|
|
257
|
+
return {
|
|
258
|
+
l0x: cx + n0.x * w0,
|
|
259
|
+
l0y: cy + n0.y * w0,
|
|
260
|
+
r0x: cx - n0.x * w0,
|
|
261
|
+
r0y: cy - n0.y * w0,
|
|
262
|
+
l1x: nx + n1.x * w1,
|
|
263
|
+
l1y: ny + n1.y * w1,
|
|
264
|
+
r1x: nx - n1.x * w1,
|
|
265
|
+
r1y: ny - n1.y * w1,
|
|
266
|
+
opacity,
|
|
267
|
+
progress
|
|
268
|
+
};
|
|
269
|
+
}
|
|
270
|
+
function computeBoundaries(pts, logicalWidth, logicalHeight) {
|
|
271
|
+
if (pts.length === 0) return null;
|
|
272
|
+
const first = pts[0];
|
|
273
|
+
let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
|
|
274
|
+
for (const p of pts) {
|
|
275
|
+
if (p.x < minX) {
|
|
276
|
+
minX = p.x;
|
|
277
|
+
}
|
|
278
|
+
if (p.x > maxX) {
|
|
279
|
+
maxX = p.x;
|
|
280
|
+
}
|
|
281
|
+
if (p.y < minY) {
|
|
282
|
+
minY = p.y;
|
|
283
|
+
}
|
|
284
|
+
if (p.y > maxY) {
|
|
285
|
+
maxY = p.y;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
const w = maxX - minX;
|
|
289
|
+
const h = maxY - minY;
|
|
290
|
+
if (w === 0 && h === 0) {
|
|
291
|
+
throw new Error(
|
|
292
|
+
"[sarmal] Degenerate curve: all skeleton points are identical. Check that your curve fn returns distinct points for different values of t."
|
|
293
|
+
);
|
|
294
|
+
}
|
|
295
|
+
const scaleX = logicalWidth / (w * (1 + FIT_PADDING * 2));
|
|
296
|
+
const scaleY = logicalHeight / (h * (1 + FIT_PADDING * 2));
|
|
297
|
+
const scale = Math.min(scaleX, scaleY);
|
|
298
|
+
return {
|
|
299
|
+
scale,
|
|
300
|
+
offsetX: (logicalWidth - w * scale) / 2 - minX * scale,
|
|
301
|
+
offsetY: (logicalHeight - h * scale) / 2 - minY * scale
|
|
302
|
+
};
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
// src/renderer.ts
|
|
306
|
+
var DEFAULT_HEAD_RADIUS = 4;
|
|
307
|
+
var DEFAULT_SKELETON_COLOR = "#ffffff";
|
|
225
308
|
var GRADIENT = {
|
|
226
309
|
bard: ["#a855f7", "#3b82f6", "#14b8a6", "#ec4899"],
|
|
227
310
|
sunset: ["#f97316", "#dc2626", "#9333ea", "#f472b6"],
|
|
228
311
|
ocean: ["#1e3a8a", "#06b6d4", "#22d3ee", "#e0f2fe"],
|
|
229
312
|
ice: ["#1e3a8a", "#67e8f9"],
|
|
230
313
|
fire: ["#7f1d1d", "#fbbf24"],
|
|
231
|
-
forest: ["#14532d", "#86efac"]
|
|
314
|
+
forest: ["#14532d", "#86efac"]
|
|
232
315
|
};
|
|
233
316
|
var PRESETS = {
|
|
234
317
|
bard: GRADIENT.bard,
|
|
@@ -236,16 +319,16 @@ var PRESETS = {
|
|
|
236
319
|
ocean: GRADIENT.ocean,
|
|
237
320
|
ice: GRADIENT.ice,
|
|
238
321
|
fire: GRADIENT.fire,
|
|
239
|
-
forest: GRADIENT.forest
|
|
322
|
+
forest: GRADIENT.forest
|
|
240
323
|
};
|
|
241
324
|
function hexToRgb(hex) {
|
|
242
325
|
const n = parseInt(hex.slice(1), 16);
|
|
243
|
-
return { r: n >> 16, g:
|
|
326
|
+
return { r: n >> 16, g: n >> 8 & 255, b: n & 255 };
|
|
244
327
|
}
|
|
245
328
|
var lerpRgb = (a, b, t) => ({
|
|
246
329
|
r: Math.round(a.r + (b.r - a.r) * t),
|
|
247
330
|
g: Math.round(a.g + (b.g - a.g) * t),
|
|
248
|
-
b: Math.round(a.b + (b.b - a.b) * t)
|
|
331
|
+
b: Math.round(a.b + (b.b - a.b) * t)
|
|
249
332
|
});
|
|
250
333
|
function getPaletteColor(palette, position, timeOffset = 0) {
|
|
251
334
|
if (palette.length === 0) return { r: 255, g: 255, b: 255 };
|
|
@@ -265,33 +348,7 @@ function resolvePalette(palette, trailStyle) {
|
|
|
265
348
|
}
|
|
266
349
|
function hexToRgbComponents(hex) {
|
|
267
350
|
const n = parseInt(hex.slice(1), 16);
|
|
268
|
-
return `${n >> 16},${
|
|
269
|
-
}
|
|
270
|
-
function computeTangent(trail, i) {
|
|
271
|
-
const count = trail.length;
|
|
272
|
-
if (count < 2) {
|
|
273
|
-
return { x: 1, y: 0 };
|
|
274
|
-
}
|
|
275
|
-
if (i === 0) {
|
|
276
|
-
const dx2 = trail[1].x - trail[0].x;
|
|
277
|
-
const dy2 = trail[1].y - trail[0].y;
|
|
278
|
-
const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
|
|
279
|
-
return { x: dx2 / len2, y: dy2 / len2 };
|
|
280
|
-
}
|
|
281
|
-
if (i === count - 1) {
|
|
282
|
-
const dx2 = trail[count - 1].x - trail[count - 2].x;
|
|
283
|
-
const dy2 = trail[count - 1].y - trail[count - 2].y;
|
|
284
|
-
const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2) || 1;
|
|
285
|
-
return { x: dx2 / len2, y: dy2 / len2 };
|
|
286
|
-
}
|
|
287
|
-
const dx = trail[i + 1].x - trail[i - 1].x;
|
|
288
|
-
const dy = trail[i + 1].y - trail[i - 1].y;
|
|
289
|
-
const len = Math.sqrt(dx * dx + dy * dy) || 1;
|
|
290
|
-
return { x: dx / len, y: dy / len };
|
|
291
|
-
}
|
|
292
|
-
function computeNormal(trail, i) {
|
|
293
|
-
const tangent = computeTangent(trail, i);
|
|
294
|
-
return { x: -tangent.y, y: tangent.x };
|
|
351
|
+
return `${n >> 16},${n >> 8 & 255},${n & 255}`;
|
|
295
352
|
}
|
|
296
353
|
function applyDprSizing(target, logicalWidth, logicalHeight, dpr) {
|
|
297
354
|
target.style.width = `${logicalWidth}px`;
|
|
@@ -310,7 +367,7 @@ function createRenderer(options) {
|
|
|
310
367
|
skeletonColor: options.skeletonColor ?? DEFAULT_SKELETON_COLOR,
|
|
311
368
|
trailColor: options.trailColor ?? "#ffffff",
|
|
312
369
|
headColor: options.headColor ?? "#ffffff",
|
|
313
|
-
headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
|
|
370
|
+
headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS
|
|
314
371
|
};
|
|
315
372
|
const trailStyle = options.trailStyle ?? "default";
|
|
316
373
|
const palette = resolvePalette(options.palette, trailStyle);
|
|
@@ -340,47 +397,8 @@ function createRenderer(options) {
|
|
|
340
397
|
let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
|
|
341
398
|
let morphAlpha = 0;
|
|
342
399
|
let gradientAnimTime = 0;
|
|
343
|
-
function computeBoundaries(pts) {
|
|
344
|
-
if (pts.length === 0) return null;
|
|
345
|
-
const first = pts[0];
|
|
346
|
-
let minX = first.x,
|
|
347
|
-
maxX = first.x,
|
|
348
|
-
minY = first.y,
|
|
349
|
-
maxY = first.y;
|
|
350
|
-
for (const p of pts) {
|
|
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
|
-
}
|
|
363
|
-
}
|
|
364
|
-
const width = maxX - minX;
|
|
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
|
-
}
|
|
371
|
-
const scaleX = logicalWidth / (width * (1 + FIT_PADDING * 2));
|
|
372
|
-
const scaleY = logicalHeight / (height * (1 + FIT_PADDING * 2));
|
|
373
|
-
const s = Math.min(scaleX, scaleY);
|
|
374
|
-
const boundsWidth = width * s;
|
|
375
|
-
const boundsHeight = height * s;
|
|
376
|
-
return {
|
|
377
|
-
scale: s,
|
|
378
|
-
offsetX: (logicalWidth - boundsWidth) / 2 - minX * s,
|
|
379
|
-
offsetY: (logicalHeight - boundsHeight) / 2 - minY * s,
|
|
380
|
-
};
|
|
381
|
-
}
|
|
382
400
|
function calculateBoundaries() {
|
|
383
|
-
const b = computeBoundaries(skeleton);
|
|
401
|
+
const b = computeBoundaries(skeleton, logicalWidth, logicalHeight);
|
|
384
402
|
if (b) {
|
|
385
403
|
scale = b.scale;
|
|
386
404
|
offsetX = b.offsetX;
|
|
@@ -444,32 +462,22 @@ function createRenderer(options) {
|
|
|
444
462
|
if (trailCount < 2) {
|
|
445
463
|
return;
|
|
446
464
|
}
|
|
465
|
+
const toX = (p) => p.x * scale + offsetX;
|
|
466
|
+
const toY = (p) => p.y * scale + offsetY;
|
|
447
467
|
for (let i = 0; i < trailCount - 1; i++) {
|
|
448
|
-
const
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
const n0 = computeNormal(trail, i);
|
|
456
|
-
const n1 = computeNormal(trail, i + 1);
|
|
457
|
-
const halfW0 = width / 2;
|
|
458
|
-
const halfW1 = nextWidth / 2;
|
|
459
|
-
const l0x = curr.x * scale + offsetX + n0.x * halfW0;
|
|
460
|
-
const l0y = curr.y * scale + offsetY + n0.y * halfW0;
|
|
461
|
-
const r0x = curr.x * scale + offsetX - n0.x * halfW0;
|
|
462
|
-
const r0y = curr.y * scale + offsetY - n0.y * halfW0;
|
|
463
|
-
const l1x = next.x * scale + offsetX + n1.x * halfW1;
|
|
464
|
-
const l1y = next.y * scale + offsetY + n1.y * halfW1;
|
|
465
|
-
const r1x = next.x * scale + offsetX - n1.x * halfW1;
|
|
466
|
-
const r1y = next.y * scale + offsetY - n1.y * halfW1;
|
|
468
|
+
const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
|
|
469
|
+
trail,
|
|
470
|
+
i,
|
|
471
|
+
trailCount,
|
|
472
|
+
toX,
|
|
473
|
+
toY
|
|
474
|
+
);
|
|
467
475
|
if (trailStyle === "default") {
|
|
468
|
-
ctx.fillStyle = `rgba(${trailRgb},${
|
|
476
|
+
ctx.fillStyle = `rgba(${trailRgb},${opacity})`;
|
|
469
477
|
} else {
|
|
470
478
|
const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
|
|
471
479
|
const color = getPaletteColor(palette, progress, timeOffset);
|
|
472
|
-
ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${
|
|
480
|
+
ctx.fillStyle = `rgba(${color.r},${color.g},${color.b},${opacity})`;
|
|
473
481
|
}
|
|
474
482
|
ctx.beginPath();
|
|
475
483
|
ctx.moveTo(l0x, l0y);
|
|
@@ -502,7 +510,7 @@ function createRenderer(options) {
|
|
|
502
510
|
morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
|
|
503
511
|
engine.setMorphAlpha(morphAlpha);
|
|
504
512
|
const interpolatedSkeleton = engine.getSarmalSkeleton();
|
|
505
|
-
const bounds = computeBoundaries(interpolatedSkeleton);
|
|
513
|
+
const bounds = computeBoundaries(interpolatedSkeleton, logicalWidth, logicalHeight);
|
|
506
514
|
if (bounds) {
|
|
507
515
|
scale = bounds.scale;
|
|
508
516
|
offsetX = bounds.offsetX;
|
|
@@ -563,12 +571,12 @@ function createRenderer(options) {
|
|
|
563
571
|
animationId = null;
|
|
564
572
|
}
|
|
565
573
|
},
|
|
574
|
+
jump(t, options2) {
|
|
575
|
+
engine.jump(t, options2);
|
|
576
|
+
},
|
|
566
577
|
seek(t, options2) {
|
|
567
578
|
engine.seek(t, options2);
|
|
568
579
|
},
|
|
569
|
-
seekWithTrail(t) {
|
|
570
|
-
engine.seekWithTrail(t);
|
|
571
|
-
},
|
|
572
580
|
morphTo(target, options2) {
|
|
573
581
|
if (morphResolve !== null) {
|
|
574
582
|
engine.completeMorph();
|
|
@@ -582,29 +590,26 @@ function createRenderer(options) {
|
|
|
582
590
|
return new Promise((resolve) => {
|
|
583
591
|
morphResolve = resolve;
|
|
584
592
|
});
|
|
585
|
-
}
|
|
593
|
+
}
|
|
586
594
|
};
|
|
587
595
|
}
|
|
588
596
|
|
|
589
597
|
// src/curves/artemis2.ts
|
|
590
598
|
var TWO_PI2 = Math.PI * 2;
|
|
591
599
|
function artemis2Fn(t, _time, _params) {
|
|
592
|
-
const a = 0.35,
|
|
593
|
-
|
|
594
|
-
ox = 0.175;
|
|
595
|
-
const s = Math.sin(t),
|
|
596
|
-
c = Math.cos(t);
|
|
600
|
+
const a = 0.35, b = 0.15, ox = 0.175;
|
|
601
|
+
const s = Math.sin(t), c = Math.cos(t);
|
|
597
602
|
const denom = 1 + s * s;
|
|
598
603
|
return {
|
|
599
|
-
x:
|
|
600
|
-
y:
|
|
604
|
+
x: c * (1 + a * c) / denom - ox,
|
|
605
|
+
y: s * c * (1 + b * c) / denom
|
|
601
606
|
};
|
|
602
607
|
}
|
|
603
608
|
var artemis2 = {
|
|
604
609
|
name: "Artemis II",
|
|
605
610
|
fn: artemis2Fn,
|
|
606
611
|
period: TWO_PI2,
|
|
607
|
-
speed: 0.7
|
|
612
|
+
speed: 0.7
|
|
608
613
|
};
|
|
609
614
|
|
|
610
615
|
// src/curves/astroid.ts
|
|
@@ -614,14 +619,14 @@ function astroidFn(t, _time, _params) {
|
|
|
614
619
|
const s = Math.sin(t);
|
|
615
620
|
return {
|
|
616
621
|
x: c * c * c,
|
|
617
|
-
y: s * s * s
|
|
622
|
+
y: s * s * s
|
|
618
623
|
};
|
|
619
624
|
}
|
|
620
625
|
var astroid = {
|
|
621
626
|
name: "Astroid",
|
|
622
627
|
fn: astroidFn,
|
|
623
628
|
period: TWO_PI3,
|
|
624
|
-
speed: 1.1
|
|
629
|
+
speed: 1.1
|
|
625
630
|
};
|
|
626
631
|
|
|
627
632
|
// src/curves/deltoid.ts
|
|
@@ -629,14 +634,14 @@ var TWO_PI4 = Math.PI * 2;
|
|
|
629
634
|
function deltoidFn(t, _time, _params) {
|
|
630
635
|
return {
|
|
631
636
|
x: 2 * Math.cos(t) + Math.cos(2 * t),
|
|
632
|
-
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
637
|
+
y: 2 * Math.sin(t) - Math.sin(2 * t)
|
|
633
638
|
};
|
|
634
639
|
}
|
|
635
640
|
var deltoid = {
|
|
636
641
|
name: "Deltoid",
|
|
637
642
|
fn: deltoidFn,
|
|
638
643
|
period: TWO_PI4,
|
|
639
|
-
speed: 0.9
|
|
644
|
+
speed: 0.9
|
|
640
645
|
};
|
|
641
646
|
|
|
642
647
|
// src/curves/epicycloid3.ts
|
|
@@ -644,14 +649,14 @@ var TWO_PI5 = Math.PI * 2;
|
|
|
644
649
|
function epicycloid3Fn(t, _time, _params) {
|
|
645
650
|
return {
|
|
646
651
|
x: 4 * Math.cos(t) - Math.cos(4 * t),
|
|
647
|
-
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
652
|
+
y: 4 * Math.sin(t) - Math.sin(4 * t)
|
|
648
653
|
};
|
|
649
654
|
}
|
|
650
655
|
var epicycloid3 = {
|
|
651
656
|
name: "Epicycloid (n=3)",
|
|
652
657
|
fn: epicycloid3Fn,
|
|
653
658
|
period: TWO_PI5,
|
|
654
|
-
speed: 0.75
|
|
659
|
+
speed: 0.75
|
|
655
660
|
};
|
|
656
661
|
|
|
657
662
|
// src/curves/epitrochoid7.ts
|
|
@@ -660,14 +665,14 @@ function epitrochoid7Fn(t, _time, _params) {
|
|
|
660
665
|
const d = 1 + 0.55 * Math.sin(t * 0.5);
|
|
661
666
|
return {
|
|
662
667
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
663
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
668
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
664
669
|
};
|
|
665
670
|
}
|
|
666
671
|
function epitrochoid7SkeletonFn(t) {
|
|
667
672
|
const d = 1.275;
|
|
668
673
|
return {
|
|
669
674
|
x: 7 * Math.cos(t) - d * Math.cos(7 * t),
|
|
670
|
-
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
675
|
+
y: 7 * Math.sin(t) - d * Math.sin(7 * t)
|
|
671
676
|
};
|
|
672
677
|
}
|
|
673
678
|
var epitrochoid7 = {
|
|
@@ -675,7 +680,7 @@ var epitrochoid7 = {
|
|
|
675
680
|
fn: epitrochoid7Fn,
|
|
676
681
|
period: TWO_PI6,
|
|
677
682
|
speed: 1.4,
|
|
678
|
-
skeletonFn: epitrochoid7SkeletonFn
|
|
683
|
+
skeletonFn: epitrochoid7SkeletonFn
|
|
679
684
|
};
|
|
680
685
|
|
|
681
686
|
// src/curves/lissajous32.ts
|
|
@@ -684,7 +689,7 @@ function lissajous32Fn(t, time, _params) {
|
|
|
684
689
|
const phi = time * 0.45;
|
|
685
690
|
return {
|
|
686
691
|
x: Math.sin(3 * t + phi),
|
|
687
|
-
y: Math.sin(2 * t)
|
|
692
|
+
y: Math.sin(2 * t)
|
|
688
693
|
};
|
|
689
694
|
}
|
|
690
695
|
var lissajous32 = {
|
|
@@ -692,7 +697,7 @@ var lissajous32 = {
|
|
|
692
697
|
fn: lissajous32Fn,
|
|
693
698
|
period: TWO_PI7,
|
|
694
699
|
speed: 2,
|
|
695
|
-
skeleton: "live"
|
|
700
|
+
skeleton: "live"
|
|
696
701
|
};
|
|
697
702
|
|
|
698
703
|
// src/curves/lissajous43.ts
|
|
@@ -701,7 +706,7 @@ function lissajous43Fn(t, time, _params) {
|
|
|
701
706
|
const phi = time * 0.38;
|
|
702
707
|
return {
|
|
703
708
|
x: Math.sin(4 * t + phi),
|
|
704
|
-
y: Math.sin(3 * t)
|
|
709
|
+
y: Math.sin(3 * t)
|
|
705
710
|
};
|
|
706
711
|
}
|
|
707
712
|
var lissajous43 = {
|
|
@@ -709,18 +714,17 @@ var lissajous43 = {
|
|
|
709
714
|
fn: lissajous43Fn,
|
|
710
715
|
period: TWO_PI8,
|
|
711
716
|
speed: 1.8,
|
|
712
|
-
skeleton: "live"
|
|
717
|
+
skeleton: "live"
|
|
713
718
|
};
|
|
714
719
|
|
|
715
720
|
// src/curves/lame.ts
|
|
716
721
|
var TWO_PI9 = Math.PI * 2;
|
|
717
722
|
function lameFn(t, time, _params) {
|
|
718
723
|
const p = 1.75 + 1.25 * Math.sin(time * 0.48);
|
|
719
|
-
const c = Math.cos(t),
|
|
720
|
-
s = Math.sin(t);
|
|
724
|
+
const c = Math.cos(t), s = Math.sin(t);
|
|
721
725
|
return {
|
|
722
726
|
x: Math.sign(c) * Math.pow(Math.abs(c), p),
|
|
723
|
-
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
727
|
+
y: Math.sign(s) * Math.pow(Math.abs(s), p)
|
|
724
728
|
};
|
|
725
729
|
}
|
|
726
730
|
var lame = {
|
|
@@ -728,7 +732,7 @@ var lame = {
|
|
|
728
732
|
fn: lameFn,
|
|
729
733
|
period: TWO_PI9,
|
|
730
734
|
speed: 1,
|
|
731
|
-
skeleton: "live"
|
|
735
|
+
skeleton: "live"
|
|
732
736
|
};
|
|
733
737
|
|
|
734
738
|
// src/curves/rose3.ts
|
|
@@ -737,14 +741,14 @@ function rose3Fn(t, _time, _params) {
|
|
|
737
741
|
const r = Math.cos(3 * t);
|
|
738
742
|
return {
|
|
739
743
|
x: r * Math.cos(t),
|
|
740
|
-
y: r * Math.sin(t)
|
|
744
|
+
y: r * Math.sin(t)
|
|
741
745
|
};
|
|
742
746
|
}
|
|
743
747
|
var rose3 = {
|
|
744
748
|
name: "Rose (n=3)",
|
|
745
749
|
fn: rose3Fn,
|
|
746
750
|
period: TWO_PI10,
|
|
747
|
-
speed: 1.15
|
|
751
|
+
speed: 1.15
|
|
748
752
|
};
|
|
749
753
|
|
|
750
754
|
// src/curves/rose5.ts
|
|
@@ -753,14 +757,14 @@ function rose5Fn(t, _time, _params) {
|
|
|
753
757
|
const r = Math.cos(5 * t);
|
|
754
758
|
return {
|
|
755
759
|
x: r * Math.cos(t),
|
|
756
|
-
y: r * Math.sin(t)
|
|
760
|
+
y: r * Math.sin(t)
|
|
757
761
|
};
|
|
758
762
|
}
|
|
759
763
|
var rose5 = {
|
|
760
764
|
name: "Rose (n=5)",
|
|
761
765
|
fn: rose5Fn,
|
|
762
766
|
period: TWO_PI11,
|
|
763
|
-
speed: 1
|
|
767
|
+
speed: 1
|
|
764
768
|
};
|
|
765
769
|
|
|
766
770
|
// src/curves/index.ts
|
|
@@ -774,7 +778,7 @@ var curves = {
|
|
|
774
778
|
lissajous32,
|
|
775
779
|
lissajous43,
|
|
776
780
|
epicycloid3,
|
|
777
|
-
lame
|
|
781
|
+
lame
|
|
778
782
|
};
|
|
779
783
|
|
|
780
784
|
// src/index.ts
|
|
@@ -791,7 +795,8 @@ function parsePalette(value) {
|
|
|
791
795
|
if (Array.isArray(parsed)) {
|
|
792
796
|
return parsed;
|
|
793
797
|
}
|
|
794
|
-
} catch {
|
|
798
|
+
} catch {
|
|
799
|
+
}
|
|
795
800
|
return value;
|
|
796
801
|
}
|
|
797
802
|
function init() {
|
|
@@ -806,15 +811,15 @@ function init() {
|
|
|
806
811
|
return console.error(`[sarmal] "${curveName}" is not a valid curve name`);
|
|
807
812
|
}
|
|
808
813
|
const sarmal = createSarmal(canvas, curveDef, {
|
|
809
|
-
...
|
|
810
|
-
...
|
|
811
|
-
...
|
|
812
|
-
...
|
|
813
|
-
...
|
|
814
|
-
...
|
|
815
|
-
trailStyle: canvas.dataset.trailStyle
|
|
816
|
-
}
|
|
817
|
-
...
|
|
814
|
+
...canvas.dataset.trailColor && { trailColor: canvas.dataset.trailColor },
|
|
815
|
+
...canvas.dataset.skeletonColor && { skeletonColor: canvas.dataset.skeletonColor },
|
|
816
|
+
...canvas.dataset.headColor && { headColor: canvas.dataset.headColor },
|
|
817
|
+
...canvas.dataset.headRadius && { headRadius: parseFloat(canvas.dataset.headRadius) },
|
|
818
|
+
...canvas.dataset.trailLength && { trailLength: parseInt(canvas.dataset.trailLength, 10) },
|
|
819
|
+
...canvas.dataset.trailStyle && {
|
|
820
|
+
trailStyle: canvas.dataset.trailStyle
|
|
821
|
+
},
|
|
822
|
+
...canvas.dataset.palette && { palette: parsePalette(canvas.dataset.palette) }
|
|
818
823
|
});
|
|
819
824
|
sarmal.start();
|
|
820
825
|
});
|
|
@@ -827,4 +832,4 @@ if (document.readyState === "loading") {
|
|
|
827
832
|
requestAnimationFrame(init);
|
|
828
833
|
}
|
|
829
834
|
//# sourceMappingURL=auto-init.cjs.map
|
|
830
|
-
//# sourceMappingURL=auto-init.cjs.map
|
|
835
|
+
//# sourceMappingURL=auto-init.cjs.map
|