Bezier Control Points

Calculate control points of a bezier curve, given start and end points and one or two middle points that the curve passes through

Usage

Get points for quadratic bezier curve

import { calcCtrlPoints } from "./bezierCtrlPoint.js";

var pointsToPassThrough = [
    [0, 0],
    [2,2],
    [2,3],
]

var pointsThatDefineBezier = calcCtrlPoints(pointsToPassThrough)

// console.log(pointsThatDefineBezier)
// => [[0, 0], [3, 2.5], [2, 3]]

Get points for cubic bezier curve

import { calcCtrlPoints } from "./bezierCtrlPoint.js";

pointsToPassThrough = [
    [0, 0],
    [1,2],
    [2,3],
    [4,7],
]

pointsThatDefineBezier = calcCtrlPoints(pointsToPassThrough)

// console.log(pointsThatDefineBezier)
// => [[0, 0], [1.3333333333333333, 3.8333333333333326], [1.166666666666667, 0.16666666666666696], [4, 7]]

Modify curvature

import { calcCtrlPoints } from "./bezierCtrlPoint.js";

// set second and third parameters to modify curvature

var quadraticCurveCtrlPoints = calcCtrlPoints(
    [[1, 123], [-12, 123214], [123431, 54]], // points that a curve passes through
    0.4 // parameter t to modify curvatrue : (0 <= t <= 1)
)

var cubicCurveCtrlPoints = calcCtrlPoints(
    [[1, 123], [-12, 123214], [123431, 54], [7, 0]], // points that a curve passes through
    0.2, // parameter t1 to modify curvatrue : (0 <= t1 <= 1)
    0.7 // parameter t2 to modify curvatrue : (0 <= t2 <= 1)
)

// t parameters are optional, default value is t = 0.5, t1 = .33, t2 = .66