Skip to content

Bezier

Module Geometry.Beziers

Creating

Basic quadratic

One of the simplest beziers to create is a quadratic bezier, with a start and end point along with a ‘bend’ amount. The bend amount is a bipolar value from -1 to 1, with 0 meaning no bend, ie. a straight line.

Using quadraticSimple :

// Create a bezier curve from A->B with a bend of 0.9
const start = { x: 10, y: 20 };
const end = { x: 50, y: 90 };
const bezier = Beziers.quadraticSimple(start, end, 0.9);

Quadratic

An alternative way of making a quadratic bezier is with quadratic , which takes a start and end along with a single control point.

const bezier = Beziers.quadratic(start, end, control);

Cubic

Cubic beziers, created with cubic , require four points. A start and end, along with the position of two control points.

const bezier = Beziers.cubic(start, end, controlA, controlB);

Math

interpolator computes a point along bezier path.

const bezier = Beziers.quadraticSimple(start, end, 0.9);
const fn = Beziers.interpolator(bezier);
fn(0.5); // Get point at 50%