p5.bezier

p5.bezier is a p5.js library engineered to assist you in creating Bézier curves. It is an enhancement of the original p5.js bezier() function, extending its capabilities beyond the limitation of four control points.

Try it now on p5.js Web Editor! | Homepage

While p5.bezier is designed to integrate with p5.js, it operates independently as well. To draw a Bézier curve on canvas, you can simply use p5bezier.draw():

let p5bezier = initBezier(canvas)

p5bezier.draw([
  [85, 20],
  [10, 10],
  [90, 90],
  [15, 80],
  [20, 100],
])

What is a Bézier Curve?

A Bézier curve is a type of curve that's widely used in computer graphics, design, etc. It was named after Pierre Bézier who employed it in car design during the 1960s. Due to its smooth and continuous nature, it's ideal for creating visually pleasing shapes and textures in various design fields.

Getting Started

To use the p5.bezier library, first download the p5.bezier.min.js file and place it in your project directory. Then, include the following line in your HTML file:

<script src="p5.bezier.min.js"></script>

Alternatively, you can use the library through a content delivery network (CDN):

<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>

Once included, you will have access to the initBezier function.

NPM

You can also install the library using the package manager NPM (recommended):

npm install p5bezier

Then, import the initialization function into your project:

import initBezier from 'p5bezier'

Init for Bézier

You must initialize the Bézier drawing system with the canvas you are drawing on. Here's an example with p5.js:

function setup() {
  let c = createCanvas(100, 100)
+ let p5bezier = initBezier(c)
}

You can also pass a buffer returned by createGraphics(). In WebGL mode, supply [x, y, z] control points:

const buffer = createGraphics(300, 300, WEBGL)
const curves = initBezier(buffer)

buffer.noFill()
buffer.stroke(255)

curves.draw([
  [-100, 0, 0],
  [0, -100, 40],
  [100, 0, 0],
])
image(buffer, 0, 0)

Curves use the target canvas or buffer's current styles and transforms. Dashed curves draw only the stroke and restore the fill afterward. Raw WebGL contexts without a p5.js renderer are not supported.

Draw a Bézier Curve

The simplest way to use the library is to call p5bezier.draw() in your draw() function. You can adjust the curve's style using fill() or strokeWeight() just like other shapes.

p5bezier.draw(pointsArray [, closeType] [, smoothness]);

pointsArray

This is an array of [x, y] pairs, each representing a control point for the curve. For example, [[10, 30], [5, 100], [25, 60]].

closeType (Optional)

This is a string, either "OPEN" or "CLOSE". Use "CLOSE" to automatically close the curve. The default is "OPEN".

smoothness (Optional)

This is an integer between 1 and 5, with a default value of 3. This value determines the smoothness of the Bézier curve. Higher values mean more vertices are used, leading to a more accurate and smoother curve, but at the cost of additional computation.

Create a Bézier Object

For advanced operations, such as computing the shortest distance from a point to the curve, use the p5bezier.new() function. This method can also potentially optimize computation resources if placed within the setup() function, as vertices are calculated only once and can then be reused.

The usage of p5bezier.new() is similar to p5bezier.draw(), but it returns a Bézier Curve Object that can be stored in a variable:

const bezierObject = p5bezier.new(pointsArray [, closeType] [, smoothness]);

The call of p5bezier.new will not draw the curve on canvas automatically. To draw the curve, use .draw() as one of many functions listed below:

• .draw([dash])

  Renders the curve on the canvas.

  dash (Optional)

  Accepts an array of two numbers specifying the length of solid and broken sections of a dashed Bézier curve. For example, [10, 5] signifies a solid segment of 10px followed by a 5px break.

• .update(newPointsArray)

  Updates the positions of control points. The number of control points should remain consistent with the initial curve configuration.

• .move(x, y [, z, toDraw, dash])

  Translates the entire curve. This function does not modify the original object but instead generates and returns a new one. Hence, if you wish to update the curve using this method (which is faster than .update()), you may:

  bezierObject = bezierObject.move(6, 17, -22, false)

  By default, toDraw is set to true. However, if you wish to only update the curve without drawing it, you can set this parameter to false.

• .shortest(pointX, pointY [, pointZ])

  Requires the x and y coordinates of an external point as input. It returns an array containing the coordinates of the nearest point on the curve. For instance, to draw a line between these two points:

  pointOnCurve = bezierObject.shortest(pointX, pointY)
  line(pointX, pointY, pointOnCurve[0], pointOnCurve[1])

Examples

The examples page includes control points, freehand drawing, dashes, closest-point queries, smoothness, translated curves, and a WebGL graphics buffer. Each experiment produces a complete p5.js sketch you can copy or download as HTML. You can also save the canvas as a PNG. See Development to run it locally.

Read the API and runnable examples in Markdown, the agent index, or the homepage source. The complete reference is also present in the homepage HTML, so it is readable without JavaScript.

Projects and Demos

• Hair, a visualization.
• p5.bezier Example - Basic on CodePen.
• p5.bezier Example - Animation on CodePen.

TODOs

1. More examples
2. offset(), intersection(), and curvature()... functions for Bézier object
3. Draw B-Spline curves

Development

Use Node.js 20.9 or newer and Bun for development. The release workflow uses Node.js 24.

Install development dependencies and build the library:

bun install --frozen-lockfile
bun run build # build the library
# or
bun run start # rebuild the library as you edit the source

Build and preview the homepage from the repository root:

npm run build # build the library
npm run build:examples # build the static examples and Markdown reference
python3 -m http.server 4173
# Open http://localhost:4173/examples/
npm run test:examples

The homepage uses plain HTML, CSS, and JavaScript modules. Edit API prose in examples/index.html and runnable sketches in examples/recipes.mjs, then run npm run build:examples to regenerate the static examples and Markdown mirror. The 2D playground uses the local library bundle; the 3D experiment loads p5.js 2.3.3 on demand. Downloaded sketches load p5.js 2.3.3 and p5bezier 0.8.1 from jsDelivr.

References

• Bézier curve - Wikipedia