p5.brush.js → unlock custom brushes, natural fill effects and intuitive hatching in p5.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 library 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.
author: Alejandro Campos
I am an Architect, Researcher, and Creative Coder based in Rotterdam. For the last years, I’ve been creating p5 generative algorithms on platforms such as fx(hash) or Verse. With p5.brush.js, I’m open sourcing part of my toolbox, which I’ve developed and used since the start of my coding practice.
I am an Architect, Researcher, and Creative Coder based in Rotterdam. For the last years, I’ve been creating p5 generative algorithms on platforms such as fx(hash) or Verse. With p5.brush.js, I’m open sourcing part of my toolbox, which I’ve developed and used since the start of my coding practice.
Check the Teaser on editor.p5js.org
Download the last version of the library from GitHub
Before using p5.brush.js, ensure you include Spectral.js, which is a prerequisite library for color mixing features. To set up your project, add both
p5.brush.js and Spectral.js to your HTML file. Place the script tags in the following order:<script src="path_to/spectral.min.js"></script>
<script src="path_to/p5.brush.js"></script>
Replace path_to with the actual path to the minified script in your project directory or the URL if you are using a CDN.
Minified installation
For improved loading speeds, use the minified version of
p5.brush.js which bundles Spectral.js:<script src="path_to/p5.brush.min.js"></script>
Check the full library reference with all available functions here
If you want to collaborate in the development of the library, you can contribute code via GitHub. You can also contribute by donating USDC to my artist wallets:
eth: 0x162f035FBD5bf34cd376B58122997A5525585DAf
tezos: tz1Z3A438AD3qZFNvoJBD5LQUYbomErw716Q