Assorted common math functions & utilities for TypeScript/JavaScript applications
—
Comprehensive interpolation functions including linear, bezier, hermite, and specialized interpolation methods for animation and graphics.
Core interpolation functions for blending between values.
/**
* Linear interpolation without clamping
* @param a - Start value
* @param b - End value
* @param t - Interpolation factor (0 = a, 1 = b)
* @returns Interpolated value
*/
function mix(a: number, b: number, t: number): number;
/**
* Bilinear interpolation of 4 values
* @param a - Top-left value
* @param b - Top-right value
* @param c - Bottom-left value
* @param d - Bottom-right value
* @param u - Horizontal interpolation factor
* @param v - Vertical interpolation factor
* @returns Bilinearly interpolated value
*/
function mixBilinear(
a: number, b: number, c: number, d: number,
u: number, v: number
): number;
/**
* Trilinear interpolation of 8 values
* @param a-h - Corner values of 3D unit cube
* @param u - X-axis interpolation factor
* @param v - Y-axis interpolation factor
* @param w - Z-axis interpolation factor
* @returns Trilinearly interpolated value
*/
function mixTrilinear(
a: number, b: number, c: number, d: number,
e: number, f: number, g: number, h: number,
u: number, v: number, w: number
): number;Usage Examples:
import { mix, mixBilinear } from "@thi.ng/math/mix";
// Linear interpolation
const halfway = mix(0, 100, 0.5); // 50
const quarter = mix(10, 20, 0.25); // 12.5
// Bilinear interpolation (e.g., for texture sampling)
const bilinear = mixBilinear(0, 10, 5, 15, 0.5, 0.5); // 7.5Bezier curve interpolation for smooth curves and animations.
/**
* Quadratic bezier interpolation
* @param a - Start point
* @param b - Control point
* @param c - End point
* @param t - Interpolation parameter [0,1]
* @returns Bezier interpolated value
*/
function mixQuadratic(a: number, b: number, c: number, t: number): number;
/**
* Cubic bezier interpolation
* @param a - Start point
* @param b - First control point
* @param c - Second control point
* @param d - End point
* @param t - Interpolation parameter [0,1]
* @returns Bezier interpolated value
*/
function mixCubic(a: number, b: number, c: number, d: number, t: number): number;Hermite interpolation for smooth curves with tangent control.
/**
* Hermite interpolation for uniformly spaced points
* @param a - Point before start
* @param b - Start point
* @param c - End point
* @param d - Point after end
* @param t - Interpolation parameter [0,1]
* @returns Hermite interpolated value
*/
function mixHermite(a: number, b: number, c: number, d: number, t: number): number;
/**
* Cubic-hermite interpolation with explicit tangents
* @param a - Start point
* @param ta - Tangent at start point
* @param b - End point
* @param tb - Tangent at end point
* @param t - Interpolation parameter [0,1]
* @returns Cubic hermite interpolated value
*/
function mixCubicHermite(a: number, ta: number, b: number, tb: number, t: number): number;
/**
* Cubic-hermite with automatic tangent computation from points
* @param a - Point before start
* @param b - Start point
* @param c - End point
* @param d - Point after end
* @param t - Interpolation parameter [0,1]
* @returns Cubic hermite interpolated value
*/
function mixCubicHermiteFromPoints(a: number, b: number, c: number, d: number, t: number): number;
/**
* Bicubic interpolation of 4x4 sample grid
* @param s00-s33 - 16 sample values in row-major order
* @param u - Horizontal interpolation parameter
* @param v - Vertical interpolation parameter
* @returns Bicubic interpolated value
*/
function mixBicubic(
s00: number, s01: number, s02: number, s03: number,
s10: number, s11: number, s12: number, s13: number,
s20: number, s21: number, s22: number, s23: number,
s30: number, s31: number, s32: number, s33: number,
u: number, v: number
): number;Parametric interpolation using custom kernel functions.
/**
* Parametric interpolation using custom kernel function
* @param kernel - Kernel function defining interpolation curve
* @param a - Sample before start
* @param b - Start sample
* @param c - End sample
* @param d - Sample after end
* @param t - Interpolation parameter
* @returns Kernel interpolated value
*/
function mixKernel4(
kernel: (t: number) => number,
a: number, b: number, c: number, d: number,
t: number
): number;Functions for computing tangents used in hermite interpolation.
/**
* Computes cardinal tangents for hermite interpolation
* @param prev - Previous point
* @param next - Next point
* @param scale - Tangent scaling factor
* @param ta - Time at previous point
* @param tc - Time at next point
* @returns Cardinal tangent value
*/
function tangentCardinal(prev: number, next: number, scale?: number, ta?: number, tc?: number): number;
/**
* Computes tangent using 3-point finite difference
* @param prev - Previous point
* @param curr - Current point
* @param next - Next point
* @param ta - Time at previous point
* @param tb - Time at current point
* @param tc - Time at next point
* @returns Finite difference tangent
*/
function tangentDiff3(prev: number, curr: number, next: number, ta?: number, tb?: number, tc?: number): number;Functions that create customized interpolation functions.
/**
* Creates interpolation function with custom timing function
* @param f - Timing function (easing curve)
* @param from - Start value
* @param to - End value
* @returns Interpolation function with custom timing
*/
function tween(f: (t: number) => number, from: number, to: number): (t: number) => number;Pre-built specialized interpolation curves for common use cases.
/** Circular ease out interpolation */
function circular(t: number): number;
/** Inverse circular (ease in) */
function invCircular(t: number): number;
/** Zoom lens interpolation with position and strength */
function lens(pos: number, strength: number, t: number): number;
/** Cosine-based smooth interpolation */
function cosine(t: number): number;
/** Decimated/stepped interpolation */
function decimated(n: number, t: number): number;
/** Spring oscillator with damping */
function bounce(k: number, amp: number, t: number): number;
/** Exponential easing */
function ease(ease: number, t: number): number;
/** Impulse generator function */
function impulse(k: number, t: number): number;
/** Gain function for contrast adjustment */
function gain(k: number, t: number): number;
/** Parabolic function */
function parabola(k: number, t: number): number;
/** Cubic pulse function */
function cubicPulse(w: number, c: number, t: number): number;
/** Exponential factor for multi-step interpolation */
function expFactor(a: number, b: number, num: number): number;
/** Gaussian bell curve function */
function gaussian(bias: number, sigma: number, t: number): number;Sinc functions for signal processing and filtering.
/**
* Unnormalized Sinc function: sin(πt)/(πt)
* @param t - Input parameter
* @returns Sinc value
*/
function sinc(t: number): number;
/**
* Normalized Sinc function scaled by k
* @param k - Scaling factor
* @param t - Input parameter
* @returns Normalized sinc value
*/
function sincNormalized(k: number, t: number): number;Filter functions for image processing and signal filtering.
/**
* Lanczos filter
* @param a - Filter parameter (typically 2 or 3)
* @param t - Input parameter
* @returns Lanczos filter value
*/
function lanczos(a: number, t: number): number;
/**
* Lanczos filter generator
* @param a - Filter parameter
* @returns Lanczos filter function
*/
function defLanczos(a: number): (t: number) => number;
/**
* Mitchell-Netravali filter generator
* @param b - B parameter (default: 1/3)
* @param c - C parameter (default: 1/3)
* @returns Mitchell-Netravali filter function
*/
function defMitchell(b?: number, c?: number): (t: number) => number;Sigmoid-shaped interpolation functions for S-curve transitions.
/**
* General sigmoid function
* @param bias - Bias parameter
* @param k - Steepness parameter
* @param t - Input parameter
* @returns Sigmoid value
*/
function sigmoid(bias: number, k: number, t: number): number;
/**
* Sigmoid for [0,1] input range
* @param k - Steepness parameter
* @param t - Input parameter [0,1]
* @returns Sigmoid value
*/
function sigmoid01(k: number, t: number): number;
/**
* Sigmoid for [-1,1] input range
* @param k - Steepness parameter
* @param t - Input parameter [-1,1]
* @returns Sigmoid value
*/
function sigmoid11(k: number, t: number): number;Step and smooth step functions for threshold-based interpolation.
/**
* Step/threshold function
* @param edge - Threshold value
* @param x - Input value
* @returns 0 if x < edge, else 1
*/
function step(edge: number, x: number): number;
/**
* GLSL-style smoothStep with S-curve interpolation between edges
* @param edge - Lower edge
* @param edge2 - Upper edge
* @param x - Input value
* @returns Smooth interpolation between edges
*/
function smoothStep(edge: number, edge2: number, x: number): number;
/**
* Specialized smoothStep for [0,1] range
* @param x - Input value [0,1]
* @returns Smooth step value
*/
function smoothStep01(x: number): number;
/**
* Higher degree polynomial version of smoothStep
* @param edge - Lower edge
* @param edge2 - Upper edge
* @param x - Input value
* @returns Smoother step interpolation
*/
function smootherStep(edge: number, edge2: number, x: number): number;
/**
* Specialized smootherStep for [0,1] range
* @param x - Input value [0,1]
* @returns Smoother step value
*/
function smootherStep01(x: number): number;
/**
* Exponential ramp with variable shape parameters
* @param k - Shape parameter
* @param n - Power parameter
* @param x - Input value
* @returns Exponential step value
*/
function expStep(k: number, n: number, x: number): number;Usage Examples:
import {
mixCubic, mixHermite, tween,
bounce, sigmoid01, lanczos,
expFactor, gaussian
} from "@thi.ng/math/mix";
import { smoothStep, step, smoothStep01 } from "@thi.ng/math/step";
import { easeInOut3 } from "@thi.ng/math/easing";
// Cubic bezier curve
const bezier = mixCubic(0, 30, 70, 100, 0.5); // Mid-point of curve
// Hermite interpolation for smooth animation
const hermite = mixHermite(0, 10, 90, 100, 0.3);
// Custom tween with easing
const customTween = tween(easeInOut3, 0, 100);
const easedValue = customTween(0.7);
// Smooth threshold transition
const smooth = smoothStep(10, 20, 15); // 0.5 (halfway)
// Spring bounce animation
const springValue = bounce(2, 0.8, 0.3);
// S-curve transition
const sCurve = sigmoid01(5, 0.7);
// Lanczos filtering (for image resampling)
const filtered = lanczos(3, 0.5);
// Exponential progression factor
const factor = expFactor(1, 100, 10); // Factor to reach 100 from 1 in 10 steps
let value = 1;
for (let i = 0; i < 10; i++) {
value *= factor; // Exponential progression
}
// Gaussian bell curve (for particle effects, blur kernels)
const bellCurve = gaussian(0.5, 0.2, 0.7); // Center at 0.5, spread 0.2, evaluate at 0.7Install with Tessl CLI
npx tessl i tessl/npm-thi-ng--math