toosoon-utils 4.2.3 → 4.3.0

package/README.md

@@ -26,689 +26,849 @@ import { lerp } from 'toosoon-utils/maths';
 console.log(lerp(0.5, 0, 5)); // 2.5
 ```
 
+## Summary
+
+- [Utility functions](#utility-functions)
+  - [Maths](#maths-functions)
+  - [Geometry](#geometry-functions)
+  - [Colors](#colors-functions)
+  - [Functions](#functions-functions)
+  - [Strings](#strings-functions)
+  - [Query](#query-functions)
+  - [DOM](#dom-functions)
+  - [Files](#files-functions)
+  - [Random](#random-functions)
+  - [PRNG](#prng-functions)
+- [Utility classes](#utility-classes)
+  - [Geometry](#geometry-classes)
+  - [Curves](#curves-classes)
+  - [Paths](#paths-classes)
+  - [Colors](#colors-classes)
+  - [FrameRate](#frame-rate-class)
+- [Constants](#constants)
+- [License](#license)
+
 ## Utility functions
 
-### Colors
+### Maths <a id="maths-functions"></a>
 
-##### normalizeHexString(hex)
+##### isEven(value)
 
-Normalize an hexadecimal string.
+Check if a number is even.
 
-- `hex`: Hexadecimal string.
+- `value`: Value to check.
 
 ```ts
-normalizeHexString(hex: string): string;
+isEven(value: number): boolean;
 ```
 
-##### rgbToHex(rgb)
+##### isOdd(value)
 
-Convert RGB to hexadecimal.
+Check if a number is odd.
 
-- `rgb`: RGB color.
+- `value`: Value to check.
 
 ```ts
-rgbToHex([r, g, b]: [number, number, number]): number;
+isOdd(value: number): boolean;
 ```
 
-##### rgbToHexString(rgb)
+##### isPowerOf2(value)
 
-Convert RGB to hexadecimal string.
+Check if a number is a power of 2.
 
-- `rgb`: RGB color.
+- `value`: Value to check.
 
 ```ts
-rgbToHexString([r, g, b]: [number, number, number]): string;
+isPowerOf2(value: number): boolean;
 ```
 
-##### hexToRgb(hex)
+##### toPowerOf2(value)
 
-Convert hexadecimal to RGB.
+Find closest power of 2 that fits a number.
 
-- `hex`: Hexadecimal color.
+- `value`: Incoming value.
+- `[mode='ceil']`: Can be `'floor'`, `'ceil'` or `'round'`.
 
 ```ts
-hexToRgb(hex: number | string): [number, number, number];
+toPowerOf2(value: number, mode?: string): number;
 ```
 
-##### lighten(hex, amount)
+##### sign(value)
 
-Lighten a color.
+Return the sign (positive or negative) of a number.
 
-- `hex`: Hexadecimal color.
-- `[amount=0]`: Amount of the color offset.
+- `value`: Value to check.
 
 ```ts
-lighten(hex: string, amount?: number): string;
+sign(value: number): number;
 ```
 
-##### darken(hex, amount)
+##### clamp(value, min, max)
 
-Darken a color.
+Clamp a value between two bounds.
 
-- `hex`: Hexadecimal color.
-- `[amount=0]`: Amount of the color offset.
+- `value`: Value to clamp.
+- `[min=0]`: Minimum boundary.
+- `[max=1]`: Maximum boundary.
 
 ```ts
-darken(hex: string, amount?: number): string;
+clamp(value: number, min?: number, max?: number): number;
 ```
 
-##### normalizeHslString(hsl)
+##### snap(value, multiple)
 
-Normalize an HSL string.
+Round a number up to a nearest multiple.
 
-- `hsl`: HSL string (format: `'hsl(360, 100%, 100%)'`).
+- `value`: Value to round.
+- `[multiple=1]`: Multiple to round to.
 
 ```ts
-normalizeHslString(hsl: string): [number, number, number];
+snap(value: number, multiple?: number): number;
 ```
 
-##### rgbToHsl(rgb)
+##### lerp(t, min, max)
 
-Convert RGB to HSL.
+Interpolate a value between two values using Linear interpolation (lerping).
 
-- `rgb`: RGB color.
+- `t`: Normalized time value to interpolate.
+- `min`: Minimum value.
+- `max`: Maximum value.
 
 ```ts
-rgbToHsl([r, g, b]: [number, number, number]): [number, number, number];
+lerp(t: number, min: number, max: number): number;
 ```
 
-##### hslToRgb(hsl)
+##### normalize(value, min, max)
 
-Convert HSL to RGB.
+Normalize a value between two bounds.
 
-- `hsl`: HSL color.
+- `value`: Value to normalize.
+- `min`: Minimum boundary.
+- `max`: Maximum boundary.
 
 ```ts
-hslToRgb([h, s, l]: [number, number, number]): [number, number, number];
+normalize(value: number, min: number, max: number): number;
 ```
 
-##### rgbToHsb(rgb)
+##### map(value, currentMin, currentMax, targetMin, targetMax)
 
-Convert RGB to HSB.
+Re-map a number from one range to another.
 
-- `rgb`: RGB color.
+- `value`: Value to re-map.
+- `currentMin`: Lower bound of the value's current range.
+- `currentMax`: Upper bound of the value's current range.
+- `targetMin`: Lower bound of the value's target range.
+- `targetMax`: Upper bound of the value's target range.
 
 ```ts
-rgbToHsb([r, g, b]: [number, number, number]): [number, number, number];
+map(value: number, currentMin: number, currentMax: number, targetMin: number, targetMax: number): number;
 ```
 
-##### hsbToRgb(hsb)
+##### triLerp(t, min, max, peak)
 
-Convert HSB to RGB.
+Interpolate a value between two values using Triangular interpolation.
 
-- `hsb`: HSB color.
+- `t`: Normalized time value to interpolate.
+- `min`: Minimum value.
+- `max`: Maximum value.
+- `peak`: Peak value controling the interpolation triangle shape.
 
 ```ts
