p5js

name p5js description p5.js sketches: gen art, shaders, interactive, 3D. version 1.0.0 author SHL0MS, Hermes Agent license MIT platforms ["linux","macos","windows"] metadata {"hermes":{"tags":["creative-coding","generative-art","p5js","canvas","interactive","visualization","webgl","shaders","animation"],"related_skills":["ascii-video","manim-video","excalidraw"]}} 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 CONCEPT — Articulate the creative vision: mood, color world, motion vocabulary, what makes this unique DESIGN — Choose mode, canvas size, interaction model, color system, export format. Map concept to technical decisions CODE — Write single HTML file with inline p5.js. Structure: globals → preload() → setup() → draw() → helpers → classes → event handlers PREVIEW — Open in browser, verify visual quality. Test at target resolution. Check performance EXPORT — Capture output: saveCanvas() for PNG, saveGif() for GIF, saveFrames() + ffmpeg for MP4, Puppeteer for headless batch 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: <!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