0
# Interpolation & Mixing
1

2
Comprehensive interpolation functions including linear, bezier, hermite, and specialized interpolation methods for animation and graphics.
3

4
## Capabilities
5

6
### Basic Interpolation
7

8
Core interpolation functions for blending between values.
9

10
```typescript { .api }
11
/**
12
 * Linear interpolation without clamping
13
 * @param a - Start value
14
 * @param b - End value  
15
 * @param t - Interpolation factor (0 = a, 1 = b)
16
 * @returns Interpolated value
17
 */
18
function mix(a: number, b: number, t: number): number;
19

20
/**
21
 * Bilinear interpolation of 4 values
22
 * @param a - Top-left value
23
 * @param b - Top-right value
24
 * @param c - Bottom-left value
25
 * @param d - Bottom-right value
26
 * @param u - Horizontal interpolation factor
27
 * @param v - Vertical interpolation factor
28
 * @returns Bilinearly interpolated value
29
 */
30
function mixBilinear(
31
  a: number, b: number, c: number, d: number,
32
  u: number, v: number
33
): number;
34

35
/**
36
 * Trilinear interpolation of 8 values
37
 * @param a-h - Corner values of 3D unit cube
38
 * @param u - X-axis interpolation factor
39
 * @param v - Y-axis interpolation factor
40
 * @param w - Z-axis interpolation factor
41
 * @returns Trilinearly interpolated value
42
 */
43
function mixTrilinear(
44
  a: number, b: number, c: number, d: number,
45
  e: number, f: number, g: number, h: number,
46
  u: number, v: number, w: number
47
): number;
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
import { mix, mixBilinear } from "@thi.ng/math/mix";
54

55
// Linear interpolation
56
const halfway = mix(0, 100, 0.5); // 50
57
const quarter = mix(10, 20, 0.25); // 12.5
58

59
// Bilinear interpolation (e.g., for texture sampling)
60
const bilinear = mixBilinear(0, 10, 5, 15, 0.5, 0.5); // 7.5
61
```
62

63
### Bezier Interpolation
64

65
Bezier curve interpolation for smooth curves and animations.
66

67
```typescript { .api }
68
/**
69
 * Quadratic bezier interpolation
70
 * @param a - Start point
71
 * @param b - Control point
72
 * @param c - End point
73
 * @param t - Interpolation parameter [0,1]
74
 * @returns Bezier interpolated value
75
 */
76
function mixQuadratic(a: number, b: number, c: number, t: number): number;
77

78
/**
79
 * Cubic bezier interpolation
80
 * @param a - Start point
81
 * @param b - First control point
82
 * @param c - Second control point
83
 * @param d - End point
84
 * @param t - Interpolation parameter [0,1]
85
 * @returns Bezier interpolated value
86
 */
87
function mixCubic(a: number, b: number, c: number, d: number, t: number): number;
88
```
89

90
### Hermite Interpolation
91

92
Hermite interpolation for smooth curves with tangent control.
93

94
```typescript { .api }
95
/**
96
 * Hermite interpolation for uniformly spaced points
97
 * @param a - Point before start
98
 * @param b - Start point
99
 * @param c - End point
100
 * @param d - Point after end
101
 * @param t - Interpolation parameter [0,1]
102
 * @returns Hermite interpolated value
103
 */
104
function mixHermite(a: number, b: number, c: number, d: number, t: number): number;
105

106
/**
107
 * Cubic-hermite interpolation with explicit tangents
108
 * @param a - Start point
109
 * @param ta - Tangent at start point
110
 * @param b - End point
111
 * @param tb - Tangent at end point
112
 * @param t - Interpolation parameter [0,1]
113
 * @returns Cubic hermite interpolated value
114
 */
115
function mixCubicHermite(a: number, ta: number, b: number, tb: number, t: number): number;
116

117
/**
118
 * Cubic-hermite with automatic tangent computation from points
119
 * @param a - Point before start
120
 * @param b - Start point
121
 * @param c - End point
122
 * @param d - Point after end
123
 * @param t - Interpolation parameter [0,1]
124
 * @returns Cubic hermite interpolated value
125
 */
126
function mixCubicHermiteFromPoints(a: number, b: number, c: number, d: number, t: number): number;
127

128
/**
129
 * Bicubic interpolation of 4x4 sample grid
130
 * @param s00-s33 - 16 sample values in row-major order
131
 * @param u - Horizontal interpolation parameter
132
 * @param v - Vertical interpolation parameter
133
 * @returns Bicubic interpolated value
134
 */
135
function mixBicubic(
136
  s00: number, s01: number, s02: number, s03: number,
137
  s10: number, s11: number, s12: number, s13: number,
138
  s20: number, s21: number, s22: number, s23: number,
139
  s30: number, s31: number, s32: number, s33: number,
140
  u: number, v: number
141
): number;
142
```
143

