# p5.brush: natural brushes and hatch fills for p5.js

> p5.brush adds pencils, charcoal, markers, watercolor fills, hatch patterns, and flow fields to p5.js sketches. It ships in a p5 build and a standalone build, and it requires p5.js 2.x for the p5 build.

**acamposuribe/p5.brush** — Unlock custom brushes, natural fill effects and intuitive hatching in p5.js

- Repository: https://github.com/acamposuribe/p5.brush
- Website: https://p5-brush.cargo.site/
- Stars: 1,138 · Forks: 72
- Language: JavaScript
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/acamposuribe-p5-brush

## What p5.brush adds to a p5.js sketch

p5.brush.js adds natural drawing tools to p5.js: pencils, charcoal, markers, watercolor fills, hatch patterns, and vector fields that bend strokes organically. It is built for generative art and high-resolution printing. The library follows p5's drawing model: first set drawing state, then draw shapes. State functions include brush.set, brush.stroke, brush.strokeWeight, brush.fill, brush.hatch, and related calls, while geometry functions include brush.line, brush.rect, brush.circle, brush.arc, brush.beginShape, and brush.polygon. Turn state back off with brush.noStroke, brush.noFill, brush.noHatch, and brush.noWash. Vector fields are optional, and if brush.field is never called shapes still draw normally.

## Two builds and when to use each

p5.brush ships in two flavors. The p5 build uses dist/p5.brush.js and requires p5.js 2.x with a WEBGL canvas. The standalone build uses dist/brush.js and requires nothing except a WebGL2 browser. In the p5 build, canvas setup is createCanvas(w, h, WEBGL), transforms use p5's push, pop, translate, rotate, and scale, angle mode follows p5's angleMode, seeding uses randomSeed and noiseSeed, frame flush is automatic, and clearing uses p5's background. In the standalone build, canvas setup is brush.createCanvas(w, h), transforms are brush.push, brush.pop, brush.translate and so on, angle mode is brush.angleMode with brush.DEGREES or brush.RADIANS, seeding is brush.seed and brush.noiseSeed, frame flush requires brush.render at the end of each frame, and clearing uses brush.clear with an optional color. The README covers the p5 build, and the standalone build is documented in docs/standalone.md.

## Installing p5.brush and drawing a first sketch

Important note: p5.brush requires p5.js 2.x or higher. For a local install, add p5.min.js and p5.brush.js to your HTML in that order.

```html
<script src="path_to/p5.min.js"></script>
<script src="path_to/p5.brush.js"></script>
```

Replace path_to with the actual path to the script in your project directory or the URL if you are using a CDN. For a hosted version, link to the CDN file.

```html
<!-- Online version of p5.brush -->
<script src="https://cdn.jsdelivr.net/npm/p5.brush@latest"></script>
```

For npm and other modular apps, install the package. p5.brush requires p5.js as a peer dependency for the p5 build.

```
npm install p5.brush --save
```

The package exposes two subpaths.

```js
// p5 build (default) — requires p5.js 2.x
import * as brush from 'p5.brush'

// Standalone build — no p5.js required
import * as brush from 'p5.brush/standalone'
```

In instance mode, call brush.instance(p) inside your sketch function before setup and draw. After that, all brush calls work without a p prefix.

```javascript
const sketch = (p) => {
  brush.instance(p);

  p.setup = () => {
    p.createCanvas(700, 410, p.WEBGL);
  };

  p.draw = () => {
    p.background(240);
    brush.set("HB", "#333", 1);
    brush.line(100, 100, 400, 300);
  };
};

new p5(sketch);
```

## Quick start sequence for a textured sketch

The shortest path to drawing with p5.brush is three steps: create a WEBGL canvas, pick a brush with brush.set(name, color, weight), then draw with a primitive such as brush.line, brush.rect, or brush.circle. A typical sketch calls brush.scaleBrushes first when using built-in brushes, then brush.set for the stroke, then brush.fill or brush.hatch for interior texture, then draws.

```javascript
function setup() {
  createCanvas(700, 410, WEBGL);
  background("#f6f1e8");
  brush.scaleBrushes(3);

  brush.set("HB", "#2f2a26", 1.4);
  brush.line(-220, -80, 180, 40);

  brush.fill("#d7c3a3", 120);
  brush.noStroke();
  brush.circle(120, 20, 70);

  brush.set("rotring", "#1f4b99", 0.8);
  brush.noFill();
  brush.hatch(7, 35);
  brush.rect(-140, 40, 120, 90, "center");
}
```

