Math Curves

1/**
2 * math-curves.ts
3 * Framework-agnostic math engine for parametric curve animations.
4 * All coordinates are in [0, 100] SVG space, center at (50, 50).
5 * progress: 0–1 (fraction of full curve loop)
6 * detailScale: 0.52–1.0 (breathing oscillator, see getDetailScale)
7 */
8 
9export type LoaderCurveKey =
10  | 'rose' | 'lissajous' | 'butterfly' | 'hypotrochoid'
11  | 'cardioid' | 'lemniscate' | 'fourier' | 'rose3'
12  | 'astroid' | 'deltoid' | 'nephroid' | 'epicycloid'
13  | 'superellipse' | 'triskelion' | 'involute'
14  | 'spiral' | 'heart'
15 
16export type ProgressCurveKey =
17  | 'spiral' | 'heart' | 'lissajous' | 'cardioid' | 'rose'
18  | 'astroid' | 'superellipse' | 'deltoid' | 'nephroid'
19 
20export type BackgroundCurveKey =
21  | 'rose' | 'lissajous' | 'fourier' | 'spiral'
22  | 'triskelion' | 'involute' | 'epicycloid'
23 
24export type CurveKey = LoaderCurveKey | ProgressCurveKey | BackgroundCurveKey
25 
26type Point = { x: number; y: number }
27 
28interface CurveDefinition {
29  /** t parameter range — progress 0→1 maps to tMin→tMax */
30  tMin: number
31  tMax: number
32  /** Default breathing cycle duration in ms */
33  pulseDurationMs: number
34  /** Default segment count for buildPath */
35  defaultSegments: number
36  /** Core parametric function — returns {x, y} in [0,100] space */
37  compute: (t: number, detailScale: number) => Point
38  /**
39   * Progress fractions (0–1 exclusive) where the curve is discontinuous.
40   * buildPath will insert M (moveto) instead of L at these points.
41   */
42  discontinuities?: number[]
43}
44 
45const CURVE_DEFS: Record<string, CurveDefinition> = {
46  // 5-petal rose: r = a·cos(5θ), odd k → full flower in [0, π]
47  rose: {
48    tMin: 0,
49    tMax: Math.PI,
50    pulseDurationMs: 5000,
51    defaultSegments: 300,
52    compute: (t, ds) => {
53      const a = 30 + ds * 8
54      const r = a * Math.cos(5 * t)
55      return { x: 50 + r * Math.cos(t), y: 50 + r * Math.sin(t) }
56    },
57  },
58 
59  // 3-petal rose: r = a·cos(3θ), odd k → full flower in [0, π]
60  rose3: {
61    tMin: 0,
62    tMax: Math.PI,
63    pulseDurationMs: 5500,
64    defaultSegments: 240,
65    compute: (t, ds) => {
66      const a = 34 + ds * 6
67      const r = a * Math.cos(3 * t)
68      return { x: 50 + r * Math.cos(t), y: 50 + r * Math.sin(t) }
69    },
70  },
71 
72  // Lissajous figure (3:4 ratio): x = A·sin(3t + π/2), y = B·sin(4t)
73  lissajous: {
74    tMin: 0,
75    tMax: 2 * Math.PI,
76    pulseDurationMs: 4800,
77    defaultSegments: 240,
78    compute: (t, ds) => {
79      const A = 34 + ds * 6
80      const B = A * 0.86
81// … truncated