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.

You can think of the library in three layers:

• Style: choose how marks look with brush.set(), brush.fill(), brush.hatch(), and related state functions
• Geometry: draw lines and shapes with brush.line(), brush.rect(), brush.circle(), brush.beginShape(), and more
• Advanced control: add vector fields, custom brushes, clipping, buffers, and classes when you need them

---

Features

p5.brush.js enhances the p5.js framework with a set of tools that allow for sophisticated drawing and rendering techniques.

• Custom Configuration: Customize your drawing strokes with the ability to select different buffers and leverage a custom random number generator to introduce variability in procedural designs.
• Vector Field Integration: Direct the motion of your brush strokes with vector fields, crafting fluid, dynamic visuals within your sketches.
• Dynamic Brush System: Select from an array of brushes, each offering distinct characteristics, to create a variety of effects and textures.
• Brush and Field Management: Manage and switch between brushes and vector fields with ease, adapting to the needs of your project seamlessly.
• Extensibility: Expand the library's capabilities by integrating your own custom brushes and vector fields, tailoring the toolset to your artistic vision.
• Custom Brush Tips: Load and use your own custom brush tip assets.
• Interactive Brush Tips: Utilize pressure-sensitive brush tips for interactive drawing, adding a level of responsiveness to your canvas work.
• Hatch Patterns: Implement hatching techniques with precision control over the patterns' density and orientation, enhancing your artwork with automated detailing.
• Intuitive Spline and Curve Generation: Generate smooth and accurate curves and splines effortlessly, simplifying the process of intricate path creation.
• Watercolor Fill System: Achieve the subtle nuances of watercolor with a digital fill system designed to blend and diffuse colors in a naturally fluid way.

With p5.brush.js, your digital canvas becomes a playground for innovation and expression, where each tool is fine-tuned to complement your unique creative process.

Reference

p5.brush.js provides a comprehensive API for creating complex drawings and effects. Below are the categorized functions and classes available in the library.

Table of Functions

| Section | Functions | Section | Functions | |---|---|---|---| | Configuration | brush.load(), brush.scaleBrushes(), brush.instance() | Fill Operations | brush.fill(), brush.noFill(), brush.wash(), brush.noWash(), brush.fillBleed(), brush.fillTexture() | | Vector Fields | brush.field(), brush.noField(), brush.refreshField(), brush.listFields(), brush.addField(), brush.wiggle() | Hatch Operations | brush.hatch(), brush.noHatch(), brush.hatchStyle(), brush.mass(), brush.noMass() | | Brush Management | brush.box(), brush.add(), brush.clip(), brush.noClip() | Primitives | brush.line(), brush.flowLine(), brush.beginStroke(), brush.move(), brush.endStroke(), brush.spline(), brush.rect(), brush.circle(), brush.arc(), brush.beginShape(), brush.vertex(), brush.endShape(), brush.polygon() | | Stroke Operations | brush.set(), brush.pick(), brush.stroke(), brush.noStroke(), brush.strokeWeight() | Exposed Classes | brush.Polygon(), brush.Plot(), brush.Position() | | | | Utility Functions | upgrade notes, angle behavior |

---

_{back to table}

Configuration

This section covers functions for initializing the drawing system and configuring how the library behaves in your sketch. In particular, brush.scaleBrushes() is usually important when you use the built-in brushes.