creative-coding

Files (31)

• SKILL.md
• animation-design-thinking.md · references/manim/
• animations.md · references/manim/
• camera-and-3d.md · references/manim/
• decorations.md · references/manim/
• equations.md · references/manim/
• graphs-and-data.md · references/manim/
• mobjects.md · references/manim/
• paper-explainer.md · references/manim/
• production-quality.md · references/manim/
• rendering.md · references/manim/
• scene-planning.md · references/manim/
• troubleshooting.md · references/manim/
• updaters-and-trackers.md · references/manim/
• visual-design.md · references/manim/
• animation.md · references/p5js/
• color-systems.md · references/p5js/
• core-api.md · references/p5js/
• export-pipeline.md · references/p5js/
• interaction.md · references/p5js/
• shapes-and-geometry.md · references/p5js/
• troubleshooting.md · references/p5js/
• typography.md · references/p5js/
• visual-effects.md · references/p5js/
• webgl-and-3d.md · references/p5js/
• setup.sh · scripts/manim/
• export-frames.js · scripts/p5js/
• render.sh · scripts/p5js/
• serve.sh · scripts/p5js/
• setup.sh · scripts/p5js/
• viewer.html · templates/

SKILL.md (first lines)

# Creative Coding: p5.js & Manim

Two creative coding platforms for generating visual artifacts from code:

- **p5.js** — Interactive and generative visual art in the browser. Sketches, data viz, shaders, particle systems, audio-reactive visuals. Single HTML file, no build step.
- **Manim** — Mathematical and algorithmic animations for educational videos. 3Blue1Brown-style explainers, equation visualizations, graph animations. Python-based, outputs MP4/GIF.

## When to Use

| User wants... | Use |
|---|---|
| Interactive browser-based generative art, data viz, particle systems, shader effects | p5.js |
| Mathematical animations, equation visualizations, educational explainers, algorithm visualizations | Manim |
| Both an interactive web version and a video export | Combine both — p5.js for exploration, Manim for polished video |

## p5.js (Interactive Generative Art)

Trigger when users request: p5.js sketches, generative art, interactive visualizations, canvas animations, creative coding, WebGL scenes, audio-reactive visuals, flow fields, particle systems, or browser-based visual art.

### Creative Standard

This is visual art rendered in the browser. The canvas is the medium; the algorithm is the brush.

**First-render excellence is non-negotiable.** The output must be visually striking on first load. If it looks like a tutorial exercise, it's wrong.

**Be proactively creative.** If the user asks for "a particle system," deliver one with emergent flocking behavior, trailing ghost echoes, palette-shifted depth fog, and a background noise field that breathes.

**Dense, layered, considered.** Every frame should reward viewing. Never flat white backgrounds. Always compositional hierarchy. Always intentional color.

### Modes

| Mode | Input | Output | Reference |
|------|-------|--------|-----------|
| Generative art | Seed / parameters | Procedural visual composition | `references/p5js/visual-effects.md` |
| Data visualization | Dataset / API | Interactive charts, custom displays | `references/p5js/interaction.md` |
| Interactive experience | User drives | Mouse/keyboard/touch-driven sketch | `references/p5js/interaction.md` |
| Animation / motion graphics | Timeline / storyboard | Timed sequences, kinetic typography | `references/p5js/animation.md` |
| 3D scene | Concept description | WebGL geometry, lighting, materials | `references/p5js/webgl-and-3d.md` |
| Image processing | Image file(s) | Pixel manipulation, filters, mosaic | `references/p5js/visual-effects.md` |
| Audio-reactive | Audio file / mic | Sound-driven generative visuals | `references/p5js/interaction.md` |

### Stack

Single self-contained HTML file per project. No build step.

| Layer | Tool | Purpose |
|-------|------|---------|
| Core | p5.js 1.11.3 (CDN) | Canvas rendering, math, events |
| 3D | p5.js WebGL mode | 3D geometry, GLSL shaders |
| Audio | p5.sound.js (CDN) | FFT analysis, amplitude |
| Export | `saveCanvas()` / `saveGif()` / `saveFrames()` | PNG, GIF, frames |
| Headless | Puppeteer + Node.js | Automated high-res rendering |
| Natural media | p5.brush (optional) | Watercolor, charcoal, pen |

Use p5.js 1.x (1.11.3) as default. Use 2.x only when p5.brush or other 2.x features are needed.

### Pipeline

```
CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY
```

### Per-Project Variation Rules

Never use default configurations:
- **Custom color palette** — never raw `fill(255, 0, 0)`
- **Custom stroke weight vocabulary** — thin accents (0.5), medium (1-2), bold (3-5)
- **Background treatment** — never plain `background(0)` or `background(255)`
- **Motion variety** — primary at 1x, secondary at 0.3x, ambient at 0.1x
- **At least one invented element** — novel particle behavior, unique interaction

### Key Implementation Patterns

- **Seeded randomness:** Always `randomSeed()` + `noiseSeed()` for reproducibility
- **Color mode:** Use `colorMode(HSB, 360, 100, 100, 100)` for intuitive control
- **Performance:** Disable FES (`p5.disableFriendlyErrors = true`), `pixelDensity(1)` in hot loops, `Math.*` instead of p5 wrappers
- **Offscreen buffers:** `createGraphics()` for layered composition, trails, masks
- **Instance mode:** For multiple sketches on one page or framework integration
- **WebGL origin:** Center, not top-left; Y-axis inverted

### Export

| Format | Method |
|--------|--------|
| PNG | `saveCanvas('output', 'png')` |
| GIF | `saveGif('output', 5)` |
| MP4 | Puppeteer frame capture + ffmpeg via `scripts/p5js/render.sh` |
| SVG | p5.js-svg `createCanvas(w, h, SVG)` |

### p5.js References

| File | Contents |
|------|----------|
| `references/p5js/core-api.md` | Canvas setup, coord system, draw loop, offscreen buffers |
| `references/p5js/shapes-and-geometry.md` | 2D primitives, curves, custom shapes, SDF |
| `references/p5js/visual-effects.md` | Noise, flow fields, particle systems, pixel manipulation |
| `references/p5js/animation.md` | Easing, spring physics, state machines, timelines |
| `references/p5js/typography.md` | `text()`, `loadFont()`, `textToPoints()`, kinetic type |
| `references/p5js/color-systems.md` | HSB/RGB, procedural palettes, blend modes |
| `references/p5js/webgl-and-3d.md` | 3D primitives, camera, lighting, GLSL shaders |
| `references/p5js/interaction.md` | Mouse, keyboard, touch, audio, scroll-driven |
| `references/p5js/export-pipeline.md` | Headless capture, ffmpeg, platform export |
| `references/p5js/troubleshooting.md` | Performance, common mistakes, browser compat |

### p5.js Scripts

| Script | Purpose |
|--------|---------|
| `scripts/p5js/render.sh` | Headless MP4 rendering via Puppeteer + ffmpeg |
| `scripts/p5js/serve.sh` | Local HTTP server for asset loading |
| `scripts/p5js/setup.sh` | Project scaffolding |
| `scripts/p5js/export-frames.js` | Deterministic frame capture |

---

## Manim (Mathematical Animation)

Trigger when users request: mathematical animations, educational videos, algorithm visualizations, equation animations, 3Blue1Brown-style explainers, Manim scenes, or graph/geometry animations.

From maximusmaximus/Mcmusic, MIT.

More from maximusmaximus/Mcmusic