144
### Kernel Interpolation
145

146
Parametric interpolation using custom kernel functions.
147

148
```typescript { .api }
149
/**
150
 * Parametric interpolation using custom kernel function
151
 * @param kernel - Kernel function defining interpolation curve
152
 * @param a - Sample before start
153
 * @param b - Start sample
154
 * @param c - End sample
155
 * @param d - Sample after end
156
 * @param t - Interpolation parameter
157
 * @returns Kernel interpolated value
158
 */
159
function mixKernel4(
160
  kernel: (t: number) => number,
161
  a: number, b: number, c: number, d: number,
162
  t: number
163
): number;
164
```
165

166
### Tangent Functions
167

168
Functions for computing tangents used in hermite interpolation.
169

170
```typescript { .api }
171
/**
172
 * Computes cardinal tangents for hermite interpolation
173
 * @param prev - Previous point
174
 * @param next - Next point
175
 * @param scale - Tangent scaling factor
176
 * @param ta - Time at previous point
177
 * @param tc - Time at next point
178
 * @returns Cardinal tangent value
179
 */
180
function tangentCardinal(prev: number, next: number, scale?: number, ta?: number, tc?: number): number;
181

182
/**
183
 * Computes tangent using 3-point finite difference
184
 * @param prev - Previous point
185
 * @param curr - Current point
186
 * @param next - Next point
187
 * @param ta - Time at previous point
188
 * @param tb - Time at current point
189
 * @param tc - Time at next point
190
 * @returns Finite difference tangent
191
 */
192
function tangentDiff3(prev: number, curr: number, next: number, ta?: number, tb?: number, tc?: number): number;
193
```
194

195
### Higher-Order Functions
196

197
Functions that create customized interpolation functions.
198

199
```typescript { .api }
200
/**
201
 * Creates interpolation function with custom timing function
202
 * @param f - Timing function (easing curve)
203
 * @param from - Start value
204
 * @param to - End value
205
 * @returns Interpolation function with custom timing  
206
 */
207
function tween(f: (t: number) => number, from: number, to: number): (t: number) => number;
208
```
209

210
### Specialized Interpolation Functions
211

212
Pre-built specialized interpolation curves for common use cases.
213

214
```typescript { .api }
215
/** Circular ease out interpolation */
216
function circular(t: number): number;
217

218
/** Inverse circular (ease in) */
219
function invCircular(t: number): number;
220

221
/** Zoom lens interpolation with position and strength */
222
function lens(pos: number, strength: number, t: number): number;
223

224
/** Cosine-based smooth interpolation */
225
function cosine(t: number): number;
226

227
/** Decimated/stepped interpolation */
228
function decimated(n: number, t: number): number;
229

230
/** Spring oscillator with damping */
231
function bounce(k: number, amp: number, t: number): number;
232

233
/** Exponential easing */
234
function ease(ease: number, t: number): number;
235

236
/** Impulse generator function */
237
function impulse(k: number, t: number): number;
238

239
/** Gain function for contrast adjustment */
240
function gain(k: number, t: number): number;
241

242
/** Parabolic function */
243
function parabola(k: number, t: number): number;
244

245
/** Cubic pulse function */
246
function cubicPulse(w: number, c: number, t: number): number;
247

248
/** Exponential factor for multi-step interpolation */
249
function expFactor(a: number, b: number, num: number): number;
250

251
/** Gaussian bell curve function */
252
function gaussian(bias: number, sigma: number, t: number): number;
253
```
254

255
### Sinc Functions
256

257
Sinc functions for signal processing and filtering.
258

259
```typescript { .api }
260
/**
261
 * Unnormalized Sinc function: sin(πt)/(πt)
262
 * @param t - Input parameter
263
 * @returns Sinc value
264
 */
265
function sinc(t: number): number;
266

267
/**
268
 * Normalized Sinc function scaled by k
269
 * @param k - Scaling factor
270
 * @param t - Input parameter
271
 * @returns Normalized sinc value
272
 */
273
function sincNormalized(k: number, t: number): number;
274
```
275

276
### Filter Functions
277

278
Filter functions for image processing and signal filtering.
279

280
```typescript { .api }
281
/**
282
 * Lanczos filter
283
 * @param a - Filter parameter (typically 2 or 3)
284
 * @param t - Input parameter
285
 * @returns Lanczos filter value
286
 */
287
function lanczos(a: number, t: number): number;
288

289
/**
290
 * Lanczos filter generator
291
 * @param a - Filter parameter
292
 * @returns Lanczos filter function
293
 */
294
function defLanczos(a: number): (t: number) => number;
295

296
/**
297
 * Mitchell-Netravali filter generator
298
 * @param b - B parameter (default: 1/3)
299
 * @param c - C parameter (default: 1/3)
300
 * @returns Mitchell-Netravali filter function
301
 */
302
function defMitchell(b?: number, c?: number): (t: number) => number;
303
```
304

