p5.brush.js

p5.brush.js is a versatile library for the p5.js ecosystem, tailored for artists, designers, and hobbyists who wish to explore natural textures in generative art. This library extends the drawing capabilities of p5.js by introducing a rich set of tools that allow for the creation of dynamic and customizable brushes, vector-fields, and fill modes.

With p5.brush.js, you can easily configure and manage intricate drawing systems, inject life into your sketches with organic movements, and apply complex vector fields to control the flow and form of strokes. The library is designed with texture quality in mind, and may only be suitable for high-resolution artworks, not real-time interactive pieces.

Whether you're looking to simulate natural media, create patterned backgrounds, or design intricate particle systems, p5.brush.js offers the functionalities to turn your vision into reality. The API is straightforward and modular, providing both high-level functions for quick setup and in-depth customization options for advanced users.

Embrace the full potential of your creative coding projects with p5.brush.js, where every stroke is a brush with possibility.

Visit the library website here! (more examples soon)

Table of Contents

• Installation
• Features
• Reference
• Examples
• Contributing
• License
• Acknowledgements

Installation

Local Installation

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

<script src="https://github.com/acamposuribe/p5.brush/raw/v.1.1.4/path_to/p5.min.js"></script>
<script src="https://github.com/acamposuribe/p5.brush/raw/v.1.1.4/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:

<script src="https://cdn.jsdelivr.net/npm/p5.brush@1.1.1/dist/p5.brush.js"></script>

Install with NPM and other modular-based apps

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

npm install p5.brush --save

After that, import p5.brush functions to your sketch:

import * as brush from 'p5.brush'

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

Note for p5 instance mode

By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called "instance mode". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace.

If you plan to use p5 instance mode, you need to load p5.brush in a specific way:

• Use brush.instance() before the setup and draw functions, pointing to your sketch id and the p5 function argument

Example:

```javascript let sketch = function(p) { let x = 100; let y = 100;

// Register instance method here, sending your function arg p
brush.instance(p)

p.setup = function() {
  // Important to create the canvas in WEBGL mode
  p.createCanvas(700, 410, p.WEBGL);
  // Don't forget to load the library after canvas is created
  brush.load()
};

p.draw = function() {
  p.background(0);
  brush.fill("red", 75);
  brush.rect(x, y, 50, 50);
};

};

let myp5 = new p5(sketch); ```

---

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
Utility	brush.push()		Hatch Operations	brush.hatch()
	brush.pop()			brush.noHatch()
	brush.rotate()			brush.setHatch()
	brush.scale()		Geometry	brush.line()
	brush.reDraw()			brush.flowLine()
	brush.reBlend()			brush.beginStroke()
Vector-Fields	brush.field()			brush.segment()
	brush.noField()			brush.endStroke()
	brush.refreshField()			brush.spline()
	brush.listFields()			brush.plot()
	brush.addField()			brush.rect()
Brush Management	brush.box()			brush.circle()
	brush.add()			brush.beginShape()
	brush.clip()			brush.vertex()
	brush.noClip()			brush.endShape()
Stroke Operations	brush.set()			brush.polygon()
	brush.pick()		Configuration	brush.seed()
	brush.stroke()			brush.load()
	brush.noStroke()			brush.preload()
	brush.strokeWeight()			brush.colorCache()
Fill Operations	brush.fill()			brush.scaleBrushes()
	brush.noFill()			brush.remove()
	brush.bleed()			brush.instance()
	brush.fillTexture()		Classes	brush.Polygon()
				brush.Plot()
				brush.Position()

---

<sub>back to table</sub>

Utility Functions

---

• brush.push()

• Description: The push() function saves the current brush, hatch, and fill settings and transformations, while pop() restores these settings. Note that these functions are always used together.

• brush.pop()

• Description: The push() function saves the current brush, hatch, and fill settings and transformations, while pop() restores these settings. Note that these functions are always used together.

---

• brush.rotate(angle)
• Description: Rotates following shapes by the amount specified by the angle parameter. This function accounts for angleMode(), so angles can be entered in either RADIANS or DEGREES. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in an anti-clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulate the effect. This function can be further controlled by brush.push() and brush.pop().

---

• brush.scale(scale)
• Description: Increases or decreases the size of shapes and strokes by expanding or contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%. Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0).

---

• brush.reDraw()

• Description: p5.brush uses several buffers and caches to make the drawing operations more performant. Use the reDraw() function if you want to force noBlend brushes to be drawn into the canvas. This function is designed to help maintain the correct draw order for the different strokes and shapes.

• brush.reBlend()

• Description: p5.brush uses several buffers and caches to make the drawing operations more performant. Use the reDraw() function if you want to force Blend brushes to be drawn into the canvas. This function is designed to help maintain the correct draw order for the different strokes and shapes.

---

<sub>back to table</sub>

Vector Fields

Vector Fields allow for dynamic control over brush stroke behavior, enabling the creation of complex and fluid motion within sketches.

#### Basic vector-field functions

---

• brush.field(name)
• Description: Activates a named vector field. When a vector field is active, it influences the flow and direction of the brush strokes for shapes drawn thereafter. It is important to note that certain shapes may be exempt from this influence; such exceptions will be clearly documented in the API for each specific geometry.
• Parameters:
  • name (String): The identifier for the vector field to be activated. This can be a name of one of the predefined fields or a custom field created with brush.addField().
• Default Fields: The library comes with a set of built-in vector fields: curved, truncated, zigzag, seabed, and waves. These, as well as any custom fields added, can be activated using this function.

• Usage: ```javascript // To activate the "waves" vector field brush.field("waves");

  // To activate a custom vector field named "myCustomField" brush.field("myCustomField"); ``` Once a vector field is activated, it affects how the subsequent shapes are drawn, aligning them with its directional flow, unless stated otherwise in the documentation

---

• brush.noField()
• Description: Deactivates the currently active vector field, returning the drawing behavior to its default state where shapes are not influenced by any vector field. Any shapes drawn after this function call will not be affected by the previously active ve