-hsbToRgb([h, s, b]: [number, number, number]): [number, number, number];
+triLerp(t: number, min: number, max: number, peak: number): number;
 ```
 
-##### labToHcl(lab)
+##### expLerp(t, min, max, exponent)
 
-Convert LAB to HCL.
+Interpolate a value using Exponential interpolation.
 
-- `lab`: LAB color.
+- `t`: Normalized time value to interpolate.
+- `min`: Minimum value.
+- `max`: Maximum value.
+- `power`: Exponent controling the interpolation curve shape.
 
 ```ts
-labToHcl([l, a, b]: [number, number, number]): [number, number, number];
+expLerp(t: number, min: number, max: number, power: number): number;
 ```
 
-##### hclToLab(hcl)
+##### quadraticBezier(t, p1, cp, p2)
 
-Convert HCL to LAB.
+Interpolate a value using Quadratic Bézier interpolation.
 
-- `hcl`: HCL color.
+- `t`: Normalized time value to interpolate.
+- `p1`: Start point.
+- `cp`: Control point.
+- `p2`: End point.
 
 ```ts
-hclToLab([h, c, l]: [number, number, number]): [number, number, number];
+quadraticBezier(t: number, p1: number, cp: number, p2: number): number;
 ```
 
-##### labToRgb(lab)
+##### cubicBezier(t, p1, cp1, cp2, p2)
 
-Convert LAB to RGB.
+Interpolate a value using Cubic Bézier interpolation.
 
-- `lab`: LAB color.
+- `t`: Normalized time value to interpolate.
+- `p1`: Start point.
+- `cp1`: First control point.
+- `cp2`: Second control point.
+- `p2`: End point.
 
 ```ts
-labToRgb([l, a, b]: [number, number, number]): [number, number, number];
+cubicBezier(t: number, p1: number, cp1: number, cp2: number, p2: number): number;
 ```
 
-##### rgbToLab(rgb)
+##### catmullRom(t, p1, cp1, cp2, p2)
 
-Convert RGB to LAB.
+Interpolate a value using Catmull-Rom interpolation.
 
-- `rgb`: RGB color.
+- `t`: Normalized time value to interpolate.
+- `p1`: Start point.
+- `cp1`: First control point.
+- `cp2`: Second control point.
+- `p2`: End point.
 
 ```ts
-rgbToLab([r, g, b]: [number, number, number]): [number, number, number];
+catmullRom(t: number, p1: number, cp1: number, cp2: number, p2: number): number;
 ```
 
-##### deltaE(labA, labB)
+##### modAbs(value, length)
 
-Get the delta from two LAB colors.
+Modulo absolute a value based on a length.
 
-- `labA`: First LAB color.
-- `labB`: Second LAB color.
+- `value`: Value to modulate.
+- `length`: Total length.
 
 ```ts
-deltaE(labA: [number, number, number], labB: [number, number, number]): number;
+modAbs(value: number, length: number): number;
 ```
 
-##### rgbToHcl(rgb)
+##### pingPong(value, length)
 
-Convert RGB to HCL.
+Move back and forth a value between 0 and length, so that it is never larger than length and never smaller than 0.
 
-- `rgb`: RGB color.
+- `value`: Value to modulate.
+- `length`: Total length.
 
 ```ts
-rgbToHcl([r, g, b]: [number, number, number]): [number, number, number];
+pingPong(value: number, length: number): number;
 ```
 
-##### hclToRgb(hcl)
+##### smoothstep(value, min, max)
 
-Convert HCL to RGB.
+Smooth a value using cubic Hermite interpolation.
 
-- `hcl`: HCL color.
+- `value`: Value to smooth.
+- `[min=0]`: Minimum boundary.
+- `[max=1]`: Maximum boundary.
 
 ```ts
-hclToRgb([h, c, l]: [number, number, number]): [number, number, number];
+smoothstep(value: number, min?: number, max?: number): number;
 ```
 
-### DOM
-
-##### closest(element, selector)
+##### parabola(x, power)
 
-Find the closest parent that matches a selector.
+Re-map the [0, 1] interval into [0, 1] parabola, such that corners are remaped to 0 and the center to 1.
 
-- `element`: Target element.
-- `selector`: Selector or parent to match.
+- `x`: Normalized coordinate on X axis.
+- `[power=1]`: Parabola power.
 
 ```ts
-closest(element: Element | null, selector: Element | string): Element | null;
+parabola(x: number, power?: number): number;
 ```
 
-##### createCanvas(width, height)
+##### sum(array)
 
-Create a canvas and 2d context.
+Return the sum of numbers.
 
-- `width`: Width of the canvas.
-- `height`: Height of the canvas.
+- `array`: Array of numbers.
 
 ```ts
-createCanvas(width: number, height: number): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D };
+sum(array: number[]): number;
 ```
 
-##### injectStyles(styles)
+##### average(array)
 
-Inject CSS styles in `document.head`.
+Return the average of numbers.
 
-- `styles`: CSS styles to inject.
+- `array`: Array of numbers.
 
 ```ts
-injectStyles(styles: string): void;
+average(array: number[]): number;
 ```
 
-### Files
-
-##### download(blob, filename)
+##### damp(value, target, damping, delta)
 
-Download a Blob object into user files.
+Smoothly interpolate a number toward another.
 
-- `blob`: Blob object to download.
-- `filename`: Downloaded file name.
+- `value`: Value to interpolate.
+- `target`: Destination of the interpolation.
+- `damping`: A higher value will make the movement more sudden, and a lower value will make the movement more gradual.
+- `delta`: Delta time (in seconds).
 
 ```ts
