@brendangooch/bezier

bezier

a typescript class representing a bezier curve

With the QuadraticBezier class you can set 3 control points (start, control, end) and retrieve the any point on the bezier at any given t value between (and beyond) 0 - 1.

You can retrieve a rough approximation of the curve length and move to a distance on the curve rather than a t value.

Additionally, you can set the control point by angle (in radians) and distance from the start point or make the curve a straight line by calling makeStraight().

Finally, you can also retrive a unit vector that is tangent to the curve at any given t value

// basic usage
const bezier = new QuadraticBezier();
bezier.setStart(100, 800);
bezier.setEnd(800, 800);
bezier.setControl(550, 100);

// retriece the point 10% along the curve
bezier.setT(0.1);
const x = bezier.x;
const y = bezier.y;

// retrieve the tangent vector of the curve at 10%
const tangent = bezier.tangent

// move along the curve by distance instead of t for more accurate traversal
bezier.refreshLookup();

// get total length
const length = bezier.length;

// move 500 units along the curve
bezier.setDistance(500);
const x = bezier.x;
const y = bezier.y;

// set control point as an angle and distance away from the start point
bezier.setStart(100, 800);
bezier.setEnd(800, 800);
bezier.setControlByAngleDistance(Math.PI / 2, 500); // 90 degress, 500 units away

// make the bezier a straight line (much more efficient to use a Vector)
bezier.setStart(100, 800);
bezier.setEnd(800, 800);
bezier.makeStraight();