305
### Sigmoid Functions
306

307
Sigmoid-shaped interpolation functions for S-curve transitions.
308

309
```typescript { .api }
310
/**
311
 * General sigmoid function
312
 * @param bias - Bias parameter
313
 * @param k - Steepness parameter
314
 * @param t - Input parameter
315
 * @returns Sigmoid value
316
 */
317
function sigmoid(bias: number, k: number, t: number): number;
318

319
/**
320
 * Sigmoid for [0,1] input range
321
 * @param k - Steepness parameter
322
 * @param t - Input parameter [0,1]
323
 * @returns Sigmoid value
324
 */
325
function sigmoid01(k: number, t: number): number;
326

327
/**
328
 * Sigmoid for [-1,1] input range
329
 * @param k - Steepness parameter
330
 * @param t - Input parameter [-1,1]
331
 * @returns Sigmoid value
332
 */
333
function sigmoid11(k: number, t: number): number;
334
```
335

336
### Step Functions
337

338
Step and smooth step functions for threshold-based interpolation.
339

340
```typescript { .api }
341
/**
342
 * Step/threshold function
343
 * @param edge - Threshold value
344
 * @param x - Input value
345
 * @returns 0 if x < edge, else 1
346
 */
347
function step(edge: number, x: number): number;
348

349
/**
350
 * GLSL-style smoothStep with S-curve interpolation between edges
351
 * @param edge - Lower edge
352
 * @param edge2 - Upper edge
353
 * @param x - Input value
354
 * @returns Smooth interpolation between edges
355
 */
356
function smoothStep(edge: number, edge2: number, x: number): number;
357

358
/**
359
 * Specialized smoothStep for [0,1] range
360
 * @param x - Input value [0,1]
361
 * @returns Smooth step value
362
 */
363
function smoothStep01(x: number): number;
364

365
/**
366
 * Higher degree polynomial version of smoothStep
367
 * @param edge - Lower edge
368
 * @param edge2 - Upper edge
369
 * @param x - Input value
370
 * @returns Smoother step interpolation
371
 */
372
function smootherStep(edge: number, edge2: number, x: number): number;
373

374
/**
375
 * Specialized smootherStep for [0,1] range
376
 * @param x - Input value [0,1]
377
 * @returns Smoother step value
378
 */
379
function smootherStep01(x: number): number;
380

381
/**
382
 * Exponential ramp with variable shape parameters
383
 * @param k - Shape parameter
384
 * @param n - Power parameter
385
 * @param x - Input value
386
 * @returns Exponential step value
387
 */
388
function expStep(k: number, n: number, x: number): number;
389
```
390

391
**Usage Examples:**
392

393
```typescript
394
import { 
395
  mixCubic, mixHermite, tween, 
396
  bounce, sigmoid01, lanczos,
397
  expFactor, gaussian
398
} from "@thi.ng/math/mix";
399
import { smoothStep, step, smoothStep01 } from "@thi.ng/math/step";
400
import { easeInOut3 } from "@thi.ng/math/easing";
401

402
// Cubic bezier curve
403
const bezier = mixCubic(0, 30, 70, 100, 0.5); // Mid-point of curve
404

405
// Hermite interpolation for smooth animation
406
const hermite = mixHermite(0, 10, 90, 100, 0.3);
407

408
// Custom tween with easing
409
const customTween = tween(easeInOut3, 0, 100);
410
const easedValue = customTween(0.7);
411

412
// Smooth threshold transition
413
const smooth = smoothStep(10, 20, 15); // 0.5 (halfway)
414

415
// Spring bounce animation
416
const springValue = bounce(2, 0.8, 0.3);
417

418
// S-curve transition
419
const sCurve = sigmoid01(5, 0.7);
420

421
// Lanczos filtering (for image resampling)
422
const filtered = lanczos(3, 0.5);
423

424
// Exponential progression factor
425
const factor = expFactor(1, 100, 10); // Factor to reach 100 from 1 in 10 steps
426
let value = 1;
427
for (let i = 0; i < 10; i++) {
428
  value *= factor; // Exponential progression
429
}
430

431
// Gaussian bell curve (for particle effects, blur kernels)
432
const bellCurve = gaussian(0.5, 0.2, 0.7); // Center at 0.5, spread 0.2, evaluate at 0.7
433
```