p5js – skill Khác cho agent AI

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 harmo

… (nội dung đầy đủ có trong gói tải về)