-download(blob: Blob, filename: string): void;
+damp(value: number, target: number, damping: number, delta: number): number;
 ```
 
-##### upload(onLoad)
+### Geometry <a id="geometry-functions"></a>
 
-Upload a file from user files.
+##### toDegrees(radians)
 
-- `onLoad`: Callback called once the file is loaded.
-- `[accept='']` MIME type the file input should accept.
+Convert a radians value into degrees.
+
+- `radians`: Angle in radians.
 
 ```ts
-upload(onLoad: (dataUrl: string) => void, accept?: string): void;
+toDegrees(radians: number): number;
 ```
 
-### Functions
+##### toRadians(degrees)
 
-##### noop()
+Convert a degrees value into radians.
 
-No-op function.
+- `degrees`: Angle in degrees.
 
 ```ts
-noop(): void;
+toRadians(degrees: number): number;
 ```
 
-##### wait(delay)
+##### angle(x1, y1, x2, y2)
 
-Promise wrapped setTimeout.
+Calculate the angle from a point to another.
 
-- `[delay=0]`: Time to wait (in milliseconds).
+- `x1`: X value of the first point.
+- `y1`: Y value of the first point.
+- `x2`: X value of the second point.
+- `y2`: Y value of the second point.
 
 ```ts
-wait(delay?: number): Promise<void>;
+angle(x1: number, y1: number, x2: number, y2: number): number;
 ```
 
-##### isDefined(value)
+##### closestAngle(source, target)
 
-Check if a value is defined.
+Find the closest angle between to angles.
 
-- `value`: Value to check.
+- `source`: Source angle (in radians).
+- `target`: Target angle (in radians).
 
 ```ts
-isDefined(value: any): boolean;
+closestAngle(source: number, target: number): number;
 ```
 
-##### debounce(callback, delay)
+##### distance(x1, y1, x2, y2)
 
-Create a debounced function that delays the execution of `callback` until a specified `delay` time has passed since the last call.
+Calculate the distance between two points.
 
-- `callback`: Function to debounce.
-- `delay`: Delay (in milliseconds).
+- `x1`: X-axis coordinate of the first point.
+- `y1`: Y-axis coordinate of the first point.
+- `x2`: X-axis coordinate of the second point.
+- `y2`: Y-axis coordinate of the second point.
 
 ```ts
-debounce(callback: Function, delay: number): Function;
+distance(x1: number, y1: number, x2: number, y2: number): number;
 ```
 
-##### throttle(callback, limit)
+##### diagonal(width, height)
 
-Create a throttled function that limits the execution of `callback` to once every `limit` time.
+Calculate the length of the diagonal of a rectangle.
 
-- `callback`: Function to throttle.
-- `limit`: Minimum interval between two calls (in milliseconds).
+- `width`: Width of the rectangle.
+- `height`: Height of the rectangle.
 
 ```ts
-throttle(callback: Function, limit: number): Function;
+diagonal(width: number, height: number): number;
 ```
 
-##### defer()
+#### Fit
 
-Deferred promise implementation.
+```ts
+type FitInput = {
+  width: number;
+  height: number;
+};
+
+type FitOutput = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scale: number;
+};
+```
+
+##### cover(target, container)
+
+Make a target fit a container (cover mode).
+
+- `target`: Dimension of the target.
+- `container`: Dimension of the container.
 
 ```ts
-defer<T>(): Deferred<T>;
+cover(target: FitInput, container: FitInput): FitOutput;
 ```
 
-##### now()
+##### contain(target, container)
 
-Polyfill for `now()` functions.
+Make a target fit a container (contain mode).
+
+- `target`: Dimension of the target.
+- `container`: Dimension of the container.
 
 ```ts
-now(): number;
+contain(target: FitInput, container: FitInput): FitOutput;
 ```
 
-### Geometry
+### Colors <a id="colors-functions"></a>
 
-##### toDegrees(radians)
+##### normalizeHexString(hex)
 
-Convert a radians value into degrees.
+Normalize an hexadecimal string.
 
-- `radians`: Angle in radians.
+- `hex`: Hexadecimal string.
 
 ```ts
-toDegrees(radians: number): number;
+normalizeHexString(hex: string): string;
 ```
 
-##### toRadians(degrees)
+##### rgbToHex(rgb)
 
-Convert a degrees value into radians.
+Convert RGB to hexadecimal.
 
-- `degrees`: Angle in degrees.
+- `rgb`: RGB color.
 
 ```ts
-toRadians(degrees: number): number;
+rgbToHex([r, g, b]: [number, number, number]): number;
 ```
 
-##### angle(x1, y1, x2, y2)
+##### rgbToHexString(rgb)
 
-Calculate the angle from a point to another.
+Convert RGB to hexadecimal string.
 
-- `x1`: X value of the first point.
-- `y1`: Y value of the first point.
-- `x2`: X value of the second point.
-- `y2`: Y value of the second point.
+- `rgb`: RGB color.
 
 ```ts
-angle(x1: number, y1: number, x2: number, y2: number): number;
+rgbToHexString([r, g, b]: [number, number, number]): string;
 ```
 
-##### closestAngle(source, target)
+##### hexToRgb(hex)
 
-Find the closest angle between to angles.
+Convert hexadecimal to RGB.
 
-- `source`: Source angle (in radians).
-- `target`: Target angle (in radians).
+- `hex`: Hexadecimal color.
 
 ```ts
