Math

import { clamp, lerp, map } from '@studiometa/js-toolkit-v4/utils';

Values in, values out. For anything with a time dimension — damping, springs, inertia — see Motion.

• Ranges
• Interpolation
• Wrapping and folding
• Rounding and averaging
• createRange
• See also

Ranges

clamp(value: number, min: number, max: number): number
clamp01(value: number): number

import { clamp, clamp01 } from '@studiometa/js-toolkit-v4/utils';

clamp(15, 0, 10); // 10
clamp(-5, 0, 10); // 0
clamp01(1.5); // 1

clamp01 is the case that comes up in every progress calculation, so it has its own name and no arguments to get the wrong way round.

Interpolation

lerp(min: number, max: number, ratio: number): number
map(value: number, inputMin: number, inputMax: number, outputMin: number, outputMax: number): number

import { lerp, map } from '@studiometa/js-toolkit-v4/utils';

lerp(0, 100, 0.5); // 50
map(5, 0, 10, 0, 100); // 50

lerp takes a ratio; map re-scales one range onto another. map is lerp with the input range worked out for you.

Wrapping and folding

wrap(value: number, min: number, max: number): number
fold(value: number, min: number, max: number): number

import { fold, wrap } from '@studiometa/js-toolkit-v4/utils';

wrap(11, 0, 10); // 1  — it comes back round
fold(11, 0, 10); // 9  — it bounces back

wrap is a carousel that loops; fold is a value that reverses at the edges. Two behaviours, two names, no flag.

Rounding and averaging

round(value: number, decimals?: number): number
mean(numbers: readonly number[]): number

import { mean, round } from '@studiometa/js-toolkit-v4/utils';

round(1.2345, 2); // 1.23
mean([1, 2, 3, 4]); // 2.5

createRange

createRange(min: number, max: number, step: number): number[]

import { createRange } from '@studiometa/js-toolkit-v4/utils';

createRange(0, 1, 0.25); // [0, 0.25, 0.5, 0.75, 1]

See also

• Easings — shaping a 0 → 1 progress
• Motion — everything with an elapsed time