Publishing to NPM / support for Typescript?

[joeyfigaro]

Hey @acamposuribe! The work you've made available is phenomenal–I can't wait to play with it.

I wanted to ask about your future plans/intentions for publishing to NPM and adding support for Typescript.

There's a frustrating gap between working in modern JS/TS and p5, and p5.brush is by far one of the most promising tools I've seen in the p5 ecosystem–it'd be good for p5 if your work helped bridge the gap between JS 10 years ago and all of the lovely advancements that have been made since.

I'd love to help however I can if you're open to contributions.

[joeyfigaro]

Here's the initial pass at typescript declarations, along with map.

p5.brush.d.ts

```typescript export const mask: any; /** * Configures the drawing system with custom options. * @param {Object} [objct={}] - Optional configuration object. * EXPORTED */ declare function configureSystem(objct?: any): void; /** * Initializes the drawing system and sets up the environment. * @param {string|boolean} [canvasID=false] - Optional ID of the canvas element to use. * If false, it uses the current window as the rendering context. * EXPORTED */ declare function loadSystem(canvasID?: string | boolean): void; /** * Preloads necessary assets or configurations. * This function should be called before setup to ensure all assets are loaded. * EXPORTED */ declare function preloadBrushAssets(): void; /** * The Mix object is responsible for handling color blending operations within * the rendering context. It utilizes WebGL shaders to apply advanced blending * effects based on Kubelka-Munk theory. It depends on spectral.js for the * blending logic incorporated into its fragment shader. */ /** * Enables/Disables color caching for WebGL Shaders. * Color caching increases performance but might produce worse textures * when using the same colour repeteadly. * @param {bool} bool * */ declare function enableCacheBlending(bool?: any): void; /** * Saves current state to object */ declare function _push(): void; /** * Restores previous state from object */ declare function _pop(): void; /** * Captures the desired rotation. */ export function rotate(a: any): void; /** * Adds a new vector field to the field list with a unique name and a generator function. * @param {string} name - The unique name for the new vector field. * @param {Function} funct - The function that generates the field values. * EXPORTED */ export function addField(name: string, funct: Function): void; /** * The FlowField (FF) section includes functions and objects for creating and managing vector fields. * These fields can guide the motion of particles or brush strokes in a canvas, creating complex and * dynamic visual patterns. */ /** * Activates a specific vector field by name, ensuring it's ready for use. * @param {string} a - The name of the vector field to activate. * EXPORTED */ declare function selectField(a: string): void; /** * Deactivates the current vector field. * EXPORTED */ declare function disableField(): void; /** * Refreshes the current vector field based on the generator function, which can be time-dependent. * @param {number} [t=0] - An optional time parameter that can affect field generation. * EXPORTED */ export function refreshField(t?: number): void; /** * Retrieves a list of all available vector field names. * @returns {Iterator} An iterator that provides the names of all the fields. * EXPORTED */ export function listFields(): Iterator; /** * The Brushes section provides tools for drawing with various brush types. Each brush * can simulate different materials and techniques, such as spray, marker, or custom * image stamps. The 'B' object is central to this section, storing brush properties * and methods for applying brush strokes to the canvas. * * The 'B' object contains methods to control the brush, including setting the brush * type, color, weight, and blending mode. It also handles the application of the brush * to draw lines, flow lines, and shapes with specific behaviors defined by the brush type. * Additionally, it provides a mechanism to clip the drawing area, ensuring brush strokes * only appear within the defined region. * * Brush tips can vary from basic circles to complex patterns, with support for custom * pressure curves, opacity control, and dynamic size adjustments to simulate natural * drawing tools. The brush engine can create effects like variable line weight, texture, * and color blending, emulating real-world drawing experiences. * * The brush system is highly customizable, allowing users to define their own brushes * with specific behaviors and appearances. By extending the brush types and parameters, * one can achieve a wide range of artistic styles and techniques. */ /** * Adjusts the global scale of brush parameters based on the provided scale factor. * This affects the weight, vibration, and spacing of each standard brush. * * @param {number} _scale - The scaling factor to apply to the brush parameters. * EXPORTED */ declare function globalScale(_scale: number): void; /** * Retrieves a list of all available brush names from the brush manager. * @returns {Array} An array containing the names of all brushes. * EXPORTED */ declare function listOfBrushes(): Array; /** * Draws the tip of the selected brush * @param {number} x - x coordinate for the tip. * @param {number} y - y coordinate for the tip. * @param {number} pressure - The desired pressure value. * EXPORTED */ declare function drawTip(x: number, y: number, pressure: number): void; /** * Disables the stroke for subsequent drawing operations. * This function sets the brush's `isActive` property to false, indicating that no stroke * should be applied to the shapes drawn after this method is called. * EXPORTED */ declare function disableBrush(): void; /** * The Fill Management section contains functions and classes dedicated to handling * the fill properties of shapes within the drawing context. It supports complex fill * operations with effects such as bleeding to simulate watercolor-like textures. The * methods provided allow for setting the fill color with opacity, controlling the * intensity of the bleed effect, and enabling or disabling the fill operation. * * The watercolor effect implementation is inspired by Tyler Hobbs' generative art * techniques for simulating watercolor paints. */ /** * Sets the fill color and opacity for subsequent drawing operations. * @param {number|p5.Color} a - The red component of the color or grayscale value, a CSS color string, or a p5.Color object. * @param {number} [b] - The green component of the color or the grayscale opacity if two arguments. * @param {number} [c] - The blue component of the color. * @param {number} [d] - The opacity of the color. * EXPORTED */ declare function setFill(a: number | p5.Color, b?: number, c?: number, d?: number, ...args: any[]): void; /** * Sets the bleed and texture levels for the fill operation, simulating a watercolor effect. * @param {number} _i - The intensity of the bleed effect, capped at 0.5. * @param {number} _texture - The texture of the watercolor effect, from 0 to 1. * EXPORTED */ declare function setBleed(_i: number, _texture?: number, _border?: number): void; /** * Disables the fill for subsequent drawing operations. * EXPORTED */ declare function disableFill(): void; /** * Disables some operations in order to guarantee a consistent bleed efect for animations (at different bleed levels) * EXPORTED */ export function fillAnimatedMode(bool: any): void; /** * Draws a rectangle on the canvas and fills it with the current fill color. * * @param {number} x - The x-coordinate of the rectangle. * @param {number} y - The y-coordinate of the rectangle. * @param {number} w - The width of the rectangle. * @param {number} h - The height of the rectangle. * @param {boolean} [mode=CORNER] - If CENTER, the rectangle is drawn centered at (x, y). */ declare function drawRectangle(x: number, y: number, w: number, h: number, mode?: boolean): void; /** * Draws a circle on the canvas and fills it with the current fill color. * * @param {number} x - The x-coordinate of the center of the circle. * @param {number} y - The y-coordinate of the center of the circle. * @param {number} radius - The radius of the circle. * @param {boolean} [r=false] - If true, applies a random factor to the radius for each segment. */ declare function drawCircle(x: number, y: number, radius: number, r?: boolean): void; /** * Creates a Polygon from a given array of points and performs drawing and filling * operations based on active states. * * @param {Array} pointsArray - An array of points where each point is an array of two numbers [x, y]. * EXPORTED */ declare function drawPolygon(pointsArray: any[]): void; /** * Creates and draws a spline curve with the given points and curvature. * @param {Array>} array_points - An array of points defining the spline curve. * @param {number} [curvature=0.5] - The curvature of the spline curve, between 0 and 1. A curvature of 0 will create a series of straight segments. * EXPORTED */ declare function drawSpline(array_points: Array>, curvature?: number): void; /** * Starts recording vertices for a custom shape. Optionally, a curvature can be defined. * @param {number} [curvature] - From 0 to 1. Defines the curvature for the vertices being recorded (optional). * EXPORTED */ declare function _beginShape(curvature?: number): void; /** * Records a vertex in the custom shape being defined between _beginShape and _endShape. * @param {number} x - The x-coordinate of the vertex. * @param {number} y - The y-coordinate of the vertex. * @param {number} [pressure] - The pressure at the vertex (optional). */ declare function _vertex(x: number, y: number, pressure?: number): void; /** * Finishes recording vertices for a custom shape and either closes it or leaves it open. * It also triggers the drawing of the shape with the active stroke(), fill() and hatch() states. * @param {string} [a] - An optional argument to close the shape if set to CLOSE. */ declare function _endShape(a?: string): void; /** * Begins a new stroke with a given type and starting position. This initializes * a new Plot to record the stroke's path. * @param {string} type - The type of the stroke, which defines the kind of Plot to create. * @param {number} x - The x-coordinate of the starting point of the stroke. * @param {number} y - The y-coordinate of the starting point of the stroke. */ declare function _beginStroke(type: string, x: number, y: number): void; /** * Adds a segment to the stroke with a given angle, length, and pressure. This function * is called between _beginStroke and _endStroke to define the stroke's path. * @param {number} angle - The initial angle of the segment, relative to the canvas. * @param {number} length - The length of the segment. * @param {number} pressure - The pressure at the start of the segment, affecting properties like width. */ declare function _segment(angle: number, length: number, pressure: number): void; /** * Completes the stroke path and triggers the rendering of the stroke. * @param {number} angle - The angle of the curve at the last point of the stroke path. * @param {number} pressure - The pressure at the end of the stroke. */ declare function _endStroke(angle: number, pressure: number): void; /** * Creates a hatching pattern across the given polygons. * * @param {Array|Object} polygons - A single polygon or an array of polygons to apply the hatching. * EXPORTED */ export function hatch(polygons: any[] | any): void; /** * The Hatching section of the code is responsible for creating and drawing hatching patterns. * Hatching involves drawing closely spaced parallel lines. */ /** * Activates hatching for subsequent geometries, with the given params. * @param {number} dist - The distance between hatching lines. * @param {number} angle - The angle at which hatching lines are drawn. * @param {Object} options - An object containing optional parameters to affect the hatching style: * - rand: Introduces randomness to the line placement. * - continuous: Connects the end of a line with the start of the next. * - gradient: Changes the distance between lines to create a gradient effect. * Defaults to {rand: false, continuous: false, gradient: false}. * EXPORTED */ export function hatch(dist?: number, angle?: number, options?: any): void; /** * Sets the brush type, color, and weight for subsequent hatches. * If this function is not called, hatches will use the parameters from stroke operations. * @param {string} brushName - The name of the brush to set as current. * @param {string|p5.Color} color - The color to set for the brush. * @param {number} weight - The weight (size) to set for the brush. * EXPORTED */ export function setHatch(brush: any, color?: string | p5.Color, weight?: number): void; /** * Disables hatching for subsequent shapes * EXPORTED */ export function noHatch(): void; /** * This section includes the Polygon class for managing polygons and functions for drawing basic geometries * like rectangles and circles. It provides methods for creating, intersecting, drawing, and filling polygons, * as well as hatching them with a given distance and angle. Additional functions leverage the Polygon class * to draw rectangles with options for randomness and different drawing modes. */ /** * Represents a polygon with a set of vertices. * EXPORTED */ export class Polygon { /** * Constructs the Polygon object from an array of points. * * @param {Array} pointsArray - An array of points, where each point is an array of two numbers [x, y]. */ constructor(array: any); a: any; vertices: any; sides: any; /** * Intersects a given line with the polygon, returning all intersection points. * * @param {Object} line - The line to intersect with the polygon, having two properties 'point1' and 'point2'. * @returns {Array} An array of intersection points (each with 'x' and 'y' properties) or an empty array if no intersections. */ intersect(line: any): any[]; _intersectionCache: {}; /** * Draws the polygon by iterating over its sides and drawing lines between the vertices. */ draw(_brush: boolean, _color: any, _weight: any): void; /** * Fills the polygon using the current fill state. */ fill(_color: boolean, _opacity: any, _bleed: any, _texture: any, _border: any): void; /** * Creates hatch lines across the polygon based on a given distance and angle. */ hatch(_dist: boolean, _angle: any, _options: any): void; } /** * This section defines the functionality for creating and managing plots, which are used to draw complex shapes, * strokes, and splines on a canvas. It includes classes and functions to create plots of type "curve" or "segments", * manipulate them with operations like adding segments and applying rotations, and render them as visual elements * like polygons or strokes. The spline functionality allows for smooth curve creation using control points with * specified curvature, which can be rendered directly or used as part of more complex drawings. */ /** * The Plot class is central to the plot system, serving as a blueprint for creating and manipulating a variety * of shapes and paths. It manages a collection of segments, each defined by an angle, length, and pressure, * allowing for intricate designs such as curves and custom strokes. Plot instances can be transformed by rotation, * and their visual representation can be controlled through pressure and angle calculations along their length. * EXPORTED */ export class Plot { /** * Creates a new Plot. * @param {string} _type - The type of plot, "curve" or "segments" */ constructor(_type: string); segments: any[]; angles: any[]; pres: any[]; type: string; dir: number; pol: boolean; /** * Adds a segment to the plot with specified angle, length, and pressure. * @param {number} _a - The angle of the segment. * @param {number} _length - The length of the segment. * @param {number} _pres - The pressure of the segment. * @param {boolean} _degrees - Whether the angle is in degrees. */ addSegment(_a?: number, _length?: number, _pres?: number, _degrees?: boolean): void; length: any; /** * Finalizes the plot by setting the last angle and pressure. * @param {number} _a - The final angle of the plot. * @param {number} _pres - The final pressure of the plot. * @param {boolean} _degrees - Whether the angle is in degrees. */ endPlot(_a?: number, _pres?: number, _degrees?: boolean): void; /** * Rotates the entire plot by a given angle. * @param {number} _a - The angle to rotate the plot. */ rotate(_a: number): void; /** * Calculates the pressure at a given distance along the plot. * @param {number} _d - The distance along the plot. * @returns {number} - The calculated pressure. */ pressure(_d: number): number; /** * Calculates the angle at a given distance along the plot. * @param {number} _d - The distance along the plot. * @returns {number} - The calculated angle. */ angle(_d: number): number; /** * Interpolates values between segments for smooth transitions. * @param {Array} array - The array to interpolate within. * @param {number} _d - The distance along the plot. * @returns {number} - The interpolated value. */ curving(array: Array, _d: number): number; /** * Calculates the current index of the plot based on the distance. * @param {number} _d - The distance along the plot. */ calcIndex(_d: number): void; index: number; suma: number; /** * Generates a polygon based on the plot. * @param {number} _x - The x-coordinate for the starting point of the polygon. * @param {number} _y - The y-coordinate for the starting point of the polygon. * @returns {Polygon} - The generated polygon. */ genPol(_x: number, _y: number, _scale?: number, isHatch?: boolean): { a: any; vertices: any; sides: any; /** * Intersects a given line with the polygon, returning all intersection points. * * @param {Object} line - The line to intersect with the polygon, having two properties 'point1' and 'point2'. * @returns {Array} An array of intersection points (each with 'x' and 'y' properties) or an empty array if no intersections. */ intersect(line: any): any[]; _intersectionCache: {}; /** * Draws the polygon by iterating over its sides and drawing lines between the vertices. */ draw(_brush: boolean, _color: any, _weight: any): void; /** * Fills the polygon using the current fill state. */ fill(_color: boolean, _opacity: any, _bleed: any, _texture: any, _border: any): void; /** * Creates hatch lines across the polygon based on a given distance and angle. */ hatch(_dist: boolean, _angle: any, _options: any): void; }; /** * Draws the plot on the canvas. * @param {number} x - The x-coordinate to draw at. * @param {number} y - The y-coordinate to draw at. * @param {number} scale - The scale to draw with. */ draw(x: number, y: number, scale: number): void; /** * Fill the plot on the canvas. * @param {number} x - The x-coordinate to draw at. * @param {number} y - The y-coordinate to draw at. */ fill(x: number, y: number, scale: any): void; /** * Hatch the plot on the canvas. * @param {number} x - The x-coordinate to draw at. * @param {number} y - The y-coordinate to draw at. */ hatch(x: number, y: number, scale: any): void; } /** * The Position class represents a point within a two-dimensional space, which can interact with a vector field. * It provides methods to update the position based on the field's flow and to check whether the position is * within certain bounds (e.g., within the field or canvas). * EXPORTED */ export class Position { /** * Constructs a new Position instance. * @param {number} x - The initial x-coordinate. * @param {number} y - The initial y-coordinate. */ constructor(x: number, y: number); plotted: number; /** * Updates the position's coordinates and calculates its offsets and indices within the flow field if active. * @param {number} x - The new x-coordinate. * @param {number} y - The new y-coordinate. */ update(x: number, y: number): void; x: number; y: number; x_offset: number; y_offset: number; column_index: number; row_index: number; /** * Resets the 'plotted' property to 0. */ reset(): void; /** * Checks if the position is within the active flow field's bounds. * @returns {boolean} - True if the position is within the flow field, false otherwise. */ isIn(): boolean; /** * Checks if the position is within the canvas bounds. * @returns {boolean} - True if the position is within the canvas, false otherwise. */ isInCanvas(): boolean; /** * Calculates the angle of the flow field at the position's current coordinates. * @returns {number} - The angle in radians, or 0 if the position is not in the flow field or if the flow field is not active. */ angle(): number; /** * Moves the position along the flow field by a certain length. * @param {number} _length - The length to move along the field. * @param {number} _dir - The direction of movement. * @param {number} _step_length - The length of each step. * @param {boolean} isFlow - Whether to use the flow field for movement. */ moveTo(_length: number, _dir: number, _step_length?: number, isFlow?: boolean): void; /** * Plots a point to another position within the flow field, following a Plot object * @param {Position} _plot - The Plot path object. * @param {number} _length - The length to move towards the target position. * @param {number} _step_length - The length of each step. * @param {number} _scale - The scaling factor for the plotting path. */ plotTo(_plot: { plotted: number; /** * Updates the position's coordinates and calculates its offsets and indices within the flow field if active. * @param {number} x - The new x-coordinate. * @param {number} y - The new y-coordinate. */ update(x: number, y: number): void; x: number; y: number; x_offset: number; y_offset: number; column_index: number; row_index: number; /** * Resets the 'plotted' property to 0. */ reset(): void; /** * Checks if the position is within the active flow field's bounds. * @returns {boolean} - True if the position is within the flow field, false otherwise. */ isIn(): boolean; /** * Checks if the position is within the canvas bounds. * @returns {boolean} - True if the position is within the canvas, false otherwise. */ isInCanvas(): boolean; /** * Calculates the angle of the flow field at the position's current coordinates. * @returns {number} - The angle in radians, or 0 if the position is not in the flow field or if the flow field is not active. */ angle(): number; /** * Moves the position along the flow field by a certain length. * @param {number} _length - The length to move along the field. * @param {number} _dir - The direction of movement. * @param {number} _step_length - The length of each step. * @param {boolean} isFlow - Whether to use the flow field for movement. */ moveTo(_length: number, _dir: number, _step_length?: number, isFlow?: boolean): void; plotTo(_plot: any, _length: number, _step_length: number, _scale: number): void; }, _length: number, _step_length: number, _scale: number): void; } export { configureSystem as config, loadSystem as load, preloadBrushAssets as preload, enableCacheBlending as colorCache, _push as push, _pop as pop, selectField as field, disableField as noField, globalScale as scale, listOfBrushes as box, drawTip as point, disableBrush as noStroke, setFill as fill, setBleed as bleed, disableFill as noFill, drawRectangle as rect, drawCircle as circle, drawPolygon as polygon, drawSpline as spline, _beginShape as beginShape, _vertex as vertex, _endShape as endShape, _beginStroke as beginStroke, _segment as segment, _endStroke as endStroke, hatch as hatchArray }; //# sourceMappingURL=p5.brush.d.ts.map ```

