# p5bezier

> Bezier curves for canvas graphics on the web, built to work with p5.js

Latest version **0.8.1** (published 2026-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install p5bezier
pnpm add p5bezier
yarn add p5bezier
bun add p5bezier
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.8.1 |
| Published | 2026-09-13 |
| First published | 2020-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 51.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 57 |
| Author | Peiling Jiang |
| Maintainers | goodjpl |
| Keywords | p5.js, Bezier, Computer Graphics |

## Links

- npm: https://www.npmjs.com/package/p5bezier
- Repository: https://github.com/peilingjiang/p5.bezier
- Homepage: https://bezier.jiang.pl/
- Issues: https://github.com/peilingjiang/p5.bezier/issues
- npm.io page: https://npm.io/package/p5bezier

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.8.1 (latest) — 2026-09-13
- 0.8.0 — 2026-09-13
- 0.7.1 — 2024-09-25
- 0.7.0 — 2024-08-21
- 0.6.0 — 2023-12-21
- 0.5.1 — 2023-07-04
- 0.5.0 — 2023-05-20
- 0.3.3 — 2023-01-29
- 0.3.2 — 2022-07-22
- 0.3.0 — 2022-04-02
- 0.2.8 — 2022-02-24
- 0.2.7 — 2021-07-09
- 0.2.6 — 2021-05-01
- 0.2.5 — 2021-04-15
- 0.2.4 — 2020-10-13
- … 11 more at https://npm.io/package/p5bezier/versions

## README

# p5.bezier

![cover](img/cover.jpg)

[![npm version](https://img.shields.io/npm/v/p5bezier.svg?style=flat-square)](https://npmjs.org/package/p5bezier)
[![GitHub license](https://img.shields.io/github/license/peilingjiang/p5.bezier?style=flat-square)](https://github.com/peilingjiang/p5.bezier/blob/main/LICENSE)
[![](https://data.jsdelivr.com/v1/package/npm/p5bezier/badge)](https://www.jsdelivr.com/package/npm/p5bezier)

**p5.bezier** is a [p5.js](https://p5js.org) 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!**](https://editor.p5js.org/peilingjiang/sketches/7Z2pRG-TB) -->

[**Try it now on p5.js Web Editor!**](https://editor.p5js.org/peilingjiang/sketches/mVXzWEJbT) | [**Homepage**](https://bezier.jiang.pl)

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()`:

```js
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](https://raw.githubusercontent.com/peilingjiang/p5.bezier/main/lib/p5.bezier.min.js) file and place it in your project directory. Then, include the following line in your HTML file:

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

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

```HTML
<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:

```js
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:

```diff
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:

```js
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:

  ```js
  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:

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

## Examples

The [examples page](https://bezier.jiang.pl/) 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](#development) to run it locally.

Read the [API and runnable examples in Markdown](https://bezier.jiang.pl/reference.md), the [agent index](https://bezier.jiang.pl/llms.txt), or the [homepage source](examples/). The complete reference is also present in the homepage HTML, so it is readable without JavaScript.

### Projects and Demos

- [**Hair**](https://github.com/peilingjiang/hair), a visualization.
- _p5.bezier Example - Basic_ on [CodePen](https://codepen.io/peilingjiang/pen/ZEOLVPx).
- _p5.bezier Example - Animation_ on [CodePen](https://codepen.io/peilingjiang/pen/eYMRJax).

## 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:

```sh
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:

```sh
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](https://en.wikipedia.org/wiki/B%C3%A9zier_curve)

---
_Source: https://npm.io/package/p5bezier · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._