p5.brush.js

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's built for generative art and high-resolution printing.

Visit the library website here! (more examples soon)

🖌️ Try the interactive Brush Maker →
Design custom brushes with live preview and generate ready-to-paste brush.add() code.

🌊 Try the interactive Flow Field Generator → Design custom vector fields with live preview and generate ready-to-paste brush.addField() code.

▶️ Check the teaser live → Live on the p5.js Web Editor, where you can read and edit code.

Two builds

p5.brush ships in two flavors:

	p5 build	Standalone build
File	dist/p5.brush.js	dist/brush.js
Requires	p5.js 2.x + WEBGL canvas	Nothing — WebGL2 browser only
Canvas setup	createCanvas(w, h, WEBGL)	brush.createCanvas(w, h)
Transforms	p5's push/pop, translate, rotate, scale	brush.push/pop, brush.translate, etc.
Angle mode	Follows p5's angleMode()	brush.angleMode(brush.DEGREES | brush.RADIANS)
Seeding	randomSeed() / noiseSeed()	brush.seed() / brush.noiseSeed()
Frame flush	Automatic	brush.render() at end of each frame
Clear	p5's background()	brush.clear(color?)

This README covers the p5 build. For the standalone build see docs/standalone.md.

---

Table of Contents

• Installation
• Quick Start
• Core Concepts in 1 Minute
• Features
• Reference
• Examples
• Contributing
• License
• Acknowledgements

Installation

Important note: p5.brush requires p5.js 2.x or higher.

Local Installation

To set up your project, add p5.min.js and p5.brush.js to your HTML file. You can download the latest version of the p5.brush.js library in the dist folder. Place the script tags in the following order:

<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.

Use a hosted version of the p5.brush.js library

Alternatively, you can link to a p5.brush.js file hosted online. All versions are stored in a CDN (Content Delivery Network). You can find a history of these versions in the p5.js CDN. In this case you can change the link to:

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

Install with NPM and other modular-based apps

Install the npm package. p5.brush requires p5.js as a peer dependency for the p5 build.

npm install p5.brush --save

The package exposes two subpaths — pick the one that matches your build:

// 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'

If you are using p5 and p5.brush as modules, you will need to use instance mode. Read below.

Note for p5 instance mode

In instance mode, p5 functions are scoped to a variable instead of the global namespace — useful when mixing with other libraries or using p5 as an ES module.

Call brush.instance(p) inside your sketch function before setup and draw. After that, all brush.* calls work normally without any p. prefix.

const sketch = (p) => {
  // Tell p5.brush which p5 instance to use
  brush.instance(p);

  p.setup = () => {
    // Canvas must be in WEBGL mode — brush initializes automatically
    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

If you already know the basics of p5, this is the shortest path to drawing with p5.brush:

1. Create a WEBGL canvas.
2. Pick a brush with brush.set(name, color, weight).
3. Draw with a primitive like brush.line(), brush.rect(), or brush.circle().

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");
}

If you are new to the library, a good first sequence is:

• brush.scaleBrushes(...) if you are using built-in brushes
• brush.set(...) to choose the stroke brush
• brush.fill(...) or brush.hatch(...) if you want interior texture
• brush.line(), brush.rect(), brush.circle(), or brush.polygon() to draw

Core Concepts in 1 Minute

• p5.brush follows p5's drawing model: first you set drawing state, then you draw shapes.
• brush.set(), brush.stroke(), brush.strokeWeight(), brush.fill(), brush.hatch(), and related functions configure how upcoming shapes should look.
• brush.line(), brush.rect(), brush.circle(), brush.arc(), brush.beginShape(), and brush.polygon() actually draw geometry.
• brush.noStroke(), brush.noFill(), brush.noHatch(), and brush.noWash() turn parts of that state back off.
• Vector fields are optional. If you never call brush.field(...), your shapes still draw normally.
• Most sketches only need a small subset of the API: choose a brush, maybe add fill or hatch, then draw primitives.

This is the beginning of the README. Read the rest at the original. Read the full README ↗