p5.brush.d.ts.map

```typescript {"version":3,"file":"p5.brush.d.ts","sourceRoot":"","sources":["../p5.brush.js"],"names":[],"mappings":"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"} ```

[acamposuribe]

Hey @joeyfigaro, I was planning to add support for npm in the coming weeks. As for TS, I've never used it (I'm quite new to Javascript, actually), but I'll also take a look. Of course the lib is open to contributions. If I understand the above code correctly, you're only adding TS stuff to the functions that are exported. Is this right?

[joeyfigaro]

@acamposuribe re: npm, that's awesome–timing of that should work well for what I'd be contributing on the TS side of things. For the TS snippets, you understood correctly–my goal here is just to offer typings for the exports. It'll give enough helpful info for TS consumers and would be pretty painless to put up a PR for.

[joeyfigaro]

@acamposuribe putting PR up a little early to get your thoughts on changes so far. I wasn't sure where you were in setting up support for automated releases to npm, so I threw up something pretty rudimentary.

I need to test out the exports configuration I've got in package.json to make sure all is working properly. I'll be focusing on that next–and addressing any questions/concerns/requests you may have. 💪🏻

[joeyfigaro]

@acamposuribe any questions or changes you'd like me to make for this guy?

[acamposuribe]

Since I'm not used to NPM, I haven't had the time yet to check the PR thoroughly. Will try to do in the next days. Thanks a lot for the contribution!

