p5js

# p5.js Production Pipeline ## When to use Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project. ## What's inside Production pipeline for interactive and generative visual art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, audio-reactive visuals, and motion graphics — exported as HTML, PNG, GIF, MP4, or SVG. Covers: 2D/3D rendering, noise and particle systems, flow fields, shaders (GLSL), pixel manipulation, kinetic typography, WebGL scenes, audio analysis, mouse/keyboard interaction, and headless high-res export. ## Creative Standard This is visual art rendered in the browser. The canvas is the medium; the algorithm is the brush. **Before writing a single line of code**, articulate the creative concept. What does this piece communicate? What makes the viewer stop scrolling? What separates this from a code tutorial example? The user's prompt is a starting point — interpret it with creative ambition. **First-render excellence is non-negotiable.** The output must be visually striking on first load. If it looks like a p5.js tutorial exercise, a default configuration, or "AI-generated creative coding," it is wrong. Rethink before shipping. **Go beyond the reference vocabulary.** The noise functions, particle systems, color palettes, and shader effects in the references are a starting vocabulary. For every project, combine, layer, and invent. The catalog is a palette of paints — you write the painting. **Be proactively creative.** If the user asks for "a particle system," deliver a particle system with emergent flocking behavior, trailing ghost echoes, palette-shifted depth fog, and a background noise field that breathes. Include at least one visual detail the user didn't ask for but will appreciate. **Dense, layered, considered.** Every frame should reward viewing. Never flat white backgrounds. Always compositional hierarchy. Always intentional color. Always micro-detail that only appears on close inspection. **Cohesive aesthetic over feature count.** All elements must serve a unified visual language — shared color temperature, consistent stroke weight vocabulary, harmonious motion speeds. A sketch with ten unrelated effects is worse than one with three that belong together. ## Modes | Mode | Input | Output | Reference | |------|-------|--------|-----------| | **Generative art** | Seed / parameters | Procedural visual composition (still or animated) | `references/visual-effects.md` | | **Data visualization** | Dataset / API | Interactive charts, graphs, custom data displays | `references/interaction.md` | | **Interactive experience** | None (user drives) | Mouse/keyboard/touch-driven sketch | `references/interaction.md` | | **Animation / motion graphics** | Timeline / storyboard | Timed sequences, kinetic typography, transitions | `references/animation.md` | | **3D scene** | Concept description | WebGL geometry, lighting, camera, materials | `references/webgl-and-3d.md` | | **Image processing** | Image file(s) | Pixel manipulation, filters, mosaic, pointillism | `references/visual-effects.md` § Pixel Manipulation | | **Audio-reactive** | Audio file / mic | Sound-driven generative visuals | `references/interaction.md` § Audio Input | ## Stack Single self-contained HTML file per project. No build step required. | Layer | Tool | Purpose | |-------|------|---------| | Core | p5.js 1.11.3 (CDN) | Canvas rendering, math, transforms, event handling | | 3D | p5.js WebGL mode | 3D geometry, camera, lighting, GLSL shaders | | Audio | p5.sound.js (CDN) | FFT analysis, amplitude, mic input, oscillators | | Export | Built-in `saveCanvas()` / `saveGif()` / `saveFrames()` | PNG, GIF, frame sequence output | | Capture | CCapture.js (optional) | Deterministic framerate video capture (WebM, GIF) | | Headless | Puppeteer + Node.js (optional) | Automated high-res rendering, MP4 via ffmpeg | | SVG | p5.js-svg 1.6.0 (optional) | Vector output for print — requires p5.js 1.x | | Natural media | p5.brush (optional) | Watercolor, charcoal, pen — requires p5.js 2.x + WEBGL | | Texture | p5.grain (optional) | Film grain, texture overlays | | Fonts | Google Fonts / `loadFont()` | Custom typography via OTF/TTF/WOFF2 | ### Version Note **p5.js 1.x** (1.11.3) is the default — stable, well-documented, broadest library compatibility. Use this unless a project requires 2.x features. **p5.js 2.x** (2.2+) adds: `async setup()` replacing `preload()`, OKLCH/OKLAB color modes, `splineVertex()`, shader `.modify()` API, variable fonts, `textToContours()`, pointer events. Required for p5.brush. See `references/core-api.md` § p5.js 2.0. ## Pipeline Every project follows the same 6-stage path: ``` CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY ``` 1. **CONCEPT** — Articulate the creative vision: mood, color world, motion vocabulary, what makes this unique 2. **DESIGN** — Choose mode, canvas size, interaction model, color system, export format. Map concept to technical decisions 3. **CODE** — Write single HTML file with inline p5.js. Structure: globals → `preload()` → `setup()` → `draw()` → helpers → classes → event handlers 4. **PREVIEW** — Open in browser, verify visual quality. Test at target resolution. Check performance 5. **EXPORT** — Capture output: `saveCanvas()` for PNG, `saveGif()` for GIF, `saveFrames()` + ffmpeg for MP4, Puppeteer for headless batch 6. **VERIFY** — Does the output match the concept? Is it visually striking at the intended display size? Would you frame it? ## Creative Direction ### Aesthetic Dimensions | Dimension | Options | Reference | |-----------|---------|-----------| | **Color system** | HSB/HSL, RGB, named palettes, procedural harmony, gradient interpolation | `references/color-systems.md` | | **Noise vocabulary** | Perlin noise, simplex, fractal (octaved), domain warping, curl noise | `references/visual-effects.md` § Noise | | **Particle systems** | Physics-based, flocking, trail-drawing, attractor-driven, flow-field following | `references/visual-effects.md` § Particles | | **Shape language** | Geometric primitives, custom vertices, bezier curves, SVG paths | `references/shapes-and-geometry.md` | | **Motion style** | Eased, spring-based, noise-driven, physics sim, lerped, stepped | `references/animation.md` | | **Typography** | System fonts, loaded OTF, `textToPoints()` particle text, kinetic | `references/typography.md` | | **Shader effects** | GLSL fragment/vertex, filter shaders, post-processing, feedback loops | `references/webgl-and-3d.md` § Shaders | | **Composition** | Grid, radial, golden ratio, rule of thirds, organic scatter, tiled | `references/core-api.md` § Composition | | **Interaction model** | Mouse follow, click spawn, drag, keyboard state, scroll-driven, mic input | `references/interaction.md` | | **Blend modes** | `BLEND`, `ADD`, `MULTIPLY`, `SCREEN`, `DIFFERENCE`, `EXCLUSION`, `OVERLAY` | `references/color-systems.md` § Blend Modes | | **Layering** | `createGraphics()` offscreen buffers, alpha compositing, masking | `references/core-api.md` § Offscreen Buffers | | **Texture** | Perlin surface, stippling, hatching, halftone, pixel sorting | `references/visual-effects.md` § Texture Generation | ### Per-Project Variation Rules Never use default configurations. For every project: - **Custom color palette** — never raw `fill(255, 0, 0)`. Always a designed palette with 3-7 colors - **Custom stroke weight vocabulary** — thin accents (0.5), medium structure (1-2), bold emphasis (3-5) - **Background treatment** — never plain `background(0)` or `background(255)`. Always textured, gradient, or layered - **Motion variety** — different speeds for different elements. Primary at 1x, secondary at 0.3x, ambient at 0.1x - **At least one invented element** — a custom particle behavior, a novel noise application, a unique interaction response ### Project-Specific Invention For every project, invent at least one of: - A custom color palette matching the mood (not a preset) - A novel noise field combination (e.g., curl noise + domain warp + feedback) - A unique particle behavior (custom forces, custom trails, custom spawning) - An interaction mechanic the user didn't request but that elevates the piece - A compositional technique that creates visual hierarchy ### Parameter Design Philosophy Parameters should emerge from the algorithm, not from a generic menu. Ask: "What properties of *this* system should be tunable?" **Good parameters** expose the algorithm's character: - **Quantities** — how many particles, branches, cells (controls density) - **Scales** — noise frequency, element size, spacing (controls texture) - **Rates** — speed, growth rate, decay (controls energy) - **Thresholds** — when does behavior change? (controls drama) - **Ratios** — proportions, balance between forces (controls harmony) **Bad parameters** are generic controls unrelated to the algorithm: - "color1", "color2", "size" — meaningless without context - Toggle switches for unrelated effects - Parameters that only change cosmetics, not behavior Every parameter should change how the algorithm *thinks*, not just how it *looks*. A "turbulence" parameter that changes noise octaves is good. A "particle size" slider that only changes `ellipse()` radius is shallow. ## Workflow ### Step 1: Creative Vision Before any code, articulate: - **Mood / atmosphere**: What should the viewer feel? Contemplative? Energized? Unsettled? Playful? - **Visual story**: What happens over time (or on interaction)? Build? Decay? Transform? Oscillate? - **Color world**: Warm/cool? Monochrome? Complementary? What's the dominant hue? The accent? - **Shape language**: Organic curves? Sharp geometry? Dots? Lines? Mixed? - **Motion vocabulary**: Slow drift? Explosive burst? Breathing pulse? Mechanical precision? - **What makes THIS different**: What is the one thing that makes this sketch unique? Map the user's prompt to aesthetic choices. "Relaxing generative background" demands different everything from "glitch data visualization." ### Step 2: Technical Design - **Mode** — which of the 7 modes from the table above - **Canvas size** — landscape 1920x1080, portrait 1080x1920, square 1080x1080, or responsive `windowWidth/windowHeight` - **Renderer** — `P2D` (default) or `WEBGL` (for 3D, shaders, advanced blend modes) - **Frame rate** — 60fps (interactive), 30fps (ambient animation), or `noLoop()` (static generative) - **Export target** — browser display, PNG still, GIF loop, MP4 video, SVG vector - **Interaction model** — passive (no input), mouse-driven, keyboard-driven, audio-reactive, scroll-driven - **Viewer UI** — for interactive generative art, start from `templates/viewer.html` which provides seed navigation, parameter sliders, and download. For simple sketches or video export, use bare HTML ### Step 3: Code the Sketch For **interactive generative art** (seed exploration, parameter tuning): start from `templates/viewer.html`. Read the template first, keep the fixed sections (seed nav, actions), replace the algorithm and parameter controls. This gives the user seed prev/next/random/jump, parameter sliders with live update, and PNG download — all wired up. For **animations, video export, or simple sketches**: use bare HTML: Single HTML file. Structure: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Project Name</title> <script>p5.disableFriendlyErrors = true;</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> --> <!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> --> <!-- SVG export --> <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> --> <!-- video capture --> <style> html, body { margin: 0; padding: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script> // === Configuration === const CONFIG = { seed: 42, // ... project-specific params }; // === Color Palette === const PALETTE = { bg: '#0a0a0f', primary: '#e8d5b7', // ... }; // === Global State === let particles = []; // === Preload (fonts, images, data) === function preload() { // font = loadFont('...'); } // === Setup === function setup() { createCanvas(1920, 1080); randomSeed(CONFIG.seed); noiseSeed(CONFIG.seed); colorMode(HSB, 360, 100, 100, 100); // Initialize state... } // === Draw Loop === function draw() { // Render frame... } // === Helper Functions === // ... // === Classes === class Particle { // ... } // === Event Handlers === function mousePressed() { /* ... */ } function keyPressed() { /* ... */ } function windowResized() { resizeCanvas(windowWidth, windowHeight); } </script> </body> </html> ``` Key implementation patterns: - **Seeded randomness**: Always `randomSeed()` + `noiseSeed()` for reproducibility - **Color mode**: Use `colorMode(HSB, 360, 100, 100, 100)` for intuitive color control - **State separation**: CONFIG for parameters, PALETTE for colors, globals for mutable state - **Class-based entities**: Particles, agents, shapes as classes with `update()` + `display()` methods