Skip to content
ixfx

Bezier

Module Geometry.Beziers

Creating

Section titled “Creating”

Basic quadratic

Section titled “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

Section titled “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

Section titled “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

Section titled “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%

Importing

Section titled “Importing”
// Sub module
import { Beziers } from "@ixfx/geometry.js"
// Eg: Beziers.quadraticSimple();


// Whole module
import * as Geometry from "@ixfx/geometry.js"
// Eg: Geometry.Beziers.quadraticSimple();


// From bundle
import { Geometry } from "@ixfx"
// Eg: Geometry.Beziers.quadraticSimple();


// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>