-closestAngle(source: number, target: number): number;
+hexToRgb(hex: number | string): [number, number, number];
 ```
 
-##### distance(x1, y1, x2, y2)
+##### lighten(hex, amount)
 
-Calculate the distance between two points.
+Lighten a color.
 
-- `x1`: X-axis coordinate of the first point.
-- `y1`: Y-axis coordinate of the first point.
-- `x2`: X-axis coordinate of the second point.
-- `y2`: Y-axis coordinate of the second point.
+- `hex`: Hexadecimal color.
+- `[amount=0]`: Amount of the color offset.
 
 ```ts
-distance(x1: number, y1: number, x2: number, y2: number): number;
+lighten(hex: string, amount?: number): string;
 ```
 
-##### diagonal(width, height)
+##### darken(hex, amount)
 
-Calculate the length of the diagonal of a rectangle.
+Darken a color.
 
-- `width`: Width of the rectangle.
-- `height`: Height of the rectangle.
+- `hex`: Hexadecimal color.
+- `[amount=0]`: Amount of the color offset.
 
 ```ts
-diagonal(width: number, height: number): number;
+darken(hex: string, amount?: number): string;
 ```
 
-#### Fit
+##### normalizeHslString(hsl)
+
+Normalize an HSL string.
+
+- `hsl`: HSL string (format: `'hsl(360, 100%, 100%)'`).
 
 ```ts
-type FitInput = {
-  width: number;
-  height: number;
-};
+normalizeHslString(hsl: string): [number, number, number];
+```
 
-type FitOutput = {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  scale: number;
-};
+##### rgbToHsl(rgb)
+
+Convert RGB to HSL.
+
+- `rgb`: RGB color.
+
+```ts
+rgbToHsl([r, g, b]: [number, number, number]): [number, number, number];
 ```
 
-##### cover(target, container)
+##### hslToRgb(hsl)
 
-Make a target fit a container (cover mode).
+Convert HSL to RGB.
 
-- `target`: Dimension of the target.
-- `container`: Dimension of the container.
+- `hsl`: HSL color.
 
 ```ts
-cover(target: FitInput, container: FitInput): FitOutput;
+hslToRgb([h, s, l]: [number, number, number]): [number, number, number];
 ```
 
-##### contain(target, container)
+##### rgbToHsb(rgb)
 
-Make a target fit a container (contain mode).
+Convert RGB to HSB.
 
-- `target`: Dimension of the target.
-- `container`: Dimension of the container.
+- `rgb`: RGB color.
 
 ```ts
-contain(target: FitInput, container: FitInput): FitOutput;
+rgbToHsb([r, g, b]: [number, number, number]): [number, number, number];
 ```
 
-### Maths
+##### hsbToRgb(hsb)
 
-##### isEven(value)
+Convert HSB to RGB.
 
-Check if a number is even.
+- `hsb`: HSB color.
 
-- `value`: Value to check.
+```ts
+hsbToRgb([h, s, b]: [number, number, number]): [number, number, number];
+```
+
+##### labToHcl(lab)
+
+Convert LAB to HCL.
+
+- `lab`: LAB color.
 
 ```ts
-isEven(value: number): boolean;
+labToHcl([l, a, b]: [number, number, number]): [number, number, number];
 ```
 
-##### isOdd(value)
+##### hclToLab(hcl)
 
-Check if a number is odd.
+Convert HCL to LAB.
 
-- `value`: Value to check.
+- `hcl`: HCL color.
 
 ```ts
-isOdd(value: number): boolean;
+hclToLab([h, c, l]: [number, number, number]): [number, number, number];
 ```
 
-##### isPowerOf2(value)
+##### labToRgb(lab)
 
-Check if a number is a power of 2.
+Convert LAB to RGB.
 
-- `value`: Value to check.
+- `lab`: LAB color.
 
 ```ts
-isPowerOf2(value: number): boolean;
+labToRgb([l, a, b]: [number, number, number]): [number, number, number];
 ```
 
-##### toPowerOf2(value)
+##### rgbToLab(rgb)
 
-Find closest power of 2 that fits a number.
+Convert RGB to LAB.
 
-- `value`: Incoming value.
-- `[mode='ceil']`: Can be `'floor'`, `'ceil'` or `'round'`.
+- `rgb`: RGB color.
 
 ```ts
-toPowerOf2(value: number, mode?: string): number;
+rgbToLab([r, g, b]: [number, number, number]): [number, number, number];
 ```
 
-##### sign(value)
+##### deltaE(labA, labB)
 
-Return the sign (positive or negative) of a number.
+Get the delta from two LAB colors.
+
+- `labA`: First LAB color.
+- `labB`: Second LAB color.
+
+```ts
+deltaE(labA: [number, number, number], labB: [number, number, number]): number;
+```
+
+##### rgbToHcl(rgb)
+
+Convert RGB to HCL.
+
+- `rgb`: RGB color.
+
+```ts
+rgbToHcl([r, g, b]: [number, number, number]): [number, number, number];
+```
+
+##### hclToRgb(hcl)
+
+Convert HCL to RGB.
+
+- `hcl`: HCL color.
+
+```ts
+hclToRgb([h, c, l]: [number, number, number]): [number, number, number];
+```
+
+### Functions <a id="functions-functions"></a>
+
+##### noop()
+
+No-op function.
+
+```ts
+noop(): void;
+```
+
+##### wait(delay)
+
+Promise wrapped setTimeout.
+
+- `[delay=0]`: Time to wait (in milliseconds).
+
+```ts
+wait(delay?: number): Promise<void>;
+```
+
+##### isDefined(value)
+
+Check if a value is defined.
 
 - `value`: Value to check.
 
 ```ts
-sign(value: number): number;
+isDefined(value: any): boolean;
 ```
 
-##### clamp(value, min, max)
+##### debounce(callback, delay)
 
-Clamp a value between two bounds.
+Create a debounced function that delays the execution of `callback` until a specified `delay` time has passed since the last call.
 
-- `value`: Value to clamp.
-- `[min=0]`: Minimum boundary.
-- `[max=1]`: Maximum boundary.
+- `callback`: Function to debounce.
+- `delay`: Delay (in milliseconds).
 
 ```ts
