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.9const start = { x: 10, y: 20 };const end = { x: 50, y: 90 };const bezier = Beziers.quadraticSimple(start, end, 0.9);
Simple bezier playground
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);
Quadratic bezier playground
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);
Cubic bezier playground
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%