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)
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:
<!-- Commented version of p5.brush.js, with a Spectral.js dependency -->
<script src="https://github.com/acamposuribe/p5.brush/raw/main/path_to/p5.min.js"></script>
<script src="https://github.com/acamposuribe/p5.brush/raw/main/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.
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@1.1.1/dist/p5.brush.js"></script>
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.
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);
```
p5.brush.js enhances the p5.js framework with a set of tools that allow for sophisticated drawing and rendering techniques.
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.
.
p5.brush.js provides a comprehensive API for creating complex drawings and effects. Below are the categorized functions and classes available in the library.
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() |
brush.push()
brush.pop()
brush.rotate(angle)
brush.scale(scale)
brush.reDraw()
brush.reBlend()
Vector Fields allow for dynamic control over brush stroke behavior, enabling the creation of complex and fluid motion within sketches.
brush.field(name)
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()
.curved
, truncated
, zigzag
, seabed
, and waves
. These, as well as any custom fields added, can be activated using this function.
// 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()
// Deactivate the current vector field
brush.noField();
Use this function when you want to draw shapes that are unaffected by the directional flow of any vector field, effectively resetting the drawing behavior to its original state.
brush.refreshField(time)
time
(Number): The time input for the vector field generator function, typically related to the frame count.// In the draw loop, refresh the vector field based on the frame count
function draw() {
brush.refreshField(frameCount / 10);
// Additional drawing code
}
This function will invoke the generator function of the active vector field with the provided time argument, allowing the field to evolve and create fluid, dynamic animations in the rendering.
brush.listFields()
brush.addField()
.Iterator<string>
- An iterator that yields the names of the vector fields.// Get an iterator of all vector field names
let fieldNames = brush.listFields();
// Loop through the names using the iterator
for (let name of fieldNames) {
console.log(name);
}
Use brush.listFields()
to access the names of all existing vector fields, which can then be used to activate or modify fields as needed.
brush.addField(name, generatorFunction)
name
(String): A unique identifier for the vector field.generatorFunction
(Function): A function that generates the field values. It takes a time parameter t
, loops through the vector field cells, assigns angular values based on custom logic, and returns the modified field
array.brush.addField("waves", function(t, field) {
let sinrange = random(10,15) + 5 * sin(t);
let cosrange = random(3,6) + 3 * cos(t);
let baseAngle = random(20,35);
for (let column = 0; column < field.length; column++) {
for (let row = 0; row < field[0].length; row++) {
let angle = sin(sinrange * column) * (baseAngle * cos(row * cosrange)) + random(-3,3);
field[column][row] = angle;
}
}
return field;
});
field.length
x field[0].length
. It's necessary to fill all the field
cells with a numeric value. Return this array when you've filled the values. The angles MUST BE in Degrees.
brush.addField("name_field", function(t, field) {
let field = FF.genField()
// Related functions for angle calculation
for (let i = 0; i < field.length; i++) {
for (let j = 0; j < field[0].length; j++) {
// Related functions for angle calculation here
field[i][j] = CalculatedAngle;
}
}
return field;
});
Functions for managing brush behaviors and properties.
brush.box()
Array<string>
- An array listing the names of all brushes.2B
, HB
, 2H
, cpencil
, pen
, rotring
, spray
, marker
, marker2
, charcoal
, and hatch_brush
(for clean hatching).// Retrieve a list of all available brush names
let brushes = brush.box();
console.log(brushes); // Logs the array of brush names
brush.box()
allows you to explore and select from the various brushes, facilitating the choice of the appropriate brush for different artistic needs.
brush.add(name, params)
name
(String): A unique identifier for the brush.params
(BrushParameters): An object containing the parameters for the brush. The parameters include:
type
: (standard
| spray
| marker
| custom
| image
) The tip type. weight
: Base size of the brush tip, in canvas units.vibration
: Vibration of the lines, affecting spread, in canvas units.definition
: (Number from 0-1) Between 0 and 1, defining clarity. Unnecessary for custom, marker, and image type brushes.quality
: Higher values lead to a more continuous line. Unnecessary for custom, marker, and image type brushes.opacity
: (Number from 0-255) Base opacity of the brush (affected by pressure).spacing
: Spacing between points in the brush stroke, in canvas units.blend
: (Boolean) Enables or disables realistic color mixing (default true for marker, custom, and image brushes).pressure
: An object or function defining the pressure sensitivity.
type
: 'standard" or 'custom". Use standard for simple gauss bell curves. Use 'custom' for custom pressure curves.min_max
: (Array [min, max]) Define min and max pressure (reverse for inverted presure).curve
: function or array.tip
: (For custom types) A function defining the geometry of the brush tip. Remove if unnecessary.image
: (For image types) The url path to your image, which MUST be in the same baseURL. Remove if unnecessary.rotate
: (none
| natural
| random
) Defines the tip angle rotation.
// You create an image brush like this:
brush.add("watercolor", {
type: "image",
weight: 10,
vibration: 2,
opacity: 30,
spacing: 1.5,
blend: true,
pressure: {
type: "custom",
min_max: [0.5,1.2],
// This formula implies that the pressure changes in a linear distribution through the whole length of the line.
// Minimum pressure at the start, maximum pressure at the end.
curve: (x) => 1-x
},
image: {
src: "./brush_tips/brush.jpg",
},
rotate: "random",
})
// You create a custom tip brush like this: brush.add("watercolor", { type: "custom", weight: 5, vibration: 0.08, opacity: 23, spacing: 0.6, blend: true, pressure: { type: "standard", min_max: [1.35,1], curve: [0.35,0.25] // Values for the bell curve }, tip: (_m) => { // in this example, the tip is composed of two squares, rotated 45 degrees // Always execute drawing functions within the _m buffer! _m.rotate(45), _m.rect(-1.5,-1.5,3,3), _m.rect(1,1,1,1); }, rotate: "natural", })
By using `brush.add()`, you can expand your brush collection with custom brushes tailored to specific artistic effects and styles.
brush.clip(clippingRegion)
brush.clip()
until brush.noClip()
is used.clippingRegion
(Array): An array defining the clipping region as [x1, y1, x2, y2]
, with (x1, y1)
and (x2, y2)
being the corners of the clipping rectangle.
// Set a clipping region
brush.clip([10, 10, 250, 200]);
// Draw a line - it will be clipped according to the region
brush.line(100, 90, 300, 40);
// Remove the clipping region brush.noClip(); // Draw another line - it will not be clipped brush.line(0, 0, 200, 300);
brush.noClip()
// Disable the clipping region
brush.noClip();
Stroke Operations encompass methods for manipulating and applying brushes to strokes (aka lines), providing artists with precise control over their brushwork.
brush.set(brushName, color, weight)
brushName
(String): The name of the brush to be used.color
(String|p5.Color): The color for the brush, which can be specified as a HEX string or a p5.Color object.weight
(Number): The weight or size of the brush.// Set the "HB" brush with a specific blue color and weight factor 1
brush.set("HB", "#002185", 1);
By using brush.set()
, you can quickly switch between different brushes, colors, and sizes, allowing for dynamic and varied stroke applications in your artwork.
brush.pick(brushName)
brushName
(String): The name of the brush to set as current.// Set the current brush to "charcoal"
brush.pick("charcoal");
Use brush.pick()
to switch between different brush types while maintaining the current color and weight settings.
brush.stroke(r, g, b)
or brush.stroke(color)
r
(Number|String|p5.Color): The red component of the color, a CSS color string, or a p5.Color object.g
(Number): Optional. The green component of the color.b
(Number): Optional. The blue component of the color.// Set the brush color using RGB values
brush.stroke(105, 111, 34);
// Or set the brush color using a HEX string
brush.stroke("#002185");
Use brush.stroke()
to define the color of your brush strokes, enabling a diverse palette for your artwork.
brush.noStroke()
// Disable stroke for the upcoming shapes
brush.noStroke();
brush.noStroke()
is essential for creating drawings where only fill and no outline is desired.
brush.strokeWeight(weight)
weight
(Number): The weight to set for the brush.// Set the brush stroke weight to 2.3 times the base size
brush.strokeWeight(2.3);
brush.strokeWeight()
provides the flexibility to easily adjust the thickness of your brush strokes, enhancing the expressiveness of your drawing tools.
The Fill Management section focuses on managing fill properties for shapes, enabling complex fill operations with effects like bleeding to simulate watercolor-like textures. These methods set fill colors with opacity, control bleed intensity, and manage fill operations. The watercolor fill effect is inspired by Tyler Hobbs' generative art techniques.
IMPORTANT: At the moment, fill operations expect an array of vertices in the clockwise direction. Otherwise, the fill will "bleed" to the inside, destroying the effect. I'll try to fix this on a forthcoming update.
brush.fill(a, b, c, d)
or brush.fill(color, opacity)
a
(Number|String|p5.Color): The red component of the color or grayscale value, a CSS color string, or a p5.Color object.b
(Number): Optional. The green component of the color or grayscale opacity if two arguments are used.c
(Number): Optional. The blue component of the color.d
(Number): Optional. The opacity of the color.// Set the fill color using RGB values and opacity
brush.fill(244, 15, 24, 75);
// Or set the fill color using a HEX string and opacity
brush.fill("#002185", 110);
brush.fill()
allows for detailed control over the color and transparency of the fill.
brush.noFill()
// Disable fill for the upcoming shapes
brush.noFill();
brush.bleed(strength, direction)
strength
(Number): The intensity of the bleed effect, capped at 0.5.direction
(String): Optional. "out" or "in". Defines the direction of the bleed effect_borderIntensity
(Number): The intensity of the border watercolor effect, ranging from 0 to 1.// Set the bleed intensity and direction for a watercolor effect
brush.bleed(0.3, "out");
brush.fillTexture(textureStrength, borderIntensity)
textureStrength
(Number): The texture of the fill effect, ranging from 0 to 1.borderIntensity
(Number): The intensity of the border watercolor effect, ranging from 0 to 1.// Set the fill texture and border intensity
brush.fillTexture(0.6, 0.4);
brush.fillAnimatedMode(mode)
mode
(Boolean): Set to true
to enable animated mode, false
to disable.// Enable animated mode for consistent bleed effects in animations
brush.fillAnimatedMode(true);
brush.fillAnimatedMode()
is valuable for animators and artists working on dynamic projects, where maintaining consistent fill effects across frames is crucial.
The Hatching section focuses on creating and drawing hatching patterns, which involves drawing closely spaced parallel lines. These functions offer control over the hatching style and application.
brush.hatch(dist, angle, options)
dist
(Number): The distance between hatching lines, in canvas units.angle
(Number): The angle at which hatching lines are drawn. The angle mode (degrees or radians) is set by p5's angleMode()
.options
(Object): Optional settings to affect the hatching style, including:
rand
: Randomness in line placement (0 to 1 or false).continuous
: Whether to connect the end of a line with the start of the next.gradient
: Modifies the distance between lines to create a gradient effect (0 to 1 or false).{rand: false, continuous: false, gradient: false}
.// Set hatching with specific distance, angle, and options
brush.hatch(5, 30, {rand: 0.1, continuous: true, gradient: 0.3});
brush.noHatch()
// Disable hatching for upcoming shapes
brush.noHatch();
brush.setHatch(brushName, color, weight)
brushName
(String): The name of the brush to use for hatching.color
(String|p5.Color): The color for the brush, either as a CSS string or a p5.Color object.weight
(Number): The weight or size of the brush for hatching.// Set the hatching brush to "rotring" with green color and specific weight
brush.setHatch("rotring", "green", 1.3);
In essence, the hatching system activates hatches for subsequent shapes, similarly to stroke and fill operations. However, you can also directly hatch multiple objects at once (and their intersections), if you proceed as described below .
brush.hatchArray(polygons)
polygons
(Array|Object): The polygon(s) to apply the hatching. Can be a single polygon object or an array of polygon objects.// Define an array of polygons (reference in the classes section)
let myPolygons = []
for (let i = 0; i < 10; i++) {
// We're creating 10 random triangles here
let p = new brush.Polygon([
[random(width), random(height)],
[random(width), random(height)],
[random(width), random(height)],
])
myPolygons.push(p)
}
// Create hatching across specified polygons
brush.hatchArray(myPolygons);
brush.hatchArray()
provides an efficient way to apply complex hatching patterns to a set of defined shapes.
This section details the functions for creating various shapes and strokes with the set brush, fill, and hatch parameters.
The following functions are only affected by stroke() operations, completely ignoring fill() and hatch().
brush.line(x1, y1, x2, y2)
noStroke()
has been called.x1
(Number): The x-coordinate of the start point.y1
(Number): The y-coordinate of the start point.x2
(Number): The x-coordinate of the end point.y2
(Number): The y-coordinate of the end point.// Set the brush color and draw a line
brush.stroke("red");
brush.line(15, 10, 200, 10);
brush.flowLine(x, y, length, dir)
x
(Number): The x-coordinate of the starting point.y
(Number): The y-coordinate of the starting point.length
(Number): The length of the line.dir
(Number): The direction in which to draw the line, measured anticlockwise from the x-axis.// Set a vector field and draw a flow line
brush.field("seabed");
brush.flowLine(15, 10, 185, 0);
These three functions provide advanced control over the creation of strokes/paths, allowing for custom pressure and direction at different points along the path. This is a strange way of defining strokes, but intuitive when you think of them as bodily movements performed with the hands. You can create two types of strokes: "curve" or "segments". For curved strokes, the curvature at any point of the stroke is lerped between the nearest control points.
These functions allow for the creation of strokes with varied pressures and directions, mimicking the organic nature of hand-drawn strokes. For an application of these principles, see: Enfantines II
brush.beginStroke(type, x, y)
type
(String): The type of the stroke, either "curve" or "segments".x
(Number): The x-coordinate of the starting point of the stroke.y
(Number): The y-coordinate of the starting point of the stroke.// Begin a new curve stroke
brush.beginStroke("curve", 15, 30);
brush.segment(angle, length, pressure)
brush.beginStroke()
and before brush.endStroke()
to outline the stroke's trajectory and characteristics.angle
(Number): The initial angle of the segment, relative to the canvas, measured anticlockwise from the x-axis.length
(Number): The length of the segment.pressure
(Number): The pressure at the start of the segment, influencing properties like width.// Add two segments to the stroke
brush.segment(30, 150, 0.6);
brush.segment(75, 40, 1.1);
brush.endStroke(angle, pressure)
angle
(Number): The angle of the curve at the end point of the stroke path.pressure
(Number): The pressure at the end of the stroke.// Complete the stroke with a specific angle and pressure
brush.endStroke(-45, 0.8);
brush.spline(array_points, curvature)
array_points
(Array<Array[x, y]
.curvature
(Number): Optional. The curvature of the spline curve, ranging from 0 to 1. A curvature of 0 results in a series of straight segments.// Define points for the spline curve
let points = [[30, 70], [85, 20], [130, 100], [180, 50]];
// Create a spline curve with a specified curvature
brush.spline(points, 0.5);
brush.plot(p, x, y, scale)
p
(Plot Object): A plot object representing the shape.x
(Number): The x-coordinate of the starting position.y
(Number): The y-coordinate of the starting position.scale
(Number): The scale at which to draw the shape.// Define a plot (heart shape)
let heart = new brush.Plot();
// ... Define the heart plot here ...
// Draw the heart shape with a flowing stroke
brush.flowShape(heart, 200, 200, 1.3);
The following functions are affected by stroke(), fill() and hatch() operations.
brush.rect(x, y, w, h, mode)
x
(Number): The x-coordinate of the rectangle.y
(Number): The y-coordinate of the rectangle.w
(Number): The width of the rectangle.h
(Number): The height of the rectangle.mode
(Boolean): Optional. If CENTER
, the rectangle is drawn centered at (x, y)
.brush.noStroke();
brush.noHatch();
brush.fill("#002185", 75);
brush.rect(150, 100, 50, 35, CENTER);
brush.circle(x, y, radius, r)
r
is true, the circle is rendered with a hand-drawn style. Circles are affected by vector fields.x
(Number): The x-coordinate of the circle's center.y
(Number): The y-coordinate of the circle's center.radius
(Number): The radius of the circle.r
(Boolean): Optional. When true, applies a hand-drawn style to the circle.brush.circle(100, 150, 75, true);
These three functions perform similarly to the p5.js beginShape(), vertex(), and endShape() functions, althouh curvature calculation is very different. These allow you to draw custom shapes, with fine control over brush pressure at the different points of the perimeter.
brush.beginShape(curvature)
curvature
(Number): Optional. A value from 0 to 1 that defines the curvature of the shape's edges.// Begin defining a custom shape with a specified curvature
brush.beginShape(0.3);
brush.vertex(x, y, pressure)
brush.beginShape()
and brush.endShape()
calls. An optional pressure parameter can be applied at each vertex.x
(Number): The x-coordinate of the vertex.y
(Number): The y-coordinate of the vertex.pressure
(Number): Optional. The pressure at the vertex, affecting properties like width.// Add vertices to the custom shape
brush.vertex(50, 100);
brush.vertex(100, 150, 0.5);
brush.vertex(150, 100);
brush.endShape(a)
a
(String): Optional. If set to CLOSE
, the shape is closed.// Finish the custom shape and close it with a straight line
brush.endShape(CLOSE);
brush.polygon(pointsArray)
beginShape()
and endShape()
approach.pointsArray
(Array): An array of points, where each point is an array of two numbers [x, y]
.// Define a polygon using an array of points
let points = [[x1, y1], [x2, y2], ...];
brush.polygon(points);
brush.polygon()
is ideal for drawing fixed shapes that remain unaffected by vector fields, providing precise control over their form and appearance.
This section covers functions for initializing the drawing system, preloading required assets, and configuring system behavior. By default, the library works without executing these functions, but you might want to configure them to your liking.
brush.seed(seed)
seed
(String | Number): A seed.brush.seed('hello');
Replace hello
with the actual seed.
brush.load(canvasID)
canvasID
is not provided, the current window is used as the rendering context. If you want to load the library on a custom p5.Graphics element, you can do it by executing this function.canvasID
(string): Optional ID of the buffer/canvas element. If false, uses the window's rendering context.Example (load p5.brush on buffer):
function setup() {
createCanvas(400,400,WEBGL)
// Draw stuff to global canvas
brush.set("HB","black",1)
brush.rect(40,40,150,100)
// Force draw stuff to canvas
brush.reDraw()
// Create buffer
let buffer = createGraphics(200,300)
brush.load(buffer)
brush.set("HB","black",1)
brush.rect(40,40,150,100)
// Force draw stuff to buffer
brush.reDraw()
image(buffer,20,40)
// Load p5.brush again on global canvas
brush.load()
}
Note for Instance Mode: If you want to use the p5 instance mode, you need to pass the proper variable as canvasID.
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() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
brush.fill("red", 75);
brush.rect(x, y, 50, 50);
};
};
let myp5 = new p5(sketch);
brush.preload()
// Your p5 preload function
function preload () {
brush.preload() // Add this if you want to use custom img brushes
}
brush.colorCache(bool = true)
bool
(boolean): Set to true to enable caching, or false to disable it.brush.scaleBrushes(scale)
scale
(Number): The scaling factor to be applied to the brush parameters.// Scale all standard brushes by a factor of 1.5
brush.scaleBrushes(1.5);
Using brush.scaleBrushes()
, you can easily adjust the size and spacing characteristics of standard brushes in your project, providing a convenient way to adapt to different canvas sizes or artistic styles.
brush.remove()
brush.instance(p)
p
(variable): Variable used as the function argument. See belowExample:
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() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
brush.fill("red", 75);
brush.rect(x, y, 50, 50);
};
};
let myp5 = new p5(sketch);
Exposed Classes provide foundational elements for creating and manipulating shapes and paths, as well as interacting with vector-fields in a more advanced manner.
brush.Polygon
Description: Represents a polygon defined by a set of vertices. The Polygon
class is essential for creating and working with multi-sided shapes, offering various methods to manipulate and render these shapes.
Constructor:
brush.Polygon(pointsArray)
pointsArray
(Array): An array of points, where each point is an array of two numbers [x, y]
.Methods:
.intersect(line)
line
(Object): A line object with properties point1
and point2
.Array
of objects, each with x
and y
properties, representing the intersection points..draw(brush, color, weight)
.fill(color, opacity, bleed, texture)
.hatch(distance, angle, options)
Attributes:
.vertices
: An array of the polygon's vertices, each vertex being an object with x
and y
properties..sides
: An array representing the different segments that make up the polygon.brush.Plot
Description: The Plot
class is crucial for the plot system, managing a collection of segments to create a variety of shapes and paths. It enables intricate designs, such as curves and custom strokes, by defining each segment with an angle, length, and pressure. Plot
instances can be transformed through rotation, and their appearance controlled via pressure and angle calculations.
Constructor:
brush.Plot(_type)
_type
(String): The type of plot, either "curve" or "segments".Methods:
.addSegment(_a, _length, _pres)
_a
(Number): The angle of the segment._length
(Number): The length of the segment._pres
(Number): The pressure of the segment..endPlot(_a, _pres)
_a
(Number): The final angle of the plot._pres
(Number): The final pressure of the plot..rotate(_a)
_a
(Number): The angle for rotation..genPol(_x, _y)
_x
(Number): The x-coordinate for the starting point._y
(Number): The y-coordinate for the starting point.Polygon
- The generated polygon..draw(x, y)
x
(Number): The x-coordinate to draw at.y
(Number): The y-coordinate to draw at..fill(x, y)
x
(Number): The x-coordinate to fill at.y
(Number): The y-coordinate to fill at..hatch(x, y)
x
(Number): The x-coordinate to hatch at.y
(Number): The y-coordinate to hatch at.Attributes:
.segments
: An array containing the lengths of all segments..angles
: An array of angles at the different control points..press
: An array with custom brush pressures at the various control points..type
: The type of the plot, either "curve" or "segments"..pol
: Stores the generated polygon object after executing the .genPol()
method.brush.Position
Description: The Position
class represents a point within a two-dimensional space, capable of interacting with a vector field. It includes methods for updating the position based on the field's flow, allowing for movement through the vector field in various ways.
Constructor:
brush.Position(x, y)
x
(Number): The initial x-coordinate.y
(Number): The initial y-coordinate.Methods:
.moveTo(_length, _dir, _step_length, isFlow)
_length
(Number): The length to move along the field._dir
(Number): The direction of movement, with angles measured anticlockwise from the x-axis._step_length
(Number): The length of each step.isFlow
(Boolean): Whether to use the flow field for movement..plotTo(_plot, _length, _step_length, _scale)
Plot
object._plot
(Position): The Plot
path object._length
(Number): The length to move towards the target position._step_length
(Number): The length of each step._scale
(Number): The scaling factor for the plotting path..angle()
.reset()
plotted
property to 0. This property tracks the distance moved since the last reset or the creation of the position. Important for consecutive different Plot
paths.Attributes:
.x
: The current x-coordinate..y
: The current y-coordinate..plotted
: Stores the distance moved since the last reset or the creation of the position.We welcome contributions from the community. If you find a bug or have a feature request, please open an issue on Github.
p5.brush.js is released under the MIT License. See the LICENSE file for details.