-clamp(value: number, min?: number, max?: number): number;
+debounce(callback: Function, delay: number): Function;
 ```
 
-##### snap(value, multiple)
+##### throttle(callback, limit)
 
-Round a number up to a nearest multiple.
+Create a throttled function that limits the execution of `callback` to once every `limit` time.
 
-- `value`: Value to round.
-- `[multiple=1]`: Multiple to round to.
+- `callback`: Function to throttle.
+- `limit`: Minimum interval between two calls (in milliseconds).
 
 ```ts
-snap(value: number, multiple?: number): number;
+throttle(callback: Function, limit: number): Function;
 ```
 
-##### lerp(t, min, max)
+##### defer()
 
-Interpolate a value between two values using Linear interpolation (lerping).
+Deferred promise implementation.
 
-- `t`: Normalized time value to interpolate.
-- `min`: Minimum value.
-- `max`: Maximum value.
+```ts
+defer<T>(): Deferred<T>;
+```
+
+##### now()
+
+Polyfill for `now()` functions.
 
 ```ts
-lerp(t: number, min: number, max: number): number;
+now(): number;
 ```
 
-##### normalize(value, min, max)
+### Strings <a id="strings-functions"></a>
 
-Normalize a value between two bounds.
+#### Cases
 
-- `value`: Value to normalize.
-- `min`: Minimum boundary.
-- `max`: Maximum boundary.
+##### capitalize(string)
+
+Capitalize a string.
+
+- `string`: String to capitalize.
 
 ```ts
-normalize(value: number, min: number, max: number): number;
+capitalize(string: string): string;
 ```
 
-##### map(value, currentMin, currentMax, targetMin, targetMax)
+##### toKebabCase(string)
 
-Re-map a number from one range to another.
+Convert a string to kebab-case: 'Hello world' -> 'hello-world'.
 
-- `value`: Value to re-map.
-- `currentMin`: Lower bound of the value's current range.
-- `currentMax`: Upper bound of the value's current range.
-- `targetMin`: Lower bound of the value's target range.
-- `targetMax`: Upper bound of the value's target range.
+- `string`: String to convert.
 
 ```ts
-map(value: number, currentMin: number, currentMax: number, targetMin: number, targetMax: number): number;
+toKebabCase(string: string): string;
 ```
 
-##### triLerp(t, min, max, target)
+##### toSnakeCase(string)
 
-Interpolate a value between two values using Triangular interpolation.
+Convert a string to snake_case: 'Hello world' -> 'hello_world'.
 
-- `t`: Normalized time value to interpolate.
-- `min`: Minimum value.
-- `max`: Maximum value.
-- `target`: Triangle target value.
+- `string`: String to convert.
 
 ```ts
-triLerp(t: number, min: number, max: number, target: number): number;
+toSnakeCase(string: string): string;
 ```
 
-##### expLerp(t, currentMin, currentMax, targetMin, targetMax)
+##### toCamelCase(string)
 
-Interpolate a value using Exponential interpolation.
+Convert a string to camelCase: 'Hello world' -> 'helloWorld'.
 
-- `t`: Normalized time value to interpolate.
-- `currentMin`: Lower bound of the value's current range.
-- `currentMax`: Upper bound of the value's current range.
-- `targetMin`: Lower bound of the value's target range.
-- `targetMax`: Upper bound of the value's target range.
+- `string`: String to convert.
 
 ```ts
-expLerp(t: number, currentMin: number, currentMax: number, targetMin: number, targetMax: number): number;
+toCamelCase(string: string): string;
 ```
 
-##### quadraticBezier(t, p1, cp, p2)
+##### toPascalCase(string)
 
-Interpolate a value using Quadratic Bézier interpolation.
+Convert a string to PascalCase: 'Hello world' -> 'HelloWorld'.
 
-- `t`: Normalized time value to interpolate.
-- `p1`: Start point.
-- `cp`: Control point.
-- `p2`: End point.
+- `string`: String to convert.
 
 ```ts
-quadraticBezier(t: number, p1: number, cp: number, p2: number): number;
+toPascalCase(string: string): string;
 ```
 
-##### cubicBezier(t, p1, cp1, cp2, p2)
+##### toTrainCase(string)
 
-Interpolate a value using Cubic Bézier interpolation.
+Convert a string to Train-Case: 'Hello world' -> 'Hello-World'.
 
-- `t`: Normalized time value to interpolate.
-- `p1`: Start point.
-- `cp1`: First control point.
-- `cp2`: Second control point.
-- `p2`: End point.
+- `string`: String to convert.
 
 ```ts
-cubicBezier(t: number, p1: number, cp1: number, cp2: number, p2: number): number;
+toTrainCase(string: string): string;
 ```
 
-##### catmullRom(t, p1, cp1, cp2, p2)
+##### toConstantCase(string)
+
+Convert a string to CONSTANT_CASE: 'Hello world' -> 'HELLO_WORLD'.
+
+- `string`: String to convert.
+
+```ts
+toConstantCase(string: string): string;
+```
+
+#### Paths
+
+##### cleanPath(path)
+
+Clean a path by removing its parameters.
+
+- `path`: Path to clean.
+
+```ts
+cleanPath(path: string): string;
+```
+
+##### addTrailingSlash(path)
+
+Convert a path by ensuring it has a trailing slash.
+
+- `path`: Path to convert.
+
+```ts
+addTrailingSlash(path: string): string;
+```
+
+##### removeTrailingSlash(path)
+
+Convert a path by ensuring it has not a trailing slash.
+
+- `path`: Path to convert.
+
+```ts
+removeTrailingSlash(path: string): string;
+```
+
+### Query parameters <a id="query-functions"></a>
+
+##### getQuery(property)
 
-Interpolate a value using Catmull-Rom interpolation.
+Get a query parameter.
 
-- `t`: Normalized time value to interpolate.
-- `p1`: Start point.
-- `cp1`: First control point.
-- `cp2`: Second control point.
-- `p2`: End point.
+- `property`: Query property to check.
 
 ```ts
