acamposuribe / p5.brush

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 code. > 🌊 **Try the interactive Flow Field Generator →** > Design custom vector fields with live preview and generate ready-to-paste code. > ▶️ **Check the teaser live →** > Live on the p5.js Web Editor, where you can read and edit code. Table of Contents • Installation • 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 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: 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 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: Install with NPM and other modular-based apps Install the npm package. p5.brush requires p5.js as a peer dependency. After that, import p5.brush functions to your sketch: 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 inside your sketch function before and . After that, all calls work normally without any prefix. --- 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 | | | Hatch Operations | brush.hatch() | | | | | | brush.noHatch() | | Vector-Fields | brush.field() | | | brush.hatchStyle() | | | brush.noField() | | Primitives | brush.line() | | | brush.refreshField()| | | brush.flowLine() | | | brush.listFields() | | | brush.beginStroke() | | | brush.addField() | | | brush.move() | | | brush.wiggle() | | | brush.endStroke() | | Brush Management | brush.box() | | | brush.spline() | | | brush.add() | | | brush.rect() | | | brush.clip() | | | brush.circle() | | | brush.noClip() | | | brush.arc() | | Stroke Operations | brush.set() | | | brush.beginShape() | | | brush.pick() | | | brush.vertex() | | | brush.stroke() | | | brush.endShape() | | | brush.noStroke() | | | brush.polygon() | | | brush.strokeWeight()| | Configuration | brush.load() | | Fill Operations | brush.fill() | | | | | | brush.noFill() | | | brush.scaleBrushes()| | | brush.fillBleed() | | | brush.instance() | | | brush.fillTexture() | | | | | | | | Classes | brush.Polygon() | | | | | | brush.Plot() | | | | | | brush.Position() | --- back to table Utility Functions --- > **Note for users upgrading from older versions**: , , , , and are no longer needed. The library now automatically hooks into p5's and , so brush state (stroke, fill, hatch settings) is saved and restored alongside p5's own state. Likewise, p5's , , and are automatically inherited by all brush strokes and fills. > Public brush APIs that accept angles also inherit p5's current . With no call, that means radians by default, matching p5 itself. The main exception is , which lets custom field generators declare how returned angles should be interpreted before they are stored internally in degrees. --- back to table Vector Fields Vector Fields allow for dynamic control over brush stroke behavior, enabling the creation of complex and fluid mot…