Most sketches only need a small subset of the API: choose a brush, maybe add fill or hatch, then draw primitives. Advanced control comes from vector fields, custom brushes, clipping, buffers, and classes.

## Feature set and what the README leaves thin

The README groups features into custom configuration, vector field integration, and a dynamic brush system. Custom configuration covers selecting different buffers and using a custom random number generator to introduce variability in procedural designs. Vector fields direct the motion of brush strokes to craft fluid, dynamic visuals. The dynamic brush system offers an array of brushes, each with distinct characteristics. The library homepage is https://p5-brush.cargo.site/, and interactive tools include a Brush Maker at https://acamposuribe.github.io/p5.brush/tools/brush-maker.html and a Flow Field Generator at https://acamposuribe.github.io/p5.brush/tools/flowfield-maker.html. A live teaser runs in the p5.js Web Editor. The docs directory and llms.txt in the repository may hold more API details.

## Limitations and when p5.brush is the wrong tool

The p5 build requires p5.js 2.x or higher and a WEBGL canvas, so p5.js 1.x sketches or default 2D canvases are not supported. The peer dependency is p5 ^2.2. The standalone build needs a WebGL2-capable browser and manual brush.render at the end of each frame, so it is not a drop-in replacement for the p5 build. The package version is 2.2.4 while the latest listed release is v2.2.2 from 2026-08-25, so the npm version may be ahead of the tagged release history.

## Alternative approaches and transport of choice

The alternative to p5.brush is drawing with p5.js primitives and strokes alone. p5.js provides line, rect, circle, and basic stroke styling, but it does not provide the brush textures, watercolor fills, hatch patterns, or flow fields that p5.brush adds. If you only need clean vector output, p5.js primitives are simpler and avoid the WEBGL requirement. If you need textured, print-ready marks, p5.brush is the layer that adds them. The standalone build is the alternative when p5.js is not available: it drops the p5 dependency but requires WebGL2 and explicit frame flushing.

## Maintenance status and licence implications

The repository is not archived and its last push was on 2026-10-10. Recent releases are v2.2.2 on 2026-08-25, v2.2.1 on 2026-07-12, and v2.1.0-beta on 2026-03-19, while package.json reports version 2.2.4. The license is MIT. The package has one runtime dependency, simplex-noise ^4.0.3, and dev dependencies for rollup and playwright-chromium. The test script runs npm run build then npm run test:smoke using node test/e2e/smoke.mjs. Upgrade cost is mostly pinning: check that the CDN or npm version matches the release you tested against, and rebuild with rollup --config if you modify src.

## Verdict: who should adopt p5.brush

Adopt p5.brush if you are building generative art or high-resolution print output in p5.js 2.x and want textured strokes and fills. Do not adopt it if you need a stable p5.js 1.x workflow or only plain vector strokes. Verify first that your canvas uses WEBGL, that p5.js 2.2 or newer is installed as a peer dependency, and that the version 2.2.4 release matches your CDN or npm pin.

## Conclusion

Adopt p5.brush if you are building generative art or high-resolution print output in p5.js 2.x and want textured strokes and fills. Do not adopt it if you need a stable p5.js 1.x workflow or only plain vector strokes. Verify first that your canvas uses WEBGL, that p5.js 2.2 or newer is installed as a peer dependency, and that the version 2.2.4 release matches your CDN or npm pin.

## FAQ

### What is p5.brush used for?

p5.brush adds natural drawing tools such as pencils, charcoal, markers, watercolor fills, hatch patterns, and flow fields to p5.js sketches for generative art and high-resolution printing.

### How do I install p5.brush?

Add p5.min.js and p5.brush.js to your HTML in order, use the jsDelivr CDN link, or run npm install p5.brush --save, then import the p5 or standalone subpath that matches your build.

### Does p5.brush work with p5.js 1.x?

No. The README states that p5.brush requires p5.js 2.x or higher, and the p5 build needs a WEBGL canvas.

## Sources

- [acamposuribe/p5.brush on GitHub](https://github.com/acamposuribe/p5.brush)
- [License: MIT](https://github.com/acamposuribe/p5.brush/blob/main/LICENSE)
- [Project website](https://p5-brush.cargo.site/)
- [README](https://github.com/acamposuribe/p5.brush/blob/main/README.md)
- [Releases](https://github.com/acamposuribe/p5.brush/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/acamposuribe-p5-brush