-catmullRom(t: number, p1: number, cp1: number, cp2: number, p2: number): number;
+getQuery(property: string): string | null;
 ```
 
-##### modAbs(value, length)
+##### setQuery(property)
 
-Modulo absolute a value based on a length.
+Set a query parameter.
 
-- `value`: Value to modulate.
-- `length`: Total length.
+- `property`: Query property to set.
+- `value`: Value to set.
 
 ```ts
-modAbs(value: number, length: number): number;
+setQuery(property: string, value: string): void;
 ```
 
-##### pingPong(value, length)
+##### hasQuery(property)
 
-Move back and forth a value between 0 and length, so that it is never larger than length and never smaller than 0.
+Check if a query parameter exists.
 
-- `value`: Value to modulate.
-- `length`: Total length.
+- `property`: Query property to check.
 
 ```ts
-pingPong(value: number, length: number): number;
+hasQuery(property: string): boolean;
 ```
 
-##### smoothstep(value, min, max)
+### DOM <a id="dom-functions"></a>
 
-Smooth a value using cubic Hermite interpolation.
+##### closest(element, selector)
 
-- `value`: Value to smooth.
-- `[min=0]`: Minimum boundary.
-- `[max=1]`: Maximum boundary.
+Find the closest parent that matches a selector.
+
+- `element`: Target element.
+- `selector`: Selector or parent to match.
 
 ```ts
-smoothstep(value: number, min?: number, max?: number): number;
+closest(element: Element | null, selector: Element | string): Element | null;
 ```
 
-##### parabola(x, power)
+##### createCanvas(width, height)
 
-Re-map the [0, 1] interval into [0, 1] parabola, such that corners are remaped to 0 and the center to 1.
+Create a canvas and 2d context.
 
-- `x`: Normalized coordinate on X axis.
-- `[power=1]`: Parabola power.
+- `width`: Width of the canvas.
+- `height`: Height of the canvas.
 
 ```ts
-parabola(x: number, power?: number): number;
+createCanvas(width: number, height: number): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D };
 ```
 
-##### sum(array)
+##### injectStyles(styles)
 
-Return the sum of numbers.
+Inject CSS styles in `document.head`.
 
-- `array`: Array of numbers.
+- `styles`: CSS styles to inject.
 
 ```ts
-sum(array: number[]): number;
+injectStyles(styles: string): void;
 ```
 
-##### average(array)
+### Files <a id="files-functions"></a>
 
-Return the average of numbers.
+##### download(blob, filename)
 
-- `array`: Array of numbers.
+Download a Blob object into user files.
+
+- `blob`: Blob object to download.
+- `filename`: Downloaded file name.
 
 ```ts
-average(array: number[]): number;
+download(blob: Blob, filename: string): void;
 ```
 
-##### damp(value, target, damping, delta)
+##### upload(onLoad)
 
-Smoothly interpolate a number toward another.
+Upload a file from user files.
 
-- `value`: Value to interpolate.
-- `target`: Destination of the interpolation.
-- `damping`: A higher value will make the movement more sudden, and a lower value will make the movement more gradual.
-- `delta`: Delta time (in seconds).
+- `onLoad`: Callback called once the file is loaded.
+- `[accept='']` MIME type the file input should accept.
 
 ```ts
-damp(value: number, target: number, damping: number, delta: number): number;
+upload(onLoad: (dataUrl: string) => void, accept?: string): void;
 ```
 
-### Random
+### Random <a id="random-functions"></a>
 
 ##### randomBoolean(probability)
 
@@ -842,7 +1002,7 @@ Produce a random 3D point inside a sphere.
 insideSphere(radius?: number): [number, number, number];
 ```
 
-### Pseudo-Random Number Generator (PRNG)
+### Pseudo-Random Number Generator (PRNG) <a id="prng-functions"></a>
 
 #### PRNG Algorithms
 
