toosoon-utils 4.0.6 → 4.1.0

package/README.md

@@ -378,8 +378,8 @@ angle(x1: number, y1: number, x2: number, y2: number): number;
 
 Find the closest angle between to angles.
 
-- `source`: Source angle in radians.
-- `target`: Target angle in radians.
+- `source`: Source angle (in radians).
+- `target`: Target angle (in radians).
 
 ```ts
 closestAngle(source: number, target: number): number;
@@ -419,172 +419,192 @@ Convert radians to a 3D point on the surface of a unit sphere.
 - `[target]`: Target vector.
 
 ```ts
-radToSphere(radius: number, phi: number, theta: number, target?: Vector3): Vector3;
+radToSphere(radius: number, phi: number, theta: number, target?: [number, number, number]): [number, number, number];
 ```
 
 #### Curves
 
-##### cubicBezier(t, x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2)
+##### line(t, x1, y1, x2, y2)
 
-Interpolate a point on an elliptical arc Cubic Bézier curve.
+Interpolate a point on line.
 
 - `t`: Normalized time value to interpolate.
 - `x1`: X-axis coordinate of the start point.
 - `y1`: Y-axis coordinate of the start point.
-- `cpx1`: X-axis coordinate of the first control point.
-- `cpy1`: Y-axis coordinate of the first control point.
-- `cpx2`: X-axis coordinate of the second control point.
-- `cpy2`: Y-axis coordinate of the second control point.
 - `x2`: X-axis coordinate of the end point.
 - `y2`: Y-axis coordinate of the end point.
 
 ```ts
