better-dsh 0.2.4 → 0.2.5

package/docs/80_upstream-docs-and-skills/hermes-dev-skill/src/docs/user-guide/skills/bundled/creative/creative-p5js.md

@@ -0,0 +1,576 @@
+---
+title: "P5Js — p5.js sketches: gen art, shaders, interactive, 3D"
+sidebar_label: "P5Js"
+description: "p5.js sketches: gen art, shaders, interactive, 3D"
+---
+
+{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}
+
+# P5Js
+
+p5.js sketches: gen art, shaders, interactive, 3D.
+
+## Skill metadata
+
+| | |
+|---|---|
+| Source | Bundled (installed by default) |
+| Path | `skills/creative\p5js` |
+| Version | `1.0.0` |
+| Author | SHL0MS, Hermes Agent |
+| License | MIT |
+| Platforms | linux, macos, windows |
+| Tags | `creative-coding`, `generative-art`, `p5js`, `canvas`, `interactive`, `visualization`, `webgl`, `shaders`, `animation` |
+| Related skills | [`ascii-video`](/docs/user-guide/skills/bundled/creative/creative-ascii-video), [`manim-video`](/docs/user-guide/skills/bundled/creative/creative-manim-video), [`excalidraw`](/docs/user-guide/skills/optional/creative/creative-excalidraw) |
+
+## Reference: full SKILL.md
+
+:::info
+The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active.
+:::
+
+# 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
+- **Offscreen buffers**: `createGraphics()` for layered composition, trails, masks
+
+### Step 4: Preview & Iterate
+
+- Open HTML file directly in browser — no server needed for basic sketches
+- For `loadImage()`/`loadFont()` from local files: use `scripts/serve.sh` or `python -m http.server`
+- Chrome DevTools Performance tab to verify 60fps
+- Test at target export resolution, not just the window size
+- Adjust parameters until the visual matches the concept from Step 1
+
+### Step 5: Export
+
+| Format | Method | Command |
+|--------|--------|---------|
+| **PNG** | `saveCanvas('output', 'png')` in `keyPressed()` | Press 's' to save |
+| **High-res PNG** | Puppeteer headless capture | `node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1` |
+| **GIF** | `saveGif('output', 5)` — captures N seconds | Press 'g' to save |
+| **Frame sequence** | `saveFrames('frame', 'png', 10, 30)` — 10s at 30fps | Then `ffmpeg -i frame-%04d.png -c:v libx264 output.mp4` |
+| **MP4** | Puppeteer frame capture + ffmpeg | `bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30` |
+| **SVG** | `createCanvas(w, h, SVG)` with p5.js-svg | `save('output.svg')` |
+
+### Step 6: Quality Verification
+
+- **Does it match the vision?** Compare output to the creative concept. If it looks generic, go back to Step 1
+- **Resolution check**: Is it sharp at the target display size? No aliasing artifacts?
+- **Performance check**: Does it hold 60fps in browser? (30fps minimum for animations)
+- **Color check**: Do the colors work together? Test on both light and dark monitors
+- **Edge cases**: What happens at canvas edges? On resize? After running for 10 minutes?
+
+## Critical Implementation Notes
+
+### Performance — Disable FES First
+
+The Friendly Error System (FES) adds up to 10x overhead. Disable it in every production sketch:
+
+```javascript
+p5.disableFriendlyErrors = true;  // BEFORE setup()
+
+function setup() {
+  pixelDensity(1);  // prevent 2x-4x overdraw on retina
+  createCanvas(1920, 1080);
+}
+```
+
+In hot loops (particles, pixel ops), use `Math.*` instead of p5 wrappers — measurably faster:
+
+```javascript
+// In draw() or update() hot paths:
+let a = Math.sin(t);          // not sin(t)
+let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
+let v = Math.random();        // not random() — when seed not needed
+let m = Math.min(a, b);       // not min(a, b)
+```
+
+Never `console.log()` inside `draw()`. Never manipulate DOM in `draw()`. See `references/troubleshooting.md` § Performance.
+
+### Seeded Randomness — Always
+
+Every generative sketch must be reproducible. Same seed, same output.
+
+```javascript
+function setup() {
+  randomSeed(CONFIG.seed);
+  noiseSeed(CONFIG.seed);
+  // All random() and noise() calls now deterministic
+}
+```
+
+Never use `Math.random()` for generative content — only for performance-critical non-visual code. Always `random()` for visual elements. If you need a random seed: `CONFIG.seed = floor(random(99999))`.
+
+### Generative Art Platform Support (fxhash / Art Blocks)
+
+For generative art platforms, replace p5's PRNG with the platform's deterministic random:
+
+```javascript
+// fxhash convention
+const SEED = $fx.hash;              // unique per mint
+const rng = $fx.rand;               // deterministic PRNG
+$fx.features({ palette: 'warm', complexity: 'high' });
+
+// In setup():
+randomSeed(SEED);   // for p5's noise()
+noiseSeed(SEED);
+
+// Replace random() with rng() for platform determinism
+let x = rng() * width;  // instead of random(width)
+```
+
+See `references/export-pipeline.md` § Platform Export.
+
+### Color Mode — Use HSB
+
+HSB (Hue, Saturation, Brightness) is dramatically easier to work with than RGB for generative art:
+
+```javascript
+colorMode(HSB, 360, 100, 100, 100);
+// Now: fill(hue, sat, bri, alpha)
+// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
+// Desaturate: fill(hue, sat * 0.3, bri)
+// Darken: fill(hue, sat, bri * 0.5)
+```
+
+Never hardcode raw RGB values. Define a palette object, derive variations procedurally. See `references/color-systems.md`.
+
+### Noise — Multi-Octave, Not Raw
+
+Raw `noise(x, y)` looks like smooth blobs. Layer octaves for natural texture:
+
+```javascript
+function fbm(x, y, octaves = 4) {
+  let val = 0, amp = 1, freq = 1, sum = 0;
+  for (let i = 0; i < octaves; i++) {
+    val += noise(x * freq, y * freq) * amp;
+    sum += amp;
+    amp *= 0.5;
+    freq *= 2;
+  }
+  return val / sum;
+}
+```
+
+For flowing organic forms, use **domain warping**: feed noise output back as noise input coordinates. See `references/visual-effects.md`.
+
+### createGraphics() for Layers — Not Optional
+
+Flat single-pass rendering looks flat. Use offscreen buffers for composition:
+
+```javascript
+let bgLayer, fgLayer, trailLayer;
+function setup() {
+  createCanvas(1920, 1080);
+  bgLayer = createGraphics(width, height);
+  fgLayer = createGraphics(width, height);
+  trailLayer = createGraphics(width, height);
+}
+function draw() {
+  renderBackground(bgLayer);
+  renderTrails(trailLayer);   // persistent, fading
+  renderForeground(fgLayer);  // cleared each frame
+  image(bgLayer, 0, 0);
+  image(trailLayer, 0, 0);
+  image(fgLayer, 0, 0);
+}
+```
+
+### Performance — Vectorize Where Possible
+
+p5.js draw calls are expensive. For thousands of particles:
+
+```javascript
+// SLOW: individual shapes
+for (let p of particles) {
+  ellipse(p.x, p.y, p.size);
+}
+
+// FAST: single shape with beginShape()
+beginShape(POINTS);
+for (let p of particles) {
+  vertex(p.x, p.y);
+}
+endShape();
+
+// FASTEST: pixel buffer for massive counts
+loadPixels();
+for (let p of particles) {
+  let idx = 4 * (floor(p.y) * width + floor(p.x));
+  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
+}
+updatePixels();
+```
+
+See `references/troubleshooting.md` § Performance.
+
+### Instance Mode for Multiple Sketches
+
+Global mode pollutes `window`. For production, use instance mode:
+
+```javascript
+const sketch = (p) => {
+  p.setup = function() {
+    p.createCanvas(800, 800);
+  };
+  p.draw = function() {
+    p.background(0);
+    p.ellipse(p.mouseX, p.mouseY, 50);
+  };
+};
+new p5(sketch, 'canvas-container');
+```
+
+Required when embedding multiple sketches on one page or integrating with frameworks.
+
+### WebGL Mode Gotchas
+
+- `createCanvas(w, h, WEBGL)` — origin is center, not top-left
+- Y-axis is inverted (positive Y goes up in WEBGL, down in P2D)
+- `translate(-width/2, -height/2)` to get P2D-like coordinates
+- `push()`/`pop()` around every transform — matrix stack overflows silently
+- `texture()` before `rect()`/`plane()` — not after
+- Custom shaders: `createShader(vert, frag)` — test on multiple browsers
+
+### Export — Key Bindings Convention
+
+Every sketch should include these in `keyPressed()`:
+
+```javascript
+function keyPressed() {
+  if (key === 's' || key === 'S') saveCanvas('output', 'png');
+  if (key === 'g' || key === 'G') saveGif('output', 5);
+  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
+  if (key === ' ') CONFIG.paused = !CONFIG.paused;
+}
+```
+
+### Headless Video Export — Use noLoop()
+
+For headless rendering via Puppeteer, the sketch **must** use `noLoop()` in setup. Without it, p5's draw loop runs freely while screenshots are slow — the sketch races ahead and you get skipped/duplicate frames.
+
+```javascript
+function setup() {
+  createCanvas(1920, 1080);
+  pixelDensity(1);
+  noLoop();                    // capture script controls frame advance
+  window._p5Ready = true;      // signal readiness to capture script
+}
+```
+
+The bundled `scripts/export-frames.js` detects `_p5Ready` and calls `redraw()` once per capture for exact 1:1 frame correspondence. See `references/export-pipeline.md` § Deterministic Capture.
+
+For multi-scene videos, use the per-clip architecture: one HTML per scene, render independently, stitch with `ffmpeg -f concat`. See `references/export-pipeline.md` § Per-Clip Architecture.
+
+### Agent Workflow
+
+When building p5.js sketches:
+
+1. **Write the HTML file** — single self-contained file, all code inline
+2. **Open in browser** — `open sketch.html` (macOS) or `xdg-open sketch.html` (Linux)
+3. **Local assets** (fonts, images) require a server: `python -m http.server 8080` in the project directory, then open `http://localhost:8080/sketch.html`
+4. **Export PNG/GIF** — add `keyPressed()` shortcuts as shown above, tell the user which key to press
+5. **Headless export** — `node scripts/export-frames.js sketch.html --frames 300` for automated frame capture (sketch must use `noLoop()` + `_p5Ready`)
+6. **MP4 rendering** — `bash scripts/render.sh sketch.html output.mp4 --duration 30`
+7. **Iterative refinement** — edit the HTML file, user refreshes browser to see changes
+8. **Load references on demand** — use `skill_view(name="p5js", file_path="references/...")` to load specific reference files as needed during implementation
+
+## Performance Targets
+
+| Metric | Target |
+|--------|--------|
+| Frame rate (interactive) | 60fps sustained |
+| Frame rate (animated export) | 30fps minimum |
+| Particle count (P2D shapes) | 5,000-10,000 at 60fps |
+| Particle count (pixel buffer) | 50,000-100,000 at 60fps |
+| Canvas resolution | Up to 3840x2160 (export), 1920x1080 (interactive) |
+| File size (HTML) | &lt; 100KB (excluding CDN libraries) |
+| Load time | &lt; 2s to first frame |
+
+## References
+
+| File | Contents |
+|------|----------|
+| `references/core-api.md` | Canvas setup, coordinate system, draw loop, `push()`/`pop()`, offscreen buffers, composition patterns, `pixelDensity()`, responsive design |
+| `references/shapes-and-geometry.md` | 2D primitives, `beginShape()`/`endShape()`, Bezier/Catmull-Rom curves, `vertex()` systems, custom shapes, `p5.Vector`, signed distance fields, SVG path conversion |
+| `references/visual-effects.md` | Noise (Perlin, fractal, domain warp, curl), flow fields, particle systems (physics, flocking, trails), pixel manipulation, texture generation (stipple, hatch, halftone), feedback loops, reaction-diffusion |
+| `references/animation.md` | Frame-based animation, easing functions, `lerp()`/`map()`, spring physics, state machines, timeline sequencing, `millis()`-based timing, transition patterns |
+| `references/typography.md` | `text()`, `loadFont()`, `textToPoints()`, kinetic typography, text masks, font metrics, responsive text sizing |
+| `references/color-systems.md` | `colorMode()`, HSB/HSL/RGB, `lerpColor()`, `paletteLerp()`, procedural palettes, color harmony, `blendMode()`, gradient rendering, curated palette library |
+| `references/webgl-and-3d.md` | WEBGL renderer, 3D primitives, camera, lighting, materials, custom geometry, GLSL shaders (`createShader()`, `createFilterShader()`), framebuffers, post-processing |
+| `references/interaction.md` | Mouse events, keyboard state, touch input, DOM elements, `createSlider()`/`createButton()`, audio input (p5.sound FFT/amplitude), scroll-driven animation, responsive events |
+| `references/export-pipeline.md` | `saveCanvas()`, `saveGif()`, `saveFrames()`, deterministic headless capture, ffmpeg frame-to-video, CCapture.js, SVG export, per-clip architecture, platform export (fxhash), video gotchas |
+| `references/troubleshooting.md` | Performance profiling, per-pixel budgets, common mistakes, browser compatibility, WebGL debugging, font loading issues, pixel density traps, memory leaks, CORS |
+| `templates/viewer.html` | Interactive viewer template: seed navigation (prev/next/random/jump), parameter sliders, download PNG, responsive canvas. Start from this for explorable generative art |
+
+---
+
+## Creative Divergence (use only when user requests experimental/creative/unique output)
+
+If the user asks for creative, experimental, surprising, or unconventional output, select the strategy that best fits and reason through its steps BEFORE generating code.
+
+- **Conceptual Blending** — when the user names two things to combine or wants hybrid aesthetics
+- **SCAMPER** — when the user wants a twist on a known generative art pattern
+- **Distance Association** — when the user gives a single concept and wants exploration ("make something about time")
+
+### Conceptual Blending
+1. Name two distinct visual systems (e.g., particle physics + handwriting)
+2. Map correspondences (particles = ink drops, forces = pen pressure, fields = letterforms)
+3. Blend selectively — keep mappings that produce interesting emergent visuals
+4. Code the blend as a unified system, not two systems side-by-side
+
+### SCAMPER Transformation
+Take a known generative pattern (flow field, particle system, L-system, cellular automata) and systematically transform it:
+- **Substitute**: replace circles with text characters, lines with gradients
+- **Combine**: merge two patterns (flow field + voronoi)
+- **Adapt**: apply a 2D pattern to a 3D projection
+- **Modify**: exaggerate scale, warp the coordinate space
+- **Purpose**: use a physics sim for typography, a sorting algorithm for color
+- **Eliminate**: remove the grid, remove color, remove symmetry
+- **Reverse**: run the simulation backward, invert the parameter space
+
+### Distance Association
+1. Anchor on the user's concept (e.g., "loneliness")
+2. Generate associations at three distances:
+   - Close (obvious): empty room, single figure, silence
+   - Medium (interesting): one fish in a school swimming the wrong way, a phone with no notifications, the gap between subway cars
+   - Far (abstract): prime numbers, asymptotic curves, the color of 3am
+3. Develop the medium-distance associations — they're specific enough to visualize but unexpected enough to be interesting