@@ -902,7 +1062,7 @@ xoshiro128ss(a: number, b: number, c: number, d: number): number;
 
 Thanks to the above algorithms, a seed-based version of most of the [random functions](#random) exist with additionnal parameters for a `seed` string and a PRNG `algorithm` function.
 
-PRNG parameters:
+PRNG parameters: <a id="prng-parameters"></a>
 
 ```ts
 type PRNGParameters = string | { seed: string; algorithm: (...args: number[]) => number };
@@ -912,7 +1072,7 @@ type PRNGParameters = string | { seed: string; algorithm: (...args: number[]) =>
 
 Generate a pseudo-random number in the interval [0, 1]. It is the PRNG equivalent of `Math.random()`.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 
 ```ts
 random(prng: PRNGParameters): number;
@@ -922,7 +1082,7 @@ random(prng: PRNGParameters): number;
 
 Generate a pseudo-random boolean (true or false).
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `[probability=0.5]`: Probability to get true.
 
 ```ts
@@ -933,7 +1093,7 @@ randomBoolean(prng: PRNGParameters, probability?: number): boolean;
 
 Generate a pseudo-random sign (1 or -1).
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `[probability=0.5]`: Probability to get 1.
 
 ```ts
@@ -944,7 +1104,7 @@ randomSign(prng: PRNGParameters, probability?: number): number;
 
 Generate a pseudo-random floating-point number within a specified range.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `[min=0]`: Minimum boundary.
 - `[max=1]`: Maximum boundary.
 - `[precision=2]`: Number of digits after the decimal point.
@@ -957,7 +1117,7 @@ randomFloat(prng: PRNGParameters, min?: number, max?: number, precision?: number
 
 Generate a pseudo-random integer number within a specified range.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `min`: Minimum boundary.
 - `max`: Maximum boundary.
 
@@ -969,7 +1129,7 @@ randomInt(prng: PRNGParameters, min: number, max: number): number;
 
 Generate a pseudo-random hexadecimal color.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 
 ```ts
 randomHexColor(prng: PRNGParameters): string;
@@ -979,7 +1139,7 @@ randomHexColor(prng: PRNGParameters): string;
 
 Pick a pseudo-random item from a given array.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `array`: Array to pick the item from.
 
 ```ts
@@ -990,7 +1150,7 @@ randomItem<T>(prng: PRNGParameters, array: T[]): T | undefined;
 
 Pick a pseudo-random property value from a given object.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `object`: Object to pick the property from.
 
 ```ts
@@ -1001,7 +1161,7 @@ randomObjectProperty<T>(prng: PRNGParameters, object: Record<string, T>): T | un
 
 Select a pseudo-random index from an array of weighted items.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `weights`: Array of weights.
 
 ```ts
@@ -1012,7 +1172,7 @@ randomIndex(prng: string | object, weights: number[]): number;
 
 Generate a pseudo-random number fitting a Gaussian (normal) distribution.
 
-- `prng`: PRNG parameters.
+- `prng`: [PRNG parameters](#prng-parameters).
 - `[mean=0]`: Central value.
 - `[spread=1]`: Standard deviation.
 
@@ -1020,158 +1180,19 @@ Generate a pseudo-random number fitting a Gaussian (normal) distribution.
 randomGaussian(prng: string | object, mean?: number, spread?: number): number;
 ```
 
-### Query parameters
-
-##### getQuery(property)
-
-Get a query parameter.
-
-- `property`: Query property to check.
-
-```ts
-getQuery(property: string): string | null;
-```
-
-##### setQuery(property)
-
-Set a query parameter.
-
-- `property`: Query property to set.
-- `value`: Value to set.
-
-```ts
-setQuery(property: string, value: string): void;
-```
-
-##### hasQuery(property)
-
-Check if a query parameter exists.
-
-- `property`: Query property to check.
-
-```ts
-hasQuery(property: string): boolean;
-```
-
-### Strings
-
-#### Cases
-
-##### capitalize(string)
-
-Capitalize a string.
-
-- `string`: String to capitalize.
-
-```ts
-capitalize(string: string): string;
-```
-
-##### toKebabCase(string)
-
-Convert a string to kebab-case: 'Hello world' -> 'hello-world'.
-
-- `string`: String to convert.
-
-```ts
-toKebabCase(string: string): string;
-```
-
-##### toSnakeCase(string)
-
-Convert a string to snake_case: 'Hello world' -> 'hello_world'.
-
-- `string`: String to convert.
-
-```ts
-toSnakeCase(string: string): string;
-```
-
-##### toCamelCase(string)
-
-Convert a string to camelCase: 'Hello world' -> 'helloWorld'.
-
-- `string`: String to convert.
-
-```ts
-toCamelCase(string: string): string;
-```
-
-##### toPascalCase(string)
-
-Convert a string to PascalCase: 'Hello world' -> 'HelloWorld'.
-
-- `string`: String to convert.
-
-```ts
-toPascalCase(string: string): string;
-```
-
-##### toTrainCase(string)
-
-Convert a string to Train-Case: 'Hello world' -> 'Hello-World'.
-
-- `string`: String to convert.
-
-```ts
-toTrainCase(string: string): string;
-```
-
-##### toConstantCase(string)
-
-Convert a string to CONSTANT_CASE: 'Hello world' -> 'HELLO_WORLD'.
-
-- `string`: String to convert.
-
-```ts
-toConstantCase(string: string): string;
-```
-
-#### Paths
-
-##### cleanPath(path)
-
-Clean a path by removing its parameters.
-
-- `path`: Path to clean.
-
-```ts
-cleanPath(path: string): string;
-```
-
-##### addTrailingSlash(path)
-
-Convert a path by ensuring it has a trailing slash.
-
-- `path`: Path to convert.
-
-```ts
-addTrailingSlash(path: string): string;
-```
-
-##### removeTrailingSlash(path)
-
-Convert a path by ensuring it has not a trailing slash.
-
-- `path`: Path to convert.
-
-```ts
-removeTrailingSlash(path: string): string;
-```
-
 ## Utility classes
 
-### Geometry
+### Geometry <a id="geometry-classes"></a>
 
-See Geometry documentation [here](./docs/GEOMETRY.md).
+See Geometry utility classes documentation [here](./docs/GEOMETRY.md).
 
 #### [Vector2](./docs//GEOMETRY.md#vector-2)
 
 #### [Vector3](./docs//GEOMETRY.md#vector-3)
 
-### Curves
+### Curves <a id="curves-classes"></a>
 
-See Curves documentation [here](./docs/CURVES.md).
+See Curves utility classes documentation [here](./docs/CURVES.md).
 
 #### [Curve](./docs/CURVES.md#curve)
 
@@ -1203,9 +1224,9 @@ See Curves documentation [here](./docs/CURVES.md).
 
 #### [ArcCurve](./docs/CURVES.md#arc-curve)
 
-### Paths
+### Paths <a id="paths-classes"></a>
 
-See Paths documentation [here](./docs/PATHS.md).
+See Paths utility classes documentation [here](./docs/PATHS.md).
 
 #### [Path](./docs/PATHS.md#path)
 
@@ -1213,109 +1234,15 @@ See Paths documentation [here](./docs/PATHS.md).
 
 #### [PathSVG](./docs/PATHS.md#path-svg)
 
-### Color scale
-
-Utility class for generating color scales and interpolating between colors.
-
-- [new ColorScale(input, target)](#color-scale-constructor)
-  - [.colors](#color-scale-colors): `Array<[number, number, number]>`
-  - `static` [.generate(input, target, length)](#color-scale-static-generate-method): `Array<[number, number, number]>`
-  - `static` [.interpolate(inputColor, targetColor, value)](#color-scale-static-interpolate-method): `[number, number, number]`
-
-#### Constructor <a id="color-scale-constructor"></a>
-
-| Parameter             | Type                               | Default                 | Description                                 |
-| --------------------- | ---------------------------------- | ----------------------- | ------------------------------------------- |
-| input                 | `ColorRepresentation`              |                         | Input color representation.                 |
-| target                | `ColorRepresentation`              |                         | Target color representation.                |
-| [length]              | `number`                           | `5`                     | Amount of colors composing the color scale. |
-| [settings]            | `ColorScaleSettings`               | `{ colorSpace: 'rgb' }` | Color scale generation settings.            |
-| [settings.colorSpace] | `'rgb' \| 'hsl' \| 'hsb' \| 'hcl'` | `'rgb'`                 | Color scale color space.                    |
+### Colors <a id="colors-classes"></a>
 
-##### HSL color scales
+See Colors utility classes documentation [here](./docs/COLORS.md).
 
-HSL color scales come with offsets settings, so when `settings.colorSpace` is equal to `'hsl'`, the following settings are parameterable:
+#### [Color](./docs/COLORS.md#color)
 
-| Parameter                   | Type     | Default | Description                     |
-| --------------------------- | -------- | ------- | ------------------------------- |
-| [settings.hueOffset]        | `number` | `0`     | Target color hue offset.        |
-| [settings.saturationOffset] | `number` | `0`     | Target color saturation offset. |
-| [settings.lightnessOffset]  | `number` | `0`     | Target color lightness offset.  |
+#### [ColorScale](./docs/COLORS.md#color-scale)
 
-##### HSB color scales
-
-HSB color scales come with offsets settings, so when `settings.colorSpace` is equal to `'hsb'`, the following settings are parameterable:
-
-| Parameter                   | Type     | Default | Description                     |
-| --------------------------- | -------- | ------- | ------------------------------- |
-| [settings.hueOffset]        | `number` | `0`     | Target color hue offset.        |
-| [settings.saturationOffset] | `number` | `0`     | Target color saturation offset. |
-| [settings.brightnessOffset] | `number` | `0`     | Target color brightness offset. |
-
-##### HCL color scales
-
-HCL color scales come with a bunch of other settings, so when `settings.colorSpace` is equal to `'hcl'`, the following settings are parameterable:
-
-| Parameter                  | Type                                           | Default | Description                              |
-| -------------------------- | ---------------------------------------------- | ------- | ---------------------------------------- |
-| [settings.mode]            | `'qualitative' \| 'sequential' \| 'diverging'` |         | Color scale mode.                        |
-| [settings.triangular]      | `number`                                       |         | Triangular interpolation `target` value. |
-| [settings.powerStrength]   | `number`                                       | `1`     | Interpolation power strength value.      |
-| [settings.hueOffset]       | `number`                                       | `0`     | Target color hue offset.                 |
-| [settings.chromaOffset]    | `number`                                       | `0`     | Target color chroma offset.              |
-| [settings.luminanceOffset] | `number`                                       | `0`     | Target color luminance offset.           |
-
-Learn more about [HCL-Based Color Palettes](https://colorspace.r-forge.r-project.org/articles/hcl_palettes.html).
-
-#### Properties
-
-##### colors <a id="color-scale-colors"></a>
-
-Array of colors composing the color scale.
-
-```ts
-ColorScale.colors: Array<[number, number, number]>;
-```
-
-#### Methods
-
-##### `static` generate(input, target, length) <a id="color-scale-static-generate-method"></a>
-
-Generate a color scale.
-
-- `input`: Input color representation.
-- `target`: Target color representation.
-- `length`: Amount of colors composing the color scale.
-- `[settings]`: Color scale generation settings.
-
-```ts
-static ColorScale.generate(
-  input: ColorRepresentation,
-  target: ColorRepresentation,
-  length: number,
-  settings?: ColorScaleSettings
-): Array<[number, number, number]>;
-```
-
-##### `static` interpolate(inputColor, targetColor, value) <a id="color-scale-static-interpolate-method"></a>
-
-Interpolate between colors.
-
-- `inputColor`: Input color.
-- `targetColor`: Target color.
-- `value`: Interpolation normalized value.
-- `[settings]`: Color scale settings.
-
-```ts
-static ColorScale.interpolate(
-  inputColor: [number, number, number],
-  targetColor: [number, number, number],
-  value: number,
-  settings?: ColorScaleSettings
-): [number, number, number];
-```
-
-### Frame rate
+### Frame rate <a id="frame-rate-class"></a>
 
 Utility class for controlling FPS calls.
 
@@ -1327,7 +1254,7 @@ Utility class for controlling FPS calls.
 
 | Parameter | Type     | Default | Description             |
 | --------- | -------- | ------- | ----------------------- |
-| [fps]     | `number` | `30`    | Frame per second limit. |
+| [fps]     | `number` | `60`    | Frame per second limit. |
 
 #### Properties
 
@@ -1355,15 +1282,12 @@ FrameRate.update(): boolean;
 
 `EPSILON`
 
-### Geomery
+### Geometry
 
 `PI`
-
 `TWO_PI`
 `TAU`
-
 `HALF_PI`
-
 `QUARTER_PI`
 
 ### Colors