@genart-dev/examples

Curated generative art sketches across 5 rendering engines, each created from a single AI prompt. Published to npm for use in the genart.dev gallery.

Install

npm install @genart-dev/examples

import { EXAMPLES, SKETCHES_DIR } from "@genart-dev/examples";

---

Gallery

p5.js

	Murmuration Create a boids flocking simulation with fading trails — hundreds of particles following separation, alignment, and cohesion rules, swirling like a flock of starlings at dusk. Boids flocking with separation, alignment, and cohesion. Each bird leaves a fading trail, creating emergent order from three simple rules.
	Tide Pool Simulate organisms in a tidal rock pool — circles growing outward from random points, modulated by Perlin noise, stopping when they collide. Translucent, layered, aquatic palette. Perlin-noise-modulated circle growth with collision detection. Organisms compete for space, creating a dense, translucent tidal composition.
	Lichen Create a diffusion-limited aggregation (DLA) simulation — random walkers that stick to an existing structure, building fractal crystal-like growth from a single seed point. Diffusion-limited aggregation: random walkers drift until they touch the growing structure and freeze in place. Fractal, patient, irreversible.

Canvas 2D

	Erosion Generate a geological survey map — a multi-octave noise heightmap with simulated water erosion and contour lines. Earthy, cartographic palette, scientific aesthetic. Multi-octave Perlin noise heightmap with simulated water droplet erosion and contour line extraction. A fictional landscape survey.
	Textile Simulate a handwoven textile — interlocking warp and weft threads with subtle variation in spacing and thickness. Each thread has character; the whole has structure. Simulated warp/weft weave with pattern variation. Thread spacing, width, and color shift create the illusion of handwoven fabric.
	Phase Space Explore the phase space of a double pendulum — plot the trajectory in angle-angle space using RK4 numerical integration. Reveal the chaotic attractor that emerges over time. Double pendulum trajectory plotted in angle-angle phase space using RK4 integration. A deterministic system that never repeats.

Three.js

	Coral Create a 3D coral reef — L-system branching with randomized angles and underwater lighting. Each branch is a decision; the whole is a living architecture. L-system branching in 3D with randomized angles. Directional lighting and warm-to-cool color gradients create depth.
	Constellation Create a slowly orbiting star field — points distributed on a sphere with proximity-based edge connections. The human instinct to connect scattered points into meaning. Points on a sphere with proximity-based edge connections. Stars orbit slowly, constellation lines form and dissolve.
	Origami Animate an origami fold sequence — a flat mesh that sequentially folds along creases, transforming from a sheet into a geometric form. Geometry as transformation. Sequential fold transformations on a flat mesh. Each fold rotates vertices around a crease axis, building complexity from flatness.

GLSL

	Aurora Create a GLSL aurora borealis — multi-octave noise distorted along horizontal bands with additive color blending. Northern lights over a frozen landscape. Multi-octave noise curtains with additive blending. Horizontal bands of light undulate and shift, mimicking auroral dynamics.
	Mycelium Create a GLSL mycelium network — Voronoi distance fields with animated veins along cell boundaries and a pulsing bioluminescent glow. The wood-wide web. Voronoi distance field with animated veins along cell boundaries. Pulsing glow simulates nutrient flow through a fungal network.
	Interference Create a GLSL wave interference pattern — multiple point sources emitting sine waves that overlap to create moire patterns. Ripples meeting ripples. Multiple sine wave point sources with additive superposition. Constructive and destructive interference creates evolving moire patterns.

SVG

	Archipelago Generate an SVG cartographic map of fictional islands — noise heightmap thresholded at sea level with concentric contour lines for elevation. Imagined geography. Noise heightmap thresholded at sea level, with concentric contour lines for elevation. A cartographer's map of islands that don't exist.
	Letterpress Apply Bauhaus composition principles — a grid of geometric primitives (circles, rectangles, triangles) placed by seeded RNG. Constraint breeds creativity. Grid cells filled with geometric primitives by seeded RNG. Systematic composition where constraint breeds creativity.

p5.brush (p5.js + p5.brush library)

	Watercolor Landscape Create a watercolor landscape using p5.brush — layered hill washes with bleed, soft clouds, and charcoal foreground texture. Atmospheric depth from back to front. p5.brush watercolor washes create layered hills with natural bleed. Charcoal foreground strokes and soft cloud forms add atmospheric depth.
	Ink Botanicals Draw botanical specimens in pen and watercolor — branching stems with leaves and flowers, using p5.brush pen strokes for outlines and watercolor fills for washes. Recursive botanical forms drawn with p5.brush pen strokes and watercolor leaf washes. Each seed grows a unique specimen arrangement.
	Hatched Still Life Render a still life of vases, bottles, and bowls using cross-hatching — p5.brush HB pencil hatching at varying angles and densities to create form and shadow. Cross-hatched still life using p5.brush HB pencil. Varying hatch angle and density build volume and cast shadow on each object.
	Charcoal Gesture Draw expressive figure gesture studies using p5.brush charcoal — quick, energetic strokes capturing movement and weight with minimal detail. Gestural figure studies in charcoal. Bold strokes capture weight and motion with p5.brush's pressure-sensitive mark-making.
	Abstract Flow Field Create an abstract flow field painting using p5.brush — long, flowing brush strokes following a Perlin noise vector field with rich, painterly texture. Noise-driven flow field rendered with p5.brush strokes. Ink and marker trails accumulate into a dense, painterly composition.
	Brush Catalog Create a comprehensive catalog of p5.brush capabilities — all 7 stroke brushes at 3 weights, watercolor fills at varying bleed, and hatching patterns. A systematic catalog of p5.brush: 7 stroke brushes, watercolor fills with bleed control, and hatching at varying density and angle.

---

Sketch format

Each .genart file is a self-contained JSON document with renderer type, parameters, color palette, seed, and algorithm source code. See @genart-dev/format for the spec.

Renderers

Engine	Sketches	WebGL
p5.js	Murmuration, Tide Pool, Lichen	No
p5.js + p5.brush	Watercolor Landscape, Ink Botanicals, Hatched Still Life, Charcoal Gesture, Abstract Flow Field, Brush Catalog	No
Canvas 2D	Erosion, Textile, Phase Space	No
Three.js	Coral, Constellation, Origami	Yes
GLSL	Aurora, Mycelium, Interference	Yes
SVG	Archipelago, Letterpress	No

Support

Questions, bugs, or feedback — support@genart.dev or open an issue.

License

MIT