A collection of handy generative art utilities
npm install @johnfmorton/generative-utilsA collection of utility functions for generative art, designed to work with SVG.JS and other SVG-based drawing libraries.
``bash`
npm install @johnfmorton/generative-utils
`javascript
import { SVG } from '@svgdotjs/svg.js'
import { seedPRNG, random, spline } from '@johnfmorton/generative-utils'
const svg = SVG().addTo('#container').viewbox(0, 0, 400, 400)
// Seed for reproducible results
seedPRNG('my-artwork')
// Generate random control points
const points = []
for (let i = 0; i < 6; i++) {
points.push({
x: 50 + i * 60,
y: random(100, 300)
})
}
// Draw smooth curve through points
svg.path(spline(points, 0.5))
.fill('none')
.stroke({ color: '#264653', width: 3 })
`
| Function | Description |
|----------|-------------|
| seedPRNG | Seed the random number generator for reproducibility |random
| | Generate random values or select from arrays |randomBias
| | Generate values biased toward a target |randomSnap
| | Generate values snapped to intervals |
| Function | Description |
|----------|-------------|
| spline | Create smooth Catmull-Rom spline paths |polygon
| | Generate regular polygon vertices (triangle, hexagon, etc.) |star
| | Generate star polygon vertices |pointsToPath
| | Convert point array to SVG path string |createVoronoiDiagram
| | Generate Voronoi tessellations with Lloyd relaxation |createQtGrid
| | Create quadtree-based adaptive grids |poissonDisc
| | Generate evenly-distributed points via Poisson disc sampling |
| Function | Description |
|----------|-------------|
| createNoiseGrid | Create simplex noise grids for flow fields |
| Function | Description |
|----------|-------------|
| map | Re-map a number from one range to another |lerp
| | Linear interpolation between two values |clamp
| | Constrain a value within a range |distToSegment
| | Calculate point-to-line-segment distance |
| Function | Description |
|----------|-------------|
| vec2.create | Create a new 2D vector |vec2.add
| / subtract | Vector addition and subtraction |vec2.multiply
| / divide | Scalar multiplication and division |vec2.magnitude
| | Calculate vector length |vec2.normalize
| | Normalize to unit length |vec2.distance
| | Distance between two points |vec2.dot
| / cross | Dot and cross products |vec2.rotate
| / rotateAround | Rotate vectors |vec2.lerp
| | Linear interpolation between vectors |vec2.angle
| / angleBetween | Calculate angles |vec2.fromAngle
| | Create vector from angle |vec2.reflect
| | Reflect vector off a surface |vec2.limit
| / setMagnitude | Constrain or set vector length |
| Function | Description |
|----------|-------------|
| pointsInPath | Extract evenly-spaced points along SVG paths |createCoordsTransformer` | Transform mouse coordinates to SVG space |
|
Full documentation with examples is available in the docs folder.
This project is based on generative-utils by George Francis. The original library provided the foundation for these utilities. This fork includes bug fixes, documentation, and continued development.
MIT