[joeyfigaro]

@acamposuribe no worries and you're most welcome–I'll keep checking in over the next week. 💪🏻

I added some notes to the PR about NPM requirements; hopefully they're helpful.

[acamposuribe]

@joeyfigaro I accepted the pull request Hopefully in the coming weeks/months I will be able to update myself to TS and NPM. For now you're in charge of that!

[joeyfigaro]

@acamposuribe I completely missed the notification for this, man! Now that I've seen it–love it. I'll get to work. 💪🏻

[joeyfigaro]

I'm diving into how people are managing to publish usable p5 addons to npm and found p5.js-svg available on npm/github.

I don't want to make any changes to the work you've done so far since my intention is to keep these changes minimal and out of your hair, so I'll leave some links for your own exploration. You can take a look if you're interested in seeing how other p5 libraries are supporting installing via npm and using typescript for their work.

Main entry: https://github.com/zenozeng/p5.js-svg/blob/main/src/index.ts

Useful typings examples: https://github.com/zenozeng/p5.js-svg/blob/main/src/types.ts

You can see how people are expected to use the exported init function in this example.

---

In the meantime, I'll carry on with automating new releases, type generation, and publishing.

[acamposuribe]

Hey @joeyfigaro I've finally been able to dive into npm and ES6 standards and just created a new version of the repo that should work with npm. As for typescript, not planning to do that for now.... :D

[joeyfigaro]

@acamposuribe awesome! I'll be around if/when you're interested in introducing Typescript. Keep up the fantastic work. 💪🏻