-cubicBezier(
+line(
   t: number,
   x1: number,
   y1: number,
-  cpx1: number,
-  cpy1: number,
-  cpx2: number,
-  cpy2: number,
   x2: number,
   y2: number
 ): [number, number];
 ```
 
-##### computeCubicBezierCurvature(x1, y1, cpx, cpy, x2, y2)
+##### quadraticBezier(t, x1, y1, cpx, cpy, x2, y2)
 
-Compute the curvature of a Cubic Bézier curve.
+Interpolate a point on Quadratic Bézier curve.
 
+- `t`: Normalized time value to interpolate.
 - `x1`: X-axis coordinate of the start point.
 - `y1`: Y-axis coordinate of the start point.
-- `cpx1`: X-axis coordinate of the first control point.
-- `cpy1`: Y-axis coordinate of the first control point.
-- `cpx2`: X-axis coordinate of the second control point.
-- `cpy2`: Y-axis coordinate of the second control point.
+- `cpx`: X-axis coordinate of the control point.
+- `cpy`: Y-axis coordinate of the control point.
 - `x2`: X-axis coordinate of the end point.
 - `y2`: Y-axis coordinate of the end point.
 
 ```ts
-computeCubicBezierCurvature(
+quadraticBezier(
+  t: number,
   x1: number,
   y1: number,
-  cpx1: number,
-  cpy1: number,
-  cpx2: number,
-  cpy2: number,
+  cpx: number,
+  cpy: number,
   x2: number,
   y2: number
-): number;
+): [number, number];
 ```
 
-##### quadraticBezier(t, x1, y1, cpx, cpy, x2, y2)
+##### cubicBezier(t, x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2)
 
-Interpolate a point on an elliptical arc Quadratic Bézier curve.
+Interpolate a point on Cubic Bézier curve.
 
 - `t`: Normalized time value to interpolate.
 - `x1`: X-axis coordinate of the start point.
 - `y1`: Y-axis coordinate of the start point.
-- `cpx`: X-axis coordinate of the control point.
-- `cpy`: Y-axis coordinate of the control point.
+- `cp1x`: X-axis coordinate of the first control point.
+- `cp1y`: Y-axis coordinate of the first control point.
+- `cp2x`: X-axis coordinate of the second control point.
+- `cp2y`: Y-axis coordinate of the second control point.
 - `x2`: X-axis coordinate of the end point.
 - `y2`: Y-axis coordinate of the end point.
 
 ```ts
-quadraticBezier(
+cubicBezier(
   t: number,
   x1: number,
   y1: number,
-  cpx: number,
-  cpy: number,
+  cp1x: number,
+  cp1y: number,
+  cp2x: number,
+  cp2y: number,
   x2: number,
   y2: number
 ): [number, number];
 ```
 
-##### computeQuadraticBezierCurvature(x1, y1, cpx, cpy, x2, y2)
+##### catmullRom(t, x1, y1, cp1x, cpy1, cp2x, cp2y, x2, y2)
 
-Compute the curvature of a Quadratic Bézier curve.
+Interpolate a point on a Catmull-Rom spline.
 
+- `t`: Normalized time value to interpolate.
 - `x1`: X-axis coordinate of the start point.
 - `y1`: Y-axis coordinate of the start point.
-- `cpx`: X-axis coordinate of the control point.
-- `cpy`: Y-axis coordinate of the control point.
+- `cp1x`: X-axis coordinate of the first control point.
+- `cp1y`: Y-axis coordinate of the first control point.
+- `cp2x`: X-axis coordinate of the second control point.
+- `cp2y`: Y-axis coordinate of the second control point.
 - `x2`: X-axis coordinate of the end point.
 - `y2`: Y-axis coordinate of the end point.
 
 ```ts
-computeQuadraticBezierCurvature(
+catmullRom(
+  t: number,
   x1: number,
   y1: number,
-  cpx: number,
-  cpy: number,
+  cp1x: number,
+  cp1y: number,
+  cp2x: number,
+  cp2y: number,
   x2: number,
   y2: number
-): number;
+): [number, number];
 ```
 
-##### arc(t, x1, y1, x2, y2, rx, ry, angle, largeArc, clockwise)
+##### ellipse(t, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)
 
 Interpolate a point on an elliptical arc.
 
 - `t`: Normalized time value to interpolate.
-- `x1`: X-axis coordinate of the starting point of the arc.
-- `y1`: Y-axis coordinate of the starting point of the arc.
-- `x2`: X-axis coordinate of the ending point of the arc.
-- `y2`: Y-axis coordinate of the ending point of the arc.
+- `cx`: X-axis coordinate of the center of the ellipse.
+- `cy`: Y-axis coordinate of the center of the ellipse.
 - `rx`: X-radius of the ellipse.
 - `ry`: Y-radius of the ellipse.
-- `angle`: Rotation angle of the ellipse (in radians).
-- `[largeArc]`: Flag indicating whether to draw the larger of the two possible arcs.
-- `[clockwise]`: Flag indicating the direction of the arc.
+- `[rotation=0]`: Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis.
+- `[startAngle=0]`: Start angle of the arc (in radians).
+- `[endAngle=TWO_PI]`: Rotation angle of the arc (in radians).
+- `[counterclockwise=false]`: Flag indicating the direction of the arc.
 
 ```ts
-arc(
+ellipse(
   t: number,
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
+  cx: number,
+  cy: number,
   rx: number,
   ry: number,
-  angle: number,
-  largeArc?: boolean,
-  clockwise?: boolean
+  rotation?: number,
+  startAngle?: number,
+  endAngle?: number,
+  counterclockwise?: boolean
 ): [number, number];
 ```
 
-##### computeArcCurvature(x1, y1, x2, y2, rx, ry, angle, largeArc, clockwise)
+##### arc(t, cx, cy, radius, startAngle, endAngle, counterclockwise)
 
-Compute the curvature of an elliptical arc.
+Interpolate a point on a circular arc.
 
-- `x1`: X-axis coordinate of the starting point of the arc.
-- `y1`: Y-axis coordinate of the starting point of the arc.
-- `x2`: X-axis coordinate of the ending point of the arc.
-- `y2`: Y-axis coordinate of the ending point of the arc.
-- `rx`: X-radius of the ellipse.
-- `ry`: Y-radius of the ellipse.
-- `angle`: Rotation angle of the ellipse (in radians).
-- `[largeArc]`: Flag indicating whether to draw the larger of the two possible arcs.
-- `[clockwise]`: Flag indicating the direction of the arc.
+- `t`: Normalized time value to interpolate.
+- `cx`: X-axis coordinate of the center of the circle.
+- `cy`: Y-axis coordinate of the center of the circle.
+- `radius`: Radius of the circle.
+- `[startAngle]`: Start angle of the arc (in radians).
+- `[endAngle]`: End angle of the arc (in radians).
+- `[counterclockwise=false]`: Flag indicating the direction of the arc.
 
 ```ts
-computeArcCurvature(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  rx: number,
-  ry: number,
-  angle: number,
-  largeArc?: boolean,
-  clockwise?: boolean
-): number;
+arc(
+  t: number,
+  cx: number,
+  cy: number,
+  radius: number,
+  startAngle?: number,
+  endAngle?: number,
+  counterclockwise?: boolean
+): [number, number];
 ```
 
-#### Fit
+##### isCoincident(x1, y1, x2, y2)
+
+Check if two points are coincident.
+
+- `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
+isCoincident(x1: number, y1: number, x2: number, y2: number): boolean;
+```
+
+##### isCollinear(x1, y1, x2, y2, x3, y3)
 
-<!--  -->
+Check if 3 points are collinear.
+
+- `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.
+- `x3`: Y-axis coordinate of the third point.
+- `y3`: Y-axis coordinate of the third point.
+
+```ts
+isCollinear(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): boolean;
+```
+
+#### Fit
 
 ```ts
 type FitInput = {
@@ -944,7 +964,7 @@ Produce a random 2D point around the perimiter of a unit circle.
 - `[target]`: Target vector.
 
 ```ts
-onCircle(radius?: number, target?: Vector2): Vector2;
+onCircle(radius?: number, target?: [number, number]): [number, number];
 ```
 
 ##### insideCircle(radius)
@@ -955,7 +975,7 @@ Produce a random 2D point inside a unit circle.
 - `[target]` Target vector.
 
 ```ts
-insideCircle(radius?: number, target?: Vector2): Vector2;
+insideCircle(radius?: number, target?: [number, number]): [number, number];
 ```
 
 ##### onSphere(radius)
@@ -966,7 +986,7 @@ Produce a random 3D point on the surface of a unit sphere.
 - `[target]`: Target vector.
 
 ```ts
-onSphere(radius?: number, target?: Vector3): Vector3;
+onSphere(radius?: number, target?: [number, number, number]): [number, number, number];
 ```
 
 ##### insideSphere(radius)
@@ -977,7 +997,7 @@ Produce a random 3D point inside a unit sphere.
 - `[target]`: Target vector.
 
 ```ts
-insideSphere(radius?: number, target?: Vector3): Vector3;
+insideSphere(radius?: number, target?: [number, number, number]): [number, number, number];
 ```
 
 ### Pseudo-Random Number Generator (PRNG)
@@ -1299,6 +1319,605 @@ removeTrailingSlash(path: string): string;
 
 ## Utility classes
 
+Utility classes for manipulating curves.
+
+### Curve <a id="curve"></a>
+
+Utility abstract class for manipulating curves.
+
+- [new Curve()](#curve)
+  - [.arcLengthDivisions](#curve-arc-length-divisions): `number`
+  - [.needsUpdate](#curve-needs-update): `boolean`
+  - [.getPoint(t)](#curve-get-point-method): `[number, number]`
+  - [.getPointAt(u)](#curve-get-point-at-method): `[number, number]`
+  - [.getPoints(divisions)](#curve-get-points-method): `Array<[number, number]>`
+  - [.getSpacedPoints(divisions)](#curve-get-spaced-points-method): `Array<[number, number]>`
+  - [.getLengths()](#curve-get-length-method): `number`
+  - [.getLengths()](#curve-get-lengths-method): `number[]`
+  - [.updateArcLengths()](#curve-update-arc-lengths-method): `void`
+  - [.getUtoTmapping(t, targetArcLength)](#curve-get-u-to-t-mapping-method): `number`
+  - [.getTangent(t)](#curve-get-tangent-method): `[number, number]`
+  - [.getTangentAt(u)](#curve-get-tangent-at-method): `[number, number]`
+  - `static` [.isClosed(points)](#curve-static-is-closed-method): `boolean`
+
+#### Properties
+
+##### arcLengthDivisions <a id="curve-arc-length-divisions"></a>
+
+Amount of divisions when calculating the cumulative segment lengths of a curve.
+
+```ts
+Curve.arcLengthDivisions: number;
+```
+
+##### needsUpdate <a id="curve-needs-update"></a>
+
+Must be set to `true` if the curve parameters have changed.
+
+```ts
+Curve.needsUpdate: boolean;
+```
+
+#### Methods
+
+##### getPoint(t) <a id="curve-get-point-method"></a>
+
+Interpolate a point on the curve.
+
+- `u`: Normalized time value to interpolate.
+
+```ts
+Curve.getPoint(t: number): [number, number];
+```
+
+##### getPointAt(u) <a id="curve-get-point-at-method"></a>
+
+Interpolate a point on the curve.
+
+- `u`: Normalized position value to interpolate.
+
+```ts
+Curve.getPointAt(u: number): [number, number];
+```
+
+##### getPoints(divisions) <a id="curve-get-points-method"></a>
+
+Compute the curve shape into an array of points.
+
+- `[divisions=5]`: Number of divisions.
+
+```ts
+Curve.getPoints(divisions?: number): Array<[number, number]>;
+```
+
+##### getSpacedPoints(divisions) <a id="curve-get-spaced-points-method"></a>
+
+Compute the curve shape into an array of equi-spaced points across the entire curve.
+
+- `[divisions=5]`: Number of divisions.
+
+```ts
+Curve.getSpacedPoints(divisions?: number): Array<[number, number]>;
+```
+
+##### getLength() <a id="curve-get-lengt-methodh"></a>
+
+Compute the total arc length of the curve.
+
+```ts
+Curve.getLength(): number;
+```
+
+##### getLengths() <a id="curve-get-lengths-method"></a>
+
+Compute the cumulative segment lengths of the curve.
+
+- `[divisions]`: Number of divisions.
+
+```ts
+Curve.getLengths(divisions?: number): number[];
+```
+
+##### updateArcLengths() <a id="curve-get-point-method"></a>
+
+Update the cached cumulative segment lengths.
+
+```ts
+Curve.updateArcLengths(): void;
+```
+
+##### getUtoTmapping(t, targetArcLength) <a id="curve-get-u-to-t)mapping-method"></a>
+
+Re-map a normalized position value into normalized time.
+
+- `u`: Normalized position value to interpolate.
+- `[targetArcLength]`: Distance on the curve.
+
+```ts
+Curve.getUtoTmapping(u: number, targetArcLength?: number): number;
+```
+
+##### getTangent(t) <a id="curve-get-tangent-method"></a>
+
+Compute an unit vector tangent for the given normalized time value.
+
+- `t`: Normalized time value.
+
+```ts
+Curve.getTangent(t: number): [number, number];
+```
+
+##### getTangentAt(u) <a id="curve-get-tangent-at-method"></a>
+
+Compute an unit vector tangent for the given normalized position value.
+
+- `u`: Normalized position value.
+
+```ts
+Curve.getTangentAt(u: number): [number, number];
+```
+
+##### `static` isClosed(points) <a id="curve-static-is-closed-method"></a>
+
+Static method to check if given points are defining a closed curve.
+
+- `points`: Points to check.
+
+```ts
+static Curve.isClosed(points: Array<[number, number]>): boolean;
+```
+
+### LineCurve <a id="line-curve"></a>
+
+Utility class for manipulating lines.
+
+[Extends Curve](#curve)
+
+- [new LineCurve(x1, y1, x2, y2)](#line-curve)
+
+| Parameter | Type     | Default | Description                           |
+| --------- | -------- | ------- | ------------------------------------- |
+| x1        | `number` |         | X-axis coordinate of the start point. |
+| y1        | `number` |         | Y-axis coordinate of the start point. |
+| x2        | `number` |         | X-axis coordinate of the end point.   |
+| y2        | `number` |         | Y-axis coordinate of the end point.   |
+
+### PolylineCurve <a id="polyline-curve"></a>
+
+Utility class for manipulating Polyline curves.
+
+[Extends Curve](#curve)
+
+- [new PolylineCurve(points)](#polyline-curve)
+
+| Parameter | Type                      | Default | Description                         |
+| --------- | ------------------------- | ------- | ----------------------------------- |
+| [points]  | `Array<[number, number]>` | `[]`    | Array of points defining the curve. |
+
+### QuadraticBezierCurve <a id="quadratic-bezier-curve"></a>
+
+Utility class for manipulating Quadratic Bézier curves.
+
+[Extends Curve](#curve)
+
+- [new QuadraticBezierCurve(x1, y1, cpx, cpy, x2, y2)](#quadratic-bezier-curve)
+
+| Parameter | Type     | Default | Description                             |
+| --------- | -------- | ------- | --------------------------------------- |
+| x1        | `number` |         | X-axis coordinate of the start point.   |
+| y1        | `number` |         | Y-axis coordinate of the start point.   |
+| cpx       | `number` |         | X-axis coordinate of the control point. |
+| cpy       | `number` |         | Y-axis coordinate of the control point. |
+| x2        | `number` |         | X-axis coordinate of the end point.     |
+| y2        | `number` |         | Y-axis coordinate of the end point.     |
+
+### CubicBezierCurve <a id="cubic-bezier-curve"></a>
+
+Utility class for manipulating Cubic Bézier curves.
+
+[Extends Curve](#curve)
+
+- [new CubicBezierCurve(x1, y1, cp1x, cp1y, cp2x, cp2y x2, y2)](#cubic-bezier-curve)
+
+| Parameter | Type     | Default | Description                                    |
+| --------- | -------- | ------- | ---------------------------------------------- |
+| x1        | `number` |         | X-axis coordinate of the start point.          |
+| y1        | `number` |         | Y-axis coordinate of the start point.          |
+| cp1x      | `number` |         | X-axis coordinate of the first control point.  |
+| cp1y      | `number` |         | Y-axis coordinate of the first control point.  |
+| cp2x      | `number` |         | X-axis coordinate of the second control point. |
+| cp2y      | `number` |         | Y-axis coordinate of the second control point. |
+| x2        | `number` |         | X-axis coordinate of the end point.            |
+| y2        | `number` |         | Y-axis coordinate of the end point.            |
+
+### CatmulRomCurve <a id="catmul-rom-curve"></a>
+
+Utility class for manipulating Catmull-Rom curves.
+
+[Extends Curve](#curve)
+
+- [new CatmulRomCurve(x1, y1, cp1x, cp1y, cp2x, cp2y x2, y2)](#catmul-rom-bezier-curve)
+
+| Parameter | Type     | Default | Description                                    |
+| --------- | -------- | ------- | ---------------------------------------------- |
+| x1        | `number` |         | X-axis coordinate of the start point.          |
+| y1        | `number` |         | Y-axis coordinate of the start point.          |
+| cp1x      | `number` |         | X-axis coordinate of the first control point.  |
+| cp1y      | `number` |         | Y-axis coordinate of the first control point.  |
+| cp2x      | `number` |         | X-axis coordinate of the second control point. |
+| cp2y      | `number` |         | Y-axis coordinate of the second control point. |
+| x2        | `number` |         | X-axis coordinate of the end point.            |
+| y2        | `number` |         | Y-axis coordinate of the end point.            |
+
+### SplineCurve <a id="spline-curve"></a>
+
+Utility class for manipulating Spline curves.
+
+[Extends Curve](#curve)
+
+- [new SplineCurve(points)](#spline-curve)
+
+| Parameter | Type                      | Default | Description                         |
+| --------- | ------------------------- | ------- | ----------------------------------- |
+| [points]  | `Array<[number, number]>` | `[]`    | Array of points defining the curve. |
+
+### EllipseCurve <a id="ellipse-curve"></a>
+
+Utility class for manipulating Ellipse curves.
+
+[Extends Curve](#curve)
+
+- [new EllipseCurve(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)](#ellipse-curve)
+
+| Parameter          | Type      | Default | Description                                                                            |
+| ------------------ | --------- | ------- | -------------------------------------------------------------------------------------- |
+| cx                 | `number`  |         | X-axis coordinate of the center of the ellipse.                                        |
+| cy                 | `number`  |         | Y-axis coordinate of the center of the ellipse.                                        |
+| rx                 | `number`  |         | X-radius of the ellipse.                                                               |
+| ry                 | `number`  |         | Y-radius of the ellipse.                                                               |
+| [rotation]         | `number`  |         | Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis. |
+| [startAngle]       | `number`  |         | Rotation angle of the arc (in radians).                                                |
+| [endAngle]         | `number`  |         | Rotation angle of the arc (in radians).                                                |
+| [counterclockwise] | `boolean` |         | Flag indicating the direction of the arc.                                              |
+
+### ArcCurve <a id="arc-curve"></a>
+
+Utility class for manipulating Arc curves.
+
+[Extends Curve](#curve)
+
+- [new ArcCurve(cx, cy, radius, startAngle, endAngle, counterclockwise)](#arc-curve)
+
+| Parameter          | Type      | Default | Description                                    |
+| ------------------ | --------- | ------- | ---------------------------------------------- |
+| cx                 | `number`  |         | X-axis coordinate of the center of the circle. |
+| cy                 | `number`  |         | Y-axis coordinate of the center of the circle. |
+| radius             | `number`  |         | X-radius of the circle.                        |
+| [startAngle]       | `number`  |         | Rotation angle of the arc (in radians).        |
+| [endAngle]         | `number`  |         | Rotation angle of the arc (in radians).        |
+| [counterclockwise] | `boolean` |         | Flag indicating the direction of the arc.      |
+
+### PathCurve <a id="path-curve"></a>
+
+Utility class for manipulating connected curves.
+
+[Extends Curve](#curve)
+
+- [new PathCurve()](#path-curve)
+  - [.curves](#path-curve-curves): `Curve[]`
+  - [.points](#path-curve-points): `Array<number, number>`
+  - [.autoClose](#path-curve-auto-close): `boolean`
+  - [.add()](#path-curve-add-method): `void`
+  - [.getCurveLengths()](#path-curve-get-curve-lengths-method): `number[]`
+  - [.closePath()](#path-curve-close-path-method): `void`
+
+#### Properties
+
+##### curves <a id="path-curve-curves"></a>
+
+Array of curves composing the path.
+
+```ts
+PathCurve.curves: Curve[];
+```
+
+##### points <a id="path-curve-points"></a>
+
+Array of points composing the path.
+
+```ts
+PathCurve.points: Array<[number, number]>;
+```
+
+##### autoClose <a id="path-curve-auto-close"></a>
+
+```ts
+PathCurve.autoClose: boolean;
+```
+
+#### Methods
+
+##### add <a id="path-curve-add-method"></a>
+
+Add a curve to this curve path.
+
+- `curve`: Curve to add.
+
+```ts
+PathCurve.add(curve: Curve): void;
+```
+
+##### getCurveLengths <a id="path-curve-get-curve-lengths-method"></a>
+
+Compute the cumulative curve lengths of the curve path.
+
+```ts
+PathCurve.getCurveLengths(): number[];
+```
+
+##### closePath <a id="path-curve-close-path-method"></a>
+
+Add a line curve to close the curve path.
+
+```ts
+PathCurve.closePath(): void;
+```
+
+### Path <a id="path"></a>
+
+Utility class for manipulating paths.
+It works by serializing 2D Canvas API to SVG path data.
+
+[Extends PathCurve](#path-curve)
+
+- [new Path()](#path)
+- [.currentPosition](#path-current-position): `[number, number]`
+- [.setFromPoints(points)](#path-set-from-points-method): `this`
+- [.moveTo(x, y)](#path-move-to-method): `this`
+- [.lineTo(x, y)](#path-line-to-method): `this`
+- [.polylineTo(points)](#path-polyline-to-method): `this`
+- [.arcTo(x1, y1, x2, y2, radius)](#path-arc-to-method): `this`
+- [.quadraticCurveTo(cpx, cpy, x2, y2)](#path-quadratic-curve-to-method): `this`
+- [.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)](#path-bezier-curve-to-method): `this`
+- [.catmulRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)](#path-catmul-rom-to-method): `this`
+- [.splineTo(points)](#path-spline-to-method): `this`
+- [.ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)](#path-ellipse-method): `this`
+- [.arc(cx, cy, radius, startAngle, endAngle, counterclockwise)](#path-arc-method): `this`
+- [.rect(x, y, width, height)](#path-rect-method): `this`
+- [.roundRect(x, y, width, height, radius)](#path-round-rect-method): `this`
+- [.closePath()](#path-close-path-method): `this`
+
+#### Properties
+
+##### currentPosition <a id="path-current-position"></a>
+
+Path current offset position.
+
+```ts
+Path.currentPosition: [number, number];
+```
+
+#### Methods
+
+##### setFromPoints(points) <a id="path-set-from-points-method"></a>
+
+Create a path from the given list of points.
+
+- `points`: Array of points defining the path.
+- `[type]`: Type of curve used for creating the path.
+
+```ts
+Path.setFromPoints(points: Array<[number, number]>, type?: 'lines' | 'polyline' | 'spline'): this;
+```
+
+##### moveTo(x, y) <a id="path-move-to-method"></a>
+
+Move `currentPosition` to the coordinates specified by `x` and `y`.
+
+- `x`: X-axis coordinate of the point.
+- `y`: Y-axis coordinate of the point.
+
+```ts
+Path.moveTo(x: number, y: number): this;
+```
+
+##### lineTo(x, y) <a id="path-line-to-method"></a>
+
+Draw a line from the current position to the position specified by `x` and `y`.
+Add an instance of [LineCurve](#line-curve) to the path.
+
+- `x`: X-axis coordinate of the point.
+- `y`: Y-axis coordinate of the point.
+
+```ts
+Path.lineTo(x: number, y: number): this;
+```
+
+##### polylineTo(points) <a id="path-polyline-to-method"></a>
+
+Draw a Polyline curve from the current position through the given points.
+Add an instance of [PolylineCurve](#polyline-curve) to the path.
+
+- `points`: Array of points defining the curve.
+
+```ts
+Path.polylineTo(points: Array<[number, number]>): this;
+```
+
+##### arcTo(x1, y1, x2, y2, radius) <a id="path-arc-to-method"></a>
+
+Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
+Add an instance of [ArcCurve](#arc-curve) to the path.
+
+- `x1`: X-axis coordinate of the first control point.
+- `y1`: Y-axis coordinate of the first control point.
+- `x2`: X-axis coordinate of the second control point.
+- `y2`: Y-axis coordinate of the second control point.
+- `radius`: Arc radius (Must be non-negative).
+
+```ts
+Path.arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+```
+
+##### quadraticCurveTo(cpx, cpy, x2, y2) <a id="path-quadratic-curve-to-method"></a>
+
+Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`.
+Add an instance of [QuadraticBezierCurve](#quadratic-bezier-curve) to the path.
+
+- `cpx`: X-axis coordinate of the control point.
+- `cpy`: Y-axis coordinate of the control point.
+- `x2`: X-axis coordinate of the end point.
+- `y2`: Y-axis coordinate of the end point.
+
+```ts
+Path.quadraticCurveTo(cpx: number, cpy: number, x2: number, y2: number): this;
+```
+
+##### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-bezier-curve-to-method"></a>
+
+Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`).
+Add an instance of [CubicBezierCurve](#cubic-bezier-curve) to the path.
+
+- `cp1x`: X-axis coordinate of the first control point.
+- `cp1y`: Y-axis coordinate of the first control point.
+- `cp2x`: X-axis coordinate of the second control point.
+- `cp2y`: Y-axis coordinate of the second control point.
+- `x2`: X-axis coordinate of the end point.
+- `y2`: Y-axis coordinate of the end point.
+
+```ts
+Path.bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
+```
+
+##### catmulRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-catmul-rom-curve-to-method"></a>
+
+Draw a Catmul-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`).
+Add an instance of [CatmullRomCurve](#catmul-rom-curve) to the path.
+
+- `cp1x`: X-axis coordinate of the first control point.
+- `cp1y`: Y-axis coordinate of the first control point.
+- `cp2x`: X-axis coordinate of the second control point.
+- `cp2y`: Y-axis coordinate of the second control point.
+- `x2`: X-axis coordinate of the end point.
+- `y2`: Y-axis coordinate of the end point.
+
+```ts
+Path.catmulRomCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
+```
+
+##### splineTo(points) <a id="path-spline-to-method"></a>
+
+Draw a Spline curve from the current position through the given points.
+Add an instance of [SplineCurve](#spline-curve) to the path.
+
+- `points`: Array of points defining the curve.
+
+```ts
+Path.splineTo(points: Array<[number, number]>): this;
+```
+
+##### ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) <a id="path-ellipse-method"></a>
+
+Draw an Ellispe curve which is centered at (`cx`, `cy`) position.
+Add an instance of [EllipseCurve](#ellipse-curve) to the path.
+
+- `cx`: X-axis coordinate of the center of the ellipse.
+- `cy`: Y-axis coordinate of the center of the ellipse.
+- `rx`: X-radius of the ellipse.
+- `ry`: Y-radius of the ellipse.
+- `[rotation]`: Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis.
+- `[startAngle]`: Start angle of the arc (in radians).
+- `[endAngle]`: End angle of the arc (in radians).
+- `[counterclockwise]`: Flag indicating the direction of the arc.
+
+```ts
+Path.ellipse(cx: number, cy: number, rx: number, ry: number, rotation?: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
+```
+
+##### arc(cx, cy, radius, startAngle, endAngle, counterclockwise) <a id="path-arc-method"></a>
+
+Draw an Arc curve which is centered at (`cx`, `cy`) position.
+Add an instance of [ArcCurve](#arc-curve) to the path.
+
+- `cx`: X-axis coordinate of the center of the circle.
+- `cy`: Y-axis coordinate of the center of the circle.
+- `radius`: Radius of the circle.
+- `[startAngle]`: Start angle of the arc (in radians).
+- `[endAngle]`: End angle of the arc (in radians).
+- `[counterclockwise]`: Flag indicating the direction of the arc.
+
+```ts
+Path.arc(cx: number, cy: number, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
+```
+
+##### rect(x, y, width, height) <a id="path-rect-method"></a>
+
+Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`.
+Add an instance of [PolylineCurve](#polyline-curve) to the path.
+
+- `x`: X-axis coordinate of the rectangle starting point.
+- `y`: Y-axis coordinate of the rectangle starting point.
+- `width`: Rectangle width (Positive values are to the right and negative to the left).
+- `height`: Rectangle height (Positive values are down, and negative are up).
+
+```ts
+Path.rect(x: number, y: number, width: number, height: number): this;
+```
+
+##### roundRect(x, y, width, height, radius) <a id="path-round-rect-method"></a>
+
+Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`.
+
+- `x`: X-axis coordinate of the rectangle starting point.
+- `y`: Y-axis coordinate of the rectangle starting point.
+- `width`: Rectangle width (Positive values are to the right and negative to the left).
+- `height`: Rectangle height (Positive values are down, and negative are up).
+- `radius`: Radius of the circular arc to be used for the corners of the rectangle.
+
+```ts
+Path.roundRect(x: number, y: number, width: number, height: number, radius: number | number[]): this;
+```
+
+##### closePath() <a id="path-close-path-method"></a>
+
+Add a line curve to close the curve path.
+Add an instance of [LineCurve](#line-curve) to the path.
+
+```ts
+Path.closePath(): this;
+```
+
+### PathSVG <a id="path-svg"></a>
+
+Utility class for manipulating paths and generating SVG path.
+It works by serializing 2D Canvas API to SVG path data.
+
+[Extends Path](#path)
+
+- [new PathSVG()](#path-svg-constructor)
+  - [.curveResolution](#path-svg-curve-resolution): `number`
+  - [.toString()](#path-svg-to-string-method): `string`
+
+#### Properties
+
+##### curveResolution <a id="path-svg-curve-resolution"></a>
+
+Resolution used for Catmul-Rom curve and Spline curve approximations.
+
+```ts
+PathSVG.curveResolution: number;
+```
+
+#### Methods
+
+##### toString() <a id="path-svg-to-string-method"></a>
+
+Return SVG path data string.
+
+```ts
+PathSVG.toString(): string;
+```
+
 ### Color scale
 
 Utility class for generating color scales and interpolating between colors.
@@ -1314,8 +1933,8 @@ Utility class for generating color scales and interpolating between colors.
 | --------------------- | ---------------------------------- | ----------------------- | ------------------------------------------- |
 | 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.            |
+| [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.                    |
 
 ##### HSL color scales
@@ -1413,7 +2032,7 @@ Utility class for controlling FPS calls.
 
 | Parameter | Type     | Default | Description             |
 | --------- | -------- | ------- | ----------------------- |
-| fps       | `number` | `30`    | Frame per second limit. |
+| [fps]     | `number` | `30`    | Frame per second limit. |
 
 #### Properties
 
@@ -1437,16 +2056,25 @@ FrameRate.update(): boolean;
 
 ## Constants
 
+### Maths
+
 `EPSILON`
 
+### Geomery
+
 `PI`
 
 `TWO_PI`
+`TAU`
 
 `HALF_PI`
 
 `QUARTER_PI`
 
+`TAU_EPSILON`
+
+### Colors
+
 `W3CX11`
 
 ## License