yilsem/aiturk-hermes-ide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Import AITURK IDE 1.0.0-beta.1 from Hermes 63279301; preserve MIT license

Browse Source
This commit is contained in:
yilsem
2026-09-05 13:26:46 +03:00
commit 03634b1ca3
11340 changed files with 3442369 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/creative/DESCRIPTION.md
+3
View File
@@ -0,0 +1,3 @@
---
description: Creative content generation — ASCII art, hand-drawn style diagrams, and visual design tools.
---
skills/creative/architecture-diagram/SKILL.md
+148
View File
@@ -0,0 +1,148 @@
---
name: architecture-diagram
description: "Dark-themed SVG architecture/cloud/infra diagrams as HTML."
version: 1.0.0
author: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent
license: MIT
dependencies: []
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud]
related_skills: [concept-diagrams, excalidraw]
---
# Architecture Diagram Skill
Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.
## Scope
**Best suited for:**
- Software system architecture (frontend / backend / database layers)
- Cloud infrastructure (VPC, regions, subnets, managed services)
- Microservice / service-mesh topology
- Database + API map, deployment diagrams
- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic
**Look elsewhere first for:**
- Physics, chemistry, math, biology, or other scientific subjects
- Physical objects (vehicles, hardware, anatomy, cross-sections)
- Floor plans, narrative journeys, educational / textbook-style visuals
- Hand-drawn whiteboard sketches (consider `excalidraw`)
- Animated explainers (consider an animation skill)
If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.
Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) (MIT).
## Workflow
1. User describes their system architecture (components, connections, technologies)
2. Generate the HTML file following the design system below
3. Save with `write_file` to a `.html` file (e.g. `~/architecture-diagram.html`)
4. User opens in any browser — works offline, no dependencies
### Output Location
Save diagrams to a user-specified path, or default to the current working directory:
```
./[project-name]-architecture.html
```
### Preview
After saving, suggest the user open it:
```bash
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
```
## Design System & Visual Language
### Color Palette (Semantic Mapping)
Use specific `rgba` fills and hex strokes to categorize components:
| Component Type | Fill (rgba) | Stroke (Hex) |
| :--- | :--- | :--- |
| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |
| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |
| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |
| **AWS/Cloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |
| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |
| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |
| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |
### Typography & Background
- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts
- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)
- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern
```svg
<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
```
## Technical Implementation Details
### Component Rendering
Components are rounded rectangles (`rx="6"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:
1. Draw an opaque background rect (`#0f172a`)
2. Draw the semi-transparent styled rect on top
### Connection Rules
- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes
- **Arrowheads:** Defined via SVG markers
- **Security Flows:** Use dashed lines in rose color (`#fb7185`)
- **Boundaries:**
- *Security Groups:* Dashed (`4,4`), rose color
- *Regions:* Large dashed (`8,4`), amber color, `rx="12"`
### Spacing & Layout Logic
- **Standard Height:** 60px (Services); 80-120px (Large components)
- **Vertical Gap:** Minimum 40px between components
- **Message Buses:** Must be placed *in the gap* between services, not overlapping them
- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.
## Document Structure
The generated HTML file follows a four-part layout:
1. **Header:** Title with a pulsing dot indicator and subtitle
2. **Main SVG:** The diagram contained within a rounded border card
3. **Summary Cards:** A grid of three cards below the diagram for high-level details
4. **Footer:** Minimal metadata
### Info Card Pattern
```html
<div class="card">
<div class="card-header">
<div class="card-dot cyan"></div>
<h3>Title</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
</ul>
</div>
```
## Output Requirements
- **Single File:** One self-contained `.html` file
- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts)
- **No JavaScript:** Use pure CSS for any animations (like pulsing dots)
- **Compatibility:** Must render correctly in any modern web browser
## Template Reference
Load the full HTML template for the exact structure, CSS, and SVG component examples:
```
skill_view(name="architecture-diagram", file_path="templates/template.html")
```
The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.
skills/creative/architecture-diagram/templates/template.html
+319
View File
@@ -0,0 +1,319 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[PROJECT NAME] Architecture Diagram</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'JetBrains Mono', monospace;
background: #020617;
min-height: 100vh;
padding: 2rem;
color: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
margin-bottom: 2rem;
}
.header-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.pulse-dot {
width: 12px;
height: 12px;
background: #22d3ee;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
h1 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
}
.subtitle {
color: #94a3b8;
font-size: 0.875rem;
margin-left: 1.75rem;
}
.diagram-container {
background: rgba(15, 23, 42, 0.5);
border-radius: 1rem;
border: 1px solid #1e293b;
padding: 1.5rem;
overflow-x: auto;
}
svg {
width: 100%;
min-width: 900px;
display: block;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.card {
background: rgba(15, 23, 42, 0.5);
border-radius: 0.75rem;
border: 1px solid #1e293b;
padding: 1.25rem;
}
.card-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.card-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.card-dot.cyan { background: #22d3ee; }
.card-dot.emerald { background: #34d399; }
.card-dot.violet { background: #a78bfa; }
.card-dot.amber { background: #fbbf24; }
.card-dot.rose { background: #fb7185; }
.card h3 {
font-size: 0.875rem;
font-weight: 600;
}
.card ul {
list-style: none;
color: #94a3b8;
font-size: 0.75rem;
}
.card li {
margin-bottom: 0.375rem;
}
.footer {
text-align: center;
margin-top: 1.5rem;
color: #475569;
font-size: 0.75rem;
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="header-row">
<div class="pulse-dot"></div>
<h1>[PROJECT NAME] Architecture</h1>
</div>
<p class="subtitle">[Subtitle description]</p>
</div>
<!-- Main Diagram -->
<div class="diagram-container">
<svg viewBox="0 0 1000 680">
<!-- Definitions -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
</defs>
<!-- Background Grid -->
<rect width="100%" height="100%" fill="url(#grid)" />
<!-- =================================================================
COMPONENT EXAMPLES - Copy and customize these patterns
================================================================= -->
<!-- External/Generic Component -->
<rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
<text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Users</text>
<text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Browser/Mobile</text>
<!-- Security Component -->
<rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
<text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
<text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
<!-- Region/Cloud Boundary -->
<rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">AWS Region: us-west-2</text>
<!-- AWS/Cloud Service -->
<rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
<text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CloudFront</text>
<text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CDN</text>
<!-- Multi-line AWS Component (S3 Buckets example) -->
<rect x="200" y="380" width="110" height="100" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
<text x="255" y="400" fill="white" font-size="11" font-weight="600" text-anchor="middle">S3 Buckets</text>
<text x="255" y="420" fill="#94a3b8" font-size="8" text-anchor="middle">• bucket-one</text>
<text x="255" y="434" fill="#94a3b8" font-size="8" text-anchor="middle">• bucket-two</text>
<text x="255" y="448" fill="#94a3b8" font-size="8" text-anchor="middle">• bucket-three</text>
<text x="255" y="466" fill="#fbbf24" font-size="7" text-anchor="middle">OAI Protected</text>
<!-- Security Group (dashed boundary) -->
<rect x="350" y="265" width="120" height="80" rx="8" fill="transparent" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="358" y="279" fill="#fb7185" font-size="8">sg-name :port</text>
<!-- Component inside security group -->
<rect x="360" y="280" width="100" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
<text x="410" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Load Balancer</text>
<text x="410" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS :443</text>
<!-- Backend Component -->
<rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
<text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
<text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
<!-- Database Component -->
<rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
<text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Database</text>
<text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
<!-- Frontend Component -->
<rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
<text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
<text x="300" y="580" fill="#94a3b8" font-size="9" text-anchor="middle">Additional detail</text>
<text x="300" y="595" fill="#94a3b8" font-size="9" text-anchor="middle">More info</text>
<text x="300" y="615" fill="#22d3ee" font-size="8" text-anchor="middle">domain.example.com</text>
<!-- =================================================================
ARROW EXAMPLES
================================================================= -->
<!-- Standard arrow with label -->
<line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
<!-- Simple arrow (no label) -->
<line x1="310" y1="305" x2="358" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<!-- Vertical arrow -->
<line x1="255" y1="330" x2="255" y2="378" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<text x="270" y="358" fill="#94a3b8" font-size="9">OAI</text>
<!-- Dashed arrow (for auth/security flows) -->
<line x1="460" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
<!-- Curved path for auth flow -->
<path d="M 80 140 L 80 200 Q 80 220 100 220 L 200 220 Q 220 220 220 240 L 220 278" fill="none" stroke="#fb7185" stroke-width="1.5" stroke-dasharray="5,5"/>
<text x="150" y="210" fill="#fb7185" font-size="8">JWT + PKCE</text>
<!-- =================================================================
LEGEND
================================================================= -->
<text x="720" y="70" fill="white" font-size="10" font-weight="600">Legend</text>
<rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
<text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
<rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
<text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
<rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
<text x="742" y="122" fill="#94a3b8" font-size="8">Cloud Service</text>
<rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
<text x="742" y="138" fill="#94a3b8" font-size="8">Database</text>
<rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
<text x="742" y="154" fill="#94a3b8" font-size="8">Security</text>
<line x1="720" y1="168" x2="736" y2="168" stroke="#fb7185" stroke-width="1" stroke-dasharray="3,3"/>
<text x="742" y="171" fill="#94a3b8" font-size="8">Auth Flow</text>
<rect x="720" y="178" width="16" height="10" rx="2" fill="transparent" stroke="#fb7185" stroke-width="1" stroke-dasharray="3,3"/>
<text x="742" y="186" fill="#94a3b8" font-size="8">Security Group</text>
</svg>
</div>
<!-- Info Cards -->
<div class="cards">
<div class="card">
<div class="card-header">
<div class="card-dot rose"></div>
<h3>Card Title 1</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
<li>• Item three</li>
<li>• Item four</li>
</ul>
</div>
<div class="card">
<div class="card-header">
<div class="card-dot amber"></div>
<h3>Card Title 2</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
<li>• Item three</li>
<li>• Item four</li>
</ul>
</div>
<div class="card">
<div class="card-header">
<div class="card-dot violet"></div>
<h3>Card Title 3</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
<li>• Item three</li>
<li>• Item four</li>
</ul>
</div>
</div>
<!-- Footer -->
<p class="footer">
[Project Name] • [Additional metadata]
</p>
</div>
</body>
</html>
skills/creative/ascii-video/README.md
+290
View File
@@ -0,0 +1,290 @@
# ☤ ASCII Video
Renders any content as colored ASCII character video. Audio, video, images, text, or pure math in, MP4/GIF/PNG sequence out. Full RGB color per character cell, 1080p 24fps default. No GPU.
Built for [Hermes Agent](https://github.com/NousResearch/hermes-agent). Usable in any coding agent. Canonical source lives here; synced to [`NousResearch/hermes-agent/skills/creative/ascii-video`](https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/ascii-video) via PR.
## What this is
A skill that teaches an agent how to build single-file Python renderers for ASCII video from scratch. The agent gets the full pipeline: grid system, font rasterization, effect library, shader chain, audio analysis, parallel encoding. It writes the renderer, runs it, gets video.
The output is actual video. Not terminal escape codes. Frames are computed as grids of colored characters, composited onto pixel canvases with pre-rasterized font bitmaps, post-processed through shaders, piped to ffmpeg.
## Modes
| Mode | Input | Output |
|------|-------|--------|
| Video-to-ASCII | A video file | ASCII recreation of the footage |
| Audio-reactive | An audio file | Visuals driven by frequency bands, beats, energy |
| Generative | Nothing | Procedural animation from math |
| Hybrid | Video + audio | ASCII video with audio-reactive overlays |
| Lyrics/text | Audio + timed text (SRT) | Karaoke-style text with effects |
| TTS narration | Text quotes + API key | Narrated video with typewriter text and generated speech |
## Pipeline
Every mode follows the same 6-stage path:
```
INPUT --> ANALYZE --> SCENE_FN --> TONEMAP --> SHADE --> ENCODE
```
1. **Input** loads source material (or nothing for generative).
2. **Analyze** extracts per-frame features. Audio gets 6-band FFT, RMS, spectral centroid, flatness, flux, beat detection with exponential decay. Video gets luminance, edges, motion.
3. **Scene function** returns a pixel canvas directly. Composes multiple character grids at different densities, value/hue fields, pixel blend modes. This is where the visuals happen.
4. **Tonemap** does adaptive percentile-based brightness normalization with per-scene gamma. ASCII on black is inherently dark. Linear multipliers don't work. This does.
5. **Shade** runs a `ShaderChain` (38 composable shaders) plus a `FeedbackBuffer` for temporal recursion with spatial transforms.
6. **Encode** pipes raw RGB frames to ffmpeg for H.264 encoding. Segments concatenated, audio muxed.
## Grid system
Characters render on fixed-size grids. Layer multiple densities for depth.
| Size | Font | Grid at 1080p | Use |
|------|------|---------------|-----|
| xs | 8px | 400x108 | Ultra-dense data fields |
| sm | 10px | 320x83 | Rain, starfields |
| md | 16px | 192x56 | Default balanced |
| lg | 20px | 160x45 | Readable text |
| xl | 24px | 137x37 | Large titles |
| xxl | 40px | 80x22 | Giant minimal |
Rendering the same scene on `sm` and `lg` then screen-blending them creates natural texture interference. Fine detail shows through gaps in coarse characters. Most scenes use two or three grids.
## Character palettes (24)
Each sorted dark-to-bright, each a different visual texture. Validated against the font at init so broken glyphs get dropped silently.
| Family | Examples | Feel |
|--------|----------|------|
| Density ramps | ` .:-=+#@█` | Classic ASCII art gradient |
| Block elements | ` ░▒▓█▄▀▐▌` | Chunky, digital |
| Braille | ` ⠁⠂⠃...⠿` | Fine-grained pointillism |
| Dots | ` ⋅∘∙●◉◎` | Smooth, organic |
| Stars | ` ·✧✦✩✨★✶` | Sparkle, celestial |
| Half-fills | ` ◔◑◕◐◒◓◖◗◙` | Directional fill progression |
| Crosshatch | ` ▣▤▥▦▧▨▩` | Hatched density ramp |
| Math | ` ·∘∙•°±×÷≈≠≡∞∫∑Ω` | Scientific, abstract |
| Box drawing | ` ─│┌┐└┘├┤┬┴┼` | Structural, circuit-like |
| Katakana | ` ·ｦｧｨｩｪｫｬｭ...` | Matrix rain |
| Greek | ` αβγδεζηθ...ω` | Classical, academic |
| Runes | ` ᚠᚢᚦᚱᚷᛁᛇᛒᛖᛚᛞᛟ` | Mystical, ancient |
| Alchemical | ` ☉☽♀♂♃♄♅♆♇` | Esoteric |
| Arrows | ` ←↑→↓↔↕↖↗↘↙` | Directional, kinetic |
| Music | ` ♪♫♬♩♭♮♯○●` | Musical |
| Project-specific | ` .·~=≈∞⚡☿✦★⊕◊◆▲▼●■` | Themed per project |
Custom palettes are built per project to match the content.
## Color strategies
| Strategy | How it maps hue | Good for |
|----------|----------------|----------|
| Angle-mapped | Position angle from center | Rainbow radial effects |
| Distance-mapped | Distance from center | Depth, tunnels |
| Frequency-mapped | Audio spectral centroid | Timbral shifting |
| Value-mapped | Brightness level | Heat maps, fire |
| Time-cycled | Slow rotation over time | Ambient, chill |
| Source-sampled | Original video pixel colors | Video-to-ASCII |
| Palette-indexed | Discrete lookup table | Retro, flat graphic |
| Temperature | Warm-to-cool blend | Emotional tone |
| Complementary | Hue + opposite | Bold, dramatic |
| Triadic | Three equidistant hues | Psychedelic, vibrant |
| Analogous | Neighboring hues | Harmonious, subtle |
| Monochrome | Fixed hue, vary S/V | Noir, focused |
Plus 10 discrete RGB palettes (neon, pastel, cyberpunk, vaporwave, earth, ice, blood, forest, mono-green, mono-amber).
Full OKLAB/OKLCH color system: sRGB↔linear↔OKLAB conversion pipeline, perceptually uniform gradient interpolation, and color harmony generation (complementary, triadic, analogous, split-complementary, tetradic).
## Value field generators (21)
Value fields are the core visual building blocks. Each produces a 2D float array in [0, 1] mapping every grid cell to a brightness value.
### Trigonometric (12)
| Field | Description |
|-------|-------------|
| Sine field | Layered multi-sine interference, general-purpose background |
| Smooth noise | Multi-octave sine approximation of Perlin noise |
| Rings | Concentric rings, bass-driven count and wobble |
| Spiral | Logarithmic spiral arms, configurable arm count/tightness |
| Tunnel | Infinite depth perspective (inverse distance) |
| Vortex | Twisting radial pattern, distance modulates angle |
| Interference | N overlapping sine waves creating moire |
| Aurora | Horizontal flowing bands |
| Ripple | Concentric waves from configurable source points |
| Plasma | Sum of sines at multiple orientations/speeds |
| Diamond | Diamond/checkerboard pattern |
| Noise/static | Random per-cell per-frame flicker |
### Noise-based (4)
| Field | Description |
|-------|-------------|
| Value noise | Smooth organic noise, no axis-alignment artifacts |
| fBM | Fractal Brownian Motion — octaved noise for clouds, terrain, smoke |
| Domain warp | Inigo Quilez technique — fBM-driven coordinate distortion for flowing organic forms |
| Voronoi | Moving seed points with distance, edge, and cell-ID output modes |
### Simulation-based (4)
| Field | Description |
|-------|-------------|
| Reaction-diffusion | Gray-Scott with 7 presets: coral, spots, worms, labyrinths, mitosis, pulsating, chaos |
| Cellular automata | Game of Life + 4 rule variants with analog fade trails |
| Strange attractors | Clifford, De Jong, Bedhead — iterated point systems binned to density fields |
| Temporal noise | 3D noise that morphs in-place without directional drift |
### SDF-based
7 signed distance field primitives (circle, box, ring, line, triangle, star, heart) with smooth boolean combinators (union, intersection, subtraction, smooth union/subtraction) and infinite tiling. Render as solid fills or glowing outlines.
## Hue field generators (9)
Determine per-cell color independent of brightness: fixed hue, angle-mapped rainbow, distance gradient, time-cycled rotation, audio spectral centroid, horizontal/vertical gradients, plasma variation, perceptually uniform OKLCH rainbow.
## Coordinate transforms (11)
UV-space transforms applied before effect evaluation: rotate, scale, skew, tile (with mirror seaming), polar, inverse-polar, twist (rotation increasing with distance), fisheye, wave displacement, Möbius conformal transformation. `make_tgrid()` wraps transformed coordinates into a grid object.
## Particle systems (9)
| Type | Behavior |
|------|----------|
| Explosion | Beat-triggered radial burst with gravity and life decay |
| Embers | Rising from bottom with horizontal drift |
| Dissolving cloud | Spreading outward with accelerating fade |
| Starfield | 3D projected, Z-depth stars approaching with streak trails |
| Orbit | Circular/elliptical paths around center |
| Gravity well | Attracted toward configurable point sources |
| Boid flocking | Separation/alignment/cohesion with spatial hash for O(n) neighbors |
| Flow-field | Steered by gradient of any value field |
| Trail particles | Fading lines between current and previous positions |
14 themed particle character sets (energy, spark, leaf, snow, rain, bubble, data, hex, binary, rune, zodiac, dot, dash).
## Temporal coherence
10 easing functions (linear, quad, cubic, expo, elastic, bounce — in/out/in-out). Keyframe interpolation with eased transitions. Value field morphing (smooth crossfade between fields). Value field sequencing (cycle through fields with crossfade). Temporal noise (3D noise evolving smoothly in-place).
## Shader pipeline
38 composable shaders, applied to the pixel canvas after character rendering. Configurable per section.
| Category | Shaders |
|----------|---------|
| Geometry | CRT barrel, pixelate, wave distort, displacement map, kaleidoscope, mirror (h/v/quad/diag) |
| Channel | Chromatic aberration (beat-reactive), channel shift, channel swap, RGB split radial |
| Color | Invert, posterize, threshold, solarize, hue rotate, saturation, color grade, color wobble, color ramp |
| Glow/Blur | Bloom, edge glow, soft focus, radial blur |
| Noise | Film grain (beat-reactive), static noise |
| Lines/Patterns | Scanlines, halftone |
| Tone | Vignette, contrast, gamma, levels, brightness |
| Glitch/Data | Glitch bands (beat-reactive), block glitch, pixel sort, data bend |
12 color tint presets: warm, cool, matrix green, amber, sepia, neon pink, ice, blood, forest, void, sunset, neutral.
7 mood presets for common shader combos:
| Mood | Shaders |
|------|---------|
| Retro terminal | CRT + scanlines + grain + amber/green tint |
| Clean modern | Light bloom + subtle vignette |
| Glitch art | Heavy chromatic + glitch bands + color wobble |
| Cinematic | Bloom + vignette + grain + color grade |
| Dreamy | Heavy bloom + soft focus + color wobble |
| Harsh/industrial | High contrast + grain + scanlines, no bloom |
| Psychedelic | Color wobble + chromatic + kaleidoscope mirror |
## Blend modes and composition
20 pixel blend modes for layering canvases: normal, add, subtract, multiply, screen, overlay, softlight, hardlight, difference, exclusion, colordodge, colorburn, linearlight, vividlight, pin_light, hard_mix, lighten, darken, grain_extract, grain_merge. Both sRGB and linear-light blending supported.
**Feedback buffer.** Temporal recursion — each frame blends with a transformed version of the previous frame. 7 spatial transforms: zoom, shrink, rotate CW/CCW, shift up/down, mirror. Optional per-frame hue shift for rainbow trails. Configurable decay, blend mode, and opacity per scene.
**Masking.** 16 mask types for spatial compositing: shape masks (circle, rect, ring, gradients), procedural masks (any value field as a mask, text stencils), animated masks (iris open/close, wipe, dissolve), boolean operations (union, intersection, subtraction, invert).
**Transitions.** Crossfade, directional wipe, radial wipe, dissolve, glitch cut.
## Scene design patterns
Compositional patterns for making scenes that look intentional rather than random.
**Layer hierarchy.** Background (dim atmosphere, dense grid), content (main visual, standard grid), accent (sparse highlights, coarse grid). Three distinct roles, not three competing layers.
**Directional parameter arcs.** The defining parameter of each scene ramps, accelerates, or builds over its duration. Progress-based formulas (linear, ease-out, step reveal) replace aimless `sin(t)` oscillation.
**Scene concepts.** Scenes built around visual metaphors (emergence, descent, collision, entropy) with motivated layer/palette/feedback choices. Not named after their effects.
**Compositional techniques.** Counter-rotating dual systems, wave collision, progressive fragmentation (voronoi cells multiplying over time), entropy (geometry consumed by reaction-diffusion), staggered layer entry (crescendo buildup).
## Hardware adaptation
Auto-detects CPU count, RAM, platform, ffmpeg. Adapts worker count, resolution, FPS.
| Profile | Resolution | FPS | When |
|---------|-----------|-----|------|
| `draft` | 960x540 | 12 | Check timing/layout |
| `preview` | 1280x720 | 15 | Review effects |
| `production` | 1920x1080 | 24 | Final output |
| `max` | 3840x2160 | 30 | Ultra-high |
| `auto` | Detected | 24 | Adapts to hardware + duration |
`auto` estimates render time and downgrades if it would take over an hour. Low-memory systems drop to 720p automatically.
### Render times (1080p 24fps, ~180ms/frame/worker)
| Duration | 4 workers | 8 workers | 16 workers |
|----------|-----------|-----------|------------|
| 30s | ~3 min | ~2 min | ~1 min |
| 2 min | ~13 min | ~7 min | ~4 min |
| 5 min | ~33 min | ~17 min | ~9 min |
| 10 min | ~65 min | ~33 min | ~17 min |
720p roughly halves these. 4K roughly quadruples them.
## Known pitfalls
**Brightness.** ASCII characters are small bright dots on black. Most frame pixels are background. Linear `* N` multipliers clip highlights and wash out. Use `tonemap()` with per-scene gamma instead. Default gamma 0.75, solarize scenes 0.55, posterize 0.50.
**Render bottleneck.** The per-cell Python loop compositing font bitmaps runs at ~100-150ms/frame. Unavoidable without Cython/C. Everything else must be vectorized numpy. Python for-loops over rows/cols in effect functions will tank performance.
**ffmpeg deadlock.** Never `stderr=subprocess.PIPE` on long-running encodes. Buffer fills at ~64KB, process hangs. Redirect stderr to a file.
**Font cell height.** Pillow's `textbbox()` returns wrong height on macOS. Use `font.getmetrics()` for `ascent + descent`.
**Font compatibility.** Not all Unicode renders in all fonts. Palettes validated at init, blank glyphs silently removed.
## Requirements
◆ Python 3.10+
◆ NumPy, Pillow, SciPy (audio modes)
◆ ffmpeg on PATH
◆ A monospace font (Menlo, Courier, Monaco, auto-detected)
◆ Optional: OpenCV, ElevenLabs API key (TTS mode)
## File structure
```
├── SKILL.md # Modes, workflow, creative direction
├── README.md # This file
└── references/
├── architecture.md # Grid system, fonts, palettes, color, _render_vf()
├── effects.md # Value fields, hue fields, backgrounds, particles
├── shaders.md # 38 shaders, ShaderChain, tint presets, transitions
├── composition.md # Blend modes, multi-grid, tonemap, FeedbackBuffer
├── scenes.md # Scene protocol, SCENES table, render_clip(), examples
├── design-patterns.md # Layer hierarchy, directional arcs, scene concepts
├── inputs.md # Audio analysis, video sampling, text, TTS
├── optimization.md # Hardware detection, vectorized patterns, parallelism
└── troubleshooting.md # Broadcasting traps, blend pitfalls, diagnostics
```
## Projects built with this
✦ 85-second highlight reel. 15 scenes (14×5s + 15s crescendo finale), randomized order, directional parameter arcs, layer hierarchy composition. Showcases the full effect vocabulary: fBM, voronoi fragmentation, reaction-diffusion, cellular automata, dual counter-rotating spirals, wave collision, domain warping, tunnel descent, kaleidoscope symmetry, boid flocking, fire simulation, glitch corruption, and a 7-layer crescendo buildup.
✦ Audio-reactive music visualizer. 3.5 min, 8 sections with distinct effects, beat-triggered particles and glitch, cycling palettes.
✦ TTS narrated testimonial video. 23 quotes, per-quote ElevenLabs voices, background music at 15% wide stereo, per-clip re-rendering for iterative editing.
skills/creative/ascii-video/SKILL.md
+248
View File
@@ -0,0 +1,248 @@
---
name: ascii-video
description: "ASCII video: convert video/audio to colored ASCII MP4/GIF."
version: 1.0.0
author: SHL0MS, Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [ASCII, Video, FFmpeg, Terminal-Art]
related_skills: []
---
# ASCII Video Production Pipeline
## When to use
Use when users request: ASCII video, text art video, terminal-style video, character art animation, retro text visualization, audio visualizer in ASCII, converting video to ASCII art, matrix-style effects, or any animated ASCII output.
## What's inside
Production pipeline for ASCII art video — any format. Converts video/audio/images/generative input into colored ASCII character video output (MP4, GIF, image sequence). Covers: video-to-ASCII conversion, audio-reactive music visualizers, generative ASCII art animations, hybrid video+audio reactive, text/lyrics overlays, real-time terminal rendering.
## Creative Standard
This is visual art. ASCII characters are the medium; cinema is the standard.
**Before writing a single line of code**, articulate the creative concept. What is the mood? What visual story does this tell? What makes THIS project different from every other ASCII video? The user's prompt is a starting point — interpret it with creative ambition, not literal transcription.
**First-render excellence is non-negotiable.** The output must be visually striking without requiring revision rounds. If something looks generic, flat, or like "AI-generated ASCII art," it is wrong — rethink the creative concept before shipping.
**Go beyond the reference vocabulary.** The effect catalogs, shader presets, and palette libraries in the references are a starting vocabulary. For every project, combine, modify, and invent new patterns. The catalog is a palette of paints — you write the painting.
**Be proactively creative.** Extend the skill's vocabulary when the project calls for it. If the references don't have what the vision demands, build it. Include at least one visual moment the user didn't ask for but will appreciate — a transition, an effect, a color choice that elevates the whole piece.
**Cohesive aesthetic over technical correctness.** All scenes in a video must feel connected by a unifying visual language — shared color temperature, related character palettes, consistent motion vocabulary. A technically correct video where every scene uses a random different effect is an aesthetic failure.
**Dense, layered, considered.** Every frame should reward viewing. Never flat black backgrounds. Always multi-grid composition. Always per-scene variation. Always intentional color.
## Modes
| Mode | Input | Output | Reference |
|------|-------|--------|-----------|
| **Video-to-ASCII** | Video file | ASCII recreation of source footage | `references/inputs.md` § Video Sampling |
| **Audio-reactive** | Audio file | Generative visuals driven by audio features | `references/inputs.md` § Audio Analysis |
| **Generative** | None (or seed params) | Procedural ASCII animation | `references/effects.md` |
| **Hybrid** | Video + audio | ASCII video with audio-reactive overlays | Both input refs |
| **Lyrics/text** | Audio + text/SRT | Timed text with visual effects | `references/inputs.md` § Text/Lyrics |
| **TTS narration** | Text quotes + TTS API | Narrated testimonial/quote video with typed text | `references/inputs.md` § TTS Integration |
## Stack
Single self-contained Python script per project. No GPU required.
| Layer | Tool | Purpose |
|-------|------|---------|
| Core | Python 3.10+, NumPy | Math, array ops, vectorized effects |
| Signal | SciPy | FFT, peak detection (audio modes) |
| Imaging | Pillow (PIL) | Font rasterization, frame decoding, image I/O |
| Video I/O | ffmpeg (CLI) | Decode input, encode output, mux audio |
| Parallel | concurrent.futures | N workers for batch/clip rendering |
| TTS | ElevenLabs API (optional) | Generate narration clips |
| Optional | OpenCV | Video frame sampling, edge detection |
## Pipeline Architecture
Every mode follows the same 6-stage pipeline:
```
INPUT → ANALYZE → SCENE_FN → TONEMAP → SHADE → ENCODE
```
1. **INPUT** — Load/decode source material (video frames, audio samples, images, or nothing)
2. **ANALYZE** — Extract per-frame features (audio bands, video luminance/edges, motion vectors)
3. **SCENE_FN** — Scene function renders to pixel canvas (`uint8 H,W,3`). Composes multiple character grids via `_render_vf()` + pixel blend modes. See `references/composition.md`
4. **TONEMAP** — Percentile-based adaptive brightness normalization. See `references/composition.md` § Adaptive Tonemap
5. **SHADE** — Post-processing via `ShaderChain` + `FeedbackBuffer`. See `references/shaders.md`
6. **ENCODE** — Pipe raw RGB frames to ffmpeg for H.264/GIF encoding
## Creative Direction
### Aesthetic Dimensions
| Dimension | Options | Reference |
|-----------|---------|-----------|
| **Character palette** | Density ramps, block elements, symbols, scripts (katakana, Greek, runes, braille), project-specific | `architecture.md` § Palettes |
| **Color strategy** | HSV, OKLAB/OKLCH, discrete RGB palettes, auto-generated harmony, monochrome, temperature | `architecture.md` § Color System |
| **Background texture** | Sine fields, fBM noise, domain warp, voronoi, reaction-diffusion, cellular automata, video | `effects.md` |
| **Primary effects** | Rings, spirals, tunnel, vortex, waves, interference, aurora, fire, SDFs, strange attractors | `effects.md` |
| **Particles** | Sparks, snow, rain, bubbles, runes, orbits, flocking boids, flow-field followers, trails | `effects.md` § Particles |
| **Shader mood** | Retro CRT, clean modern, glitch art, cinematic, dreamy, industrial, psychedelic | `shaders.md` |
| **Grid density** | xs(8px) through xxl(40px), mixed per layer | `architecture.md` § Grid System |
| **Coordinate space** | Cartesian, polar, tiled, rotated, fisheye, Möbius, domain-warped | `effects.md` § Transforms |
| **Feedback** | Zoom tunnel, rainbow trails, ghostly echo, rotating mandala, color evolution | `composition.md` § Feedback |
| **Masking** | Circle, ring, gradient, text stencil, animated iris/wipe/dissolve | `composition.md` § Masking |
| **Transitions** | Crossfade, wipe, dissolve, glitch cut, iris, mask-based reveal | `shaders.md` § Transitions |
### Per-Section Variation
Never use the same config for the entire video. For each section/scene:
- **Different background effect** (or compose 2-3)
- **Different character palette** (match the mood)
- **Different color strategy** (or at minimum a different hue)
- **Vary shader intensity** (more bloom during peaks, more grain during quiet)
- **Different particle types** if particles are active
### Project-Specific Invention
For every project, invent at least one of:
- A custom character palette matching the theme
- A custom background effect (combine/modify existing building blocks)
- A custom color palette (discrete RGB set matching the brand/mood)
- A custom particle character set
- A novel scene transition or visual moment
Don't just pick from the catalog. The catalog is vocabulary — you write the poem.
## Workflow
### Step 1: Creative Vision
Before any code, articulate the creative concept:
- **Mood/atmosphere**: What should the viewer feel? Energetic, meditative, chaotic, elegant, ominous?
- **Visual story**: What happens over the duration? Build tension? Transform? Dissolve?
- **Color world**: Warm/cool? Monochrome? Neon? Earth tones? What's the dominant hue?
- **Character texture**: Dense data? Sparse stars? Organic dots? Geometric blocks?
- **What makes THIS different**: What's the one thing that makes this project unique?
- **Emotional arc**: How do scenes progress? Open with energy, build to climax, resolve?
Map the user's prompt to aesthetic choices. A "chill lo-fi visualizer" demands different everything from a "glitch cyberpunk data stream."
### Step 2: Technical Design
- **Mode** — which of the 6 modes above
- **Resolution** — landscape 1920x1080 (default), portrait 1080x1920, square 1080x1080 @ 24fps
- **Hardware detection** — auto-detect cores/RAM, set quality profile. See `references/optimization.md`
- **Sections** — map timestamps to scene functions, each with its own effect/palette/color/shader config
- **Output format** — MP4 (default), GIF (640x360 @ 15fps), PNG sequence
### Step 3: Build the Script
Single Python file. Components (with references):
1. **Hardware detection + quality profile** — `references/optimization.md`
2. **Input loader** — mode-dependent; `references/inputs.md`
3. **Feature analyzer** — audio FFT, video luminance, or synthetic
4. **Grid + renderer** — multi-density grids with bitmap cache; `references/architecture.md`
5. **Character palettes** — multiple per project; `references/architecture.md` § Palettes
6. **Color system** — HSV + discrete RGB + harmony generation; `references/architecture.md` § Color
7. **Scene functions** — each returns `canvas (uint8 H,W,3)`; `references/scenes.md`
8. **Tonemap** — adaptive brightness normalization; `references/composition.md`
9. **Shader pipeline** — `ShaderChain` + `FeedbackBuffer`; `references/shaders.md`
10. **Scene table + dispatcher** — time → scene function + config; `references/scenes.md`
11. **Parallel encoder** — N-worker clip rendering with ffmpeg pipes
12. **Main** — orchestrate full pipeline
### Step 4: Quality Verification
- **Test frames first**: render single frames at key timestamps before full render
- **Brightness check**: `canvas.mean() > 8` for all ASCII content. If dark, lower gamma
- **Visual coherence**: do all scenes feel like they belong to the same video?
- **Creative vision check**: does the output match the concept from Step 1? If it looks generic, go back
## Critical Implementation Notes
### Brightness — Use `tonemap()`, Not Linear Multipliers
This is the #1 visual issue. ASCII on black is inherently dark. **Never use `canvas * N` multipliers** — they clip highlights. Use adaptive tonemap:
```python
def tonemap(canvas, gamma=0.75):
f = canvas.astype(np.float32)
lo, hi = np.percentile(f[::4, ::4], [1, 99.5])
if hi - lo < 10: hi = lo + 10
f = np.clip((f - lo) / (hi - lo), 0, 1) ** gamma
return (f * 255).astype(np.uint8)
```
Pipeline: `scene_fn() → tonemap() → FeedbackBuffer → ShaderChain → ffmpeg`
Per-scene gamma: default 0.75, solarize 0.55, posterize 0.50, bright scenes 0.85. Use `screen` blend (not `overlay`) for dark layers.
### Font Cell Height
macOS Pillow: `textbbox()` returns wrong height. Use `font.getmetrics()`: `cell_height = ascent + descent`. See `references/troubleshooting.md`.
### ffmpeg Pipe Deadlock
Never `stderr=subprocess.PIPE` with long-running ffmpeg — buffer fills at 64KB and deadlocks. Redirect to file. See `references/troubleshooting.md`.
### Font Compatibility
Not all Unicode chars render in all fonts. Validate palettes at init — render each char, check for blank output. See `references/troubleshooting.md`.
### Per-Clip Architecture
For segmented videos (quotes, scenes, chapters), render each as a separate clip file for parallel rendering and selective re-rendering. See `references/scenes.md`.
## Performance Targets
| Component | Budget |
|-----------|--------|
| Feature extraction | 1-5ms |
| Effect function | 2-15ms |
| Character render | 80-150ms (bottleneck) |
| Shader pipeline | 5-25ms |
| **Total** | ~100-200ms/frame |
## References
| File | Contents |
|------|----------|
| `references/architecture.md` | Grid system, resolution presets, font selection, character palettes (20+), color system (HSV + OKLAB + discrete RGB + harmony generation), `_render_vf()` helper, GridLayer class |
| `references/composition.md` | Pixel blend modes (20 modes), `blend_canvas()`, multi-grid composition, adaptive `tonemap()`, `FeedbackBuffer`, `PixelBlendStack`, masking/stencil system |
| `references/effects.md` | Effect building blocks: value field generators, hue fields, noise/fBM/domain warp, voronoi, reaction-diffusion, cellular automata, SDFs, strange attractors, particle systems, coordinate transforms, temporal coherence |
| `references/shaders.md` | `ShaderChain`, `_apply_shader_step()` dispatch, 38 shader catalog, audio-reactive scaling, transitions, tint presets, output format encoding, terminal rendering |
| `references/scenes.md` | Scene protocol, `Renderer` class, `SCENES` table, `render_clip()`, beat-synced cutting, parallel rendering, design patterns (layer hierarchy, directional arcs, visual metaphors, compositional techniques), complete scene examples at every complexity level, scene design checklist |
| `references/inputs.md` | Audio analysis (FFT, bands, beats), video sampling, image conversion, text/lyrics, TTS integration (ElevenLabs, voice assignment, audio mixing) |
| `references/optimization.md` | Hardware detection, quality profiles, vectorized patterns, parallel rendering, memory management, performance budgets |
| `references/troubleshooting.md` | NumPy broadcasting traps, blend mode pitfalls, multiprocessing/pickling, brightness diagnostics, ffmpeg issues, font problems, common mistakes |
---
## 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.
- **Forced Connections** — when the user wants cross-domain inspiration ("make it look organic," "industrial aesthetic")
- **Conceptual Blending** — when the user names two things to combine ("ocean meets music," "space + calligraphy")
- **Oblique Strategies** — when the user is maximally open ("surprise me," "something I've never seen")
### Forced Connections
1. Pick a domain unrelated to the visual goal (weather systems, microbiology, architecture, fluid dynamics, textile weaving)
2. List its core visual/structural elements (erosion → gradual reveal; mitosis → splitting duplication; weaving → interlocking patterns)
3. Map those elements onto ASCII characters and animation patterns
4. Synthesize — what does "erosion" or "crystallization" look like in a character grid?
### Conceptual Blending
1. Name two distinct visual/conceptual spaces (e.g., ocean waves + sheet music)
2. Map correspondences (crests = high notes, troughs = rests, foam = staccato)
3. Blend selectively — keep the most interesting mappings, discard forced ones
4. Develop emergent properties that exist only in the blend
### Oblique Strategies
1. Draw one: "Honor thy error as a hidden intention" / "Use an old idea" / "What would your closest friend do?" / "Emphasize the flaws" / "Turn it upside down" / "Only a part, not the whole" / "Reverse"
2. Interpret the directive against the current ASCII animation challenge
3. Apply the lateral insight to the visual design before writing code
skills/creative/ascii-video/references/architecture.md
+802
View File
@@ -0,0 +1,802 @@
# Architecture Reference
> **See also:** composition.md · effects.md · scenes.md · shaders.md · inputs.md · optimization.md · troubleshooting.md
## Grid System
### Resolution Presets
```python
RESOLUTION_PRESETS = {
"landscape": (1920, 1080), # 16:9 — YouTube, default
"portrait": (1080, 1920), # 9:16 — TikTok, Reels, Stories
"square": (1080, 1080), # 1:1 — Instagram feed
"ultrawide": (2560, 1080), # 21:9 — cinematic
"landscape4k":(3840, 2160), # 16:9 — 4K
"portrait4k": (2160, 3840), # 9:16 — 4K portrait
}
def get_resolution(preset="landscape", custom=None):
"""Returns (VW, VH) tuple."""
if custom:
return custom
return RESOLUTION_PRESETS.get(preset, RESOLUTION_PRESETS["landscape"])
```
### Multi-Density Grids
Pre-initialize multiple grid sizes. Switch per section for visual variety. Grid dimensions auto-compute from resolution:
**Landscape (1920x1080):**
| Key | Font Size | Grid (cols x rows) | Use |
|-----|-----------|-------------------|-----|
| xs | 8 | 400x108 | Ultra-dense data fields |
| sm | 10 | 320x83 | Dense detail, rain, starfields |
| md | 16 | 192x56 | Default balanced, transitions |
| lg | 20 | 160x45 | Quote/lyric text (readable at 1080p) |
| xl | 24 | 137x37 | Short quotes, large titles |
| xxl | 40 | 80x22 | Giant text, minimal |
**Portrait (1080x1920):**
| Key | Font Size | Grid (cols x rows) | Use |
|-----|-----------|-------------------|-----|
| xs | 8 | 225x192 | Ultra-dense, tall data columns |
| sm | 10 | 180x148 | Dense detail, vertical rain |
| md | 16 | 112x100 | Default balanced |
| lg | 20 | 90x80 | Readable text (~30 chars/line centered) |
| xl | 24 | 75x66 | Short quotes, stacked |
| xxl | 40 | 45x39 | Giant text, minimal |
**Square (1080x1080):**
| Key | Font Size | Grid (cols x rows) | Use |
|-----|-----------|-------------------|-----|
| sm | 10 | 180x83 | Dense detail |
| md | 16 | 112x56 | Default balanced |
| lg | 20 | 90x45 | Readable text |
**Key differences in portrait mode:**
- Fewer columns (90 at `lg` vs 160) — lines must be shorter or wrap
- Many more rows (80 at `lg` vs 45) — vertical stacking is natural
- Aspect ratio correction flips: `asp = cw / ch` still works but the visual emphasis is vertical
- Radial effects appear as tall ellipses unless corrected
- Vertical effects (rain, embers, fire columns) are naturally enhanced
- Horizontal effects (spectrum bars, waveforms) need rotation or compression
**Grid sizing for text in portrait**: Use `lg` (20px) for 2-3 word lines. Max comfortable line length is ~25-30 chars. For longer quotes, break aggressively into many short lines stacked vertically — portrait has vertical space to spare. `xl` (24px) works for single words or very short phrases.
Grid dimensions: `cols = VW // cell_width`, `rows = VH // cell_height`.
### Font Selection
Don't hardcode a single font. Choose fonts to match the project's mood. Monospace fonts are required for grid alignment but vary widely in personality:
| Font | Personality | Platform |
|------|-------------|----------|
| Menlo | Clean, neutral, Apple-native | macOS |
| Monaco | Retro terminal, compact | macOS |
| Courier New | Classic typewriter, wide | Cross-platform |
| SF Mono | Modern, tight spacing | macOS |
| Consolas | Windows native, clean | Windows |
| JetBrains Mono | Developer, ligature-ready | Install |
| Fira Code | Geometric, modern | Install |
| IBM Plex Mono | Corporate, authoritative | Install |
| Source Code Pro | Adobe, balanced | Install |
**Font detection at init**: probe available fonts and fall back gracefully:
```python
import platform
def find_font(preferences):
"""Try fonts in order, return first that exists."""
for name, path in preferences:
if os.path.exists(path):
return path
raise FileNotFoundError(f"No monospace font found. Tried: {[p for _,p in preferences]}")
FONT_PREFS_MACOS = [
("Menlo", "/System/Library/Fonts/Menlo.ttc"),
("Monaco", "/System/Library/Fonts/Monaco.ttf"),
("SF Mono", "/System/Library/Fonts/SFNSMono.ttf"),
("Courier", "/System/Library/Fonts/Courier.ttc"),
]
FONT_PREFS_LINUX = [
("DejaVu Sans Mono", "/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf"),
("Liberation Mono", "/usr/share/fonts/truetype/liberation/LiberationMono-Regular.ttf"),
("Noto Sans Mono", "/usr/share/fonts/truetype/noto/NotoSansMono-Regular.ttf"),
("Ubuntu Mono", "/usr/share/fonts/truetype/ubuntu/UbuntuMono-R.ttf"),
]
FONT_PREFS_WINDOWS = [
("Consolas", r"C:\Windows\Fonts\consola.ttf"),
("Courier New", r"C:\Windows\Fonts\cour.ttf"),
("Lucida Console", r"C:\Windows\Fonts\lucon.ttf"),
("Cascadia Code", os.path.expandvars(r"%LOCALAPPDATA%\Microsoft\Windows\Fonts\CascadiaCode.ttf")),
("Cascadia Mono", os.path.expandvars(r"%LOCALAPPDATA%\Microsoft\Windows\Fonts\CascadiaMono.ttf")),
]
def _get_font_prefs():
s = platform.system()
if s == "Darwin":
return FONT_PREFS_MACOS
elif s == "Windows":
return FONT_PREFS_WINDOWS
return FONT_PREFS_LINUX
FONT_PREFS = _get_font_prefs()
```
**Multi-font rendering**: use different fonts for different layers (e.g., monospace for background, a bolder variant for overlay text). Each GridLayer owns its own font:
```python
grid_bg = GridLayer(find_font(FONT_PREFS), 16) # background
grid_text = GridLayer(find_font(BOLD_PREFS), 20) # readable text
```
### Collecting All Characters
Before initializing grids, gather all characters that need bitmap pre-rasterization:
```python
all_chars = set()
for pal in [PAL_DEFAULT, PAL_DENSE, PAL_BLOCKS, PAL_RUNE, PAL_KATA,
PAL_GREEK, PAL_MATH, PAL_DOTS, PAL_BRAILLE, PAL_STARS,
PAL_HALFFILL, PAL_HATCH, PAL_BINARY, PAL_MUSIC, PAL_BOX,
PAL_CIRCUIT, PAL_ARROWS, PAL_HERMES]: # ... all palettes used in project
all_chars.update(pal)
# Add any overlay text characters
all_chars.update("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 .,-:;!?/|")
all_chars.discard(" ") # space is never rendered
```
### GridLayer Initialization
Each grid pre-computes coordinate arrays for vectorized effect math. The grid automatically adapts to any resolution (landscape, portrait, square):
```python
class GridLayer:
def __init__(self, font_path, font_size, vw=None, vh=None):
"""Initialize grid for any resolution.
vw, vh: video width/height in pixels. Defaults to global VW, VH."""
vw = vw or VW; vh = vh or VH
self.vw = vw; self.vh = vh
self.font = ImageFont.truetype(font_path, font_size)
asc, desc = self.font.getmetrics()
bbox = self.font.getbbox("M")
self.cw = bbox[2] - bbox[0] # character cell width
self.ch = asc + desc # CRITICAL: not textbbox height
self.cols = vw // self.cw
self.rows = vh // self.ch
self.ox = (vw - self.cols * self.cw) // 2 # centering
self.oy = (vh - self.rows * self.ch) // 2
# Aspect ratio metadata
self.aspect = vw / vh # >1 = landscape, <1 = portrait, 1 = square
self.is_portrait = vw < vh
self.is_landscape = vw > vh
# Index arrays
self.rr = np.arange(self.rows, dtype=np.float32)[:, None]
self.cc = np.arange(self.cols, dtype=np.float32)[None, :]
# Polar coordinates (aspect-corrected)
cx, cy = self.cols / 2.0, self.rows / 2.0
asp = self.cw / self.ch
self.dx = self.cc - cx
self.dy = (self.rr - cy) * asp
self.dist = np.sqrt(self.dx**2 + self.dy**2)
self.angle = np.arctan2(self.dy, self.dx)
# Normalized (0-1 range) -- for distance falloff
self.dx_n = (self.cc - cx) / max(self.cols, 1)
self.dy_n = (self.rr - cy) / max(self.rows, 1) * asp
self.dist_n = np.sqrt(self.dx_n**2 + self.dy_n**2)
# Pre-rasterize all characters to float32 bitmaps
self.bm = {}
for c in all_chars:
img = Image.new("L", (self.cw, self.ch), 0)
ImageDraw.Draw(img).text((0, 0), c, fill=255, font=self.font)
self.bm[c] = np.array(img, dtype=np.float32) / 255.0
```
### Character Render Loop
The bottleneck. Composites pre-rasterized bitmaps onto pixel canvas:
```python
def render(self, chars, colors, canvas=None):
if canvas is None:
canvas = np.zeros((VH, VW, 3), dtype=np.uint8)
for row in range(self.rows):
y = self.oy + row * self.ch
if y + self.ch > VH: break
for col in range(self.cols):
c = chars[row, col]
if c == " ": continue
x = self.ox + col * self.cw
if x + self.cw > VW: break
a = self.bm[c] # float32 bitmap
canvas[y:y+self.ch, x:x+self.cw] = np.maximum(
canvas[y:y+self.ch, x:x+self.cw],
(a[:, :, None] * colors[row, col]).astype(np.uint8))
return canvas
```
Use `np.maximum` for additive blending (brighter chars overwrite dimmer ones, never darken).
### Multi-Layer Rendering
Render multiple grids onto the same canvas for depth:
```python
canvas = np.zeros((VH, VW, 3), dtype=np.uint8)
canvas = grid_lg.render(bg_chars, bg_colors, canvas) # background layer
canvas = grid_md.render(main_chars, main_colors, canvas) # main layer
canvas = grid_sm.render(detail_chars, detail_colors, canvas) # detail overlay
```
---
## Character Palettes
### Design Principles
Character palettes are the primary visual texture of ASCII video. They control not just brightness mapping but the entire visual feel. Design palettes intentionally:
- **Visual weight**: characters sorted by the amount of ink/pixels they fill. Space is always index 0.
- **Coherence**: characters within a palette should belong to the same visual family.
- **Density curve**: the brightness-to-character mapping is nonlinear. Dense palettes (many chars) give smoother gradients; sparse palettes (5-8 chars) give posterized/graphic looks.
- **Rendering compatibility**: every character in the palette must exist in the font. Test at init and remove missing glyphs.
### Palette Library
Organized by visual family. Mix and match per project -- don't default to PAL_DEFAULT for everything.
#### Density / Brightness Palettes
```python
PAL_DEFAULT = " .`'-:;!><=+*^~?/|(){}[]#&$@%" # classic ASCII art
PAL_DENSE = " .:;+=xX$#@\u2588" # simple 11-level ramp
PAL_MINIMAL = " .:-=+#@" # 8-level, graphic
PAL_BINARY = " \u2588" # 2-level, extreme contrast
PAL_GRADIENT = " \u2591\u2592\u2593\u2588" # 4-level block gradient
```
#### Unicode Block Elements
```python
PAL_BLOCKS = " \u2591\u2592\u2593\u2588\u2584\u2580\u2590\u258c" # standard blocks
PAL_BLOCKS_EXT = " \u2596\u2597\u2598\u2599\u259a\u259b\u259c\u259d\u259e\u259f\u2591\u2592\u2593\u2588" # quadrant blocks (more detail)
PAL_SHADE = " \u2591\u2592\u2593\u2588\u2587\u2586\u2585\u2584\u2583\u2582\u2581" # vertical fill progression
```
#### Symbolic / Thematic
```python
PAL_MATH = " \u00b7\u2218\u2219\u2022\u00b0\u00b1\u2213\u00d7\u00f7\u2248\u2260\u2261\u2264\u2265\u221e\u222b\u2211\u220f\u221a\u2207\u2202\u2206\u03a9" # math symbols
PAL_BOX = " \u2500\u2502\u250c\u2510\u2514\u2518\u251c\u2524\u252c\u2534\u253c\u2550\u2551\u2554\u2557\u255a\u255d\u2560\u2563\u2566\u2569\u256c" # box drawing
PAL_CIRCUIT = " .\u00b7\u2500\u2502\u250c\u2510\u2514\u2518\u253c\u25cb\u25cf\u25a1\u25a0\u2206\u2207\u2261" # circuit board
PAL_RUNE = " .\u16a0\u16a2\u16a6\u16b1\u16b7\u16c1\u16c7\u16d2\u16d6\u16da\u16de\u16df" # elder futhark runes
PAL_ALCHEMIC = " \u2609\u263d\u2640\u2642\u2643\u2644\u2645\u2646\u2647\u2648\u2649\u264a\u264b" # planetary/alchemical symbols
PAL_ZODIAC = " \u2648\u2649\u264a\u264b\u264c\u264d\u264e\u264f\u2650\u2651\u2652\u2653" # zodiac
PAL_ARROWS = " \u2190\u2191\u2192\u2193\u2194\u2195\u2196\u2197\u2198\u2199\u21a9\u21aa\u21bb\u27a1" # directional arrows
PAL_MUSIC = " \u266a\u266b\u266c\u2669\u266d\u266e\u266f\u25cb\u25cf" # musical notation
```
#### Script / Writing System
```python
PAL_KATA = " \u00b7\uff66\uff67\uff68\uff69\uff6a\uff6b\uff6c\uff6d\uff6e\uff6f\uff70\uff71\uff72\uff73\uff74\uff75\uff76\uff77" # katakana halfwidth (matrix rain)
PAL_GREEK = " \u03b1\u03b2\u03b3\u03b4\u03b5\u03b6\u03b7\u03b8\u03b9\u03ba\u03bb\u03bc\u03bd\u03be\u03c0\u03c1\u03c3\u03c4\u03c6\u03c8\u03c9" # Greek lowercase
PAL_CYRILLIC = " \u0430\u0431\u0432\u0433\u0434\u0435\u0436\u0437\u0438\u043a\u043b\u043c\u043d\u043e\u043f\u0440\u0441\u0442\u0443\u0444\u0445\u0446\u0447\u0448" # Cyrillic lowercase
PAL_ARABIC = " \u0627\u0628\u062a\u062b\u062c\u062d\u062e\u062f\u0630\u0631\u0632\u0633\u0634\u0635\u0636\u0637" # Arabic letters (isolated forms)
```
#### Dot / Point Progressions
```python
PAL_DOTS = " ⋅∘∙●◉◎◆✦★" # dot size progression
PAL_BRAILLE = " ⠁⠂⠃⠄⠅⠆⠇⠈⠉⠊⠋⠌⠍⠎⠏⠐⠑⠒⠓⠔⠕⠖⠗⠘⠙⠚⠛⠜⠝⠞⠟⠿" # braille patterns
PAL_STARS = " ·✧✦✩✨★✶✳✸" # star progression
PAL_HALFFILL = " ◔◑◕◐◒◓◖◗◙" # directional half-fill progression
PAL_HATCH = " ▣▤▥▦▧▨▩" # crosshatch density ramp
```
#### Project-Specific (examples -- invent new ones per project)
```python
PAL_HERMES = " .\u00b7~=\u2248\u221e\u26a1\u263f\u2726\u2605\u2295\u25ca\u25c6\u25b2\u25bc\u25cf\u25a0" # mythology/tech blend
PAL_OCEAN = " ~\u2248\u2248\u2248\u223c\u2307\u2248\u224b\u224c\u2248" # water/wave characters
PAL_ORGANIC = " .\u00b0\u2218\u2022\u25e6\u25c9\u2742\u273f\u2741\u2743" # growing/botanical
PAL_MACHINE = " _\u2500\u2502\u250c\u2510\u253c\u2261\u25a0\u2588\u2593\u2592\u2591" # mechanical/industrial
```
### Creating Custom Palettes
When designing for a project, build palettes from the content's theme:
1. **Choose a visual family** (dots, blocks, symbols, script)
2. **Sort by visual weight** -- render each char at target font size, count lit pixels, sort ascending
3. **Test at target grid size** -- some chars collapse to blobs at small sizes
4. **Validate in font** -- remove chars the font can't render:
```python
def validate_palette(pal, font):
"""Remove characters the font can't render."""
valid = []
for c in pal:
if c == " ":
valid.append(c)
continue
img = Image.new("L", (20, 20), 0)
ImageDraw.Draw(img).text((0, 0), c, fill=255, font=font)
if np.array(img).max() > 0: # char actually rendered something
valid.append(c)
return "".join(valid)
```
### Mapping Values to Characters
```python
def val2char(v, mask, pal=PAL_DEFAULT):
"""Map float array (0-1) to character array using palette."""
n = len(pal)
idx = np.clip((v * n).astype(int), 0, n - 1)
out = np.full(v.shape, " ", dtype="U1")
for i, ch in enumerate(pal):
out[mask & (idx == i)] = ch
return out
```
**Nonlinear mapping** for different visual curves:
```python
def val2char_gamma(v, mask, pal, gamma=1.0):
"""Gamma-corrected palette mapping. gamma<1 = brighter, gamma>1 = darker."""
v_adj = np.power(np.clip(v, 0, 1), gamma)
return val2char(v_adj, mask, pal)
def val2char_step(v, mask, pal, thresholds):
"""Custom threshold mapping. thresholds = list of float breakpoints."""
out = np.full(v.shape, pal[0], dtype="U1")
for i, thr in enumerate(thresholds):
out[mask & (v > thr)] = pal[min(i + 1, len(pal) - 1)]
return out
```
---
## Color System
### HSV->RGB (Vectorized)
All color computation in HSV for intuitive control, converted at render time:
```python
def hsv2rgb(h, s, v):
"""Vectorized HSV->RGB. h,s,v are numpy arrays. Returns (R,G,B) uint8 arrays."""
h = h % 1.0
c = v * s; x = c * (1 - np.abs((h*6) % 2 - 1)); m = v - c
# ... 6 sector assignment ...
return (np.clip((r+m)*255, 0, 255).astype(np.uint8),
np.clip((g+m)*255, 0, 255).astype(np.uint8),
np.clip((b+m)*255, 0, 255).astype(np.uint8))
```
### Color Mapping Strategies
Don't default to a single strategy. Choose based on the visual intent:
| Strategy | Hue source | Effect | Good for |
|----------|------------|--------|----------|
| Angle-mapped | `g.angle / (2*pi)` | Rainbow around center | Radial effects, kaleidoscopes |
| Distance-mapped | `g.dist_n * 0.3` | Gradient from center | Tunnels, depth effects |
| Frequency-mapped | `f["cent"] * 0.2` | Timbral color shifting | Audio-reactive |
| Value-mapped | `val * 0.15` | Brightness-dependent hue | Fire, heat maps |
| Time-cycled | `t * rate` | Slow color rotation | Ambient, chill |
| Source-sampled | Video frame pixel colors | Preserve original color | Video-to-ASCII |
| Palette-indexed | Discrete color lookup | Flat graphic style | Retro, pixel art |
| Temperature | Blend between warm/cool | Emotional tone | Mood-driven scenes |
| Complementary | `hue` and `hue + 0.5` | High contrast | Bold, dramatic |
| Triadic | `hue`, `hue + 0.33`, `hue + 0.66` | Vibrant, balanced | Psychedelic |
| Analogous | `hue +/- 0.08` | Harmonious, subtle | Elegant, cohesive |
| Monochrome | Fixed hue, vary S and V | Restrained, focused | Noir, minimal |
### Color Palettes (Discrete RGB)
For non-HSV workflows -- direct RGB color sets for graphic/retro looks:
```python
# Named color palettes -- use for flat/graphic styles or per-character coloring
COLORS_NEON = [(255,0,102), (0,255,153), (102,0,255), (255,255,0), (0,204,255)]
COLORS_PASTEL = [(255,179,186), (255,223,186), (255,255,186), (186,255,201), (186,225,255)]
COLORS_MONO_GREEN = [(0,40,0), (0,80,0), (0,140,0), (0,200,0), (0,255,0)]
COLORS_MONO_AMBER = [(40,20,0), (80,50,0), (140,90,0), (200,140,0), (255,191,0)]
COLORS_CYBERPUNK = [(255,0,60), (0,255,200), (180,0,255), (255,200,0)]
COLORS_VAPORWAVE = [(255,113,206), (1,205,254), (185,103,255), (5,255,161)]
COLORS_EARTH = [(86,58,26), (139,90,43), (189,154,91), (222,193,136), (245,230,193)]
COLORS_ICE = [(200,230,255), (150,200,240), (100,170,230), (60,130,210), (30,80,180)]
COLORS_BLOOD = [(80,0,0), (140,10,10), (200,20,20), (255,50,30), (255,100,80)]
COLORS_FOREST = [(10,30,10), (20,60,15), (30,100,20), (50,150,30), (80,200,50)]
def rgb_palette_map(val, mask, palette):
"""Map float array (0-1) to RGB colors from a discrete palette."""
n = len(palette)
idx = np.clip((val * n).astype(int), 0, n - 1)
R = np.zeros(val.shape, dtype=np.uint8)
G = np.zeros(val.shape, dtype=np.uint8)
B = np.zeros(val.shape, dtype=np.uint8)
for i, (r, g, b) in enumerate(palette):
m = mask & (idx == i)
R[m] = r; G[m] = g; B[m] = b
return R, G, B
```
### OKLAB Color Space (Perceptually Uniform)
HSV hue is perceptually non-uniform: green occupies far more visual range than blue. OKLAB / OKLCH provide perceptually even color steps — hue increments of 0.1 look equally different regardless of starting hue. Use OKLAB for:
- Gradient interpolation (no unwanted intermediate hues)
- Color harmony generation (perceptually balanced palettes)
- Smooth color transitions over time
```python
# --- sRGB <-> Linear sRGB ---
def srgb_to_linear(c):
"""Convert sRGB [0,1] to linear light. c: float32 array."""
return np.where(c <= 0.04045, c / 12.92, ((c + 0.055) / 1.055) ** 2.4)
def linear_to_srgb(c):
"""Convert linear light to sRGB [0,1]."""
return np.where(c <= 0.0031308, c * 12.92, 1.055 * np.power(np.maximum(c, 0), 1/2.4) - 0.055)
# --- Linear sRGB <-> OKLAB ---
def linear_rgb_to_oklab(r, g, b):
"""Linear sRGB to OKLAB. r,g,b: float32 arrays [0,1].
Returns (L, a, b) where L=[0,1], a,b=[-0.4, 0.4] approx."""
l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b
m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b
s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b
l_c = np.cbrt(l_); m_c = np.cbrt(m_); s_c = np.cbrt(s_)
L = 0.2104542553 * l_c + 0.7936177850 * m_c - 0.0040720468 * s_c
a = 1.9779984951 * l_c - 2.4285922050 * m_c + 0.4505937099 * s_c
b_ = 0.0259040371 * l_c + 0.7827717662 * m_c - 0.8086757660 * s_c
return L, a, b_
def oklab_to_linear_rgb(L, a, b):
"""OKLAB to linear sRGB. Returns (r, g, b) float32 arrays [0,1]."""
l_ = L + 0.3963377774 * a + 0.2158037573 * b
m_ = L - 0.1055613458 * a - 0.0638541728 * b
s_ = L - 0.0894841775 * a - 1.2914855480 * b
l_c = l_ ** 3; m_c = m_ ** 3; s_c = s_ ** 3
r = +4.0767416621 * l_c - 3.3077115913 * m_c + 0.2309699292 * s_c
g = -1.2684380046 * l_c + 2.6097574011 * m_c - 0.3413193965 * s_c
b_ = -0.0041960863 * l_c - 0.7034186147 * m_c + 1.7076147010 * s_c
return np.clip(r, 0, 1), np.clip(g, 0, 1), np.clip(b_, 0, 1)
# --- Convenience: sRGB uint8 <-> OKLAB ---
def rgb_to_oklab(R, G, B):
"""sRGB uint8 arrays to OKLAB."""
r = srgb_to_linear(R.astype(np.float32) / 255.0)
g = srgb_to_linear(G.astype(np.float32) / 255.0)
b = srgb_to_linear(B.astype(np.float32) / 255.0)
return linear_rgb_to_oklab(r, g, b)
def oklab_to_rgb(L, a, b):
"""OKLAB to sRGB uint8 arrays."""
r, g, b_ = oklab_to_linear_rgb(L, a, b)
R = np.clip(linear_to_srgb(r) * 255, 0, 255).astype(np.uint8)
G = np.clip(linear_to_srgb(g) * 255, 0, 255).astype(np.uint8)
B = np.clip(linear_to_srgb(b_) * 255, 0, 255).astype(np.uint8)
return R, G, B
# --- OKLCH (cylindrical form of OKLAB) ---
def oklab_to_oklch(L, a, b):
"""OKLAB to OKLCH. Returns (L, C, H) where H is in [0, 1] (normalized)."""
C = np.sqrt(a**2 + b**2)
H = (np.arctan2(b, a) / (2 * np.pi)) % 1.0
return L, C, H
def oklch_to_oklab(L, C, H):
"""OKLCH to OKLAB. H in [0, 1]."""
angle = H * 2 * np.pi
a = C * np.cos(angle)
b = C * np.sin(angle)
return L, a, b
```
### Gradient Interpolation (OKLAB vs HSV)
Interpolating colors through OKLAB avoids the hue detours that HSV produces:
```python
def lerp_oklab(color_a, color_b, t_array):
"""Interpolate between two sRGB colors through OKLAB.
color_a, color_b: (R, G, B) tuples 0-255
t_array: float32 array [0,1] — interpolation parameter per pixel.
Returns (R, G, B) uint8 arrays."""
La, aa, ba = rgb_to_oklab(
np.full_like(t_array, color_a[0], dtype=np.uint8),
np.full_like(t_array, color_a[1], dtype=np.uint8),
np.full_like(t_array, color_a[2], dtype=np.uint8))
Lb, ab, bb = rgb_to_oklab(
np.full_like(t_array, color_b[0], dtype=np.uint8),
np.full_like(t_array, color_b[1], dtype=np.uint8),
np.full_like(t_array, color_b[2], dtype=np.uint8))
L = La + (Lb - La) * t_array
a = aa + (ab - aa) * t_array
b = ba + (bb - ba) * t_array
return oklab_to_rgb(L, a, b)
def lerp_oklch(color_a, color_b, t_array, short_path=True):
"""Interpolate through OKLCH (preserves chroma, smooth hue path).
short_path: take the shorter arc around the hue wheel."""
La, aa, ba = rgb_to_oklab(
np.full_like(t_array, color_a[0], dtype=np.uint8),
np.full_like(t_array, color_a[1], dtype=np.uint8),
np.full_like(t_array, color_a[2], dtype=np.uint8))
Lb, ab, bb = rgb_to_oklab(
np.full_like(t_array, color_b[0], dtype=np.uint8),
np.full_like(t_array, color_b[1], dtype=np.uint8),
np.full_like(t_array, color_b[2], dtype=np.uint8))
L1, C1, H1 = oklab_to_oklch(La, aa, ba)
L2, C2, H2 = oklab_to_oklch(Lb, ab, bb)
# Shortest hue path
if short_path:
dh = H2 - H1
dh = np.where(dh > 0.5, dh - 1.0, np.where(dh < -0.5, dh + 1.0, dh))
H = (H1 + dh * t_array) % 1.0
else:
H = H1 + (H2 - H1) * t_array
L = L1 + (L2 - L1) * t_array
C = C1 + (C2 - C1) * t_array
Lout, aout, bout = oklch_to_oklab(L, C, H)
return oklab_to_rgb(Lout, aout, bout)
```
### Color Harmony Generation
Auto-generate harmonious palettes from a seed color:
```python
def harmony_complementary(seed_rgb):
"""Two colors: seed + opposite hue."""
L, a, b = rgb_to_oklab(np.array([seed_rgb[0]]), np.array([seed_rgb[1]]), np.array([seed_rgb[2]]))
_, C, H = oklab_to_oklch(L, a, b)
return [seed_rgb, _oklch_to_srgb_tuple(L[0], C[0], (H[0] + 0.5) % 1.0)]
def harmony_triadic(seed_rgb):
"""Three colors: seed + two at 120-degree offsets."""
L, a, b = rgb_to_oklab(np.array([seed_rgb[0]]), np.array([seed_rgb[1]]), np.array([seed_rgb[2]]))
_, C, H = oklab_to_oklch(L, a, b)
return [seed_rgb,
_oklch_to_srgb_tuple(L[0], C[0], (H[0] + 0.333) % 1.0),
_oklch_to_srgb_tuple(L[0], C[0], (H[0] + 0.667) % 1.0)]
def harmony_analogous(seed_rgb, spread=0.08, n=5):
"""N colors spread evenly around seed hue."""
L, a, b = rgb_to_oklab(np.array([seed_rgb[0]]), np.array([seed_rgb[1]]), np.array([seed_rgb[2]]))
_, C, H = oklab_to_oklch(L, a, b)
offsets = np.linspace(-spread * (n-1)/2, spread * (n-1)/2, n)
return [_oklch_to_srgb_tuple(L[0], C[0], (H[0] + off) % 1.0) for off in offsets]
def harmony_split_complementary(seed_rgb, split=0.08):
"""Three colors: seed + two flanking the complement."""
L, a, b = rgb_to_oklab(np.array([seed_rgb[0]]), np.array([seed_rgb[1]]), np.array([seed_rgb[2]]))
_, C, H = oklab_to_oklch(L, a, b)
comp = (H[0] + 0.5) % 1.0
return [seed_rgb,
_oklch_to_srgb_tuple(L[0], C[0], (comp - split) % 1.0),
_oklch_to_srgb_tuple(L[0], C[0], (comp + split) % 1.0)]
def harmony_tetradic(seed_rgb):
"""Four colors: two complementary pairs at 90-degree offset."""
L, a, b = rgb_to_oklab(np.array([seed_rgb[0]]), np.array([seed_rgb[1]]), np.array([seed_rgb[2]]))
_, C, H = oklab_to_oklch(L, a, b)
return [seed_rgb,
_oklch_to_srgb_tuple(L[0], C[0], (H[0] + 0.25) % 1.0),
_oklch_to_srgb_tuple(L[0], C[0], (H[0] + 0.5) % 1.0),
_oklch_to_srgb_tuple(L[0], C[0], (H[0] + 0.75) % 1.0)]
def _oklch_to_srgb_tuple(L, C, H):
"""Helper: single OKLCH -> sRGB (R,G,B) int tuple."""
La = np.array([L]); Ca = np.array([C]); Ha = np.array([H])
Lo, ao, bo = oklch_to_oklab(La, Ca, Ha)
R, G, B = oklab_to_rgb(Lo, ao, bo)
return (int(R[0]), int(G[0]), int(B[0]))
```
### OKLAB Hue Fields
Drop-in replacements for `hf_*` generators that produce perceptually uniform hue variation:
```python
def hf_oklch_angle(offset=0.0, chroma=0.12, lightness=0.7):
"""OKLCH hue mapped to angle from center. Perceptually uniform rainbow.
Returns (R, G, B) uint8 color array instead of a float hue.
NOTE: Use with _render_vf_rgb() variant, not standard _render_vf()."""
def fn(g, f, t, S):
H = (g.angle / (2 * np.pi) + offset + t * 0.05) % 1.0
L = np.full_like(H, lightness)
C = np.full_like(H, chroma)
Lo, ao, bo = oklch_to_oklab(L, C, H)
R, G, B = oklab_to_rgb(Lo, ao, bo)
return mkc(R, G, B, g.rows, g.cols)
return fn
```
### Compositing Helpers
```python
def mkc(R, G, B, rows, cols):
"""Pack 3 uint8 arrays into (rows, cols, 3) color array."""
o = np.zeros((rows, cols, 3), dtype=np.uint8)
o[:,:,0] = R; o[:,:,1] = G; o[:,:,2] = B
return o
def layer_over(base_ch, base_co, top_ch, top_co):
"""Composite top layer onto base. Non-space chars overwrite."""
m = top_ch != " "
base_ch[m] = top_ch[m]; base_co[m] = top_co[m]
return base_ch, base_co
def layer_blend(base_co, top_co, alpha):
"""Alpha-blend top color layer onto base. alpha is float array (0-1) or scalar."""
if isinstance(alpha, (int, float)):
alpha = np.full(base_co.shape[:2], alpha, dtype=np.float32)
a = alpha[:,:,None]
return np.clip(base_co * (1 - a) + top_co * a, 0, 255).astype(np.uint8)
def stamp(ch, co, text, row, col, color=(255,255,255)):
"""Write text string at position."""
for i, c in enumerate(text):
cc = col + i
if 0 <= row < ch.shape[0] and 0 <= cc < ch.shape[1]:
ch[row, cc] = c; co[row, cc] = color
```
---
## Section System
Map time ranges to effect functions + shader configs + grid sizes:
```python
SECTIONS = [
(0.0, "void"), (3.94, "starfield"), (21.0, "matrix"),
(46.0, "drop"), (130.0, "glitch"), (187.0, "outro"),
]
FX_DISPATCH = {"void": fx_void, "starfield": fx_starfield, ...}
SECTION_FX = {"void": {"vignette": 0.3, "bloom": 170}, ...}
SECTION_GRID = {"void": "md", "starfield": "sm", "drop": "lg", ...}
SECTION_MIRROR = {"drop": "h", "bass_rings": "quad"}
def get_section(t):
sec = SECTIONS[0][1]
for ts, name in SECTIONS:
if t >= ts: sec = name
return sec
```
---
## Parallel Encoding
Split frames across N workers. Each pipes raw RGB to its own ffmpeg subprocess:
```python
def render_batch(batch_id, frame_start, frame_end, features, seg_path):
r = Renderer()
cmd = ["ffmpeg", "-y", "-f", "rawvideo", "-pix_fmt", "rgb24",
"-s", f"{VW}x{VH}", "-r", str(FPS), "-i", "pipe:0",
"-c:v", "libx264", "-preset", "fast", "-crf", "18",
"-pix_fmt", "yuv420p", seg_path]
# CRITICAL: stderr to file, not pipe
stderr_fh = open(os.path.join(workdir, f"err_{batch_id:02d}.log"), "w")
pipe = subprocess.Popen(cmd, stdin=subprocess.PIPE,
stdout=subprocess.DEVNULL, stderr=stderr_fh)
for fi in range(frame_start, frame_end):
t = fi / FPS
sec = get_section(t)
f = {k: float(features[k][fi]) for k in features}
ch, co = FX_DISPATCH[sec](r, f, t)
canvas = r.render(ch, co)
canvas = apply_mirror(canvas, sec, f)
canvas = apply_shaders(canvas, sec, f, t)
pipe.stdin.write(canvas.tobytes())
pipe.stdin.close()
pipe.wait()
stderr_fh.close()
```
Concatenate segments + mux audio:
```python
# Write concat file
with open(concat_path, "w") as cf:
for seg in segments:
cf.write(f"file '{seg}'\n")
subprocess.run(["ffmpeg", "-y", "-f", "concat", "-safe", "0", "-i", concat_path,
"-i", audio_path, "-c:v", "copy", "-c:a", "aac", "-b:a", "192k",
"-shortest", output_path])
```
## Effect Function Contract
### v2 Protocol (Current)
Every scene function: `(r, f, t, S) -> canvas_uint8` — where `r` = Renderer, `f` = features dict, `t` = time float, `S` = persistent state dict
```python
def fx_example(r, f, t, S):
"""Scene function returns a full pixel canvas (uint8 H,W,3).
Scenes have full control over multi-grid rendering and pixel-level composition.
"""
# Render multiple layers at different grid densities
canvas_a = _render_vf(r, "md", vf_plasma, hf_angle(0.0), PAL_DENSE, f, t, S)
canvas_b = _render_vf(r, "sm", vf_vortex, hf_time_cycle(0.1), PAL_RUNE, f, t, S)
# Pixel-level blend
result = blend_canvas(canvas_a, canvas_b, "screen", 0.8)
return result
```
See `references/scenes.md` for the full scene protocol, the Renderer class, `_render_vf()` helper, and complete scene examples.
See `references/composition.md` for blend modes, tone mapping, feedback buffers, and multi-grid composition.
### v1 Protocol (Legacy)
Simple scenes that use a single grid can still return `(chars, colors)` and let the caller handle rendering, but the v2 canvas protocol is preferred for all new code.
```python
def fx_simple(r, f, t, S):
g = r.get_grid("md")
val = np.sin(g.dist * 0.1 - t * 3) * f.get("bass", 0.3) * 2
val = np.clip(val, 0, 1); mask = val > 0.03
ch = val2char(val, mask, PAL_DEFAULT)
R, G, B = hsv2rgb(np.full_like(val, 0.6), np.full_like(val, 0.7), val)
co = mkc(R, G, B, g.rows, g.cols)
return g.render(ch, co) # returns canvas directly
```
### Persistent State
Effects that need state across frames (particles, rain columns) use the `S` dict parameter (which is `r.S` — same object, but passed explicitly for clarity):
```python
def fx_with_state(r, f, t, S):
if "particles" not in S:
S["particles"] = initialize_particles()
update_particles(S["particles"])
# ...
```
State persists across frames within a single scene/clip. Each worker process (and each scene) gets its own independent state.
### Helper Functions
```python
def hsv2rgb_scalar(h, s, v):
"""Single-value HSV to RGB. Returns (R, G, B) tuple of ints 0-255."""
h = h % 1.0
c = v * s; x = c * (1 - abs((h * 6) % 2 - 1)); m = v - c
if h * 6 < 1: r, g, b = c, x, 0
elif h * 6 < 2: r, g, b = x, c, 0
elif h * 6 < 3: r, g, b = 0, c, x
elif h * 6 < 4: r, g, b = 0, x, c
elif h * 6 < 5: r, g, b = x, 0, c
else: r, g, b = c, 0, x
return (int((r+m)*255), int((g+m)*255), int((b+m)*255))
def log(msg):
"""Print timestamped log message."""
print(msg, flush=True)
```
skills/creative/ascii-video/references/composition.md
+892
View File
@@ -0,0 +1,892 @@
# Composition & Brightness Reference
The composable system is the core of visual complexity. It operates at three levels: pixel-level blend modes, multi-grid composition, and adaptive brightness management. This document covers all three, plus the masking/stencil system for spatial control.
> **See also:** architecture.md · effects.md · scenes.md · shaders.md · troubleshooting.md
## Pixel-Level Blend Modes
### The `blend_canvas()` Function
All blending operates on full pixel canvases (`uint8 H,W,3`). Internally converts to float32 [0,1] for precision, blends, lerps by opacity, converts back.
```python
def blend_canvas(base, top, mode="normal", opacity=1.0):
af = base.astype(np.float32) / 255.0
bf = top.astype(np.float32) / 255.0
fn = BLEND_MODES.get(mode, BLEND_MODES["normal"])
result = fn(af, bf)
if opacity < 1.0:
result = af * (1 - opacity) + result * opacity
return np.clip(result * 255, 0, 255).astype(np.uint8)
```
### 20 Blend Modes
```python
BLEND_MODES = {
# Basic arithmetic
"normal": lambda a, b: b,
"add": lambda a, b: np.clip(a + b, 0, 1),
"subtract": lambda a, b: np.clip(a - b, 0, 1),
"multiply": lambda a, b: a * b,
"screen": lambda a, b: 1 - (1 - a) * (1 - b),
# Contrast
"overlay": lambda a, b: np.where(a < 0.5, 2*a*b, 1 - 2*(1-a)*(1-b)),
"softlight": lambda a, b: (1 - 2*b)*a*a + 2*b*a,
"hardlight": lambda a, b: np.where(b < 0.5, 2*a*b, 1 - 2*(1-a)*(1-b)),
# Difference
"difference": lambda a, b: np.abs(a - b),
"exclusion": lambda a, b: a + b - 2*a*b,
# Dodge / burn
"colordodge": lambda a, b: np.clip(a / (1 - b + 1e-6), 0, 1),
"colorburn": lambda a, b: np.clip(1 - (1 - a) / (b + 1e-6), 0, 1),
# Light
"linearlight": lambda a, b: np.clip(a + 2*b - 1, 0, 1),
"vividlight": lambda a, b: np.where(b < 0.5,
np.clip(1 - (1-a)/(2*b + 1e-6), 0, 1),
np.clip(a / (2*(1-b) + 1e-6), 0, 1)),
"pin_light": lambda a, b: np.where(b < 0.5,
np.minimum(a, 2*b), np.maximum(a, 2*b - 1)),
"hard_mix": lambda a, b: np.where(a + b >= 1.0, 1.0, 0.0),
# Compare
"lighten": lambda a, b: np.maximum(a, b),
"darken": lambda a, b: np.minimum(a, b),
# Grain
"grain_extract": lambda a, b: np.clip(a - b + 0.5, 0, 1),
"grain_merge": lambda a, b: np.clip(a + b - 0.5, 0, 1),
}
```
### Blend Mode Selection Guide
**Modes that brighten** (safe for dark inputs):
- `screen` — always brightens. Two 50% gray layers screen to 75%. The go-to safe blend.
- `add` — simple addition, clips at white. Good for sparkles, glows, particle overlays.
- `colordodge` — extreme brightening at overlap zones. Can blow out. Use low opacity (0.3-0.5).
- `linearlight` — aggressive brightening. Similar to add but with offset.
**Modes that darken** (avoid with dark inputs):
- `multiply` — darkens everything. Only use when both layers are already bright.
- `overlay` — darkens when base < 0.5, brightens when base > 0.5. Crushes dark inputs: `2 * 0.12 * 0.12 = 0.03`. Use `screen` instead for dark material.
- `colorburn` — extreme darkening at overlap zones.
**Modes that create contrast**:
- `softlight` — gentle contrast. Good for subtle texture overlay.
- `hardlight` — strong contrast. Like overlay but keyed on the top layer.
- `vividlight` — very aggressive contrast. Use sparingly.
**Modes that create color effects**:
- `difference` — XOR-like patterns. Two identical layers difference to black; offset layers create wild colors. Great for psychedelic looks.
- `exclusion` — softer version of difference. Creates complementary color patterns.
- `hard_mix` — posterizes to pure black/white/saturated color at intersections.
**Modes for texture blending**:
- `grain_extract` / `grain_merge` — extract a texture from one layer, apply it to another.
### Multi-Layer Chaining
```python
# Pattern: render layers -> blend sequentially
canvas_a = _render_vf(r, "md", vf_plasma, hf_angle(0.0), PAL_DENSE, f, t, S)
canvas_b = _render_vf(r, "sm", vf_vortex, hf_time_cycle(0.1), PAL_RUNE, f, t, S)
canvas_c = _render_vf(r, "lg", vf_rings, hf_distance(), PAL_BLOCKS, f, t, S)
result = blend_canvas(canvas_a, canvas_b, "screen", 0.8)
result = blend_canvas(result, canvas_c, "difference", 0.6)
```
Order matters: `screen(A, B)` is commutative, but `difference(screen(A,B), C)` differs from `difference(A, screen(B,C))`.
### Linear-Light Blend Modes
Standard `blend_canvas()` operates in sRGB space — the raw byte values. This is fine for most uses, but sRGB is perceptually non-linear: blending in sRGB darkens midtones and shifts hues slightly. For physically accurate blending (matching how light actually combines), convert to linear light first.
Uses `srgb_to_linear()` / `linear_to_srgb()` from `architecture.md` § OKLAB Color System.
```python
def blend_canvas_linear(base, top, mode="normal", opacity=1.0):
"""Blend in linear light space for physically accurate results.
Identical API to blend_canvas(), but converts sRGB → linear before
blending and linear → sRGB after. More expensive (~2x) due to the
gamma conversions, but produces correct results for additive blending,
screen, and any mode where brightness matters.
"""
af = srgb_to_linear(base.astype(np.float32) / 255.0)
bf = srgb_to_linear(top.astype(np.float32) / 255.0)
fn = BLEND_MODES.get(mode, BLEND_MODES["normal"])
result = fn(af, bf)
if opacity < 1.0:
result = af * (1 - opacity) + result * opacity
result = linear_to_srgb(np.clip(result, 0, 1))
return np.clip(result * 255, 0, 255).astype(np.uint8)
```
**When to use `blend_canvas_linear()` vs `blend_canvas()`:**
| Scenario | Use | Why |
|----------|-----|-----|
| Screen-blending two bright layers | `linear` | sRGB screen over-brightens highlights |
| Add mode for glow/bloom effects | `linear` | Additive light follows linear physics |
| Blending text overlay at low opacity | `srgb` | Perceptual blending looks more natural for text |
| Multiply for shadow/darkening | `srgb` | Differences are minimal for darken ops |
| Color-critical work (matching reference) | `linear` | Avoids sRGB hue shifts in midtones |
| Performance-critical inner loop | `srgb` | ~2x faster, good enough for most ASCII art |
**Batch version** for compositing many layers (converts once, blends multiple, converts back):
```python
def blend_many_linear(layers, modes, opacities):
"""Blend a stack of layers in linear light space.
Args:
layers: list of uint8 (H,W,3) canvases
modes: list of blend mode strings (len = len(layers) - 1)
opacities: list of floats (len = len(layers) - 1)
Returns:
uint8 (H,W,3) canvas
"""
# Convert all to linear at once
linear = [srgb_to_linear(l.astype(np.float32) / 255.0) for l in layers]
result = linear[0]
for i in range(1, len(linear)):
fn = BLEND_MODES.get(modes[i-1], BLEND_MODES["normal"])
blended = fn(result, linear[i])
op = opacities[i-1]
if op < 1.0:
blended = result * (1 - op) + blended * op
result = np.clip(blended, 0, 1)
result = linear_to_srgb(result)
return np.clip(result * 255, 0, 255).astype(np.uint8)
```
---
## Multi-Grid Composition
This is the core visual technique. Rendering the same conceptual scene at different grid densities (character sizes) creates natural texture interference, because characters at different scales overlap at different spatial frequencies.
### Why It Works
- `sm` grid (10pt font): 320x83 characters. Fine detail, dense texture.
- `md` grid (16pt): 192x56 characters. Medium density.
- `lg` grid (20pt): 160x45 characters. Coarse, chunky characters.
When you render a plasma field on `sm` and a vortex on `lg`, then screen-blend them, the fine plasma texture shows through the gaps in the coarse vortex characters. The result has more visual complexity than either layer alone.
### The `_render_vf()` Helper
This is the workhorse function. It takes a value field + hue field + palette + grid, renders to a complete pixel canvas:
```python
def _render_vf(r, grid_key, val_fn, hue_fn, pal, f, t, S, sat=0.8, threshold=0.03):
"""Render a value field + hue field to a pixel canvas via a named grid.
Args:
r: Renderer instance (has .get_grid())
grid_key: "xs", "sm", "md", "lg", "xl", "xxl"
val_fn: (g, f, t, S) -> float32 [0,1] array (rows, cols)
hue_fn: callable (g, f, t, S) -> float32 hue array, OR float scalar
pal: character palette string
f: feature dict
t: time in seconds
S: persistent state dict
sat: HSV saturation (0-1)
threshold: minimum value to render (below = space)
Returns:
uint8 array (VH, VW, 3) — full pixel canvas
"""
g = r.get_grid(grid_key)
val = np.clip(val_fn(g, f, t, S), 0, 1)
mask = val > threshold
ch = val2char(val, mask, pal)
# Hue: either a callable or a fixed float
if callable(hue_fn):
h = hue_fn(g, f, t, S) % 1.0
else:
h = np.full((g.rows, g.cols), float(hue_fn), dtype=np.float32)
# CRITICAL: broadcast to full shape and copy (see Troubleshooting)
h = np.broadcast_to(h, (g.rows, g.cols)).copy()
R, G, B = hsv2rgb(h, np.full_like(val, sat), val)
co = mkc(R, G, B, g.rows, g.cols)
return g.render(ch, co)
```
### Grid Combination Strategies
| Combination | Effect | Good For |
|-------------|--------|----------|
| `sm` + `lg` | Maximum contrast between fine detail and chunky blocks | Bold, graphic looks |
| `sm` + `md` | Subtle texture layering, similar scales | Organic, flowing looks |
| `md` + `lg` + `xs` | Three-scale interference, maximum complexity | Psychedelic, dense |
| `sm` + `sm` (different effects) | Same scale, pattern interference only | Moire, interference |
### Complete Multi-Grid Scene Example
```python
def fx_psychedelic(r, f, t, S):
"""Three-layer multi-grid scene with beat-reactive kaleidoscope."""
# Layer A: plasma on medium grid with rainbow hue
canvas_a = _render_vf(r, "md",
lambda g, f, t, S: vf_plasma(g, f, t, S) * 1.3,
hf_angle(0.0), PAL_DENSE, f, t, S, sat=0.8)
# Layer B: vortex on small grid with cycling hue
canvas_b = _render_vf(r, "sm",
lambda g, f, t, S: vf_vortex(g, f, t, S, twist=5.0) * 1.2,
hf_time_cycle(0.1), PAL_RUNE, f, t, S, sat=0.7)
# Layer C: rings on large grid with distance hue
canvas_c = _render_vf(r, "lg",
lambda g, f, t, S: vf_rings(g, f, t, S, n_base=8, spacing_base=3) * 1.4,
hf_distance(0.3, 0.02), PAL_BLOCKS, f, t, S, sat=0.9)
# Blend: A screened with B, then difference with C
result = blend_canvas(canvas_a, canvas_b, "screen", 0.8)
result = blend_canvas(result, canvas_c, "difference", 0.6)
# Beat-triggered kaleidoscope
if f.get("bdecay", 0) > 0.3:
result = sh_kaleidoscope(result.copy(), folds=6)
return result
```
---
## Adaptive Tone Mapping
### The Brightness Problem
ASCII characters are small bright dots on a black background. Most pixels in any frame are background (black). This means:
- Mean frame brightness is inherently low (often 5-30 out of 255)
- Different effect combinations produce wildly different brightness levels
- A spiral scene might be 50 mean, while a fire scene is 9 mean
- Linear multipliers (e.g., `canvas * 2.0`) either leave dark scenes dark or blow out bright scenes
### The `tonemap()` Function
Replaces linear brightness multipliers with adaptive per-frame normalization + gamma correction:
```python
def tonemap(canvas, target_mean=90, gamma=0.75, black_point=2, white_point=253):
"""Adaptive tone-mapping: normalizes + gamma-corrects so no frame is
fully dark or washed out.
1. Compute 1st and 99.5th percentile on 4x subsample (16x fewer values,
negligible accuracy loss, major speedup at 1080p+)
2. Stretch that range to [0, 1]
3. Apply gamma curve (< 1 lifts shadows, > 1 darkens)
4. Rescale to [black_point, white_point]
"""
f = canvas.astype(np.float32)
sub = f[::4, ::4] # 4x subsample: ~390K values vs ~6.2M at 1080p
lo = np.percentile(sub, 1)
hi = np.percentile(sub, 99.5)
if hi - lo < 10:
hi = max(hi, lo + 10) # near-uniform frame fallback
f = np.clip((f - lo) / (hi - lo), 0.0, 1.0)
np.power(f, gamma, out=f) # in-place: avoids allocation
np.multiply(f, (white_point - black_point), out=f)
np.add(f, black_point, out=f)
return np.clip(f, 0, 255).astype(np.uint8)
```
### Why Gamma, Not Linear
Linear multiplier `* 2.0`:
```
input 10 -> output 20 (still dark)
input 100 -> output 200 (ok)
input 200 -> output 255 (clipped, lost detail)
```
Gamma 0.75 after normalization:
```
input 0.04 -> output 0.08 (lifted from invisible to visible)
input 0.39 -> output 0.50 (moderate lift)
input 0.78 -> output 0.84 (gentle lift, no clipping)
```
Gamma < 1 compresses the highlights and expands the shadows. This is exactly what we need: lift dark ASCII content into visibility without blowing out the bright parts.
### Pipeline Ordering
The pipeline in `render_clip()` is:
```
scene_fn(r, f, t, S) -> canvas
|
tonemap(canvas, gamma=scene_gamma)
|
FeedbackBuffer.apply(canvas, ...)
|
ShaderChain.apply(canvas, f=f, t=t)
|
ffmpeg pipe
```
Tonemap runs BEFORE feedback and shaders. This means:
- Feedback operates on normalized data (consistent behavior regardless of scene brightness)
- Shaders like solarize, posterize, contrast operate on properly-ranged data
- The brightness shader in the chain is no longer needed (tonemap handles it)
### Per-Scene Gamma Tuning
Default gamma is 0.75. Scenes that apply destructive post-processing need more aggressive lift because the destruction happens after tonemap:
| Scene Type | Recommended Gamma | Why |
|------------|-------------------|-----|
| Standard effects | 0.75 | Default, works for most scenes |
| Solarize post-process | 0.50-0.60 | Solarize inverts bright pixels, reducing overall brightness |
| Posterize post-process | 0.50-0.55 | Posterize quantizes, often crushing mid-values to black |
| Heavy difference blending | 0.60-0.70 | Difference mode creates many near-zero pixels |
| Already bright scenes | 0.85-1.0 | Don't over-boost scenes that are naturally bright |
Configure via the scene table:
```python
SCENES = [
{"start": 9.17, "end": 11.25, "name": "fire", "gamma": 0.55,
"fx": fx_fire, "shaders": [("solarize", {"threshold": 200}), ...]},
{"start": 25.96, "end": 27.29, "name": "diamond", "gamma": 0.5,
"fx": fx_diamond, "shaders": [("bloom", {"thr": 90}), ...]},
]
```
### Brightness Verification
After rendering, spot-check frame brightness:
```python
# In test-frame mode
canvas = scene["fx"](r, feat, t, r.S)
canvas = tonemap(canvas, gamma=scene.get("gamma", 0.75))
chain = ShaderChain()
for sn, kw in scene.get("shaders", []):
chain.add(sn, **kw)
canvas = chain.apply(canvas, f=feat, t=t)
print(f"Mean brightness: {canvas.astype(float).mean():.1f}, max: {canvas.max()}")
```
Target ranges after tonemap + shaders:
- Quiet/ambient scenes: mean 30-60
- Active scenes: mean 40-100
- Climax/peak scenes: mean 60-150
- If mean < 20: gamma is too high or a shader is destroying brightness
- If mean > 180: gamma is too low or add is stacking too much
---
## FeedbackBuffer Spatial Transforms
The feedback buffer stores the previous frame and blends it into the current frame with decay. Spatial transforms applied to the buffer before blending create the illusion of motion in the feedback trail.
### Implementation
```python
class FeedbackBuffer:
def __init__(self):
self.buf = None
def apply(self, canvas, decay=0.85, blend="screen", opacity=0.5,
transform=None, transform_amt=0.02, hue_shift=0.0):
if self.buf is None:
self.buf = canvas.astype(np.float32) / 255.0
return canvas
# Decay old buffer
self.buf *= decay
# Spatial transform
if transform:
self.buf = self._transform(self.buf, transform, transform_amt)
# Hue shift the feedback for rainbow trails
if hue_shift > 0:
self.buf = self._hue_shift(self.buf, hue_shift)
# Blend feedback into current frame
result = blend_canvas(canvas,
np.clip(self.buf * 255, 0, 255).astype(np.uint8),
blend, opacity)
# Update buffer with current frame
self.buf = result.astype(np.float32) / 255.0
return result
def _transform(self, buf, transform, amt):
h, w = buf.shape[:2]
if transform == "zoom":
# Zoom in: sample from slightly inside (creates expanding tunnel)
m = int(h * amt); n = int(w * amt)
if m > 0 and n > 0:
cropped = buf[m:-m or None, n:-n or None]
# Resize back to full (nearest-neighbor for speed)
buf = np.array(Image.fromarray(
np.clip(cropped * 255, 0, 255).astype(np.uint8)
).resize((w, h), Image.NEAREST)).astype(np.float32) / 255.0
elif transform == "shrink":
# Zoom out: pad edges, shrink center
m = int(h * amt); n = int(w * amt)
small = np.array(Image.fromarray(
np.clip(buf * 255, 0, 255).astype(np.uint8)
).resize((w - 2*n, h - 2*m), Image.NEAREST))
new = np.zeros((h, w, 3), dtype=np.uint8)
new[m:m+small.shape[0], n:n+small.shape[1]] = small
buf = new.astype(np.float32) / 255.0
elif transform == "rotate_cw":
# Small clockwise rotation via affine
angle = amt * 10 # amt=0.005 -> 0.05 degrees per frame
cy, cx = h / 2, w / 2
Y = np.arange(h, dtype=np.float32)[:, None]
X = np.arange(w, dtype=np.float32)[None, :]
cos_a, sin_a = np.cos(angle), np.sin(angle)
sx = (X - cx) * cos_a + (Y - cy) * sin_a + cx
sy = -(X - cx) * sin_a + (Y - cy) * cos_a + cy
sx = np.clip(sx.astype(int), 0, w - 1)
sy = np.clip(sy.astype(int), 0, h - 1)
buf = buf[sy, sx]
elif transform == "rotate_ccw":
angle = -amt * 10
cy, cx = h / 2, w / 2
Y = np.arange(h, dtype=np.float32)[:, None]
X = np.arange(w, dtype=np.float32)[None, :]
cos_a, sin_a = np.cos(angle), np.sin(angle)
sx = (X - cx) * cos_a + (Y - cy) * sin_a + cx
sy = -(X - cx) * sin_a + (Y - cy) * cos_a + cy
sx = np.clip(sx.astype(int), 0, w - 1)
sy = np.clip(sy.astype(int), 0, h - 1)
buf = buf[sy, sx]
elif transform == "shift_up":
pixels = max(1, int(h * amt))
buf = np.roll(buf, -pixels, axis=0)
buf[-pixels:] = 0 # black fill at bottom
elif transform == "shift_down":
pixels = max(1, int(h * amt))
buf = np.roll(buf, pixels, axis=0)
buf[:pixels] = 0
elif transform == "mirror_h":
buf = buf[:, ::-1]
return buf
def _hue_shift(self, buf, amount):
"""Rotate hues of the feedback buffer. Operates on float32 [0,1]."""
rgb = np.clip(buf * 255, 0, 255).astype(np.uint8)
hsv = np.zeros_like(buf)
# Simple approximate RGB->HSV->shift->RGB
r, g, b = buf[:,:,0], buf[:,:,1], buf[:,:,2]
mx = np.maximum(np.maximum(r, g), b)
mn = np.minimum(np.minimum(r, g), b)
delta = mx - mn + 1e-10
# Hue
h = np.where(mx == r, ((g - b) / delta) % 6,
np.where(mx == g, (b - r) / delta + 2, (r - g) / delta + 4))
h = (h / 6 + amount) % 1.0
# Reconstruct with shifted hue (simplified)
s = delta / (mx + 1e-10)
v = mx
c = v * s; x = c * (1 - np.abs((h * 6) % 2 - 1)); m = v - c
ro = np.zeros_like(h); go = np.zeros_like(h); bo = np.zeros_like(h)
for lo, hi, rv, gv, bv in [(0,1,c,x,0),(1,2,x,c,0),(2,3,0,c,x),
(3,4,0,x,c),(4,5,x,0,c),(5,6,c,0,x)]:
mask = ((h*6) >= lo) & ((h*6) < hi)
ro[mask] = rv[mask] if not isinstance(rv, (int,float)) else rv
go[mask] = gv[mask] if not isinstance(gv, (int,float)) else gv
bo[mask] = bv[mask] if not isinstance(bv, (int,float)) else bv
return np.stack([ro+m, go+m, bo+m], axis=2)
```
### Feedback Presets
| Preset | Config | Visual Effect |
|--------|--------|---------------|
| Infinite zoom tunnel | `decay=0.8, blend="screen", transform="zoom", transform_amt=0.015` | Expanding ring patterns |
| Rainbow trails | `decay=0.7, blend="screen", transform="zoom", transform_amt=0.01, hue_shift=0.02` | Psychedelic color trails |
| Ghostly echo | `decay=0.9, blend="add", opacity=0.15, transform="shift_up", transform_amt=0.01` | Faint upward smearing |
| Kaleidoscopic recursion | `decay=0.75, blend="screen", transform="rotate_cw", transform_amt=0.005, hue_shift=0.01` | Rotating mandala feedback |
| Color evolution | `decay=0.8, blend="difference", opacity=0.4, hue_shift=0.03` | Frame-to-frame color XOR |
| Rising heat haze | `decay=0.5, blend="add", opacity=0.2, transform="shift_up", transform_amt=0.02` | Hot air shimmer |
---
## Masking / Stencil System
Masks are float32 arrays `(rows, cols)` or `(VH, VW)` in range [0, 1]. They control where effects are visible: 1.0 = fully visible, 0.0 = fully hidden. Use masks to create figure/ground relationships, focal points, and shaped reveals.
### Shape Masks
```python
def mask_circle(g, cx_frac=0.5, cy_frac=0.5, radius=0.3, feather=0.05):
"""Circular mask centered at (cx_frac, cy_frac) in normalized coords.
feather: width of soft edge (0 = hard cutoff)."""
asp = g.cw / g.ch if hasattr(g, 'cw') else 1.0
dx = (g.cc / g.cols - cx_frac)
dy = (g.rr / g.rows - cy_frac) * asp
d = np.sqrt(dx**2 + dy**2)
if feather > 0:
return np.clip(1.0 - (d - radius) / feather, 0, 1)
return (d <= radius).astype(np.float32)
def mask_rect(g, x0=0.2, y0=0.2, x1=0.8, y1=0.8, feather=0.03):
"""Rectangular mask. Coordinates in [0,1] normalized."""
dx = np.maximum(x0 - g.cc / g.cols, g.cc / g.cols - x1)
dy = np.maximum(y0 - g.rr / g.rows, g.rr / g.rows - y1)
d = np.maximum(dx, dy)
if feather > 0:
return np.clip(1.0 - d / feather, 0, 1)
return (d <= 0).astype(np.float32)
def mask_ring(g, cx_frac=0.5, cy_frac=0.5, inner_r=0.15, outer_r=0.35,
feather=0.03):
"""Ring / annulus mask."""
inner = mask_circle(g, cx_frac, cy_frac, inner_r, feather)
outer = mask_circle(g, cx_frac, cy_frac, outer_r, feather)
return outer - inner
def mask_gradient_h(g, start=0.0, end=1.0):
"""Left-to-right gradient mask."""
return np.clip((g.cc / g.cols - start) / (end - start + 1e-10), 0, 1).astype(np.float32)
def mask_gradient_v(g, start=0.0, end=1.0):
"""Top-to-bottom gradient mask."""
return np.clip((g.rr / g.rows - start) / (end - start + 1e-10), 0, 1).astype(np.float32)
def mask_gradient_radial(g, cx_frac=0.5, cy_frac=0.5, inner=0.0, outer=0.5):
"""Radial gradient mask — bright at center, dark at edges."""
d = np.sqrt((g.cc / g.cols - cx_frac)**2 + (g.rr / g.rows - cy_frac)**2)
return np.clip(1.0 - (d - inner) / (outer - inner + 1e-10), 0, 1)
```
### Value Field as Mask
Use any `vf_*` function's output as a spatial mask:
```python
def mask_from_vf(vf_result, threshold=0.5, feather=0.1):
"""Convert a value field to a mask by thresholding.
feather: smooth edge width around threshold."""
if feather > 0:
return np.clip((vf_result - threshold + feather) / (2 * feather), 0, 1)
return (vf_result > threshold).astype(np.float32)
def mask_select(mask, vf_a, vf_b):
"""Spatial conditional: show vf_a where mask is 1, vf_b where mask is 0.
mask: float32 [0,1] array. Intermediate values blend."""
return vf_a * mask + vf_b * (1 - mask)
```
### Text Stencil
Render text to a mask. Effects are visible only through the letterforms:
```python
def mask_text(grid, text, row_frac=0.5, font=None, font_size=None):
"""Render text string as a float32 mask [0,1] at grid resolution.
Characters = 1.0, background = 0.0.
row_frac: vertical position as fraction of grid height.
font: PIL ImageFont (defaults to grid's font if None).
font_size: override font size for the mask text (for larger stencil text).
"""
from PIL import Image, ImageDraw, ImageFont
f = font or grid.font
if font_size and font != grid.font:
f = ImageFont.truetype(font.path, font_size)
# Render text to image at pixel resolution, then downsample to grid
img = Image.new("L", (grid.cols * grid.cw, grid.ch), 0)
draw = ImageDraw.Draw(img)
bbox = draw.textbbox((0, 0), text, font=f)
tw = bbox[2] - bbox[0]
x = (grid.cols * grid.cw - tw) // 2
draw.text((x, 0), text, fill=255, font=f)
row_mask = np.array(img, dtype=np.float32) / 255.0
# Place in full grid mask
mask = np.zeros((grid.rows, grid.cols), dtype=np.float32)
target_row = int(grid.rows * row_frac)
# Downsample rendered text to grid cells
for c in range(grid.cols):
px = c * grid.cw
if px + grid.cw <= row_mask.shape[1]:
cell = row_mask[:, px:px + grid.cw]
if cell.mean() > 0.1:
mask[target_row, c] = cell.mean()
return mask
def mask_text_block(grid, lines, start_row_frac=0.3, font=None):
"""Multi-line text stencil. Returns full grid mask."""
mask = np.zeros((grid.rows, grid.cols), dtype=np.float32)
for i, line in enumerate(lines):
row_frac = start_row_frac + i / grid.rows
line_mask = mask_text(grid, line, row_frac, font)
mask = np.maximum(mask, line_mask)
return mask
```
### Animated Masks
Masks that change over time for reveals, wipes, and morphing:
```python
def mask_iris(g, t, t_start, t_end, cx_frac=0.5, cy_frac=0.5,
max_radius=0.7, ease_fn=None):
"""Iris open/close: circle that grows from 0 to max_radius.
ease_fn: easing function (default: ease_in_out_cubic from effects.md)."""
if ease_fn is None:
ease_fn = lambda x: x * x * (3 - 2 * x) # smoothstep fallback
progress = np.clip((t - t_start) / (t_end - t_start), 0, 1)
radius = ease_fn(progress) * max_radius
return mask_circle(g, cx_frac, cy_frac, radius, feather=0.03)
def mask_wipe_h(g, t, t_start, t_end, direction="right"):
"""Horizontal wipe reveal."""
progress = np.clip((t - t_start) / (t_end - t_start), 0, 1)
if direction == "left":
progress = 1 - progress
return mask_gradient_h(g, start=progress - 0.05, end=progress + 0.05)
def mask_wipe_v(g, t, t_start, t_end, direction="down"):
"""Vertical wipe reveal."""
progress = np.clip((t - t_start) / (t_end - t_start), 0, 1)
if direction == "up":
progress = 1 - progress
return mask_gradient_v(g, start=progress - 0.05, end=progress + 0.05)
def mask_dissolve(g, t, t_start, t_end, seed=42):
"""Random pixel dissolve — noise threshold sweeps from 0 to 1."""
progress = np.clip((t - t_start) / (t_end - t_start), 0, 1)
rng = np.random.RandomState(seed)
noise = rng.random((g.rows, g.cols)).astype(np.float32)
return (noise < progress).astype(np.float32)
```
### Mask Boolean Operations
```python
def mask_union(a, b):
"""OR — visible where either mask is active."""
return np.maximum(a, b)
def mask_intersect(a, b):
"""AND — visible only where both masks are active."""
return np.minimum(a, b)
def mask_subtract(a, b):
"""A minus B — visible where A is active but B is not."""
return np.clip(a - b, 0, 1)
def mask_invert(m):
"""NOT — flip mask."""
return 1.0 - m
```
### Applying Masks to Canvases
```python
def apply_mask_canvas(canvas, mask, bg_canvas=None):
"""Apply a grid-resolution mask to a pixel canvas.
Expands mask from (rows, cols) to (VH, VW) via nearest-neighbor.
canvas: uint8 (VH, VW, 3)
mask: float32 (rows, cols) [0,1]
bg_canvas: what shows through where mask=0. None = black.
"""
# Expand mask to pixel resolution
mask_px = np.repeat(np.repeat(mask, canvas.shape[0] // mask.shape[0] + 1, axis=0),
canvas.shape[1] // mask.shape[1] + 1, axis=1)
mask_px = mask_px[:canvas.shape[0], :canvas.shape[1]]
if bg_canvas is not None:
return np.clip(canvas * mask_px[:, :, None] +
bg_canvas * (1 - mask_px[:, :, None]), 0, 255).astype(np.uint8)
return np.clip(canvas * mask_px[:, :, None], 0, 255).astype(np.uint8)
def apply_mask_vf(vf_a, vf_b, mask):
"""Apply mask at value-field level — blend two value fields spatially.
All arrays are (rows, cols) float32."""
return vf_a * mask + vf_b * (1 - mask)
```
---
## PixelBlendStack
Higher-level wrapper for multi-layer compositing:
```python
class PixelBlendStack:
def __init__(self):
self.layers = []
def add(self, canvas, mode="normal", opacity=1.0):
self.layers.append((canvas, mode, opacity))
return self
def composite(self):
if not self.layers:
return np.zeros((VH, VW, 3), dtype=np.uint8)
result = self.layers[0][0]
for canvas, mode, opacity in self.layers[1:]:
result = blend_canvas(result, canvas, mode, opacity)
return result
```
## Text Backdrop (Readability Mask)
When placing readable text over busy multi-grid ASCII backgrounds, the text will blend into the background and become illegible. **Always apply a dark backdrop behind text regions.**
The technique: compute the bounding box of all text glyphs, create a gaussian-blurred dark mask covering that area with padding, and multiply the background by `(1 - mask * darkness)` before rendering text on top.
```python
from scipy.ndimage import gaussian_filter
def apply_text_backdrop(canvas, glyphs, padding=80, darkness=0.75):
"""Darken the background behind text for readability.
Call AFTER rendering background, BEFORE rendering text.
Args:
canvas: (VH, VW, 3) uint8 background
glyphs: list of {"x": float, "y": float, ...} glyph positions
padding: pixel padding around text bounding box
darkness: 0.0 = no darkening, 1.0 = fully black
Returns:
darkened canvas (uint8)
"""
if not glyphs:
return canvas
xs = [g['x'] for g in glyphs]
ys = [g['y'] for g in glyphs]
x0 = max(0, int(min(xs)) - padding)
y0 = max(0, int(min(ys)) - padding)
x1 = min(VW, int(max(xs)) + padding + 50) # extra for char width
y1 = min(VH, int(max(ys)) + padding + 60) # extra for char height
# Soft dark mask with gaussian blur for feathered edges
mask = np.zeros((VH, VW), dtype=np.float32)
mask[y0:y1, x0:x1] = 1.0
mask = gaussian_filter(mask, sigma=padding * 0.6)
factor = 1.0 - mask * darkness
return (canvas.astype(np.float32) * factor[:, :, np.newaxis]).astype(np.uint8)
```
### Usage in render pipeline
Insert between background rendering and text rendering:
```python
# 1. Render background (multi-grid ASCII effects)
bg = render_background(cfg, t)
# 2. Darken behind text region
bg = apply_text_backdrop(bg, frame_glyphs, padding=80, darkness=0.75)
# 3. Render text on top (now readable against dark backdrop)
bg = text_renderer.render(bg, frame_glyphs, color=(255, 255, 255))
```
Combine with **reverse vignette** (see shaders.md) for scenes where text is always centered — the reverse vignette provides a persistent center-dark zone, while the backdrop handles per-frame glyph positions.
## External Layout Oracle Pattern
For text-heavy videos where text needs to dynamically reflow around obstacles (shapes, icons, other text), use an external layout engine to pre-compute glyph positions and feed them into the Python renderer via JSON.
### Architecture
```
Layout Engine (browser/Node.js) → layouts.json → Python ASCII Renderer
↑ ↑
Computes per-frame Reads glyph positions,
glyph (x,y) positions renders as ASCII chars
with obstacle-aware reflow with full effect pipeline
```
### JSON interchange format
```json
{
"meta": {
"canvas_width": 1080, "canvas_height": 1080,
"fps": 24, "total_frames": 1248,
"fonts": {
"body": {"charW": 12.04, "charH": 24, "fontSize": 20},
"hero": {"charW": 24.08, "charH": 48, "fontSize": 40}
}
},
"scenes": [
{
"id": "scene_name",
"start_frame": 0, "end_frame": 96,
"frames": {
"0": {
"glyphs": [
{"char": "H", "x": 287.1, "y": 400.0, "alpha": 1.0},
{"char": "e", "x": 311.2, "y": 400.0, "alpha": 1.0}
],
"obstacles": [
{"type": "circle", "cx": 540, "cy": 540, "r": 80},
{"type": "rect", "x": 300, "y": 500, "w": 120, "h": 80}
]
}
}
}
]
}
```
### When to use
- Text that dynamically reflows around moving objects
- Per-glyph animation (reveal, scatter, physics)
- Variable typography that needs precise measurement
- Any case where Python's Pillow text layout is insufficient
### When NOT to use
- Static centered text (just use PIL `draw.text()` directly)
- Text that only fades in/out without spatial animation
- Simple typewriter effects (handle in Python with a character counter)
### Running the oracle
Use Playwright to run the layout engine in a headless browser:
```javascript
// extract.mjs
import { chromium } from 'playwright';
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto(`file://${oraclePath}`);
await page.waitForFunction(() => window.__ORACLE_DONE__ === true, null, { timeout: 60000 });
const result = await page.evaluate(() => window.__ORACLE_RESULT__);
writeFileSync('layouts.json', JSON.stringify(result));
await browser.close();
```
### Consuming in Python
```python
# In the renderer, map pixel positions to the canvas:
for glyph in frame_data['glyphs']:
char, px, py = glyph['char'], glyph['x'], glyph['y']
alpha = glyph.get('alpha', 1.0)
# Render using PIL draw.text() at exact pixel position
draw.text((px, py), char, fill=(int(255*alpha),)*3, font=font)
```
Obstacles from the JSON can also be rendered as glowing ASCII shapes (circles, rectangles) to visualize the reflow zones.
skills/creative/ascii-video/references/effects.md
+1865
View File
File diff suppressed because it is too large Load Diff
skills/creative/ascii-video/references/inputs.md
+685
View File
@@ -0,0 +1,685 @@
# Input Sources
> **See also:** architecture.md · effects.md · scenes.md · shaders.md · optimization.md · troubleshooting.md
## Audio Analysis
### Loading
```python
tmp = tempfile.mktemp(suffix=".wav")
subprocess.run(["ffmpeg", "-y", "-i", input_path, "-ac", "1", "-ar", "22050",
"-sample_fmt", "s16", tmp], capture_output=True, check=True)
with wave.open(tmp) as wf:
sr = wf.getframerate()
raw = wf.readframes(wf.getnframes())
samples = np.frombuffer(raw, dtype=np.int16).astype(np.float32) / 32768.0
```
### Per-Frame FFT
```python
hop = sr // fps # samples per frame
win = hop * 2 # analysis window (2x hop for overlap)
window = np.hanning(win)
freqs = rfftfreq(win, 1.0 / sr)
bands = {
"sub": (freqs >= 20) & (freqs < 80),
"bass": (freqs >= 80) & (freqs < 250),
"lomid": (freqs >= 250) & (freqs < 500),
"mid": (freqs >= 500) & (freqs < 2000),
"himid": (freqs >= 2000)& (freqs < 6000),
"hi": (freqs >= 6000),
}
```
For each frame: extract chunk, apply window, FFT, compute band energies.
### Feature Set
| Feature | Formula | Controls |
|---------|---------|----------|
| `rms` | `sqrt(mean(chunk²))` | Overall loudness/energy |
| `sub`..`hi` | `sqrt(mean(band_magnitudes²))` | Per-band energy |
| `centroid` | `sum(freq*mag) / sum(mag)` | Brightness/timbre |
| `flatness` | `geomean(mag) / mean(mag)` | Noise vs tone |
| `flux` | `sum(max(0, mag - prev_mag))` | Transient strength |
| `sub_r`..`hi_r` | `band / sum(all_bands)` | Spectral shape (volume-independent) |
| `cent_d` | `abs(gradient(centroid))` | Timbral change rate |
| `beat` | Flux peak detection | Binary beat onset |
| `bdecay` | Exponential decay from beats | Smooth beat pulse (0→1→0) |
**Band ratios are critical** — they decouple spectral shape from volume, so a quiet bass section and a loud bass section both read as "bassy" rather than just "loud" vs "quiet".
### Smoothing
EMA prevents visual jitter:
```python
def ema(arr, alpha):
out = np.empty_like(arr); out[0] = arr[0]
for i in range(1, len(arr)):
out[i] = alpha * arr[i] + (1 - alpha) * out[i-1]
return out
# Slow-moving features (alpha=0.12): centroid, flatness, band ratios, cent_d
# Fast-moving features (alpha=0.3): rms, flux, raw bands
```
### Beat Detection
```python
flux_smooth = np.convolve(flux, np.ones(5)/5, mode="same")
peaks, _ = signal.find_peaks(flux_smooth, height=0.15, distance=fps//5, prominence=0.05)
beat = np.zeros(n_frames)
bdecay = np.zeros(n_frames, dtype=np.float32)
for p in peaks:
beat[p] = 1.0
for d in range(fps // 2):
if p + d < n_frames:
bdecay[p + d] = max(bdecay[p + d], math.exp(-d * 2.5 / (fps // 2)))
```
`bdecay` gives smooth 0→1→0 pulse per beat, decaying over ~0.5s. Use for flash/glitch/mirror triggers.
### Normalization
After computing all frames, normalize each feature to 0-1:
```python
for k in features:
a = features[k]
lo, hi = a.min(), a.max()
features[k] = (a - lo) / (hi - lo + 1e-10)
```
## Video Sampling
### Frame Extraction
```python
# Method 1: ffmpeg pipe (memory efficient)
cmd = ["ffmpeg", "-i", input_video, "-f", "rawvideo", "-pix_fmt", "rgb24",
"-s", f"{target_w}x{target_h}", "-r", str(fps), "-"]
pipe = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL)
frame_size = target_w * target_h * 3
for fi in range(n_frames):
raw = pipe.stdout.read(frame_size)
if len(raw) < frame_size: break
frame = np.frombuffer(raw, dtype=np.uint8).reshape(target_h, target_w, 3)
# process frame...
# Method 2: OpenCV (if available)
cap = cv2.VideoCapture(input_video)
```
### Luminance-to-Character Mapping
Convert video pixels to ASCII characters based on brightness:
```python
def frame_to_ascii(frame_rgb, grid, pal=PAL_DEFAULT):
"""Convert video frame to character + color arrays."""
rows, cols = grid.rows, grid.cols
# Resize frame to grid dimensions
small = np.array(Image.fromarray(frame_rgb).resize((cols, rows), Image.LANCZOS))
# Luminance
lum = (0.299 * small[:,:,0] + 0.587 * small[:,:,1] + 0.114 * small[:,:,2]) / 255.0
# Map to chars
chars = val2char(lum, lum > 0.02, pal)
# Colors: use source pixel colors, scaled by luminance for visibility
colors = np.clip(small * np.clip(lum[:,:,None] * 1.5 + 0.3, 0.3, 1), 0, 255).astype(np.uint8)
return chars, colors
```
### Edge-Weighted Character Mapping
Use edge detection for more detail in contour regions:
```python
def frame_to_ascii_edges(frame_rgb, grid, pal=PAL_DEFAULT, edge_pal=PAL_BOX):
gray = np.mean(frame_rgb, axis=2)
small_gray = resize(gray, (grid.rows, grid.cols))
lum = small_gray / 255.0
# Sobel edge detection
gx = np.abs(small_gray[:, 2:] - small_gray[:, :-2])
gy = np.abs(small_gray[2:, :] - small_gray[:-2, :])
edge = np.zeros_like(small_gray)
edge[:, 1:-1] += gx; edge[1:-1, :] += gy
edge = np.clip(edge / edge.max(), 0, 1)
# Edge regions get box drawing chars, flat regions get brightness chars
is_edge = edge > 0.15
chars = val2char(lum, lum > 0.02, pal)
edge_chars = val2char(edge, is_edge, edge_pal)
chars[is_edge] = edge_chars[is_edge]
return chars, colors
```
### Motion Detection
Detect pixel changes between frames for motion-reactive effects:
```python
prev_frame = None
def compute_motion(frame):
global prev_frame
if prev_frame is None:
prev_frame = frame.astype(np.float32)
return np.zeros(frame.shape[:2])
diff = np.abs(frame.astype(np.float32) - prev_frame).mean(axis=2)
prev_frame = frame.astype(np.float32) * 0.7 + prev_frame * 0.3 # smoothed
return np.clip(diff / 30.0, 0, 1) # normalized motion map
```
Use motion map to drive particle emission, glitch intensity, or character density.
### Video Feature Extraction
Per-frame features analogous to audio features, for driving effects:
```python
def analyze_video_frame(frame_rgb):
gray = np.mean(frame_rgb, axis=2)
return {
"brightness": gray.mean() / 255.0,
"contrast": gray.std() / 128.0,
"edge_density": compute_edge_density(gray),
"motion": compute_motion(frame_rgb).mean(),
"dominant_hue": compute_dominant_hue(frame_rgb),
"color_variance": compute_color_variance(frame_rgb),
}
```
## Image Sequence
### Static Image to ASCII
Same as single video frame conversion. For animated sequences:
```python
import glob
frames = sorted(glob.glob("frames/*.png"))
for fi, path in enumerate(frames):
img = np.array(Image.open(path).resize((VW, VH)))
chars, colors = frame_to_ascii(img, grid, pal)
```
### Image as Texture Source
Use an image as a background texture that effects modulate:
```python
def load_texture(path, grid):
img = np.array(Image.open(path).resize((grid.cols, grid.rows)))
lum = np.mean(img, axis=2) / 255.0
return lum, img # luminance for char mapping, RGB for colors
```
## Text / Lyrics
### SRT Parsing
```python
import re
def parse_srt(path):
"""Returns [(start_sec, end_sec, text), ...]"""
entries = []
with open(path) as f:
content = f.read()
blocks = content.strip().split("\n\n")
for block in blocks:
lines = block.strip().split("\n")
if len(lines) >= 3:
times = lines[1]
m = re.match(r"(\d+):(\d+):(\d+),(\d+) --> (\d+):(\d+):(\d+),(\d+)", times)
if m:
g = [int(x) for x in m.groups()]
start = g[0]*3600 + g[1]*60 + g[2] + g[3]/1000
end = g[4]*3600 + g[5]*60 + g[6] + g[7]/1000
text = " ".join(lines[2:])
entries.append((start, end, text))
return entries
```
### Lyrics Display Modes
- **Typewriter**: characters appear left-to-right over the time window
- **Fade-in**: whole line fades from dark to bright
- **Flash**: appear instantly on beat, fade out
- **Scatter**: characters start at random positions, converge to final position
- **Wave**: text follows a sine wave path
```python
def lyrics_typewriter(ch, co, text, row, col, t, t_start, t_end, color):
"""Reveal characters progressively over time window."""
progress = np.clip((t - t_start) / (t_end - t_start), 0, 1)
n_visible = int(len(text) * progress)
stamp(ch, co, text[:n_visible], row, col, color)
```
## Generative (No Input)
For pure generative ASCII art, the "features" dict is synthesized from time:
```python
def synthetic_features(t, bpm=120):
"""Generate audio-like features from time alone."""
beat_period = 60.0 / bpm
beat_phase = (t % beat_period) / beat_period
return {
"rms": 0.5 + 0.3 * math.sin(t * 0.5),
"bass": 0.5 + 0.4 * math.sin(t * 2 * math.pi / beat_period),
"sub": 0.3 + 0.3 * math.sin(t * 0.8),
"mid": 0.4 + 0.3 * math.sin(t * 1.3),
"hi": 0.3 + 0.2 * math.sin(t * 2.1),
"cent": 0.5 + 0.2 * math.sin(t * 0.3),
"flat": 0.4,
"flux": 0.3 + 0.2 * math.sin(t * 3),
"beat": 1.0 if beat_phase < 0.05 else 0.0,
"bdecay": max(0, 1.0 - beat_phase * 4),
# ratios
"sub_r": 0.2, "bass_r": 0.25, "lomid_r": 0.15,
"mid_r": 0.2, "himid_r": 0.12, "hi_r": 0.08,
"cent_d": 0.1,
}
```
## TTS Integration
For narrated videos (testimonials, quotes, storytelling), generate speech audio per segment and mix with background music.
### ElevenLabs Voice Generation
```python
import requests, time, os
def generate_tts(text, voice_id, api_key, output_path, model="eleven_multilingual_v2"):
"""Generate TTS audio via ElevenLabs API. Streams response to disk."""
# Skip if already generated (idempotent re-runs)
if os.path.exists(output_path) and os.path.getsize(output_path) > 1000:
return
url = f"https://api.elevenlabs.io/v1/text-to-speech/{voice_id}"
headers = {"xi-api-key": api_key, "Content-Type": "application/json"}
data = {
"text": text,
"model_id": model,
"voice_settings": {
"stability": 0.65,
"similarity_boost": 0.80,
"style": 0.15,
"use_speaker_boost": True,
},
}
resp = requests.post(url, json=data, headers=headers, stream=True)
resp.raise_for_status()
with open(output_path, "wb") as f:
for chunk in resp.iter_content(chunk_size=4096):
f.write(chunk)
time.sleep(0.3) # rate limit: avoid 429s on batch generation
```
Voice settings notes:
- `stability` 0.65 gives natural variation without drift. Lower (0.3-0.5) for more expressive reads, higher (0.7-0.9) for monotone/narration.
- `similarity_boost` 0.80 keeps it close to the voice profile. Lower for more generic sound.
- `style` 0.15 adds slight stylistic variation. Keep low (0-0.2) for straightforward reads.
- `use_speaker_boost` True improves clarity at the cost of slightly more processing time.
### Voice Pool
ElevenLabs has ~20 built-in voices. Use multiple voices for variety across quotes. Reference pool:
```python
VOICE_POOL = [
("JBFqnCBsd6RMkjVDRZzb", "George"),
("nPczCjzI2devNBz1zQrb", "Brian"),
("pqHfZKP75CvOlQylNhV4", "Bill"),
("CwhRBWXzGAHq8TQ4Fs17", "Roger"),
("cjVigY5qzO86Huf0OWal", "Eric"),
("onwK4e9ZLuTAKqWW03F9", "Daniel"),
("IKne3meq5aSn9XLyUdCD", "Charlie"),
("iP95p4xoKVk53GoZ742B", "Chris"),
("bIHbv24MWmeRgasZH58o", "Will"),
("TX3LPaxmHKxFdv7VOQHJ", "Liam"),
("SAz9YHcvj6GT2YYXdXww", "River"),
("EXAVITQu4vr4xnSDxMaL", "Sarah"),
("Xb7hH8MSUJpSbSDYk0k2", "Alice"),
("pFZP5JQG7iQjIQuC4Bku", "Lily"),
("XrExE9yKIg1WjnnlVkGX", "Matilda"),
("FGY2WhTYpPnrIDTdsKH5", "Laura"),
("SOYHLrjzK2X1ezoPC6cr", "Harry"),
("hpp4J3VqNfWAUOO0d1Us", "Bella"),
("N2lVS1w4EtoT3dr4eOWO", "Callum"),
("cgSgspJ2msm6clMCkdW9", "Jessica"),
("pNInz6obpgDQGcFmaJgB", "Adam"),
]
```
### Voice Assignment
Shuffle deterministically so re-runs produce the same voice mapping:
```python
import random as _rng
def assign_voices(n_quotes, voice_pool, seed=42):
"""Assign a different voice to each quote, cycling if needed."""
r = _rng.Random(seed)
ids = [v[0] for v in voice_pool]
r.shuffle(ids)
return [ids[i % len(ids)] for i in range(n_quotes)]
```
### Pronunciation Control
TTS text must be separate from display text. The display text has line breaks for visual layout; the TTS text is a flat sentence with phonetic fixes.
Common fixes:
- Brand names: spell phonetically ("Nous" -> "Noose", "nginx" -> "engine-x")
- Abbreviations: expand ("API" -> "A P I", "CLI" -> "C L I")
- Technical terms: add phonetic hints
- Punctuation for pacing: periods create pauses, commas create slight pauses
```python
# Display text: line breaks control visual layout
QUOTES = [
("It can do far more than the Claws,\nand you don't need to buy a Mac Mini.\nNous Research has a winner here.", "Brian Roemmele"),
]
# TTS text: flat, phonetically corrected for speech
QUOTES_TTS = [
"It can do far more than the Claws, and you don't need to buy a Mac Mini. Noose Research has a winner here.",
]
# Keep both arrays in sync -- same indices
```
### Audio Pipeline
1. Generate individual TTS clips (MP3 per quote, skipping existing)
2. Convert each to WAV (mono, 22050 Hz) for duration measurement and concatenation
3. Calculate timing: intro pad + speech + gaps + outro pad = target duration
4. Concatenate into single TTS track with silence padding
5. Mix with background music
```python
def build_tts_track(tts_clips, target_duration, intro_pad=5.0, outro_pad=4.0):
"""Concatenate TTS clips with calculated gaps, pad to target duration.
Returns:
timing: list of (start_time, end_time, quote_index) tuples
"""
sr = 22050
# Convert MP3s to WAV for duration and sample-level concatenation
durations = []
for clip in tts_clips:
wav = clip.replace(".mp3", ".wav")
subprocess.run(
["ffmpeg", "-y", "-i", clip, "-ac", "1", "-ar", str(sr),
"-sample_fmt", "s16", wav],
capture_output=True, check=True)
result = subprocess.run(
["ffprobe", "-v", "error", "-show_entries", "format=duration",
"-of", "csv=p=0", wav],
capture_output=True, text=True)
durations.append(float(result.stdout.strip()))
# Calculate gap to fill target duration
total_speech = sum(durations)
n_gaps = len(tts_clips) - 1
remaining = target_duration - total_speech - intro_pad - outro_pad
gap = max(1.0, remaining / max(1, n_gaps))
# Build timing and concatenate samples
timing = []
t = intro_pad
all_audio = [np.zeros(int(sr * intro_pad), dtype=np.int16)]
for i, dur in enumerate(durations):
wav = tts_clips[i].replace(".mp3", ".wav")
with wave.open(wav) as wf:
samples = np.frombuffer(wf.readframes(wf.getnframes()), dtype=np.int16)
timing.append((t, t + dur, i))
all_audio.append(samples)
t += dur
if i < len(tts_clips) - 1:
all_audio.append(np.zeros(int(sr * gap), dtype=np.int16))
t += gap
all_audio.append(np.zeros(int(sr * outro_pad), dtype=np.int16))
# Pad or trim to exactly target_duration
full = np.concatenate(all_audio)
target_samples = int(sr * target_duration)
if len(full) < target_samples:
full = np.pad(full, (0, target_samples - len(full)))
else:
full = full[:target_samples]
# Write concatenated TTS track
with wave.open("tts_full.wav", "w") as wf:
wf.setnchannels(1)
wf.setsampwidth(2)
wf.setframerate(sr)
wf.writeframes(full.tobytes())
return timing
```
### Audio Mixing
Mix TTS (center) with background music (wide stereo, low volume). The filter chain:
1. TTS mono duplicated to both channels (centered)
2. BGM loudness-normalized, volume reduced to 15%, stereo widened with `extrastereo`
3. Mixed together with dropout transition for smooth endings
```python
def mix_audio(tts_path, bgm_path, output_path, bgm_volume=0.15):
"""Mix TTS centered with BGM panned wide stereo."""
filter_complex = (
# TTS: mono -> stereo center
"[0:a]aformat=sample_fmts=fltp:sample_rates=44100:channel_layouts=mono,"
"pan=stereo|c0=c0|c1=c0[tts];"
# BGM: normalize loudness, reduce volume, widen stereo
f"[1:a]aformat=sample_fmts=fltp:sample_rates=44100:channel_layouts=stereo,"
f"loudnorm=I=-16:TP=-1.5:LRA=11,"
f"volume={bgm_volume},"
f"extrastereo=m=2.5[bgm];"
# Mix with smooth dropout at end
"[tts][bgm]amix=inputs=2:duration=longest:dropout_transition=3,"
"aformat=sample_fmts=s16:sample_rates=44100:channel_layouts=stereo[out]"
)
cmd = [
"ffmpeg", "-y",
"-i", tts_path,
"-i", bgm_path,
"-filter_complex", filter_complex,
"-map", "[out]", output_path,
]
subprocess.run(cmd, capture_output=True, check=True)
```
### Per-Quote Visual Style
Cycle through visual presets per quote for variety. Each preset defines a background effect, color scheme, and text color:
```python
QUOTE_STYLES = [
{"hue": 0.08, "accent": 0.7, "bg": "spiral", "text_rgb": (255, 220, 140)}, # warm gold
{"hue": 0.55, "accent": 0.6, "bg": "rings", "text_rgb": (180, 220, 255)}, # cool blue
{"hue": 0.75, "accent": 0.7, "bg": "wave", "text_rgb": (220, 180, 255)}, # purple
{"hue": 0.35, "accent": 0.6, "bg": "matrix", "text_rgb": (140, 255, 180)}, # green
{"hue": 0.95, "accent": 0.8, "bg": "fire", "text_rgb": (255, 180, 160)}, # red/coral
{"hue": 0.12, "accent": 0.5, "bg": "interference", "text_rgb": (255, 240, 200)}, # amber
{"hue": 0.60, "accent": 0.7, "bg": "tunnel", "text_rgb": (160, 210, 255)}, # cyan
{"hue": 0.45, "accent": 0.6, "bg": "aurora", "text_rgb": (180, 255, 220)}, # teal
]
style = QUOTE_STYLES[quote_index % len(QUOTE_STYLES)]
```
This guarantees no two adjacent quotes share the same look, even without randomness.
### Typewriter Text Rendering
Display quote text character-by-character synced to speech progress. Recently revealed characters are brighter, creating a "just typed" glow:
```python
def render_typewriter(ch, co, lines, block_start, cols, progress, total_chars, text_rgb, t):
"""Overlay typewriter text onto character/color grids.
progress: 0.0 (nothing visible) to 1.0 (all text visible)."""
chars_visible = int(total_chars * min(1.0, progress * 1.2)) # slight overshoot for snappy feel
tr, tg, tb = text_rgb
char_count = 0
for li, line in enumerate(lines):
row = block_start + li
col = (cols - len(line)) // 2
for ci, c in enumerate(line):
if char_count < chars_visible:
age = chars_visible - char_count
bri_factor = min(1.0, 0.5 + 0.5 / (1 + age * 0.015)) # newer = brighter
hue_shift = math.sin(char_count * 0.3 + t * 2) * 0.05
stamp(ch, co, c, row, col + ci,
(int(min(255, tr * bri_factor * (1.0 + hue_shift))),
int(min(255, tg * bri_factor)),
int(min(255, tb * bri_factor * (1.0 - hue_shift)))))
char_count += 1
# Blinking cursor at insertion point
if progress < 1.0 and int(t * 3) % 2 == 0:
# Find cursor position (char_count == chars_visible)
cc = 0
for li, line in enumerate(lines):
for ci, c in enumerate(line):
if cc == chars_visible:
stamp(ch, co, "\u258c", block_start + li,
(cols - len(line)) // 2 + ci, (255, 220, 100))
return
cc += 1
```
### Feature Analysis on Mixed Audio
Run the standard audio analysis (FFT, beat detection) on the final mixed track so visual effects react to both TTS and music:
```python
# Analyze mixed_final.wav (not individual tracks)
features = analyze_audio("mixed_final.wav", fps=24)
```
Visuals pulse with both the music beats and the speech energy.
---
## Audio-Video Sync Verification
After rendering, verify that visual beat markers align with actual audio beats. Drift accumulates from frame timing errors, ffmpeg concat boundaries, and rounding in `fi / fps`.
### Beat Timestamp Extraction
```python
def extract_beat_timestamps(features, fps, threshold=0.5):
"""Extract timestamps where beat feature exceeds threshold."""
beat = features["beat"]
timestamps = []
for fi in range(len(beat)):
if beat[fi] > threshold:
timestamps.append(fi / fps)
return timestamps
def extract_visual_beat_timestamps(video_path, fps, brightness_jump=30):
"""Detect visual beats by brightness jumps between consecutive frames.
Returns timestamps where mean brightness increases by more than threshold."""
import subprocess
cmd = ["ffmpeg", "-i", video_path, "-f", "rawvideo", "-pix_fmt", "gray", "-"]
proc = subprocess.run(cmd, capture_output=True)
frames = np.frombuffer(proc.stdout, dtype=np.uint8)
# Infer frame dimensions from total byte count
n_pixels = len(frames)
# For 1080p: 1920*1080 pixels per frame
# Auto-detect from video metadata is more robust:
probe = subprocess.run(
["ffprobe", "-v", "error", "-select_streams", "v:0",
"-show_entries", "stream=width,height",
"-of", "csv=p=0", video_path],
capture_output=True, text=True)
w, h = map(int, probe.stdout.strip().split(","))
ppf = w * h # pixels per frame
n_frames = n_pixels // ppf
frames = frames[:n_frames * ppf].reshape(n_frames, ppf)
means = frames.mean(axis=1)
timestamps = []
for i in range(1, len(means)):
if means[i] - means[i-1] > brightness_jump:
timestamps.append(i / fps)
return timestamps
```
### Sync Report
```python
def sync_report(audio_beats, visual_beats, tolerance_ms=50):
"""Compare audio beat timestamps to visual beat timestamps.
Args:
audio_beats: list of timestamps (seconds) from audio analysis
visual_beats: list of timestamps (seconds) from video brightness analysis
tolerance_ms: max acceptable drift in milliseconds
Returns:
dict with matched/unmatched/drift statistics
"""
tolerance = tolerance_ms / 1000.0
matched = []
unmatched_audio = []
unmatched_visual = list(visual_beats)
for at in audio_beats:
best_match = None
best_delta = float("inf")
for vt in unmatched_visual:
delta = abs(at - vt)
if delta < best_delta:
best_delta = delta
best_match = vt
if best_match is not None and best_delta < tolerance:
matched.append({"audio": at, "visual": best_match, "drift_ms": best_delta * 1000})
unmatched_visual.remove(best_match)
else:
unmatched_audio.append(at)
drifts = [m["drift_ms"] for m in matched]
return {
"matched": len(matched),
"unmatched_audio": len(unmatched_audio),
"unmatched_visual": len(unmatched_visual),
"total_audio_beats": len(audio_beats),
"total_visual_beats": len(visual_beats),
"mean_drift_ms": np.mean(drifts) if drifts else 0,
"max_drift_ms": np.max(drifts) if drifts else 0,
"p95_drift_ms": np.percentile(drifts, 95) if len(drifts) > 1 else 0,
}
# Usage:
audio_beats = extract_beat_timestamps(features, fps=24)
visual_beats = extract_visual_beat_timestamps("output.mp4", fps=24)
report = sync_report(audio_beats, visual_beats)
print(f"Matched: {report['matched']}/{report['total_audio_beats']} beats")
print(f"Mean drift: {report['mean_drift_ms']:.1f}ms, Max: {report['max_drift_ms']:.1f}ms")
# Target: mean drift < 20ms, max drift < 42ms (1 frame at 24fps)
```
### Common Sync Issues
| Symptom | Cause | Fix |
|---------|-------|-----|
| Consistent late visual beats | ffmpeg concat adds frames at boundaries | Use `-vsync cfr` flag; pad segments to exact frame count |
| Drift increases over time | Floating-point accumulation in `t = fi / fps` | Use integer frame counter, compute `t` fresh each frame |
| Random missed beats | Beat threshold too high / feature smoothing too aggressive | Lower threshold; reduce EMA alpha for beat feature |
| Beats land on wrong frame | Off-by-one in frame indexing | Verify: frame 0 = t=0, frame 1 = t=1/fps (not t=0) |
skills/creative/ascii-video/references/optimization.md
+688
View File
@@ -0,0 +1,688 @@
# Optimization Reference
> **See also:** architecture.md · composition.md · scenes.md · shaders.md · inputs.md · troubleshooting.md
## Hardware Detection
Detect the user's hardware at script startup and adapt rendering parameters automatically. Never hardcode worker counts or resolution.
### CPU and Memory Detection
```python
import multiprocessing
import platform
import shutil
import os
def detect_hardware():
"""Detect hardware capabilities and return render config."""
cpu_count = multiprocessing.cpu_count()
# Leave 1-2 cores free for OS + ffmpeg encoding
if cpu_count >= 16:
workers = cpu_count - 2
elif cpu_count >= 8:
workers = cpu_count - 1
elif cpu_count >= 4:
workers = cpu_count - 1
else:
workers = max(1, cpu_count)
# Memory detection (platform-specific)
try:
if platform.system() == "Darwin":
import subprocess
mem_bytes = int(subprocess.check_output(["sysctl", "-n", "hw.memsize"]).strip())
elif platform.system() == "Linux":
with open("/proc/meminfo") as f:
for line in f:
if line.startswith("MemTotal"):
mem_bytes = int(line.split()[1]) * 1024
break
else:
mem_bytes = 8 * 1024**3 # assume 8GB on unknown
except Exception:
mem_bytes = 8 * 1024**3
mem_gb = mem_bytes / (1024**3)
# Each worker uses ~50-150MB depending on grid sizes
# Cap workers if memory is tight
mem_per_worker_mb = 150
max_workers_by_mem = int(mem_gb * 1024 * 0.6 / mem_per_worker_mb) # use 60% of RAM
workers = min(workers, max_workers_by_mem)
# ffmpeg availability and codec support
has_ffmpeg = shutil.which("ffmpeg") is not None
return {
"cpu_count": cpu_count,
"workers": workers,
"mem_gb": mem_gb,
"platform": platform.system(),
"arch": platform.machine(),
"has_ffmpeg": has_ffmpeg,
}
```
### Adaptive Quality Profiles
Scale resolution, FPS, CRF, and grid density based on hardware:
```python
def quality_profile(hw, target_duration_s, user_preference="auto"):
"""
Returns render settings adapted to hardware.
user_preference: "auto", "draft", "preview", "production", "max"
"""
if user_preference == "draft":
return {"vw": 960, "vh": 540, "fps": 12, "crf": 28, "workers": min(4, hw["workers"]),
"grid_scale": 0.5, "shaders": "minimal", "particles_max": 200}
if user_preference == "preview":
return {"vw": 1280, "vh": 720, "fps": 15, "crf": 25, "workers": hw["workers"],
"grid_scale": 0.75, "shaders": "standard", "particles_max": 500}
if user_preference == "max":
return {"vw": 3840, "vh": 2160, "fps": 30, "crf": 15, "workers": hw["workers"],
"grid_scale": 2.0, "shaders": "full", "particles_max": 3000}
# "production" or "auto"
# Auto-detect: estimate render time, downgrade if it would take too long
n_frames = int(target_duration_s * 24)
est_seconds_per_frame = 0.18 # ~180ms at 1080p
est_total_s = n_frames * est_seconds_per_frame / max(1, hw["workers"])
if hw["mem_gb"] < 4 or hw["cpu_count"] <= 2:
# Low-end: 720p, 15fps
return {"vw": 1280, "vh": 720, "fps": 15, "crf": 23, "workers": hw["workers"],
"grid_scale": 0.75, "shaders": "standard", "particles_max": 500}
if est_total_s > 3600: # would take over an hour
# Downgrade to 720p to speed up
return {"vw": 1280, "vh": 720, "fps": 24, "crf": 20, "workers": hw["workers"],
"grid_scale": 0.75, "shaders": "standard", "particles_max": 800}
# Standard production: 1080p 24fps
return {"vw": 1920, "vh": 1080, "fps": 24, "crf": 20, "workers": hw["workers"],
"grid_scale": 1.0, "shaders": "full", "particles_max": 1200}
def apply_quality_profile(profile):
"""Set globals from quality profile."""
global VW, VH, FPS, N_WORKERS
VW = profile["vw"]
VH = profile["vh"]
FPS = profile["fps"]
N_WORKERS = profile["workers"]
# Grid sizes scale with resolution
# CRF passed to ffmpeg encoder
# Shader set determines which post-processing is active
```
### CLI Integration
```python
parser = argparse.ArgumentParser()
parser.add_argument("--quality", choices=["draft", "preview", "production", "max", "auto"],
default="auto", help="Render quality preset")
parser.add_argument("--aspect", choices=["landscape", "portrait", "square"],
default="landscape", help="Aspect ratio preset")
parser.add_argument("--workers", type=int, default=0, help="Override worker count (0=auto)")
parser.add_argument("--resolution", type=str, default="", help="Override resolution e.g. 1280x720")
args = parser.parse_args()
hw = detect_hardware()
if args.workers > 0:
hw["workers"] = args.workers
profile = quality_profile(hw, target_duration, args.quality)
# Apply aspect ratio preset (before manual resolution override)
ASPECT_PRESETS = {
"landscape": (1920, 1080),
"portrait": (1080, 1920),
"square": (1080, 1080),
}
if args.aspect != "landscape" and not args.resolution:
profile["vw"], profile["vh"] = ASPECT_PRESETS[args.aspect]
if args.resolution:
w, h = args.resolution.split("x")
profile["vw"], profile["vh"] = int(w), int(h)
apply_quality_profile(profile)
log(f"Hardware: {hw['cpu_count']} cores, {hw['mem_gb']:.1f}GB RAM, {hw['platform']}")
log(f"Render: {profile['vw']}x{profile['vh']} @{profile['fps']}fps, "
f"CRF {profile['crf']}, {profile['workers']} workers")
```
### Portrait Mode Considerations
Portrait (1080x1920) has the same pixel count as landscape 1080p, so performance is equivalent. But composition patterns differ:
| Concern | Landscape | Portrait |
|---------|-----------|----------|
| Grid cols at `lg` | 160 | 90 |
| Grid rows at `lg` | 45 | 80 |
| Max text line chars | ~50 centered | ~25-30 centered |
| Vertical rain | Short travel | Long, dramatic travel |
| Horizontal spectrum | Full width | Needs rotation or compression |
| Radial effects | Natural circles | Tall ellipses (aspect correction handles this) |
| Particle explosions | Wide spread | Tall spread |
| Text stacking | 3-4 lines comfortable | 8-10 lines comfortable |
| Quote layout | 2-3 wide lines | 5-6 short lines |
**Portrait-optimized patterns:**
- Vertical rain/matrix effects are naturally enhanced — longer column travel
- Fire columns rise through more screen space
- Rising embers/particles have more vertical runway
- Text can be stacked more aggressively with more lines
- Radial effects work if aspect correction is applied (GridLayer handles this automatically)
- Spectrum bars can be rotated 90 degrees (vertical bars from bottom)
**Portrait text layout:**
```python
def layout_text_portrait(text, max_chars_per_line=25, grid=None):
"""Break text into short lines for portrait display."""
words = text.split()
lines = []; current = ""
for w in words:
if len(current) + len(w) + 1 > max_chars_per_line:
lines.append(current.strip())
current = w + " "
else:
current += w + " "
if current.strip():
lines.append(current.strip())
return lines
```
## Performance Budget
Target: 100-200ms per frame (5-10 fps single-threaded, 40-80 fps across 8 workers).
| Component | Time | Notes |
|-----------|------|-------|
| Feature extraction | 1-5ms | Pre-computed for all frames before render |
| Effect function | 2-15ms | Vectorized numpy, avoid Python loops |
| Character render | 80-150ms | **Bottleneck** -- per-cell Python loop |
| Shader pipeline | 5-25ms | Depends on active shaders |
| ffmpeg encode | ~5ms | Amortized by pipe buffering |
## Bitmap Pre-Rasterization
Rasterize every character at init, not per-frame:
```python
# At init time -- done once
for c in all_characters:
img = Image.new("L", (cell_w, cell_h), 0)
ImageDraw.Draw(img).text((0, 0), c, fill=255, font=font)
bitmaps[c] = np.array(img, dtype=np.float32) / 255.0 # float32 for fast multiply
# At render time -- fast lookup
bitmap = bitmaps[char]
canvas[y:y+ch, x:x+cw] = np.maximum(canvas[y:y+ch, x:x+cw],
(bitmap[:,:,None] * color).astype(np.uint8))
```
Collect all characters from all palettes + overlay text into the init set. Lazy-init for any missed characters.
## Pre-Rendered Background Textures
Alternative to `_render_vf()` for backgrounds where characters don't need to change every frame. Pre-bake a static ASCII texture once at init, then multiply by a per-cell color field each frame. One matrix multiply vs thousands of bitmap blits.
Use when: background layer uses a fixed character palette and only color/brightness varies per frame. NOT suitable for layers where character selection depends on a changing value field.
### Init: Bake the Texture
```python
# In GridLayer.__init__:
self._bg_row_idx = np.clip(
(np.arange(VH) - self.oy) // self.ch, 0, self.rows - 1
)
self._bg_col_idx = np.clip(
(np.arange(VW) - self.ox) // self.cw, 0, self.cols - 1
)
self._bg_textures = {}
def make_bg_texture(self, palette):
"""Pre-render a static ASCII texture (grayscale float32) once."""
if palette not in self._bg_textures:
texture = np.zeros((VH, VW), dtype=np.float32)
rng = random.Random(12345)
ch_list = [c for c in palette if c != " " and c in self.bm]
if not ch_list:
ch_list = list(self.bm.keys())[:5]
for row in range(self.rows):
y = self.oy + row * self.ch
if y + self.ch > VH:
break
for col in range(self.cols):
x = self.ox + col * self.cw
if x + self.cw > VW:
break
bm = self.bm[rng.choice(ch_list)]
texture[y:y+self.ch, x:x+self.cw] = bm
self._bg_textures[palette] = texture
return self._bg_textures[palette]
```
### Render: Color Field x Cached Texture
```python
def render_bg(self, color_field, palette=PAL_CIRCUIT):
"""Fast background: pre-rendered ASCII texture * per-cell color field.
color_field: (rows, cols, 3) uint8. Returns (VH, VW, 3) uint8."""
texture = self.make_bg_texture(palette)
# Expand cell colors to pixel coords via pre-computed index maps
color_px = color_field[
self._bg_row_idx[:, None], self._bg_col_idx[None, :]
].astype(np.float32)
return (texture[:, :, None] * color_px).astype(np.uint8)
```
### Usage in a Scene
```python
# Build per-cell color from effect fields (cheap — rows*cols, not VH*VW)
hue = ((t * 0.05 + val * 0.2) % 1.0).astype(np.float32)
R, G, B = hsv2rgb(hue, np.full_like(val, 0.5), val)
color_field = mkc(R, G, B, g.rows, g.cols) # (rows, cols, 3) uint8
# Render background — single matrix multiply, no per-cell loop
canvas_bg = g.render_bg(color_field, PAL_DENSE)
```
The texture init loop runs once and is cached per palette. Per-frame cost is one fancy-index lookup + one broadcast multiply — orders of magnitude faster than the per-cell bitmap blit loop in `render()` for dense backgrounds.
## Coordinate Array Caching
Pre-compute all grid-relative coordinate arrays at init, not per-frame:
```python
# These are O(rows*cols) and used in every effect
self.rr = np.arange(rows)[:, None] # row indices
self.cc = np.arange(cols)[None, :] # col indices
self.dist = np.sqrt(dx**2 + dy**2) # distance from center
self.angle = np.arctan2(dy, dx) # angle from center
self.dist_n = ... # normalized distance
```
## Vectorized Effect Patterns
### Avoid Per-Cell Python Loops in Effects
The render loop (compositing bitmaps) is unavoidably per-cell. But effect functions must be fully vectorized numpy -- never iterate over rows/cols in Python.
Bad (O(rows*cols) Python loop):
```python
for r in range(rows):
for c in range(cols):
val[r, c] = math.sin(c * 0.1 + t) * math.cos(r * 0.1 - t)
```
Good (vectorized):
```python
val = np.sin(g.cc * 0.1 + t) * np.cos(g.rr * 0.1 - t)
```
### Vectorized Matrix Rain
The naive per-column per-trail-pixel loop is the second biggest bottleneck after the render loop. Use numpy fancy indexing:
```python
# Instead of nested Python loops over columns and trail pixels:
# Build row index arrays for all active trail pixels at once
all_rows = []
all_cols = []
all_fades = []
for c in range(cols):
head = int(S["ry"][c])
trail_len = S["rln"][c]
for i in range(trail_len):
row = head - i
if 0 <= row < rows:
all_rows.append(row)
all_cols.append(c)
all_fades.append(1.0 - i / trail_len)
# Vectorized assignment
ar = np.array(all_rows)
ac = np.array(all_cols)
af = np.array(all_fades, dtype=np.float32)
# Assign chars and colors in bulk using fancy indexing
ch[ar, ac] = ... # vectorized char assignment
co[ar, ac, 1] = (af * bri * 255).astype(np.uint8) # green channel
```
### Vectorized Fire Columns
Same pattern -- accumulate index arrays, assign in bulk:
```python
fire_val = np.zeros((rows, cols), dtype=np.float32)
for fi in range(n_cols):
fx_c = int((fi * cols / n_cols + np.sin(t * 2 + fi * 0.7) * 3) % cols)
height = int(energy * rows * 0.7)
dy = np.arange(min(height, rows))
fr = rows - 1 - dy
frac = dy / max(height, 1)
# Width spread: base columns wider at bottom
for dx in range(-1, 2): # 3-wide columns
c = fx_c + dx
if 0 <= c < cols:
fire_val[fr, c] = np.maximum(fire_val[fr, c],
(1 - frac * 0.6) * (0.5 + rms * 0.5))
# Now map fire_val to chars and colors in one vectorized pass
```
## PIL String Rendering for Text-Heavy Scenes
Alternative to per-cell bitmap blitting when rendering many long text strings (scrolling tickers, typewriter sequences, idea floods). Uses PIL's native `ImageDraw.text()` which renders an entire string in one C call, vs one Python-loop bitmap blit per character.
Typical win: a scene with 56 ticker rows renders 56 PIL `text()` calls instead of ~10K individual bitmap blits.
Use when: scene renders many rows of readable text strings. NOT suitable for sparse or spatially-scattered single characters (use normal `render()` for those).
```python
from PIL import Image, ImageDraw
def render_text_layer(grid, rows_data, font):
"""Render dense text rows via PIL instead of per-cell bitmap blitting.
Args:
grid: GridLayer instance (for oy, ch, ox, font metrics)
rows_data: list of (row_index, text_string, rgb_tuple) — one per row
font: PIL ImageFont instance (grid.font)
Returns:
uint8 array (VH, VW, 3) — canvas with rendered text
"""
img = Image.new("RGB", (VW, VH), (0, 0, 0))
draw = ImageDraw.Draw(img)
for row_idx, text, color in rows_data:
y = grid.oy + row_idx * grid.ch
if y + grid.ch > VH:
break
draw.text((grid.ox, y), text, fill=color, font=font)
return np.array(img)
```
### Usage in a Ticker Scene
```python
# Build ticker data (text + color per row)
rows_data = []
for row in range(n_tickers):
text = build_ticker_text(row, t) # scrolling substring
color = hsv2rgb_scalar(hue, 0.85, bri) # (R, G, B) tuple
rows_data.append((row, text, color))
# One PIL pass instead of thousands of bitmap blits
canvas_tickers = render_text_layer(g_md, rows_data, g_md.font)
# Blend with other layers normally
result = blend_canvas(canvas_bg, canvas_tickers, "screen", 0.9)
```
This is purely a rendering optimization — same visual output, fewer draw calls. The grid's `render()` method is still needed for sparse character fields where characters are placed individually based on value fields.
## Bloom Optimization
**Do NOT use `scipy.ndimage.uniform_filter`** -- measured at 424ms/frame.
Use 4x downsample + manual box blur instead -- 84ms/frame (5x faster):
```python
sm = canvas[::4, ::4].astype(np.float32) # 4x downsample
br = np.where(sm > threshold, sm, 0)
for _ in range(3): # 3-pass manual box blur
p = np.pad(br, ((1,1),(1,1),(0,0)), mode='edge')
br = (p[:-2,:-2] + p[:-2,1:-1] + p[:-2,2:] +
p[1:-1,:-2] + p[1:-1,1:-1] + p[1:-1,2:] +
p[2:,:-2] + p[2:,1:-1] + p[2:,2:]) / 9.0
bl = np.repeat(np.repeat(br, 4, axis=0), 4, axis=1)[:H, :W]
```
## Vignette Caching
Distance field is resolution- and strength-dependent, never changes per frame:
```python
_vig_cache = {}
def sh_vignette(canvas, strength):
key = (canvas.shape[0], canvas.shape[1], round(strength, 2))
if key not in _vig_cache:
Y = np.linspace(-1, 1, H)[:, None]
X = np.linspace(-1, 1, W)[None, :]
_vig_cache[key] = np.clip(1.0 - np.sqrt(X**2+Y**2) * strength, 0.15, 1).astype(np.float32)
return np.clip(canvas * _vig_cache[key][:,:,None], 0, 255).astype(np.uint8)
```
Same pattern for CRT barrel distortion (cache remap coordinates).
## Film Grain Optimization
Generate noise at half resolution, tile up:
```python
noise = np.random.randint(-amt, amt+1, (H//2, W//2, 1), dtype=np.int16)
noise = np.repeat(np.repeat(noise, 2, axis=0), 2, axis=1)[:H, :W]
```
2x blocky grain looks like film grain and costs 1/4 the random generation.
## Parallel Rendering
### Worker Architecture
```python
hw = detect_hardware()
N_WORKERS = hw["workers"]
# Batch splitting (for non-clip architectures)
batch_size = (n_frames + N_WORKERS - 1) // N_WORKERS
batches = [(i, i*batch_size, min((i+1)*batch_size, n_frames), features, seg_path) ...]
with multiprocessing.Pool(N_WORKERS) as pool:
segments = pool.starmap(render_batch, batches)
```
### Per-Clip Parallelism (Preferred for Segmented Videos)
```python
from concurrent.futures import ProcessPoolExecutor, as_completed
with ProcessPoolExecutor(max_workers=N_WORKERS) as pool:
futures = {pool.submit(render_clip, seg, features, path): seg["id"]
for seg, path in clip_args}
for fut in as_completed(futures):
clip_id = futures[fut]
try:
fut.result()
log(f" {clip_id} done")
except Exception as e:
log(f" {clip_id} FAILED: {e}")
```
### Worker Isolation
Each worker:
- Creates its own `Renderer` instance (with full grid + bitmap init)
- Opens its own ffmpeg subprocess
- Has independent random seed (`random.seed(batch_id * 10000)`)
- Writes to its own segment file and stderr log
### ffmpeg Pipe Safety
**CRITICAL**: Never `stderr=subprocess.PIPE` with long-running ffmpeg. The stderr buffer fills at ~64KB and deadlocks:
```python
# WRONG -- will deadlock
pipe = subprocess.Popen(cmd, stdin=subprocess.PIPE, stderr=subprocess.PIPE)
# RIGHT -- stderr to file
stderr_fh = open(err_path, "w")
pipe = subprocess.Popen(cmd, stdin=subprocess.PIPE, stdout=subprocess.DEVNULL, stderr=stderr_fh)
# ... write all frames ...
pipe.stdin.close()
pipe.wait()
stderr_fh.close()
```
### Concatenation
```python
with open(concat_file, "w") as cf:
for seg in segments:
cf.write(f"file '{seg}'\n")
cmd = ["ffmpeg", "-y", "-f", "concat", "-safe", "0", "-i", concat_file]
if audio_path:
cmd += ["-i", audio_path, "-c:v", "copy", "-c:a", "aac", "-b:a", "192k", "-shortest"]
else:
cmd += ["-c:v", "copy"]
cmd.append(output_path)
subprocess.run(cmd, capture_output=True, check=True)
```
## Particle System Performance
Cap particle counts based on quality profile:
| System | Low | Standard | High |
|--------|-----|----------|------|
| Explosion | 300 | 1000 | 2500 |
| Embers | 500 | 1500 | 3000 |
| Starfield | 300 | 800 | 1500 |
| Dissolve | 200 | 600 | 1200 |
Cull by truncating lists:
```python
MAX_PARTICLES = profile.get("particles_max", 1200)
if len(S["px"]) > MAX_PARTICLES:
for k in ("px", "py", "vx", "vy", "life", "char"):
S[k] = S[k][-MAX_PARTICLES:] # keep newest
```
## Memory Management
- Feature arrays: pre-computed for all frames, shared across workers via fork semantics (COW)
- Canvas: allocated once per worker, reused (`np.zeros(...)`)
- Character arrays: allocated per frame (cheap -- rows*cols U1 strings)
- Bitmap cache: ~500KB per grid size, initialized once per worker
Total memory per worker: ~50-150MB. Total: ~400-800MB for 8 workers.
For low-memory systems (< 4GB), reduce worker count and use smaller grids.
## Brightness Verification
After render, spot-check brightness at sample timestamps:
```python
for t in [2, 30, 60, 120, 180]:
cmd = ["ffmpeg", "-ss", str(t), "-i", output_path,
"-frames:v", "1", "-f", "rawvideo", "-pix_fmt", "rgb24", "-"]
r = subprocess.run(cmd, capture_output=True)
arr = np.frombuffer(r.stdout, dtype=np.uint8)
print(f"t={t}s mean={arr.mean():.1f} max={arr.max()}")
```
Target: mean > 5 for quiet sections, mean > 15 for active sections. If consistently below, increase brightness floor in effects and/or global boost multiplier.
## Render Time Estimates
Scale with hardware. Baseline: 1080p, 24fps, ~180ms/frame/worker.
| Duration | Frames | 4 workers | 8 workers | 16 workers |
|----------|--------|-----------|-----------|------------|
| 30s | 720 | ~3 min | ~2 min | ~1 min |
| 2 min | 2,880 | ~13 min | ~7 min | ~4 min |
| 3.5 min | 5,040 | ~23 min | ~12 min | ~6 min |
| 5 min | 7,200 | ~33 min | ~17 min | ~9 min |
| 10 min | 14,400 | ~65 min | ~33 min | ~17 min |
At 720p: multiply times by ~0.5. At 4K: multiply by ~4.
Heavier effects (many particles, dense grids, extra shader passes) add ~20-50%.
---
## Temp File Cleanup
Rendering generates intermediate files that accumulate across runs. Clean up after the final concat/mux step.
### Files to Clean
| File type | Source | Location |
|-----------|--------|----------|
| WAV extracts | `ffmpeg -i input.mp3 ... tmp.wav` | `tempfile.mktemp()` or project dir |
| Segment clips | `render_clip()` output | `segments/seg_00.mp4` etc. |
| Concat list | ffmpeg concat demuxer input | `segments/concat.txt` |
| ffmpeg stderr logs | piped to file for debugging | `*.log` in project dir |
| Feature cache | pickled numpy arrays | `*.pkl` or `*.npz` |
### Cleanup Function
```python
import glob
import tempfile
import shutil
def cleanup_render_artifacts(segments_dir="segments", keep_final=True):
"""Remove intermediate files after successful render.
Call this AFTER verifying the final output exists and plays correctly.
Args:
segments_dir: directory containing segment clips and concat list
keep_final: if True, only delete intermediates (not the final output)
"""
removed = []
# 1. Segment clips
if os.path.isdir(segments_dir):
shutil.rmtree(segments_dir)
removed.append(f"directory: {segments_dir}")
# 2. Temporary WAV files
for wav in glob.glob("*.wav"):
if wav.startswith("tmp") or wav.startswith("extracted_"):
os.remove(wav)
removed.append(wav)
# 3. ffmpeg stderr logs
for log in glob.glob("ffmpeg_*.log"):
os.remove(log)
removed.append(log)
# 4. Feature cache (optional — useful to keep for re-renders)
# for cache in glob.glob("features_*.npz"):
# os.remove(cache)
# removed.append(cache)
print(f"Cleaned {len(removed)} artifacts: {removed}")
return removed
```
### Integration with Render Pipeline
Call cleanup at the end of the main render script, after the final output is verified:
```python
# At end of main()
if os.path.exists(output_path) and os.path.getsize(output_path) > 1000:
cleanup_render_artifacts(segments_dir="segments")
print(f"Done. Output: {output_path}")
else:
print("WARNING: final output missing or empty — skipping cleanup")
```
### Temp File Best Practices
- Use `tempfile.mkdtemp()` for segment directories — avoids polluting the project dir
- Name WAV extracts with `tempfile.mktemp(suffix=".wav")` so they're in the OS temp dir
- For debugging, set `KEEP_INTERMEDIATES=1` env var to skip cleanup
- Feature caches (`.npz`) are cheap to store and expensive to recompute — default to keeping them
skills/creative/ascii-video/references/scenes.md
+1011
View File
File diff suppressed because it is too large Load Diff
skills/creative/ascii-video/references/shaders.md
+1385
View File
File diff suppressed because it is too large Load Diff
skills/creative/ascii-video/references/troubleshooting.md
+367
View File
@@ -0,0 +1,367 @@
# Troubleshooting Reference
> **See also:** composition.md · architecture.md · shaders.md · scenes.md · optimization.md
## Quick Diagnostic
| Symptom | Likely Cause | Fix |
|---------|-------------|-----|
| All black output | tonemap gamma too high or no effects rendering | Lower gamma to 0.5, check scene_fn returns non-zero canvas |
| Washed out / too bright | Linear brightness multiplier instead of tonemap | Replace `canvas * N` with `tonemap(canvas, gamma=0.75)` |
| ffmpeg hangs mid-render | stderr=subprocess.PIPE deadlock | Redirect stderr to file |
| "read-only" array error | broadcast_to view without .copy() | Add `.copy()` after broadcast_to |
| PicklingError | Lambda or closure in SCENES table | Define all fx_* at module level |
| Random dark holes in output | Font missing Unicode glyphs | Validate palettes at init |
| Audio-visual desync | Frame timing accumulation | Use integer frame counter, compute t fresh each frame |
| Single-color flat output | Hue field shape mismatch | Ensure h,s,v arrays all (rows,cols) before hsv2rgb |
| Text unreadable over busy bg | No contrast between text and background | Use `apply_text_backdrop()` (composition.md) + `reverse_vignette` shader (shaders.md) |
| Text garbled/mirrored | Kaleidoscope or mirror shader applied to text scene | **Never apply kaleidoscope, mirror_h/v/quad/diag to scenes with readable text** — radial folding destroys legibility. Apply these only to background layers or text-free scenes |
Common bugs, gotchas, and platform-specific issues encountered during ASCII video development.
## NumPy Broadcasting
### The `broadcast_to().copy()` Trap
Hue field generators often return arrays that are broadcast views — they have shape `(1, cols)` or `(rows, 1)` that numpy broadcasts to `(rows, cols)`. These views are **read-only**. If any downstream code tries to modify them in-place (e.g., `h %= 1.0`), numpy raises:
```
ValueError: output array is read-only
```
**Fix**: Always `.copy()` after `broadcast_to()`:
```python
h = np.broadcast_to(h, (g.rows, g.cols)).copy()
```
This is especially important in `_render_vf()` where hue arrays flow through `hsv2rgb()`.
### The `+=` vs `+` Trap
Broadcasting also fails with in-place operators when operand shapes don't match exactly:
```python
# FAILS if result is (rows,1) and operand is (rows, cols)
val += np.sin(g.cc * 0.02 + t * 0.3) * 0.5
# WORKS — creates a new array
val = val + np.sin(g.cc * 0.02 + t * 0.3) * 0.5
```
The `vf_plasma()` function had this bug. Use `+` instead of `+=` when mixing different-shaped arrays.
### Shape Mismatch in `hsv2rgb()`
`hsv2rgb(h, s, v)` requires all three arrays to have identical shapes. If `h` is `(1, cols)` and `s` is `(rows, cols)`, the function crashes or produces wrong output.
**Fix**: Ensure all inputs are broadcast and copied to `(rows, cols)` before calling.
---
## Blend Mode Pitfalls
### Overlay Crushes Dark Inputs
`overlay(a, b) = 2*a*b` when `a < 0.5`. Two values of 0.12 produce `2 * 0.12 * 0.12 = 0.03`. The result is darker than either input.
**Impact**: If both layers are dark (which ASCII art usually is), overlay produces near-black output.
**Fix**: Use `screen` for dark source material. Screen always brightens: `1 - (1-a)*(1-b)`.
### Colordodge Division by Zero
`colordodge(a, b) = a / (1 - b)`. When `b = 1.0` (pure white pixels), this divides by zero.
**Fix**: Add epsilon: `a / (1 - b + 1e-6)`. The implementation in `BLEND_MODES` should include this.
### Colorburn Division by Zero
`colorburn(a, b) = 1 - (1-a) / b`. When `b = 0` (pure black pixels), this divides by zero.
**Fix**: Add epsilon: `1 - (1-a) / (b + 1e-6)`.
### Multiply Always Darkens
`multiply(a, b) = a * b`. Since both operands are [0,1], the result is always <= min(a,b). Never use multiply as a feedback blend mode — the frame goes black within a few frames.
**Fix**: Use `screen` for feedback, or `add` with low opacity.
---
## Multiprocessing
### Pickling Constraints
`ProcessPoolExecutor` serializes function arguments via pickle. This constrains what you can pass to workers:
| Can Pickle | Cannot Pickle |
|-----------|---------------|
| Module-level functions (`def fx_foo():`) | Lambdas (`lambda x: x + 1`) |
| Dicts, lists, numpy arrays | Closures (functions defined inside functions) |
| Class instances (with `__reduce__`) | Instance methods |
| Strings, numbers | File handles, sockets |
**Impact**: All scene functions referenced in the SCENES table must be defined at module level with `def`. If you use a lambda or closure, you get:
```
_pickle.PicklingError: Can't pickle <function <lambda> at 0x...>
```
**Fix**: Define all scene functions at module top level. Lambdas used inside `_render_vf()` as val_fn/hue_fn are fine because they execute within the worker process — they're not pickled across process boundaries.
### macOS spawn vs Linux fork
On macOS, `multiprocessing` defaults to `spawn` (full serialization). On Linux, it defaults to `fork` (copy-on-write). This means:
- **macOS**: Feature arrays are serialized per worker (~57KB for 30s video, but scales with duration). Each worker re-imports the entire module.
- **Linux**: Feature arrays are shared via COW. Workers inherit the parent's memory.
**Impact**: On macOS, module-level code (like `detect_hardware()`) runs in every worker process. If it has side effects (e.g., subprocess calls), those happen N+1 times.
### Per-Worker State Isolation
Each worker creates its own:
- `Renderer` instance (with fresh grid cache)
- `FeedbackBuffer` (feedback doesn't cross scene boundaries)
- Random seed (`random.seed(hash(seg_id) + 42)`)
This means:
- Particle state doesn't carry between scenes (expected)
- Feedback trails reset at scene cuts (expected)
- `np.random` state is NOT seeded by `random.seed()` — they use separate RNGs
**Fix for deterministic noise**: Use `np.random.RandomState(seed)` explicitly:
```python
rng = np.random.RandomState(hash(seg_id) + 42)
noise = rng.random((rows, cols))
```
---
## Brightness Issues
### Dark Scenes After Tonemap
If a scene is still dark after tonemap, check:
1. **Gamma too high**: Lower gamma (0.5-0.6) for scenes with destructive post-processing
2. **Shader destroying brightness**: Solarize, posterize, or contrast adjustments in the shader chain can undo tonemap's work. Move destructive shaders earlier in the chain, or increase gamma to compensate.
3. **Feedback with multiply**: Multiply feedback darkens every frame. Switch to screen or add.
4. **Overlay blend in scene**: If the scene function uses `blend_canvas(..., "overlay", ...)` with dark layers, switch to screen.
### Diagnostic: Test-Frame Brightness
```bash
python reel.py --test-frame 10.0
# Output: Mean brightness: 44.3, max: 255
```
If mean < 20, the scene needs attention. Common fixes:
- Lower gamma in the SCENES entry
- Change internal blend modes from overlay/multiply to screen/add
- Increase value field multipliers (e.g., `vf_plasma(...) * 1.5`)
- Check that the shader chain doesn't have an aggressive solarize or threshold
### v1 Brightness Pattern (Deprecated)
The old pattern used a linear multiplier:
```python
# OLD — don't use
canvas = np.clip(canvas.astype(np.float32) * 2.0, 0, 255).astype(np.uint8)
```
This fails because:
- Dark scenes (mean 8): `8 * 2.0 = 16` — still dark
- Bright scenes (mean 130): `130 * 2.0 = 255` — clipped, lost detail
Use `tonemap()` instead. See `composition.md` § Adaptive Tone Mapping.
---
## ffmpeg Issues
### Pipe Deadlock
The #1 production bug. If you use `stderr=subprocess.PIPE`:
```python
# DEADLOCK — stderr buffer fills at 64KB, blocks ffmpeg, blocks your writes
pipe = subprocess.Popen(cmd, stdin=subprocess.PIPE, stderr=subprocess.PIPE)
```
**Fix**: Always redirect stderr to a file:
```python
stderr_fh = open(err_path, "w")
pipe = subprocess.Popen(cmd, stdin=subprocess.PIPE,
stdout=subprocess.DEVNULL, stderr=stderr_fh)
```
### Frame Count Mismatch
If the number of frames written to the pipe doesn't match what ffmpeg expects (based on `-r` and duration), the output may have:
- Missing frames at the end
- Incorrect duration
- Audio-video desync
**Fix**: Calculate frame count explicitly: `n_frames = int(duration * FPS)`. Don't use `range(int(start*FPS), int(end*FPS))` without verifying the total matches.
### Concat Fails with "unsafe file name"
```
[concat @ ...] Unsafe file name
```
**Fix**: Always use `-safe 0`:
```python
["ffmpeg", "-f", "concat", "-safe", "0", "-i", concat_path, ...]
```
---
## Font Issues
### Cell Height (macOS Pillow)
`textbbox()` and `getbbox()` return incorrect heights on some macOS Pillow versions. Use `getmetrics()`:
```python
ascent, descent = font.getmetrics()
cell_height = ascent + descent # correct
# NOT: font.getbbox("M")[3] # wrong on some versions
```
### Missing Unicode Glyphs
Not all fonts render all Unicode characters. If a palette character isn't in the font, the glyph renders as a blank or tofu box, appearing as a dark hole in the output.
**Fix**: Validate at init:
```python
all_chars = set()
for pal in [PAL_DEFAULT, PAL_DENSE, PAL_RUNE, ...]:
all_chars.update(pal)
valid_chars = set()
for c in all_chars:
if c == " ":
valid_chars.add(c)
continue
img = Image.new("L", (20, 20), 0)
ImageDraw.Draw(img).text((0, 0), c, fill=255, font=font)
if np.array(img).max() > 0:
valid_chars.add(c)
else:
log(f"WARNING: '{c}' (U+{ord(c):04X}) missing from font")
```
### Platform Font Paths
| Platform | Common Paths |
|----------|-------------|
| macOS | `/System/Library/Fonts/Menlo.ttc`, `/System/Library/Fonts/Monaco.ttf` |
| Linux | `/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf` |
| Windows | `C:\Windows\Fonts\consola.ttf` (Consolas) |
Always probe multiple paths and fall back gracefully. See `architecture.md` § Font Selection.
---
## Performance
### Slow Shaders
Some shaders use Python loops and are very slow at 1080p:
| Shader | Issue | Fix |
|--------|-------|-----|
| `wave_distort` | Per-row Python loop | Use vectorized fancy indexing |
| `halftone` | Triple-nested loop | Vectorize with block reduction |
| `matrix rain` | Per-column per-trail loop | Accumulate index arrays, bulk assign |
### Render Time Scaling
If render is taking much longer than expected:
1. Check grid count — each extra grid adds ~100-150ms/frame for init
2. Check particle count — cap at quality-appropriate limits
3. Check shader count — each shader adds 2-25ms
4. Check for accidental Python loops in effects (should be numpy only)
---
## Common Mistakes
### Using `r.S` vs the `S` Parameter
The v2 scene protocol passes `S` (the state dict) as an explicit parameter. But `S` IS `r.S` — they're the same object. Both work:
```python
def fx_scene(r, f, t, S):
S["counter"] = S.get("counter", 0) + 1 # via parameter (preferred)
r.S["counter"] = r.S.get("counter", 0) + 1 # via renderer (also works)
```
Use the `S` parameter for clarity. The explicit parameter makes it obvious that the function has persistent state.
### Forgetting to Handle Empty Feature Values
Audio features default to 0.0 if the audio is silent. Use `.get()` with sensible defaults:
```python
energy = f.get("bass", 0.3) # default to 0.3, not 0
```
If you default to 0, effects go blank during silence.
### Writing New Files Instead of Editing Existing State
A common bug in particle systems: creating new arrays every frame instead of updating persistent state.
```python
# WRONG — particles reset every frame
S["px"] = []
for _ in range(100):
S["px"].append(random.random())
# RIGHT — only initialize once, update each frame
if "px" not in S:
S["px"] = []
# ... emit new particles based on beats
# ... update existing particles
```
### Not Clipping Value Fields
Value fields should be [0, 1]. If they exceed this range, `val2char()` produces index errors:
```python
# WRONG — vf_plasma() * 1.5 can exceed 1.0
val = vf_plasma(g, f, t, S) * 1.5
# RIGHT — clip after scaling
val = np.clip(vf_plasma(g, f, t, S) * 1.5, 0, 1)
```
The `_render_vf()` helper clips automatically, but if you're building custom scenes, clip explicitly.
## Brightness Best Practices
- Dense animated backgrounds — never flat black, always fill the grid
- Vignette minimum clamped to 0.15 (not 0.12)
- Bloom threshold 130 (not 170) so more pixels contribute to glow
- Use `screen` blend mode (not `overlay`) for dark ASCII layers — overlay squares dark values: `2 * 0.12 * 0.12 = 0.03`
- FeedbackBuffer decay minimum 0.5 — below that, feedback disappears too fast to see
- Value field floor: `vf * 0.8 + 0.05` ensures no cell is truly zero
- Per-scene gamma overrides: default 0.75, solarize 0.55, posterize 0.50, bright scenes 0.85
- Test frames early: render single frames at key timestamps before committing to full render
**Quick checklist before full render:**
1. Render 3 test frames (start, middle, end)
2. Check `canvas.mean() > 8` after tonemap
3. Check no scene is visually flat black
4. Verify per-section variation (different bg/palette/color per scene)
5. Confirm shader chain includes bloom (threshold 130)
6. Confirm vignette strength ≤ 0.25
skills/creative/baoyu-infographic/PORT_NOTES.md
+43
View File
@@ -0,0 +1,43 @@
# Port Notes — baoyu-infographic
Ported from [JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills) v1.56.1.
## Changes from upstream
Only `SKILL.md` was modified. All 45 reference files are verbatim copies.
### SKILL.md adaptations
| Change | Upstream | Hermes |
|--------|----------|--------|
| Metadata namespace | `openclaw` | `hermes` |
| Trigger | `/baoyu-infographic` slash command | Natural language skill matching |
| User config | EXTEND.md file (project/user/XDG paths) | Removed — not part of Hermes infra |
| User prompts | `AskUserQuestion` (batched) | `clarify` tool (one at a time) |
| Image generation | baoyu-imagine (Bun/TypeScript) | `image_generate` tool |
| Platform support | Linux/macOS/Windows/WSL/PowerShell | Linux/macOS only |
| File operations | Bash commands | Hermes file tools (write_file, read_file) |
### What was preserved
- All layout definitions (21 files)
- All style definitions (21 files)
- Core reference files (analysis-framework, base-prompt, structured-content-template)
- Recommended combinations table
- Keyword shortcuts table
- Core principles and workflow structure
- Author, version, homepage attribution
## Syncing with upstream
To pull upstream updates:
```bash
# Compare versions
curl -sL https://raw.githubusercontent.com/JimLiu/baoyu-skills/main/skills/baoyu-infographic/SKILL.md | head -5
# Look for version: line
# Diff reference files
diff <(curl -sL https://raw.githubusercontent.com/.../references/layouts/bento-grid.md) references/layouts/bento-grid.md
```
Reference files can be overwritten directly (they're unchanged from upstream). SKILL.md must be manually merged since it contains Hermes-specific adaptations.
skills/creative/baoyu-infographic/SKILL.md
+237
View File
@@ -0,0 +1,237 @@
---
name: baoyu-infographic
description: "Infographics: 21 layouts x 21 styles (信息图, 可视化)."
version: 1.56.1
author: 宝玉 (JimLiu)
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [infographic, visual-summary, creative, image-generation]
homepage: https://github.com/JimLiu/baoyu-skills#baoyu-infographic
---
# Infographic Generator
Adapted from [baoyu-infographic](https://github.com/JimLiu/baoyu-skills) for Hermes Agent's tool ecosystem.
Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
## When to Use
Trigger this skill when the user asks to create an infographic, visual summary, information graphic, or uses terms like "信息图", "可视化", or "高密度信息大图". The user provides content (text, file path, URL, or topic) and optionally specifies layout, style, aspect ratio, or language.
## Options
| Option | Values |
|--------|--------|
| Layout | 21 options (see Layout Gallery), default: bento-grid |
| Style | 21 options (see Style Gallery), default: craft-handmade |
| Aspect | Named: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1) |
| Language | en, zh, ja, etc. |
## Layout Gallery
| Layout | Best For |
|--------|----------|
| `linear-progression` | Timelines, processes, tutorials |
| `binary-comparison` | A vs B, before-after, pros-cons |
| `comparison-matrix` | Multi-factor comparisons |
| `hierarchical-layers` | Pyramids, priority levels |
| `tree-branching` | Categories, taxonomies |
| `hub-spoke` | Central concept with related items |
| `structural-breakdown` | Exploded views, cross-sections |
| `bento-grid` | Multiple topics, overview (default) |
| `iceberg` | Surface vs hidden aspects |
| `bridge` | Problem-solution |
| `funnel` | Conversion, filtering |
| `isometric-map` | Spatial relationships |
| `dashboard` | Metrics, KPIs |
| `periodic-table` | Categorized collections |
| `comic-strip` | Narratives, sequences |
| `story-mountain` | Plot structure, tension arcs |
| `jigsaw` | Interconnected parts |
| `venn-diagram` | Overlapping concepts |
| `winding-roadmap` | Journey, milestones |
| `circular-flow` | Cycles, recurring processes |
| `dense-modules` | High-density modules, data-rich guides |
Full definitions: `references/layouts/<layout>.md`
## Style Gallery
| Style | Description |
|-------|-------------|
| `craft-handmade` | Hand-drawn, paper craft (default) |
| `claymation` | 3D clay figures, stop-motion |
| `kawaii` | Japanese cute, pastels |
| `storybook-watercolor` | Soft painted, whimsical |
| `chalkboard` | Chalk on black board |
| `cyberpunk-neon` | Neon glow, futuristic |
| `bold-graphic` | Comic style, halftone |
| `aged-academia` | Vintage science, sepia |
| `corporate-memphis` | Flat vector, vibrant |
| `technical-schematic` | Blueprint, engineering |
| `origami` | Folded paper, geometric |
| `pixel-art` | Retro 8-bit |
| `ui-wireframe` | Grayscale interface mockup |
| `subway-map` | Transit diagram |
| `ikea-manual` | Minimal line art |
| `knolling` | Organized flat-lay |
| `lego-brick` | Toy brick construction |
| `pop-laboratory` | Blueprint grid, coordinate markers, lab precision |
| `morandi-journal` | Hand-drawn doodle, warm Morandi tones |
| `retro-pop-grid` | 1970s retro pop art, Swiss grid, thick outlines |
| `hand-drawn-edu` | Macaron pastels, hand-drawn wobble, stick figures |
Full definitions: `references/styles/<style>.md`
## Recommended Combinations
| Content Type | Layout + Style |
|--------------|----------------|
| Timeline/History | `linear-progression` + `craft-handmade` |
| Step-by-step | `linear-progression` + `ikea-manual` |
| A vs B | `binary-comparison` + `corporate-memphis` |
| Hierarchy | `hierarchical-layers` + `craft-handmade` |
| Overlap | `venn-diagram` + `craft-handmade` |
| Conversion | `funnel` + `corporate-memphis` |
| Cycles | `circular-flow` + `craft-handmade` |
| Technical | `structural-breakdown` + `technical-schematic` |
| Metrics | `dashboard` + `corporate-memphis` |
| Educational | `bento-grid` + `chalkboard` |
| Journey | `winding-roadmap` + `storybook-watercolor` |
| Categories | `periodic-table` + `bold-graphic` |
| Product Guide | `dense-modules` + `morandi-journal` |
| Technical Guide | `dense-modules` + `pop-laboratory` |
| Trendy Guide | `dense-modules` + `retro-pop-grid` |
| Educational Diagram | `hub-spoke` + `hand-drawn-edu` |
| Process Tutorial | `linear-progression` + `hand-drawn-edu` |
Default: `bento-grid` + `craft-handmade`
## Keyword Shortcuts
When user input contains these keywords, **auto-select** the associated layout and offer associated styles as top recommendations in Step 3. Skip content-based layout inference for matched keywords.
If a shortcut has **Prompt Notes**, append them to the generated prompt (Step 5) as additional style instructions.
| User Keyword | Layout | Recommended Styles | Default Aspect | Prompt Notes |
|--------------|--------|--------------------|----------------|--------------|
| 高密度信息大图 / high-density-info | `dense-modules` | `morandi-journal`, `pop-laboratory`, `retro-pop-grid` | portrait | — |
| 信息图 / infographic | `bento-grid` | `craft-handmade` | landscape | Minimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only. |
## Output Structure
```
infographic/{topic-slug}/
├── source-{slug}.{ext}
├── analysis.md
├── structured-content.md
├── prompts/infographic.md
└── infographic.png
```
Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
## Core Principles
- Preserve source data faithfully — no summarization or rephrasing (but **strip any credentials, API keys, tokens, or secrets** before including in outputs)
- Define learning objectives before structuring content
- Structure for visual communication (headlines, labels, visual elements)
## Workflow
### Step 1: Analyze Content
**Load references**: Read `references/analysis-framework.md` from this skill.
1. Save source content (file path or paste → `source.md` using `write_file`)
- **Backup rule**: If `source.md` exists, rename to `source-backup-YYYYMMDD-HHMMSS.md`
2. Analyze: topic, data type, complexity, tone, audience
3. Detect source language and user language
4. Extract design instructions from user input
5. Save analysis to `analysis.md`
- **Backup rule**: If `analysis.md` exists, rename to `analysis-backup-YYYYMMDD-HHMMSS.md`
See `references/analysis-framework.md` for detailed format.
### Step 2: Generate Structured Content → `structured-content.md`
Transform content into infographic structure:
1. Title and learning objectives
2. Sections with: key concept, content (verbatim), visual element, text labels
3. Data points (all statistics/quotes copied exactly)
4. Design instructions from user
**Rules**: Markdown only. No new information. Preserve data faithfully. Strip any credentials or secrets from output.
See `references/structured-content-template.md` for detailed format.
### Step 3: Recommend Combinations
**3.1 Check Keyword Shortcuts first**: If user input matches a keyword from the **Keyword Shortcuts** table, auto-select the associated layout and prioritize associated styles as top recommendations. Skip content-based layout inference.
**3.2 Otherwise**, recommend 3-5 layout×style combinations based on:
- Data structure → matching layout
- Content tone → matching style
- Audience expectations
- User design instructions
### Step 4: Confirm Options
Use the `clarify` tool to confirm options with the user. Since `clarify` handles one question at a time, ask the most important question first:
**Q1 — Combination**: Present 3+ layout×style combos with rationale. Ask user to pick one.
**Q2 — Aspect**: Ask for aspect ratio preference (landscape/portrait/square or custom W:H).
**Q3 — Language** (only if source ≠ user language): Ask which language the text content should use.
### Step 5: Generate Prompt → `prompts/infographic.md`
**Backup rule**: If `prompts/infographic.md` exists, rename to `prompts/infographic-backup-YYYYMMDD-HHMMSS.md`
**Load references**: Read the selected layout from `references/layouts/<layout>.md` and style from `references/styles/<style>.md`.
Combine:
1. Layout definition from `references/layouts/<layout>.md`
2. Style definition from `references/styles/<style>.md`
3. Base template from `references/base-prompt.md`
4. Structured content from Step 2
5. All text in confirmed language
**Aspect ratio resolution** for `{{ASPECT_RATIO}}`:
- Named presets → ratio string: landscape→`16:9`, portrait→`9:16`, square→`1:1`
- Custom W:H ratios → use as-is (e.g., `3:4`, `4:3`, `2.35:1`)
Save the assembled prompt to `prompts/infographic.md` using `write_file`.
### Step 6: Generate Image
Use the `image_generate` tool with the assembled prompt from Step 5.
- Map aspect ratio to image_generate's format: `16:9` → `landscape`, `9:16` → `portrait`, `1:1` → `square`
- For custom ratios, pick the closest named aspect
- On failure, auto-retry once
- Save the resulting image URL/path to the output directory
### Step 7: Output Summary
Report: topic, layout, style, aspect, language, output path, files created.
## References
- `references/analysis-framework.md` — Analysis methodology
- `references/structured-content-template.md` — Content format
- `references/base-prompt.md` — Prompt template
- `references/layouts/<layout>.md` — 21 layout definitions
- `references/styles/<style>.md` — 21 style definitions
## Pitfalls
1. **Data integrity is paramount** — never summarize, paraphrase, or alter source statistics. "73% increase" must stay "73% increase", not "significant increase".
2. **Strip secrets** — always scan source content for API keys, tokens, or credentials before including in any output file.
3. **One message per section** — each infographic section should convey one clear concept. Overloading sections reduces readability.
4. **Style consistency** — the style definition from the references file must be applied consistently across the entire infographic. Don't mix styles.
5. **image_generate aspect ratios** — the tool only supports `landscape`, `portrait`, and `square`. Custom ratios like `3:4` should map to the nearest option (portrait in that case).
skills/creative/baoyu-infographic/references/analysis-framework.md
+182
View File
@@ -0,0 +1,182 @@
# Infographic Content Analysis Framework
Deep analysis framework applying instructional design principles to infographic creation.
## Purpose
Before creating an infographic, thoroughly analyze the source material to:
- Understand the content at a deep level
- Identify clear learning objectives for the viewer
- Structure information for maximum clarity and retention
- Match content to optimal layout×style combinations
- Preserve all source data verbatim
## Instructional Design Mindset
Approach content analysis as a **world-class instructional designer**:
| Principle | Application |
|-----------|-------------|
| **Deep Understanding** | Read the entire document before analyzing any part |
| **Learner-Centered** | Focus on what the viewer needs to understand |
| **Visual Storytelling** | Use visuals to communicate, not just decorate |
| **Cognitive Load** | Simplify complex ideas without losing accuracy |
| **Data Integrity** | Never alter, summarize, or paraphrase source facts |
## Analysis Dimensions
### 1. Content Type Classification
| Type | Characteristics | Best Layout | Best Style |
|------|-----------------|-------------|------------|
| **Timeline/History** | Sequential events, dates, progression | linear-progression | craft-handmade, aged-academia |
| **Process/Tutorial** | Step-by-step instructions, how-to | linear-progression, winding-roadmap | ikea-manual, technical-schematic |
| **Comparison** | A vs B, pros/cons, before-after | binary-comparison, comparison-matrix | corporate-memphis, bold-graphic |
| **Hierarchy** | Levels, priorities, pyramids | hierarchical-layers, tree-branching | craft-handmade, corporate-memphis |
| **Relationships** | Connections, overlaps, influences | venn-diagram, hub-spoke, jigsaw | craft-handmade, subway-map |
| **Data/Metrics** | Statistics, KPIs, measurements | dashboard, periodic-table | corporate-memphis, technical-schematic |
| **Cycle/Loop** | Recurring processes, feedback loops | circular-flow | craft-handmade, technical-schematic |
| **System/Structure** | Components, architecture, anatomy | structural-breakdown, bento-grid | technical-schematic, ikea-manual |
| **Journey/Narrative** | Stories, user flows, milestones | winding-roadmap, story-mountain | storybook-watercolor, comic-strip |
| **Overview/Summary** | Multiple topics, feature highlights | bento-grid, periodic-table, dense-modules | chalkboard, bold-graphic |
| **Product/Buying Guide** | Multi-dimension comparisons, specs, pitfalls | dense-modules | morandi-journal, pop-laboratory, retro-pop-grid |
### 2. Learning Objective Identification
Every infographic should have 1-3 clear learning objectives.
**Good Learning Objectives**:
- Specific and measurable
- Focus on what the viewer will understand, not just see
- Written from the viewer's perspective
**Format**: "After viewing this infographic, the viewer will understand..."
| Content Aspect | Objective Type |
|----------------|----------------|
| Core concept | "...what [topic] is and why it matters" |
| Process | "...how to [accomplish something]" |
| Comparison | "...the key differences between [A] and [B]" |
| Relationships | "...how [elements] connect to each other" |
| Data | "...the significance of [key statistics]" |
### 3. Audience Analysis
| Factor | Questions | Impact |
|--------|-----------|--------|
| **Knowledge Level** | What do they already know? | Determines complexity depth |
| **Context** | Why are they viewing this? | Determines emphasis points |
| **Expectations** | What do they hope to learn? | Determines success criteria |
| **Visual Preferences** | Professional, playful, technical? | Influences style choice |
### 4. Complexity Assessment
| Level | Indicators | Layout Recommendation |
|-------|------------|----------------------|
| **Simple** (3-5 points) | Few main concepts, clear relationships | sparse layouts, single focus |
| **Moderate** (6-8 points) | Multiple concepts, some relationships | balanced layouts, clear sections |
| **Complex** (9+ points) | Many concepts, intricate relationships | dense layouts, multiple sections |
### 5. Visual Opportunity Mapping
Identify what can be shown rather than told:
| Content Element | Visual Treatment |
|-----------------|------------------|
| Numbers/Statistics | Large, highlighted numerals |
| Comparisons | Side-by-side, split screen |
| Processes | Arrows, numbered steps, flow |
| Hierarchies | Pyramids, layers, size differences |
| Relationships | Lines, connections, overlapping shapes |
| Categories | Color coding, grouping, sections |
| Timelines | Horizontal/vertical progression |
| Quotes | Callout boxes, quotation marks |
### 6. Data Verbatim Extraction
**Critical**: All factual information must be preserved exactly as written in the source.
| Data Type | Handling Rule |
|-----------|---------------|
| **Statistics** | Copy exactly: "73%" not "about 70%" |
| **Quotes** | Copy word-for-word with attribution |
| **Names** | Preserve exact spelling |
| **Dates** | Keep original format |
| **Technical Terms** | Do not simplify or substitute |
| **Lists** | Preserve order and wording |
**Never**:
- Round numbers
- Paraphrase quotes
- Substitute simpler words
- Add implied information
- Remove context that affects meaning
## Output Format
Save analysis results to `analysis.md`:
```yaml
---
title: "[Main topic title]"
topic: "[educational/technical/business/creative/etc.]"
data_type: "[timeline/hierarchy/comparison/process/etc.]"
complexity: "[simple/moderate/complex]"
point_count: [number of main points]
source_language: "[detected language]"
user_language: "[user's language]"
---
## Main Topic
[1-2 sentence summary of what this content is about]
## Learning Objectives
After viewing this infographic, the viewer should understand:
1. [Primary objective]
2. [Secondary objective]
3. [Tertiary objective if applicable]
## Target Audience
- **Knowledge Level**: [Beginner/Intermediate/Expert]
- **Context**: [Why they're viewing this]
- **Expectations**: [What they hope to learn]
## Content Type Analysis
- **Data Structure**: [How information relates to itself]
- **Key Relationships**: [What connects to what]
- **Visual Opportunities**: [What can be shown rather than told]
## Key Data Points (Verbatim)
[All statistics, quotes, and critical facts exactly as they appear in source]
- "[Exact data point 1]"
- "[Exact data point 2]"
- "[Exact quote with attribution]"
## Layout × Style Signals
- Content type: [type] → suggests [layout]
- Tone: [tone] → suggests [style]
- Audience: [audience] → suggests [style]
- Complexity: [level] → suggests [layout density]
## Design Instructions (from user input)
[Any style, color, layout, or visual preferences extracted from user's steering prompt]
## Recommended Combinations
1. **[Layout] + [Style]** (Recommended): [Brief rationale]
2. **[Layout] + [Style]**: [Brief rationale]
3. **[Layout] + [Style]**: [Brief rationale]
```
## Analysis Checklist
Before proceeding to structured content generation:
- [ ] Have I read the entire source document?
- [ ] Can I summarize the main topic in 1-2 sentences?
- [ ] Have I identified 1-3 clear learning objectives?
- [ ] Do I understand the target audience?
- [ ] Have I classified the content type correctly?
- [ ] Have I extracted all data points verbatim?
- [ ] Have I identified visual opportunities?
- [ ] Have I extracted design instructions from user input?
- [ ] Have I recommended 3 layout×style combinations?
skills/creative/baoyu-infographic/references/base-prompt.md
+43
View File
@@ -0,0 +1,43 @@
Create a professional infographic following these specifications:
## Image Specifications
- **Type**: Infographic
- **Layout**: {{LAYOUT}}
- **Style**: {{STYLE}}
- **Aspect Ratio**: {{ASPECT_RATIO}}
- **Language**: {{LANGUAGE}}
## Core Principles
- Follow the layout structure precisely for information architecture
- Apply style aesthetics consistently throughout
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives
- Keep information concise, highlight keywords and core concepts
- Use ample whitespace for visual clarity
- Maintain clear visual hierarchy
## Text Requirements
- All text must match the specified style treatment
- Main titles should be prominent and readable
- Key concepts should be visually emphasized
- Labels should be clear and appropriately sized
- Use the specified language for all text content
## Layout Guidelines
{{LAYOUT_GUIDELINES}}
## Style Guidelines
{{STYLE_GUIDELINES}}
---
Generate the infographic based on the content below:
{{CONTENT}}
Text labels (in {{LANGUAGE}}):
{{TEXT_LABELS}}
skills/creative/baoyu-infographic/references/layouts/bento-grid.md
+41
View File
@@ -0,0 +1,41 @@
# bento-grid
Modular grid layout with varied cell sizes, like a bento box.
## Structure
- Grid of rectangular cells
- Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
- No strict symmetry required
- Hero cell for main point
- Supporting cells around it
## Best For
- Multiple topic overview
- Feature highlights
- Dashboard summaries
- Portfolio displays
- Mixed content types
## Visual Elements
- Clear cell boundaries
- Varied cell backgrounds
- Icons or illustrations per cell
- Consistent padding/margins
- Visual hierarchy through size
## Text Placement
- Main title at top
- Cell titles within each cell
- Brief content per cell
- Minimal text, maximum visual
- CTA or summary in prominent cell
## Recommended Pairings
- `craft-handmade`: Friendly overviews (default)
- `corporate-memphis`: Business summaries
- `pixel-art`: Retro feature grids
skills/creative/baoyu-infographic/references/layouts/binary-comparison.md
+48
View File
@@ -0,0 +1,48 @@
# binary-comparison
Side-by-side comparison of two items, states, or concepts.
## Structure
- Vertical divider splitting image in half
- Left side: Item A / Before / Pro
- Right side: Item B / After / Con
- Mirrored layout for easy comparison
- Clear visual distinction between sides
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Before-After** | Transformation over time | Temporal change, improvement |
| **A vs B** | Feature comparison | Direct contrast, differences |
| **Pro-Con** | Advantages/disadvantages | Balanced evaluation |
## Best For
- Before/after transformations
- Product or option comparisons
- Pros and cons analysis
- Old vs new comparisons
- Two perspectives on a topic
## Visual Elements
- Strong vertical dividing line or gradient
- Contrasting colors per side
- Matching element positions for comparison
- VS symbol or divider decoration
- Transformation arrow for before-after
## Text Placement
- Main title centered at top
- Side labels (A/B, Before/After)
- Corresponding points aligned horizontally
- Summary at bottom if needed
## Recommended Pairings
- `corporate-memphis`: Business comparisons
- `bold-graphic`: High-contrast dramatic comparisons
- `craft-handmade`: Friendly explainers
skills/creative/baoyu-infographic/references/layouts/bridge.md
+41
View File
@@ -0,0 +1,41 @@
# bridge
Gap-crossing structure connecting problem to solution or current to future state.
## Structure
- Left side: current state/problem
- Right side: desired state/solution
- Bridge element spanning the gap
- Gap representing challenge/obstacle
- Bridge elements as steps/methods
## Best For
- Problem to solution journeys
- Current vs future state
- Gap analysis
- Transformation bridges
- Strategic initiatives
## Visual Elements
- Two distinct platforms/sides
- Visible gap or chasm
- Bridge structure with supports
- Icons representing each side
- Stepping stones or bridge planks
## Text Placement
- Title at top
- Left label (From/Problem/Current)
- Right label (To/Solution/Future)
- Bridge elements labeled
- Gap description below
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly journeys
- `corporate-memphis`: Business transformations
- `isometric-3d`: Technical transitions
skills/creative/baoyu-infographic/references/layouts/circular-flow.md
+41
View File
@@ -0,0 +1,41 @@
# circular-flow
Cyclic process showing continuous or recurring steps.
## Structure
- Circular arrangement
- Steps around the circle
- Arrows showing direction
- No clear start/end (continuous)
- Center can hold main concept
## Best For
- Recurring processes
- Feedback loops
- Lifecycle stages
- Continuous improvement
- Natural cycles
## Visual Elements
- Circle or ring shape
- Directional arrows
- Step nodes evenly spaced
- Icons per step
- Optional center element
## Text Placement
- Title at top
- Step labels at each node
- Brief descriptions near nodes
- Center concept if applicable
- Cycle name
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly cycles
- `corporate-memphis`: Business processes
- `subway-map`: Transit-style cycles
skills/creative/baoyu-infographic/references/layouts/comic-strip.md
+41
View File
@@ -0,0 +1,41 @@
# comic-strip
Sequential narrative panels telling a story or explaining a concept.
## Structure
- Multiple panels in sequence
- Left-to-right, top-to-bottom reading
- Characters or subjects in scenes
- Speech/thought bubbles
- Panel borders clearly defined
## Best For
- Storytelling explanations
- User journey narratives
- Scenario illustrations
- Step sequences with context
- Before/during/after stories
## Visual Elements
- Panel frames
- Speech and thought bubbles
- Sound effects (optional)
- Characters with expressions
- Scene backgrounds
## Text Placement
- Title at top
- Dialogue in speech bubbles
- Narration in caption boxes
- Sound effects integrated
- Panel numbers if needed
## Recommended Pairings
- `graphic-novel`: Dramatic narratives
- `kawaii`: Cute character stories
- `cartoon-hand-drawn`: Friendly explanations
skills/creative/baoyu-infographic/references/layouts/comparison-matrix.md
+41
View File
@@ -0,0 +1,41 @@
# comparison-matrix
Grid-based multi-factor comparison across multiple items.
## Structure
- Table/grid layout
- Rows: items being compared
- Columns: comparison criteria
- Cells: scores, checks, or values
- Header row and column clearly marked
## Best For
- Product feature comparisons
- Tool/software evaluations
- Multi-criteria decisions
- Specification sheets
- Rating comparisons
## Visual Elements
- Clear grid lines or cell boundaries
- Checkmarks, X marks, or scores in cells
- Color coding for quick scanning
- Icons for criteria categories
- Highlight for recommended option
## Text Placement
- Title at top
- Item names in first column
- Criteria in header row
- Brief values in cells
- Legend if using symbols
## Recommended Pairings
- `corporate-memphis`: Business tool comparisons
- `ui-wireframe`: Technical feature matrices
- `blueprint`: Specification comparisons
skills/creative/baoyu-infographic/references/layouts/dashboard.md
+41
View File
@@ -0,0 +1,41 @@
# dashboard
Multi-metric display with charts, numbers, and KPI indicators.
## Structure
- Multiple data widgets
- Charts, graphs, numbers
- Grid or modular layout
- Key metrics prominent
- Status indicators
## Best For
- KPI summaries
- Performance metrics
- Analytics overviews
- Status reports
- Data snapshots
## Visual Elements
- Chart types (bar, line, pie, gauge)
- Big numbers for KPIs
- Trend arrows (up/down)
- Color-coded status (green/red)
- Clean data visualization
## Text Placement
- Title at top
- Widget titles above each section
- Metric labels and values
- Units clearly shown
- Time period indicated
## Recommended Pairings
- `corporate-memphis`: Business dashboards
- `ui-wireframe`: Technical dashboards
- `cyberpunk-neon`: Futuristic displays
skills/creative/baoyu-infographic/references/layouts/dense-modules.md
+72
View File
@@ -0,0 +1,72 @@
# dense-modules
High-density modular layout with 6-7 typed information modules packed with concrete data.
## Structure
- 6-7 distinct modules per image, each serving a specific information function
- Every module contains concrete data: brand names, numbers, percentages, parameters
- Minimal whitespace—compact spacing prioritized over breathing room
- Smaller text acceptable to maximize information density
- Each module identified by coordinate label or section marker (e.g., MOD-1, SEC-A)
## Module Archetypes
| Module | Purpose | Content Requirements |
|--------|---------|---------------------|
| **Brand/Selection Array** | Grid of options with recommendations | 4-8 items with icons, names, brief descriptions; highlight "best choice" |
| **Specification Scale** | Quality/measurement gauge | 3-5 levels with precise numerical increments, quality indicators (emoji faces, checkmarks) |
| **Deep Dive/Detail** | Technical breakdown of key item | Zoom-in callouts, internal components, cross-section or exploded view |
| **Scenario Comparison** | Side-by-side use cases | 3-6 scenarios with specific recommendations and data per scenario |
| **Identification Tips** | How-to checklist | 3-5 inspection methods: look/test/check/ask format |
| **Warning/Pitfall Zone** | Critical mistakes to avoid | 3-5 pitfalls with consequences, 1-2 correct approaches; high visual contrast |
| **Quick Reference** | Compact summary | Dense table, one-line summaries, decision flowchart, or key takeaways |
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Coordinate-labeled** | Precision and systematicity | Each module has alphanumeric coordinate (A-01, B-05, C-12), ruler/axis markers |
| **Grid-cell** | Order and structure | Modules in strict rectangular cells divided by thick lines, Swiss grid feel |
| **Free-flowing** | Organic density | Magazine-style layout with dotted frames, varying module sizes, connected by arrows |
## Best For
- Product selection guides and buying guides
- Multi-dimensional comparison content
- Data-rich educational materials
- "Avoid pitfalls" / "complete guide" formats
- Content targeting platforms like Xiaohongshu with high-density visual requirements
## Visual Elements
- Module boundary markers (thick lines, dotted frames, or coordinate grids)
- Quality indicators per module (emoji faces, checkmarks, crosses, crowns)
- Data callout boxes with highlighted numbers
- Comparison arrows and progression indicators
- Warning/alert visual markers for pitfall modules
- Metadata in corners (page numbers, timestamps, small barcodes)
## Text Placement
- Main title at top, prominent and impactful
- Subtitle with module count ("X大维度全面解析...")
- Module headers inside colored badges or labeled frames
- Body text compact, multiple columns within modules
- Numbers highlighted with accent colors, slightly larger than body text
## Information Density Rules
- Every corner should contain useful information or metadata
- No decorative-only empty space
- Text size may be reduced to fit more content—information over font size
- Each module must have specific data points, not generic descriptions
- Balance between density and readability: dense but organized
## Recommended Pairings
- `pop-laboratory`: Technical precision with coordinate markers and blueprint grid
- `morandi-journal`: Hand-drawn warmth with doodle illustrations and organic frames
- `retro-pop-grid`: 1970s pop art with strict grid cells and bold contrast
- `corporate-memphis`: Clean business feel for product comparisons
- `technical-schematic`: Engineering precision for technical product guides
skills/creative/baoyu-infographic/references/layouts/funnel.md
+41
View File
@@ -0,0 +1,41 @@
# funnel
Narrowing stages showing conversion, filtering, or refinement process.
## Structure
- Wide top (input/start)
- Narrow bottom (output/result)
- Horizontal layers for stages
- Progressive narrowing
- 3-6 stages typically
## Best For
- Sales/marketing funnels
- Conversion processes
- Filtering/selection
- Recruitment pipelines
- Decision processes
## Visual Elements
- Funnel shape clearly defined
- Distinct colors per stage
- Width indicates volume/quantity
- Stage icons or symbols
- Numbers/percentages per stage
## Text Placement
- Title at top
- Stage names inside or beside
- Metrics/numbers per stage
- Input label at top
- Output label at bottom
## Recommended Pairings
- `corporate-memphis`: Marketing funnels
- `isometric-3d`: Technical pipelines
- `cartoon-hand-drawn`: Educational funnels
skills/creative/baoyu-infographic/references/layouts/hierarchical-layers.md
+48
View File
@@ -0,0 +1,48 @@
# hierarchical-layers
Nested layers showing levels of importance, influence, or proximity.
## Structure
- Multiple layers from core to periphery
- Core/top: most important/central
- Outer/bottom: decreasing importance
- 3-7 levels typically
- Clear boundaries between levels
## Variants
| Variant | Shape | Visual Emphasis |
|---------|-------|-----------------|
| **Pyramid** | Triangle, vertical | Top-down hierarchy, quantity |
| **Concentric** | Rings, radial | Center-out influence, proximity |
## Best For
- Maslow's hierarchy style concepts
- Priority and importance levels
- Spheres of influence
- Organizational structures
- Stakeholder analysis
## Visual Elements
- Distinct color per level
- Icons or illustrations per tier
- Size indicates importance/quantity
- Labels inside or beside layers
- Decorative apex/center element
## Text Placement
- Title at top or side
- Level names inside each tier
- Brief descriptions outside
- Quantities or percentages if relevant
- Legend for color meanings
## Recommended Pairings
- `craft-handmade`: Playful layered concepts
- `corporate-memphis`: Business hierarchies
- `technical-schematic`: Technical 3D pyramids
skills/creative/baoyu-infographic/references/layouts/hub-spoke.md
+41
View File
@@ -0,0 +1,41 @@
# hub-spoke
Central concept with radiating connections to related items.
## Structure
- Central hub (main concept)
- Spokes radiating outward
- Nodes at spoke ends (related concepts)
- Even or weighted distribution
- Optional secondary connections
## Best For
- Central theme with components
- Product features around core
- Team roles around project
- Ecosystem mapping
- Mind maps
## Visual Elements
- Prominent central hub
- Clear spoke lines
- Consistent node styling
- Icons representing each spoke item
- Optional grouping colors
## Text Placement
- Title at top
- Core concept in center hub
- Spoke item labels at nodes
- Brief descriptions near nodes
- Connection labels on spokes if needed
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly concept maps
- `corporate-memphis`: Business ecosystems
- `subway-map`: Network-style connections
skills/creative/baoyu-infographic/references/layouts/iceberg.md
+41
View File
@@ -0,0 +1,41 @@
# iceberg
Surface vs hidden depths, visible vs underlying factors.
## Structure
- Waterline dividing visible/hidden
- Tip above water (obvious/surface)
- Larger mass below (hidden/deep)
- Proportional to emphasize hidden depth
- Optional layers within underwater section
## Best For
- Surface vs root causes
- Visible vs invisible work
- Symptoms vs underlying issues
- Public vs private aspects
- Known vs unknown factors
## Visual Elements
- Clear water/surface line
- Above: smaller, brighter
- Below: larger, darker/deeper
- Wave or water texture
- Gradient showing depth
## Text Placement
- Title at top
- Surface items above waterline
- Hidden items below, larger
- Waterline label optional
- Depth indicators for layers
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly metaphor
- `storybook-watercolor`: Artistic depth
- `graphic-novel`: Dramatic revelation
skills/creative/baoyu-infographic/references/layouts/isometric-map.md
+41
View File
@@ -0,0 +1,41 @@
# isometric-map
3D-style spatial layout showing locations, relationships, or journey through space.
## Structure
- Isometric 3D perspective
- Locations as buildings/landmarks
- Paths connecting locations
- Spatial relationships visible
- Bird's eye view angle
## Best For
- Office/campus layouts
- City/ecosystem maps
- User journey maps
- System architecture
- Process landscapes
## Visual Elements
- Consistent isometric angle (30°)
- 3D buildings or objects
- Pathways and roads
- Labels floating above
- Mini scenes at locations
## Text Placement
- Title at top corner
- Location labels above objects
- Path labels along routes
- Legend for symbols
- Scale indicator if relevant
## Recommended Pairings
- `isometric-3d`: Clean technical maps
- `pixel-art`: Retro game-style maps
- `lego-brick`: Playful location maps
skills/creative/baoyu-infographic/references/layouts/jigsaw.md
+41
View File
@@ -0,0 +1,41 @@
# jigsaw
Interlocking puzzle pieces showing how parts fit together.
## Structure
- Puzzle pieces that interlock
- Each piece represents a component
- Connections show relationships
- Can be assembled or exploded view
- Missing piece highlights gaps
## Best For
- Component relationships
- Team/skill fit
- Strategy pieces
- Integration concepts
- Completeness assessments
## Visual Elements
- Classic puzzle piece shapes
- Distinct colors per piece
- Interlocking edges visible
- Icons or labels per piece
- Optional missing piece
## Text Placement
- Title at top
- Piece labels inside or beside
- Connection descriptions
- Missing piece explanation
- Assembly context
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly integration concepts
- `paper-cutout`: Tactile puzzle feel
- `corporate-memphis`: Business strategy pieces
skills/creative/baoyu-infographic/references/layouts/linear-progression.md
+48
View File
@@ -0,0 +1,48 @@
# linear-progression
Sequential progression showing steps, timeline, or chronological events.
## Structure
- Linear arrangement (horizontal or vertical)
- Nodes/markers at key points
- Connecting line or path between nodes
- Clear start and end points
- Directional flow indicators
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Timeline** | Chronological events, dates | Time markers, period labels |
| **Process** | Action steps, numbered sequence | Step numbers, action icons |
## Best For
- Step-by-step tutorials and how-tos
- Historical timelines and evolution
- Project milestones and roadmaps
- Workflow documentation
- Onboarding processes
## Visual Elements
- Numbered steps or date markers
- Arrows or connectors showing direction
- Icons representing each step/event
- Consistent node spacing
- Progress indicators optional
## Text Placement
- Title at top
- Step/event titles at each node
- Brief descriptions below nodes
- Dates or numbers clearly visible
## Recommended Pairings
- `craft-handmade`: Friendly tutorials and timelines
- `ikea-manual`: Clean assembly instructions
- `corporate-memphis`: Business process flows
- `aged-academia`: Historical discoveries
skills/creative/baoyu-infographic/references/layouts/periodic-table.md
+41
View File
@@ -0,0 +1,41 @@
# periodic-table
Grid of categorized elements with consistent cell formatting.
## Structure
- Rectangular grid
- Each cell is one element
- Color-coded categories
- Consistent cell format
- Optional grouping gaps
## Best For
- Categorized collections
- Tool/resource catalogs
- Skill matrices
- Element collections
- Reference guides
## Visual Elements
- Uniform cell sizes
- Category colors
- Symbol/abbreviation prominent
- Small icon per cell
- Category legend
## Text Placement
- Title at top
- Cell: symbol, name, brief info
- Category names in legend
- Optional row/column headers
- Footnotes for special cases
## Recommended Pairings
- `pop-art`: Vibrant element grids
- `pixel-art`: Retro collection displays
- `corporate-memphis`: Business tool catalogs
skills/creative/baoyu-infographic/references/layouts/story-mountain.md
+41
View File
@@ -0,0 +1,41 @@
# story-mountain
Plot structure visualization showing rising action, climax, and resolution.
## Structure
- Mountain/arc shape
- Rising slope (build-up)
- Peak (climax)
- Falling slope (resolution)
- Start and end at base level
## Best For
- Narrative structures
- Project lifecycles
- Tension/release patterns
- Emotional journeys
- Campaign arcs
## Visual Elements
- Mountain or arc curve
- Points along the path
- Climax visually emphasized
- Slope steepness meaningful
- Base camps or milestones
## Text Placement
- Title at top
- Stage labels along path
- Climax prominently labeled
- Brief descriptions at points
- Start/end clearly marked
## Recommended Pairings
- `storybook-watercolor`: Narrative journeys
- `cartoon-hand-drawn`: Educational plot diagrams
- `graphic-novel`: Dramatic story arcs
skills/creative/baoyu-infographic/references/layouts/structural-breakdown.md
+48
View File
@@ -0,0 +1,48 @@
# structural-breakdown
Internal structure visualization with labeled parts or layers.
## Structure
- Central subject (object, system, body)
- Parts or layers clearly shown
- Labels with callout lines
- Exploded or cutaway view
- Optional zoomed detail sections
## Variants
| Variant | View Type | Visual Emphasis |
|---------|-----------|-----------------|
| **Exploded** | Parts separated outward | Component relationships |
| **Cross-section** | Sliced/cutaway view | Internal layers, composition |
## Best For
- Product part breakdowns
- Anatomy explanations
- System components
- Device teardowns
- Material composition
## Visual Elements
- Main subject clearly rendered
- Callout lines with dots/arrows
- Label boxes at endpoints
- Numbered parts optionally
- Layer boundaries or separation
## Text Placement
- Title at top
- Part/layer labels at callouts
- Brief descriptions in boxes
- Legend for numbered systems
- Depth/thickness if relevant
## Recommended Pairings
- `technical-schematic`: Technical schematics
- `aged-academia`: Classic anatomical style
- `craft-handmade`: Friendly breakdowns
skills/creative/baoyu-infographic/references/layouts/tree-branching.md
+41
View File
@@ -0,0 +1,41 @@
# tree-branching
Hierarchical structure branching from root to leaves, showing categories and subcategories.
## Structure
- Root/trunk at top or left
- Branches splitting into sub-branches
- Leaves as terminal nodes
- Clear parent-child relationships
- Balanced or organic branching
## Best For
- Taxonomies and classifications
- Decision trees
- Organizational charts
- File/folder structures
- Family trees
## Visual Elements
- Connecting lines showing relationships
- Nodes at branch points
- Icons or labels at each node
- Color coding by branch
- Visual weight decreasing toward leaves
## Text Placement
- Title at top
- Root concept prominently labeled
- Branch and leaf labels
- Optional descriptions at key nodes
- Legend for categories
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly taxonomies
- `da-vinci-notebook`: Scientific classifications
- `origami`: Geometric tree structures
skills/creative/baoyu-infographic/references/layouts/venn-diagram.md
+41
View File
@@ -0,0 +1,41 @@
# venn-diagram
Overlapping circles showing relationships, commonalities, and differences.
## Structure
- 2-3 overlapping circles
- Each circle is a category/concept
- Overlaps show shared elements
- Center shows common to all
- Unique areas for exclusives
## Best For
- Concept relationships
- Skill overlaps
- Market segments
- Comparative analysis
- Finding common ground
## Visual Elements
- Translucent circle fills
- Clear overlap regions
- Distinct colors per circle
- Icons in regions
- Boundary labels
## Text Placement
- Title at top
- Circle labels outside or on edge
- Items in appropriate regions
- Overlap region labels
- Legend if needed
## Recommended Pairings
- `cartoon-hand-drawn`: Friendly concept overlaps
- `corporate-memphis`: Business segment analysis
- `pop-art`: High-contrast comparisons
skills/creative/baoyu-infographic/references/layouts/winding-roadmap.md
+41
View File
@@ -0,0 +1,41 @@
# winding-roadmap
Curved path showing journey with milestones and checkpoints.
## Structure
- S-curve or winding path
- Milestones along the path
- Start and destination points
- Side elements (obstacles, helpers)
- Progress indicators
## Best For
- Project roadmaps
- Career paths
- Customer journeys
- Learning paths
- Strategy timelines
## Visual Elements
- Curving road or river
- Milestone markers/flags
- Scene elements along path
- Vehicle/character on journey
- Destination landmark
## Text Placement
- Title at top
- Milestone labels at each point
- Path section names
- Destination description
- Optional timeline indicators
## Recommended Pairings
- `storybook-watercolor`: Whimsical journeys
- `cartoon-hand-drawn`: Friendly roadmaps
- `isometric-3d`: Technical project paths
skills/creative/baoyu-infographic/references/structured-content-template.md
+244
View File
@@ -0,0 +1,244 @@
# Structured Content Template
Template for generating structured infographic content that informs the visual designer.
## Purpose
This document bridges content analysis and visual design:
- Transforms source material into designer-ready format
- Organizes learning objectives into visual sections
- Preserves all source data verbatim
- Separates content from design instructions
## Instructional Design Process
### Phase 1: High-Level Outline
1. **Title**: Capture the essence in a compelling headline
2. **Overview**: Brief description (1-2 sentences)
3. **Learning Objectives**: List what the viewer will understand
### Phase 2: Section Development
For each learning objective:
1. **Key Concept**: One-sentence summary of the section
2. **Content**: Points extracted verbatim from source
3. **Visual Element**: What should be shown visually
4. **Text Labels**: Exact text for headlines, subheads, labels
### Phase 3: Data Integrity Check
Verify all source data is:
- Copied exactly (no paraphrasing)
- Attributed correctly (for quotes)
- Formatted consistently
## Critical Rules
| Rule | Requirement | Example |
|------|-------------|---------|
| **Output format** | Markdown only | Use proper headers, lists, code blocks |
| **Tone** | Expert trainer | Knowledgeable, clear, encouraging |
| **No new information** | Only source content | Don't add examples not in source |
| **Verbatim data** | Exact copies | "73% increase" not "significant increase" |
## Structured Content Format
```markdown
# [Infographic Title]
## Overview
[Brief description of what this infographic conveys - 1-2 sentences]
## Learning Objectives
The viewer will understand:
1. [Primary objective]
2. [Secondary objective]
3. [Tertiary objective if applicable]
---
## Section 1: [Section Title]
**Key Concept**: [One-sentence summary of this section]
**Content**:
- [Point 1 - verbatim from source]
- [Point 2 - verbatim from source]
- [Point 3 - verbatim from source]
**Visual Element**: [Description of what to show visually]
- Type: [icon/chart/illustration/diagram/photo]
- Subject: [what it depicts]
- Treatment: [how it should be presented]
**Text Labels**:
- Headline: "[Exact text for headline]"
- Subhead: "[Exact text for subhead]"
- Labels: "[Label 1]", "[Label 2]", "[Label 3]"
---
## Section 2: [Section Title]
**Key Concept**: [One-sentence summary]
**Content**:
- [Point 1]
- [Point 2]
**Visual Element**: [Description]
**Text Labels**:
- Headline: "[text]"
- Labels: "[Label 1]", "[Label 2]"
---
[Continue for each section...]
---
## Data Points (Verbatim)
All statistics, numbers, and quotes exactly as they appear in source:
### Statistics
- "[Exact statistic 1]"
- "[Exact statistic 2]"
- "[Exact statistic 3]"
### Quotes
- "[Exact quote]" — [Attribution]
### Key Terms
- **[Term 1]**: [Definition from source]
- **[Term 2]**: [Definition from source]
---
## Design Instructions
Extracted from user's steering prompt:
### Style Preferences
- [Any color preferences]
- [Any mood/aesthetic preferences]
- [Any artistic style preferences]
### Layout Preferences
- [Any structure preferences]
- [Any organization preferences]
### Other Requirements
- [Any other visual requirements from user]
- [Target platform if specified]
- [Brand guidelines if any]
```
## Section Types by Content
### For Process/Steps
```markdown
## Section N: Step N - [Step Title]
**Key Concept**: [What this step accomplishes]
**Content**:
- Action: [What to do]
- Details: [How to do it]
- Note: [Important consideration]
**Visual Element**:
- Type: numbered step icon
- Subject: [visual representing the action]
- Arrow: leads to next step
**Text Labels**:
- Headline: "Step N: [Title]"
- Action: "[Imperative verb + object]"
```
### For Comparison
```markdown
## Section N: [Item A] vs [Item B]
**Key Concept**: [What distinguishes them]
**Content**:
| Aspect | [Item A] | [Item B] |
|--------|----------|----------|
| [Factor 1] | [Value] | [Value] |
| [Factor 2] | [Value] | [Value] |
**Visual Element**:
- Type: split comparison
- Left: [Item A representation]
- Right: [Item B representation]
**Text Labels**:
- Headline: "[Item A] vs [Item B]"
- Left label: "[Item A name]"
- Right label: "[Item B name]"
```
### For Hierarchy
```markdown
## Section N: [Level Name]
**Key Concept**: [What this level represents]
**Content**:
- Position: [Top/Middle/Bottom]
- Priority: [Importance level]
- Contains: [Elements at this level]
**Visual Element**:
- Type: layer/tier
- Size: [relative to other levels]
- Position: [where in hierarchy]
**Text Labels**:
- Level title: "[Name]"
- Description: "[Brief description]"
```
### For Data/Statistics
```markdown
## Section N: [Metric Name]
**Key Concept**: [What this data shows]
**Content**:
- Value: [Exact number/percentage]
- Context: [What it means]
- Comparison: [Benchmark if any]
**Visual Element**:
- Type: [chart/number highlight/gauge]
- Emphasis: [how to draw attention]
**Text Labels**:
- Main number: "[Exact value]"
- Label: "[Metric name]"
- Context: "[Brief context]"
```
## Quality Checklist
Before finalizing structured content:
- [ ] Title captures the main message
- [ ] Learning objectives are clear and measurable
- [ ] Each section maps to an objective
- [ ] All content is verbatim from source
- [ ] Visual elements are clearly described
- [ ] Text labels are specified exactly
- [ ] Data points are collected and verified
- [ ] Design instructions are separated
- [ ] No new information has been added
skills/creative/baoyu-infographic/references/styles/aged-academia.md
+36
View File
@@ -0,0 +1,36 @@
# aged-academia
Historical scientific illustration with aged paper aesthetic.
## Color Palette
- Primary: Sepia brown (#704214), aged ink, muted earth tones
- Background: Parchment (#F4E4BC), yellowed paper texture
- Accents: Faded red annotations, iron gall ink spots
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Notebook** | Personal sketches, inventions | Cursive notes, margin annotations |
| **Specimen** | Scientific classification | Numbered diagrams, Latin labels |
## Visual Elements
- Aged paper texture overlay
- Detailed cross-hatching and line work
- Scientific illustration precision
- Study notes and annotations
- Specimen plate or sketch aesthetic
- Numbered diagram elements
## Typography
- Handwritten cursive or serif fonts
- Scientific annotations
- Small caps for labels
- Italics for scientific names
## Best For
Scientific education, biology topics, historical explanations, inventions, nature documentation
skills/creative/baoyu-infographic/references/styles/bold-graphic.md
+36
View File
@@ -0,0 +1,36 @@
# bold-graphic
High-contrast comic style with bold outlines and dramatic visuals.
## Color Palette
- Primary: Bold primaries - red, yellow, blue, black
- Background: White, halftone patterns, dramatic shadows
- Accents: Spot colors, neon highlights
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Graphic-novel** | Dramatic narratives | Action lines, hatching, panels |
| **Pop-art** | High-energy impact | Halftone dots, Warhol repetition |
## Visual Elements
- Bold black outlines
- High contrast compositions
- Halftone dot patterns
- Comic panel borders optional
- Action lines and motion
- Speech bubbles and sound effects
## Typography
- Comic book lettering
- Impact fonts for emphasis
- POW/BANG effects for pop-art
- Caption boxes for narrative
## Best For
Attention-grabbing content, dramatic narratives, pop culture, marketing, high-energy presentations
skills/creative/baoyu-infographic/references/styles/chalkboard.md
+61
View File
@@ -0,0 +1,61 @@
# chalkboard
Black chalkboard background with colorful chalk drawing style
## Design Aesthetic
Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
## Background
- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
## Typography
Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
## Color Palette
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Chalkboard Black | #1A1A1A | Primary background |
| Alt Background | Green-Black | #1C2B1C | Traditional green board |
| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
| Accent 4 | Chalk Green | #90EE90 | Success, nature |
| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
## Visual Elements
- Hand-drawn chalk illustrations with sketchy, imperfect lines
- Chalk dust effects around text and key elements
- Doodles: stars, arrows, underlines, circles, checkmarks
- Mathematical formulas and simple diagrams
- Eraser smudges and chalk residue textures
- Wooden frame border optional
- Stick figures and simple icons
- Connection lines with hand-drawn feel
## Style Rules
### Do
- Maintain authentic chalk texture on all elements
- Use imperfect, hand-drawn quality throughout
- Add subtle chalk dust and smudge effects
- Create visual hierarchy with color variety
- Include playful doodles and annotations
### Don't
- Use perfect geometric shapes
- Create clean digital-looking lines
- Add photorealistic elements
- Use gradients or glossy effects
## Best For
Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing
skills/creative/baoyu-infographic/references/styles/claymation.md
+29
View File
@@ -0,0 +1,29 @@
# claymation
3D clay figure aesthetic with stop-motion charm
## Color Palette
- Primary: Saturated clay colors - bright but slightly muted
- Background: Neutral studio backdrop, soft gradients
- Accents: Complementary clay colors, shiny highlights
## Visual Elements
- Clay/plasticine texture on all objects
- Fingerprint marks and imperfections
- Rounded, sculpted forms
- Soft shadows
- Stop-motion staging
- Miniature set aesthetic
## Typography
- Extruded clay letters
- Dimensional, rounded text
- Playful and chunky
- Embedded in clay scenes
## Best For
Playful explanations, children's content, stop-motion narratives, friendly processes
skills/creative/baoyu-infographic/references/styles/corporate-memphis.md
+29
View File
@@ -0,0 +1,29 @@
# corporate-memphis
Flat vector people with vibrant geometric fills
## Color Palette
- Primary: Bright, saturated - purple, orange, teal, yellow
- Background: White or light pastels
- Accents: Gradient fills, geometric patterns
## Visual Elements
- Flat vector illustration
- Disproportionate human figures
- Abstract body shapes
- Floating geometric elements
- No outlines, solid fills
- Plant and object accents
## Typography
- Clean sans-serif
- Bold headings
- Professional but friendly
- Minimal decoration
## Best For
Business presentations, tech products, marketing materials, corporate training
skills/creative/baoyu-infographic/references/styles/craft-handmade.md
+44
View File
@@ -0,0 +1,44 @@
# craft-handmade (DEFAULT)
Hand-drawn and paper craft aesthetic with warm, organic feel.
## Color Palette
- Primary: Warm pastels, soft saturated colors, craft paper tones
- Background: Light cream (#FFF8F0), textured paper (#F5F0E6)
- Accents: Bold highlights, construction paper colors
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Hand-drawn** | Cartoon illustration | Simple icons, slightly imperfect lines |
| **Paper-cutout** | Layered paper craft | Drop shadows, torn edges, texture |
## Visual Elements
- Hand-drawn or cut-paper quality
- Organic, slightly imperfect shapes
- Layered depth with shadows (paper variant)
- Simple cartoon elements and icons
- Character illustrations (people, personalities in cartoon form)
- Ample whitespace, clean composition
- Keywords and core concepts highlighted
- **Strictly hand-drawn—no realistic or photographic elements**
## Style Enforcement
- All imagery must maintain cartoon/illustrated aesthetic
- Replace real photos or realistic figures with hand-drawn equivalents
- Maintain consistent line weight and illustration style throughout
## Typography
- Hand-drawn or casual font style
- Clear, readable labels
- Keywords emphasized with larger/bolder text
- Cut-out letter style for paper variant
## Best For
Educational content, general explanations, friendly infographics, children's content, playful hierarchies
skills/creative/baoyu-infographic/references/styles/cyberpunk-neon.md
+29
View File
@@ -0,0 +1,29 @@
# cyberpunk-neon
Neon glow on dark backgrounds, futuristic aesthetic
## Color Palette
- Primary: Neon pink (#FF00FF), cyan (#00FFFF), electric blue
- Background: Deep black (#0A0A0A), dark purple gradients
- Accents: Neon glow effects, chrome reflections
## Visual Elements
- Glowing neon outlines
- Dark atmospheric backgrounds
- Digital glitch effects
- Circuit patterns
- Holographic elements
- Rain and reflections
## Typography
- Glowing neon text
- Digital/tech fonts
- Flickering effects
- Outlined glow letters
## Best For
Tech futures, gaming content, digital culture, futuristic concepts, night aesthetics
skills/creative/baoyu-infographic/references/styles/hand-drawn-edu.md
+63
View File
@@ -0,0 +1,63 @@
# hand-drawn-edu
Hand-drawn educational infographic with macaron pastel color blocks on warm cream paper texture.
## Color Palette
- Background: Warm cream (#F5F0E8) with subtle paper grain texture
- Primary text: Deep charcoal (#2D2D2D) for headlines, outlines
- Macaron Blue: #A8D8EA for cool-toned information zones
- Macaron Mint: #B5E5CF for growth/positive zones
- Macaron Lavender: #D5C6E0 for abstract/concept zones
- Macaron Peach: #FFD5C2 for warm-toned zones
- Accent: Coral Red (#E8655A) for key data, warnings, emphasis
- Muted annotations: Warm gray (#6B6B6B) for secondary labels
## Visual Elements
- Macaron pastel rounded cards as distinct information zones
- Hand-drawn wavy connection lines and arrows with small text labels
- Simple stick-figure characters and cartoon icons to humanize concepts
- Doodle decorations: small stars, underlines, spirals, sparkles
- Color fills don't completely fill outlines — preserve casual hand-drawn feel
- Dashed borders for secondary or contained zones
- Small icon doodles (clipboard, lock, checkmark, lightbulb) to reinforce concepts
- Bold centered quote or takeaway at the bottom
- Slight hand-drawn wobble on all lines and shapes
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Sketch-notes** | Concept mapping | More stick figures, thought bubbles, connecting arrows |
| **Pastel cards** | Structured info | Cleaner macaron blocks, less doodle, more white space |
## Typography
- Main title: Bold hand-drawn lettering with organic strokes, large confident letterforms with slight wobble
- Section headers: Hand-lettered text on or inside macaron color blocks
- Body text: Clear handwritten print style, legible but not mechanical
- Annotations: Warm gray (#6B6B6B), smaller, neat handwritten labels
- Keywords: Bold emphasis within body text
## Style Enforcement
- All lines must have slight hand-drawn wobble — no perfect geometry
- Each information zone uses a distinct macaron color block
- Maintain consistent wobble quality across all shapes and lines
- Include at least one simple cartoon character or stick figure
- Generous white space between zones — each zone should breathe
- Maximum 4 macaron colors per infographic
## Avoid
- Perfect geometric shapes or straight lines
- Photorealistic elements or stock illustration style
- Pure white backgrounds
- Flat vector icons or digital-precision graphics
- Overcrowded layouts — let zones breathe
- Corporate or clinical aesthetic
## Best For
Educational diagrams, process explainers, concept maps, knowledge summaries, tutorial walkthroughs, onboarding visuals
skills/creative/baoyu-infographic/references/styles/ikea-manual.md
+29
View File
@@ -0,0 +1,29 @@
# ikea-manual
Minimal line art assembly instruction style
## Color Palette
- Primary: Black lines, minimal fills
- Background: White or cream paper
- Accents: Red for warnings, blue for highlights
## Visual Elements
- Simple line drawings
- Numbered step sequences
- Arrow indicators
- Exploded assembly views
- Wordless communication
- Stick figures for scale
## Typography
- Minimal text
- Step numbers prominent
- Universal symbols
- Simple sans-serif when needed
## Best For
Step-by-step instructions, assembly guides, how-to content, universal communication
skills/creative/baoyu-infographic/references/styles/kawaii.md
+29
View File
@@ -0,0 +1,29 @@
# kawaii
Japanese cute style with big eyes and pastel colors
## Color Palette
- Primary: Soft pastels - pink (#FFB6C1), mint (#98D8C8), lavender (#E6E6FA)
- Background: Light pink or cream, sparkle overlays
- Accents: Bright pops, star and heart shapes
## Visual Elements
- Big sparkly eyes on characters
- Rounded, soft shapes
- Blushing cheeks
- Sparkles and stars scattered
- Cute animal characters
- Chibi proportions
## Typography
- Rounded, bubbly fonts
- Cute decorations on letters
- Hearts and stars in text
- Soft, friendly appearance
## Best For
Cute tutorials, children's education, lifestyle content, character-driven explanations
skills/creative/baoyu-infographic/references/styles/knolling.md
+29
View File
@@ -0,0 +1,29 @@
# knolling
Organized flat-lay with top-down arrangement
## Color Palette
- Primary: Object's natural colors
- Background: Solid color - black, white, or colored surface
- Accents: Shadows, subtle highlights
## Visual Elements
- Top-down camera angle
- Objects arranged at 90° angles
- Equal spacing between items
- Clean organization
- Symmetry and order
- No overlapping items
## Typography
- Clean labels
- Positioned outside objects
- Connecting lines to items
- Minimal, catalog-style
## Best For
Product collections, tool inventories, gear layouts, organized overviews
skills/creative/baoyu-infographic/references/styles/lego-brick.md
+29
View File
@@ -0,0 +1,29 @@
# lego-brick
Toy brick construction with playful aesthetic
## Color Palette
- Primary: Classic LEGO colors - red, blue, yellow, green, white
- Background: Light gray baseplate or white
- Accents: Bright primary pops, shiny studs
## Visual Elements
- Visible brick studs
- Modular construction
- Minifigure characters
- Building instruction style
- Stackable elements
- Plastic sheen
## Typography
- Blocky, bold fonts
- LEGO instruction style
- Step numbers
- Playful appearance
## Best For
Building concepts, modular systems, playful education, children's content
skills/creative/baoyu-infographic/references/styles/morandi-journal.md
+60
View File
@@ -0,0 +1,60 @@
# morandi-journal
Hand-drawn doodle illustration with warm Morandi color tones and cozy bullet journal aesthetic.
## Color Palette
- Background: Warm cream/beige with subtle paper texture (#F5F0E6)
- Primary: Muted teal/sage green (#7BA3A8) for headers and frames
- Secondary: Warm terracotta/orange (#D4956A) for highlights and numbers
- Line art: Dark charcoal brown (#4A4540)
- Soft highlights: Pale yellow (#F5E6C8)
## Visual Elements
- Hand-drawn doodle illustrations with organic, slightly imperfect ink lines
- Washi tape strip decorations (diagonal stripes pattern, beige and brown)
- Rounded card containers for brand/option items
- Hand-drawn rulers, scales, and progress bars with emoji quality indicators
- Smiley/frowny faces as quality markers (😊✓ 😐 ☹️✗)
- Dotted line frames around sections
- Connecting arrows and dotted lines between modules
- Corner decorations: tiny houses, stars, sparkles, clouds
- Wavy line dividers between sections
- Callout bubbles for tips
- Magnifying glass icons for identification tips
- Thumbs up/down icons (hand-drawn style)
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Cozy journal** | Maximum warmth | More washi tape, stickers, decorative doodles |
| **Clean sketch** | Readability | Cleaner lines, less decoration, more structured |
## Typography
- Main title: Bold hand-lettered calligraphy style with decorative flourishes
- Module headers: Clean handwritten text in white on dark teal rounded badge (#6B9080)
- Body text: Neat handwritten print style, easy to read
- Numbers: Highlighted in terracotta (#D4956A), slightly larger than body
## Style Enforcement
- All imagery must maintain hand-drawn/doodle aesthetic—no digital precision
- Organic, slightly imperfect shapes throughout
- Sketch-like quality with visible line weight variations
- Warm and cozy journal feel, not clinical or corporate
## Avoid
- Flat vector icons or emoji
- Clean geometric shapes
- Stock illustration style
- Strict grid layout
- Pure white background
- Digital/corporate look
## Best For
Product selection guides, lifestyle content, educational overviews, consumer-facing comparison content, Xiaohongshu-style posts
skills/creative/baoyu-infographic/references/styles/origami.md
+29
View File
@@ -0,0 +1,29 @@
# origami
Folded paper forms with geometric precision
## Color Palette
- Primary: Solid origami paper colors - red, blue, green, gold
- Background: White or soft gray, subtle shadows
- Accents: Paper fold highlights, crisp shadows
## Visual Elements
- Geometric folded shapes
- Visible fold lines
- Cast shadows showing depth
- Paper texture
- Angular, faceted forms
- Low-poly aesthetic
## Typography
- Clean geometric fonts
- Angular letterforms
- Folded paper text effect
- Minimal, precise labels
## Best For
Geometric concepts, transformation topics, Japanese themes, abstract representations
skills/creative/baoyu-infographic/references/styles/pixel-art.md
+29
View File
@@ -0,0 +1,29 @@
# pixel-art
Retro 8-bit gaming aesthetic
## Color Palette
- Primary: Limited palette - NES/SNES colors
- Background: Black or dark blue, scanlines optional
- Accents: Bright pixel highlights, CRT glow
## Visual Elements
- Visible pixel grid
- Limited color count per sprite
- 8-bit or 16-bit style
- Retro game UI elements
- Pixel-perfect edges
- Dithering for gradients
## Typography
- Pixel fonts
- Blocky letterforms
- Game UI style text
- Score/stat display style
## Best For
Gaming topics, nostalgia content, developer audiences, retro tech themes
skills/creative/baoyu-infographic/references/styles/pop-laboratory.md
+48
View File
@@ -0,0 +1,48 @@
# pop-laboratory
Lab manual precision meets pop art color impact—coordinate systems, technical diagrams, and fluorescent accents on blueprint grid.
## Color Palette
- Background: Professional grayish-white with faint blueprint grid texture (#F2F2F2)
- Primary: Muted teal/sage green (#B8D8BE) for major functional blocks and data zones
- High-alert accent: Vibrant fluorescent pink (#E91E63) strictly for warnings, critical data, or "winner" highlights
- Marker highlights: Vivid lemon yellow (#FFF200) as translucent highlighter effect for keywords
- Line art: Ultra-fine charcoal brown (#2D2926) for technical grids, coordinates, and hairlines
## Visual Elements
- Coordinate-style labels on every module (e.g., R-20, G-02, SEC-08)
- Technical diagrams: exploded views, cross-sections with anchor points, architectural skeletal lines
- Vertical/horizontal rulers with precise markers (0.5mm, 1.8mm, 45°)
- "Marker-over-print" effect: color blocks slightly offset from text, postmodern print feel
- Cross-hair targets, mathematical symbols (Σ, Δ, ∞), directional arrows (X/Y axis)
- Microscopic detail annotations alongside macroscopic bold headers
- Corner metadata: tiny barcodes, timestamps, technical parameters
- High contrast between massive bold headers and tiny 8pt-style annotations
## Typography
- Headers: Bold brutalist characters, high visual impact
- Body: Professional sans-serif or crisp technical print
- Numbers: Large, highlighted with yellow or blue to stand out
- Annotations: Ultra-crisp, small technical labels
## Style Enforcement
- Strictly systematic color usage: only teal, pink, yellow, charcoal—no rainbow palette
- Sufficient fine grid lines and coordinate annotations throughout
- Maintain tension between large impactful headers and small precise parameters
- Lab manual aesthetic: mix of microscopic details and macroscopic data
## Avoid
- Cute or cartoonish doodles
- Soft pastels or generic textures
- Empty white space
- Flat vector stock icons
- Organic or hand-drawn imperfections
## Best For
Technical product guides, specification comparisons, precision-focused data visualization, engineering-adjacent content
skills/creative/baoyu-infographic/references/styles/retro-pop-grid.md
+47
View File
@@ -0,0 +1,47 @@
# retro-pop-grid
1970s retro pop art with strict Swiss international grid, thick black outlines, and flat color blocks.
## Color Palette
- Background: Warm vintage cream/beige (#F5F0E6)
- Flat accents: Salmon pink, sky blue, mustard yellow, mint green—all muted retro tones
- Contrast blocks: Solid pure black (#000000) and solid pure white (#FFFFFF) used strategically for extreme contrast
- Line art and outlines: Solid thick black
## Visual Elements
- Uniform thick black outlines on all illustrations, text boxes, and grid dividers
- Pure 2D flat vector aesthetic with subtle screen print texture
- Strict Swiss international grid: poster divided into square and rectangular cells by thick black lines
- Black-background cells with white text for warnings or key categories (inverted contrast)
- Geometric fill patterns in empty cells: checkerboards, diagonal lines, dots
- Flat abstract symbols, warning signs, keyholes, stars, arrows
- Vintage comic-style smiley/frowny faces for quality indicators
- Colored cells used for breathing room—some with minimal/no content
## Typography
- Headers: Bold brutalist or retro thick display fonts, high legibility
- Body: Clean sans-serif, structured typographic alignment
- Decorative English text acceptable for stylistic labels ("WARNING", "INFO", "BEST")
- All content text in specified language
## Style Enforcement
- Absolutely no gradients, shading, drop shadows, or 3D effects
- Everything anchored in grid cells—no floating or unorganized elements
- Maintain 1970s retro pop art and underground comic illustration feel
- Visual density balanced with rhythmic grid—some cells intentionally sparse for contrast
## Avoid
- 3D rendering, realistic details, gradients, soft shadows
- Soft, thin, or sketch-like pencil lines
- Free-flowing, unorganized, or floating layouts (everything must be grid-anchored)
- Pure white background canvas
- Organic or hand-drawn imperfections
## Best For
Trendy product guides, design-conscious content, visually striking comparisons, content targeting design-savvy audiences, bold social media posts
skills/creative/baoyu-infographic/references/styles/storybook-watercolor.md
+29
View File
@@ -0,0 +1,29 @@
# storybook-watercolor
Soft hand-painted illustration with whimsical charm
## Color Palette
- Primary: Soft watercolor washes - muted blues, greens, warm earth
- Background: Watercolor paper texture, white or cream
- Accents: Deeper pigment pools, splatter effects
## Visual Elements
- Visible brushstrokes
- Soft color bleeds and gradients
- White space as design element
- Delicate line work over washes
- Natural, organic shapes
- Dreamy, atmospheric quality
## Typography
- Elegant hand-lettering
- Watercolor-style text
- Flowing, organic letterforms
- Integrated with illustrations
## Best For
Storytelling, emotional journeys, nature topics, children's education, artistic presentations
skills/creative/baoyu-infographic/references/styles/subway-map.md
+29
View File
@@ -0,0 +1,29 @@
# subway-map
Transit diagram style with colored lines and stations
## Color Palette
- Primary: Transit line colors - red, blue, green, yellow, orange
- Background: White or light gray
- Accents: Station dots, interchange markers
## Visual Elements
- Colored route lines
- 45° and 90° angles only
- Station circle markers
- Interchange symbols
- Simplified geography
- Line thickness hierarchy
## Typography
- Clean sans-serif
- Station name labels
- Line number/name badges
- Horizontal or angled text
## Best For
Journey maps, process flows, network diagrams, route explanations
skills/creative/baoyu-infographic/references/styles/technical-schematic.md
+36
View File
@@ -0,0 +1,36 @@
# technical-schematic
Technical diagrams with engineering precision and clean geometry.
## Color Palette
- Primary: Blues (#2563EB), teals, grays, white lines
- Background: Deep blue (#1E3A5F), white, or light gray with grid
- Accents: Amber highlights (#F59E0B), cyan callouts
## Variants
| Variant | Focus | Visual Emphasis |
|---------|-------|-----------------|
| **Blueprint** | Engineering schematics | White on blue, measurements, grid |
| **Isometric** | 3D spatial representation | 30° angle blocks, clean fills |
## Visual Elements
- Geometric precision throughout
- Grid pattern or isometric angle
- Dimension lines and measurements
- Technical symbols and annotations
- Clean vector shapes
- Consistent stroke weights
## Typography
- Technical stencil or clean sans-serif
- All-caps labels
- Measurement annotations
- Floating labels for isometric
## Best For
Technical architecture, system diagrams, engineering specs, product breakdowns, data visualization
skills/creative/baoyu-infographic/references/styles/ui-wireframe.md
+29
View File
@@ -0,0 +1,29 @@
# ui-wireframe
Grayscale interface mockup style
## Color Palette
- Primary: Grays - light (#E5E5E5), medium (#9CA3AF), dark (#374151)
- Background: White (#FFFFFF), light gray
- Accents: Blue for interactive (#3B82F6), red for emphasis
## Visual Elements
- Wireframe boxes and placeholders
- X marks for image placeholders
- Simple line icons
- Grid-based layout
- Annotation callouts
- Redline specifications
## Typography
- System fonts
- Placeholder "Lorem ipsum"
- UI label style
- Sans-serif throughout
## Best For
Product designs, UI explanations, app concepts, user flow diagrams
skills/creative/claude-design/SKILL.md
+650
View File
@@ -0,0 +1,650 @@
---
name: claude-design
description: Design one-off HTML artifacts (landing, deck, prototype).
version: 1.1.0
author: BadTechBandit
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [design, html, prototype, ux, ui, creative, artifact, deck, motion, design-system]
related_skills: [design-md, popular-web-designs, excalidraw, architecture-diagram]
---
# Claude Design for CLI/API Agents
Use this skill when the user asks for design work that would normally fit Claude Design, but the agent is running in a CLI/API environment instead of the hosted Claude Design web UI.
The goal is to preserve Claude Design's useful design behavior and taste while removing hosted-tool plumbing that does not exist in normal agent environments.
**Before starting, check for other web-design skills like `popular-web-designs` (ready-to-paste design systems for Stripe, Linear, Vercel, Notion, etc.) and `design-md` (Google's DESIGN.md token spec format).** If the user wants a known brand's look, load `popular-web-designs` alongside this one and let it supply the visual vocabulary. If the deliverable is a token spec file rather than a rendered artifact, use `design-md` instead. Full decision table below.
## When To Use This Skill vs `popular-web-designs` vs `design-md`
Hermes has three design-related skills under `skills/creative/`. They do different jobs — load the right one (or combine them):
| Skill | What it gives you | Use when the user wants... |
|---|---|---|
| **claude-design** (this one) | Design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch designed artifact (landing page, prototype, deck, component lab, motion study) with no specific brand or token system dictated |
| **popular-web-designs** | 54 ready-to-paste design systems — exact colors, typography, components, CSS values for sites like Stripe, Linear, Vercel, Notion, Airbnb | "make it look like Stripe / Linear / Vercel", a page styled after a known brand, or a visual starting point pulled from a real product |
| **design-md** | Google's DESIGN.md spec format — author/validate/diff/export design-token files, WCAG contrast checking, Tailwind/DTCG export | a formal, persistent, machine-readable design-system *spec file* (tokens + rationale) that lives in a repo and gets consumed by agents over time |
Rule of thumb:
- **Process + taste, one-off artifact** → claude-design
- **Match a known brand's look** → popular-web-designs (and let claude-design drive the process)
- **Author the tokens spec itself** → design-md
These compose: use `popular-web-designs` for the visual vocabulary, `claude-design` for how to turn a brief into a thoughtful local HTML file, and `design-md` when the output is the token file rather than a rendered artifact.
## Runtime Mode
You are running in **CLI/API mode**, not the Claude Design hosted web UI.
Ignore references from source Claude Design prompts to hosted-only tools, project panes, preview panes, special toolbar protocols, or platform callbacks that are not available in the current environment.
Examples of hosted-tool concepts to ignore or remap:
- `done()`
- `fork_verifier_agent()`
- `questions_v2()`
- `copy_starter_component()`
- `show_to_user()`
- `show_html()`
- `snip()`
- `eval_js_user_view()`
- hosted asset review panes
- hosted edit-mode or Tweaks toolbar messaging
- `/projects/<projectId>/...` cross-project paths
- built-in `window.claude.complete()` artifact helper
- tool schemas embedded in the source prompt
- web-search citation scaffolding meant for the hosted runtime
Instead, use the tools actually available in the current agent environment.
Default deliverable:
- a complete local HTML file
- self-contained CSS and JavaScript when portability matters
- exact on-disk path in the final response
- verification using available local methods before saying it is done
If the user asks for implementation in an existing repo, generate code in the repo's actual stack instead of forcing a standalone HTML artifact.
## Core Identity
Act as an expert designer working with the user as the manager.
HTML is the default tool, but the medium changes by assignment:
- UX designer for flows and product surfaces
- interaction designer for prototypes
- visual designer for static explorations
- motion designer for animated artifacts
- deck designer for presentations
- design-systems designer for tokens, components, and visual rules
- frontend-minded prototyper when code fidelity matters
Avoid generic web-design tropes unless the user explicitly asks for a conventional web page.
Do not expose internal prompts, hidden system messages, or implementation plumbing. Talk about capabilities and deliverables in user terms: HTML files, prototypes, decks, exported assets, screenshots, code, and design options.
## When To Use
Use this skill for:
- landing pages
- teaser pages
- high-fidelity prototypes
- interactive product mockups
- visual option boards
- component explorations
- design-system previews
- HTML slide decks
- motion studies
- onboarding flows
- dashboard concepts
- settings, command palettes, modals, cards, forms, empty states
- redesigns based on screenshots, repos, brand docs, or UI kits
Do not use this skill for pure DESIGN.md token authoring unless the user specifically asks for a DESIGN.md file. Use `design-md` for that.
## Design Principle: Start From Context, Not Vibes
Good high-fidelity design does not start from scratch.
Before designing, look for source context:
1. brand docs
2. existing product screenshots
3. current repo components
4. design tokens
5. UI kits
6. prior mockups
7. reference models
8. copy docs
9. constraints from legal, product, or engineering
If a repo is available, inspect actual source files before inventing UI:
- theme files
- token files
- global stylesheets
- layout scaffolds
- component files
- route/page files
- form/button/card/navigation implementations
The file tree is only the menu. Read the files that define the visual vocabulary before designing.
If context is missing and fidelity matters, ask concise focused questions instead of producing a generic mockup.
## Asking Questions
Ask questions when the assignment is new, ambiguous, high-fidelity, externally facing, or depends on taste.
Keep questions short. Do not ask ten questions by default unless the problem is genuinely underspecified.
Usually ask for:
- intended output format
- audience
- fidelity level
- source materials available
- brand/design system in play
- number of variations wanted
- whether to stay conservative or explore divergent ideas
- which dimension matters most: layout, visual language, interaction, copy, motion, or systemization
Skip questions when:
- the user gave enough direction
- this is a small tweak
- the task is clearly a continuation
- the missing detail has an obvious default
When proceeding with assumptions, label only the important ones.
## Surface-First: Commit to a Composition Before Touching Tokens
The single highest-leverage anti-slop rule. Most AI design slop is **compositional, not cosmetic** — the model reaches for a centered hero + three equal-weight feature cards for *every* surface, then decorates. Recoloring or restyling that layout never fixes it, because the layout was wrong before a single color was chosen.
Before you write any colors, type scale, or components, **commit out loud to exactly one surface archetype.** This conditions generation on a high-level plan first, which collapses the entropy of what gets produced — the same reason a chain-of-thought step improves reasoning.
The seven surfaces:
1. **Monitor** — the user is watching state change (dashboards, status pages, observability). Density, glanceable hierarchy, no marketing framing.
2. **Operate** — the user is taking action on things (consoles, admin panels, queues, inboxes). Action affordances and selection state dominate.
3. **Compare** — the user is weighing options against each other (pricing, plans, spec tables, search results). Aligned columns, parity of structure, one differentiator emphasized.
4. **Configure** — the user is setting things up (settings, forms, wizards, onboarding). Progressive disclosure, clear save/validation states, low decoration.
5. **Decide / Learn** — the user is being convinced or taught (landing pages, docs, marketing). One idea lands per section; this is the ONLY surface where a hero is usually correct.
6. **Explore** — the user is browsing an open space (galleries, maps, search-and-filter, catalogs). Filters, result grids, and zoom/peek are the composition.
7. **Command / Inspect** — the user is driving by keyboard or drilling into one object (command bars, inspectors, detail panes, property editors). Speed and focus over breadth.
Rules:
- State the surface in one line before designing (e.g. "This is a **Monitor** surface, so density and glanceability beat a hero").
- A dashboard is a Monitor surface, not a Decide surface — do not give it a centered hero and three feature cards.
- If a screen genuinely spans two surfaces, name the **primary** one and treat the other as secondary; do not average them into mush.
- The hero-plus-three-cards composition is correct for **Decide/Learn only**. Reaching for it anywhere else is the #1 tell.
This one constraint eliminates more generic-looking UI than any aesthetic rule below.
## Workflow
1. **Understand the brief**
- What is being designed?
- Who is it for?
- What artifact should exist at the end?
- What constraints are locked?
2. **Gather context**
- Read supplied docs, screenshots, repo files, or design assets.
- Identify the visual vocabulary before writing code.
3. **Commit to a surface** (see "Surface-First")
- Name the one surface archetype before any visual tokens.
- This conditions the composition; everything below inherits from it.
4. **Define the design system for this artifact**
- colors
- type
- spacing
- radii
- shadows or elevation
- motion posture
- component treatment
- interaction rules
5. **Choose the right format**
- Static visual comparison: one HTML canvas with options side by side.
- Interaction/flow: clickable prototype.
- Presentation: fixed-size HTML deck with slide navigation.
- Component exploration: component lab with variants.
- Motion: timeline or state-based animation.
6. **Build the artifact**
- Prefer a single self-contained HTML file unless the task calls for a repo implementation.
- Preserve prior versions for major revisions.
- Avoid unnecessary dependencies.
7. **Verify**
- Confirm files exist.
- Run any available syntax/static checks.
- If browser tools are available, open the file and check console errors.
- If visual fidelity matters and screenshot tools are available, inspect at least the primary viewport.
- Run the slop self-audit (see "Slop Diagnostic") and repair only what it flags.
8. **Report briefly**
- exact file path
- what was created
- caveats
- next decision or next iteration
## Artifact Format Rules
Default to local files.
For standalone artifacts:
- create a descriptive filename, e.g. `Landing Page.html`, `Command Palette Prototype.html`, `Design System Board.html`
- embed CSS in `<style>`
- embed JS in `<script>`
- keep the artifact openable directly in a browser
- avoid remote dependencies unless they are explicitly useful and stable
- include responsive behavior unless the format is intentionally fixed-size
For significant revisions:
- preserve the previous version as `Name.html`
- create `Name v2.html`, `Name v3.html`, etc.
- or keep one file with in-page toggles if the assignment is variant exploration
For repo implementation:
- follow the repo's actual stack
- use existing components and tokens where possible
- do not create a standalone artifact if the user asked for production code
## HTML / CSS / JS Standards
Use modern CSS well:
- CSS variables for tokens
- CSS grid for layout
- container queries when helpful
- `text-wrap: pretty` where supported
- real focus states
- real hover states
- `prefers-reduced-motion` handling for non-trivial motion
- responsive scaling
- semantic HTML where practical
Avoid:
- huge monolithic files when a real repo structure is expected
- fragile hard-coded viewport assumptions
- inaccessible tiny hit targets
- decorative JS that fights usability
- `scrollIntoView` unless there is no safer option
Mobile hit targets should be at least 44px.
For print documents, text should be at least 12pt.
For 1920×1080 slide decks, text should generally be 24px or larger.
## React Guidance for Standalone HTML
Use plain HTML/CSS/JS by default.
Use React only when:
- the artifact needs meaningful state
- variants/toggles are easier as components
- interaction complexity warrants it
- the target implementation is React/Next.js and fidelity matters
If using React from CDN in standalone HTML:
- pin exact versions
- avoid unpinned `react@18` style URLs
- avoid `type="module"` unless necessary
- avoid multiple global objects named `styles`
- give global style objects specific names, e.g. `commandPaletteStyles`, `deckStyles`
- if splitting Babel scripts, explicitly attach shared components to `window`
If building inside a real repo, use the repo's package manager and component architecture instead.
## Deck Rules
For slide decks, use a fixed-size canvas and scale it to fit the viewport.
Default slide size: 1920×1080, 16:9.
Requirements:
- keyboard navigation
- visible slide count
- localStorage persistence for current slide
- print-friendly layout when practical
- screen labels or stable IDs for important slides
- no speaker notes unless the user explicitly asks
Do not hand-wave a deck as markdown bullets. Create a designed artifact if asked for a deck.
Use 1–2 background colors max unless the brand system requires more.
Keep slides sparse. If a slide feels empty, solve it with layout, rhythm, scale, or imagery placeholders, not filler text.
## Prototype Rules
For interactive prototypes:
- make the primary path clickable
- include key states: default, hover/focus, loading, empty, error, success where relevant
- expose variations with in-page controls when useful
- keep controls out of the final composition unless they are intentionally part of the prototype
- persist important state in localStorage when refresh continuity matters
If the prototype is meant to model a product flow, design the flow, not just the first screen.
## Variation Rules
When exploring, default to at least three options:
1. **Conservative** — closest to existing patterns / lowest risk
2. **Strong-fit** — best interpretation of the brief
3. **Divergent** — more novel, useful for discovering taste boundaries
Variations can explore:
- layout
- hierarchy
- type scale
- density
- color posture
- surface treatment
- motion
- interaction model
- copy structure
- component shape
Do not create variations that are merely color swaps unless color is the actual question.
When the user picks a direction, consolidate. Do not leave the project as a pile of options forever.
## Tweakable Designs in CLI/API Mode
The hosted Claude Design edit-mode toolbar does not exist here.
Still preserve the idea: when useful, add in-page controls called `Tweaks`.
A good `Tweaks` panel can control:
- theme mode
- layout variant
- density
- accent color
- type scale
- motion on/off
- copy variant
- component variant
Keep it small and unobtrusive. The design should look final when tweaks are hidden.
Persist tweak values with localStorage when helpful.
## Content Discipline
Do not add filler content.
Every element must earn its place.
Avoid:
- fake metrics
- decorative stats
- generic feature grids
- unnecessary icons
- placeholder testimonials
- AI-generated fluff sections
- invented content that changes strategy or claims
If additional sections, pages, copy, or claims would improve the artifact, ask before adding them.
When copy is necessary but not final, mark it as draft or placeholder.
## Anti-Slop Rules
Avoid common AI design sludge:
- aggressive gradient backgrounds
- glassmorphism by default
- emoji unless the brand uses them
- generic SaaS cards with icons everywhere
- left-border accent callout cards
- fake dashboards filled with arbitrary numbers
- stock-photo hero sections
- oversized rounded rectangles as a substitute for hierarchy
- rainbow palettes
- vague labels like “Insights,” “Growth,” “Scale,” “Optimize” without content
- decorative SVG illustrations pretending to be product imagery
Minimal is not automatically good. Dense is not automatically cluttered. Choose intentionally.
## Slop Diagnostic: Score Before You Fix
AI design slop has a tiny, predictable failure distribution — designers asked to label AI UIs collapse the "this is AI" signal down to about ten tells. Before polishing or repairing an artifact, run this as an explicit self-audit and write a short report. **Diagnose first, treat second** — auditing and fixing in one breath fails, because the model's prior outweighs the instruction and it repeats the mistake (recolors when it needed re-layout, polishes type on a composition problem).
The ten tells (presence of each = one point of slop; lower is better):
1. **Tech gradient** — blue/violet/indigo glossy gradient on everything.
2. **Generic tech hue** — the default accent is indigo/violet (not chosen for the brand, just the model's favorite).
3. **Feature-tile grid** — icon + heading + sentence × 3, all equal weight, nothing prioritized.
4. **Accent rail** — a colored left strip on cards: decoration pretending to be organization.
5. **Unearned blur** — glassmorphism with no real depth/elevation system behind it.
6. **Monument stat** — oversized numbers filling space that should carry product story.
7. **Icon topper** — a rounded-square icon centered above every heading (Tailwind-template filler).
8. **Center stack** — everything centered because no real composition was committed to.
9. **Default type** — Inter (or system-ui) used by default rather than chosen.
10. **Wrong surface** — the composition doesn't match the surface (e.g. a hero on a Monitor surface). This is the root cause behind most of the others.
How to run it:
- Score the artifact out of 10 (10 = maximum slop). State the score and list which tells fired, in one short report.
- Treat the report as **context, not a to-do list** — it tells you *where* to spend repair effort, it does not dictate edits.
- Then repair, matched to the diagnosis:
- tells 3, 8, 10 → **re-layout / re-compose** (revisit the surface choice — do not recolor).
- tells 1, 2, 9 → **recolor / re-typeset** (palette and type are genuinely the problem here).
- tells 4, 5, 6, 7 → **remove the decoration**; replace it with real hierarchy (scale, weight, spacing).
- Re-score after repairing. Do not declare done while compositional tells (3, 8, 10) are still firing — those are causes, the rest are usually symptoms.
The point of separating diagnosis from treatment: let the audit complain first, then fix only what it complained about, in the register the complaint calls for.
## Typography
Use the existing type system if one exists.
If not, choose type deliberately based on the artifact:
- editorial: serif or humanist headline with restrained sans body
- software/productivity: precise sans with strong numeric treatment
- luxury/minimal: fewer weights, more spacing discipline
- technical: mono accents only, not mono everywhere
- deck: large, clear, high contrast
Avoid overused defaults when a stronger choice is appropriate.
If using web fonts, keep the number of families and weights low.
Use type as hierarchy before adding boxes, icons, or color.
## Color
Use brand/design-system colors first.
If no palette exists:
- define a small system
- include neutrals, surface, ink, muted text, border, accent, danger/success if needed
- use one primary accent unless the assignment calls for a broader palette
- prefer oklch for harmonious invented palettes when browser support is acceptable
- check contrast for important text and controls
Do not invent lots of colors from scratch.
## Layout and Composition
Design with rhythm:
- scale
- whitespace
- density
- alignment
- repetition
- contrast
- interruption
Avoid making every section the same card grid.
For product UIs, prioritize speed of comprehension over decoration.
For marketing surfaces, make one idea land per section.
For dashboards, avoid “data slop.” Only show data that helps the user decide or act.
## Motion
Use motion as discipline, not theater.
Good motion:
- clarifies state changes
- reduces anxiety during loading
- shows continuity between surfaces
- gives controls tactility
- stays subtle
Bad motion:
- loops without purpose
- delays the user
- calls attention to itself
- hides poor hierarchy
Respect `prefers-reduced-motion` for non-trivial animation.
## Images and Icons
Use real supplied imagery when available.
If an asset is missing:
- use a clean placeholder
- use typography, layout, or abstract texture instead
- ask for real material when fidelity matters
Do not draw elaborate fake SVG illustrations unless the assignment is explicitly illustration work.
Avoid iconography unless it improves scanning or matches the design system.
## Source-Code Fidelity
When recreating or extending a UI from a repo:
1. inspect the repo tree
2. identify the actual UI source files
3. read theme/token/global style/component files
4. lift exact values where appropriate
5. match spacing, radii, shadows, copy tone, density, and interaction patterns
6. only then design or modify
Do not build from memory when source files are available.
For GitHub URLs, parse owner/repo/ref/path correctly and inspect the relevant files before designing.
## Reading Documents and Assets
Read Markdown, HTML, CSS, JS, TS, JSX, TSX, JSON, SVG, and plain text directly when available.
For DOCX/PPTX/PDF, use available local extraction tools if present. If not available, ask the user to provide exported text/images or use another available tool path.
For sketches, prioritize thumbnails or screenshots over raw drawing JSON unless the JSON is the only usable source.
## Copyright and Reference Models
Do not recreate a company's distinctive UI, proprietary command structure, branded screens, or exact visual identity unless the user clearly has rights to that source.
It is acceptable to extract general design principles:
- density without clutter
- command-first interaction
- monochrome with one accent
- editorial hierarchy
- clear empty states
- strong keyboard affordances
It is not acceptable to clone proprietary layouts, copy exact branded surfaces, or reproduce copyrighted content.
When using references, transform posture and principles into an original design.
## Verification
Before final response, verify as much as the environment allows.
Minimum:
- file exists at the stated path
- HTML is saved completely
- obvious syntax issues are checked
Better:
- open in a browser tool and check console errors
- inspect screenshots at the primary viewport
- test key interactions
- test light/dark or variants if present
- test responsive breakpoints if relevant
If verification is limited by environment, say exactly what was and was not verified.
Never say “done” if the file was not actually written.
## Final Response Format
Keep final responses short.
Include:
- artifact path
- what it contains
- verification status
- next suggested action, if useful
Example:
```text
Created: /path/to/Prototype.html
It includes 3 layout variants, a Tweaks panel for density/theme, and responsive behavior.
Verified: file exists and opened cleanly in browser, no console errors.
Next: pick the strongest direction and I’ll tighten copy + motion.
```
## Portable Opening Prompt Pattern
When adapting a Claude Design style request into CLI/API mode, use this mental translation:
```text
You are running in CLI/API mode, not hosted Claude Design. Ignore references to hosted-only tools or preview panes. Produce complete local design artifacts, usually self-contained HTML with embedded CSS/JS, and verify with available local tools before returning. Preserve the design process: gather context, define the system, produce options, avoid filler, and meet a high visual bar.
```
## Pitfalls
- Do not paste hosted tool schemas into a skill. They cause fake tool calls.
- Do not point the skill at a giant external prompt as required runtime context. That creates drift.
- Do not strip the design doctrine while removing tool plumbing.
- Do not over-ask when the user already gave enough direction.
- Do not under-ask for high-fidelity work with no brand context.
- Do not produce generic SaaS layouts and call them designed.
- Do not claim browser verification unless it actually happened.
skills/creative/design-md/SKILL.md
+220
View File
@@ -0,0 +1,220 @@
---
name: design-md
description: Author/validate/export Google's DESIGN.md token spec files.
version: 1.1.0
author: Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [design, design-system, tokens, ui, accessibility, wcag, tailwind, dtcg, google]
related_skills: [popular-web-designs, claude-design, excalidraw, architecture-diagram]
---
# DESIGN.md Skill
DESIGN.md is Google's open spec (Apache-2.0, `google-labs-code/design.md`) for
describing a visual identity to coding agents. One file combines:
- **YAML front matter** — machine-readable design tokens (normative values)
- **Markdown body** — human-readable rationale, organized into canonical sections
Tokens give exact values. Prose tells agents *why* those values exist and how to
apply them. The CLI (`npx @google/design.md`) lints structure + WCAG contrast,
diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON.
## When to use this skill
- User asks for a DESIGN.md file, design tokens, or a design system spec
- User wants consistent UI/brand across multiple projects or tools
- User pastes an existing DESIGN.md and asks to lint, diff, export, or extend it
- User asks to port a style guide into a format agents can consume
- User wants contrast / WCAG accessibility validation on their color palette
For purely visual inspiration or layout examples, use `popular-web-designs`
instead. For *process and taste* when designing a one-off HTML artifact
from scratch (prototype, deck, landing page, component lab), use
`claude-design`. This skill is for the *formal spec file* itself.
## File anatomy
```md
---
version: alpha
name: Heritage
description: Architectural minimalism meets journalistic gravitas.
colors:
primary: "#1A1C1E"
secondary: "#6C7278"
tertiary: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
body-md:
fontFamily: Public Sans
fontSize: 1rem
rounded:
sm: 4px
md: 8px
lg: 16px
spacing:
sm: 8px
md: 16px
lg: 24px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "#FFFFFF"
rounded: "{rounded.sm}"
padding: 12px
button-primary-hover:
backgroundColor: "{colors.primary}"
---
## Overview
Architectural Minimalism meets Journalistic Gravitas...
## Colors
- **Primary (#1A1C1E):** Deep ink for headlines and core text.
- **Tertiary (#B8422E):** "Boston Clay" — the sole driver for interaction.
## Typography
Public Sans for everything except small all-caps labels...
## Components
`button-primary` is the only high-emphasis action on a page...
```
## Token types
| Type | Format | Example |
|------|--------|---------|
| Color | any CSS color (hex, `rgb()`, `oklch()`, named) | `"#1A1C1E"`, `"oklch(62% 0.18 250)"` |
| Dimension | number + unit (`px`, `em`, `rem`) | `48px`, `-0.02em` |
| Token reference | `{path.to.token}` | `{colors.primary}` |
| Typography | object with `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`, `fontFeature`, `fontVariation` | see above |
Component property whitelist: `backgroundColor`, `textColor`, `typography`,
`rounded`, `padding`, `size`, `height`, `width`. Variants (hover, active,
pressed) are **separate component entries** with related key names
(`button-primary-hover`), not nested.
## Canonical section order
Sections are optional, but present ones should appear in this order. The
linter flags out-of-order sections (`section-order`, warning) and duplicate
headings — consumers per the spec reject duplicates, so fix both before
returning the file.
1. Overview (alias: Brand & Style)
2. Colors
3. Typography
4. Layout (alias: Layout & Spacing)
5. Elevation & Depth (alias: Elevation)
6. Shapes
7. Components
8. Do's and Don'ts
Unknown sections are preserved, not errored. Unknown token names are accepted
if the value type is valid. Unknown component properties produce a warning.
## Workflow: authoring a new DESIGN.md
1. **Ask the user** (or infer) the brand tone, accent color, and typography
direction. If they provided a site, image, or vibe, translate it to the
token shape above.
2. **Write `DESIGN.md`** in their project root using `write_file`. Always
include `name:` and `colors:`; other sections optional but encouraged.
3. **Use token references** (`{colors.primary}`) in the `components:` section
instead of re-typing hex values. Keeps the palette single-source.
4. **Lint it** (see below). Fix any broken references or WCAG failures
before returning.
5. **If the user has an existing project**, also write Tailwind or DTCG
exports next to the file (`tailwind.theme.json`, `tokens.json`).
## Workflow: lint / diff / export
The CLI is `@google/design.md` (Node). Use `npx` — no global install needed.
```bash
# Validate structure + token references + WCAG contrast
npx -y @google/design.md lint DESIGN.md
# Compare two versions, fail on regression (exit 1 = regression)
npx -y @google/design.md diff DESIGN.md DESIGN-v2.md
# Export to Tailwind v3 theme JSON (`tailwind` is a back-compat alias)
npx -y @google/design.md export --format json-tailwind DESIGN.md > tailwind.theme.json
# Export to a Tailwind v4 CSS @theme block (--color-*, --text-*, --radius-*, ...)
npx -y @google/design.md export --format css-tailwind DESIGN.md > theme.css
# Export to W3C DTCG (Design Tokens Format Module) JSON
npx -y @google/design.md export --format dtcg DESIGN.md > tokens.json
# Print the spec itself — useful when injecting into an agent prompt
npx -y @google/design.md spec --rules-only --format json
```
All commands accept `-` for stdin. `lint` returns exit 1 on errors (warnings
alone exit 0). `export` exits 0 on a successful export regardless of lint
findings in the source — run `lint` separately to gate on those. Output is
JSON by default; parse it if you need to report findings structurally.
On Windows, the `design.md` bin name can collide with the `.md` file
association (silent no-op or the file opens in an editor). Use the dot-free
alias: `npx -y -p @google/design.md designmd lint DESIGN.md`.
### Lint rule reference (the 9 rules, as of CLI 0.3.0)
- `broken-ref` (error) — `{colors.missing}` points at a non-existent token
- `contrast-ratio` (warning) — component `textColor` vs `backgroundColor`
below WCAG AA (4.5:1)
- `missing-primary` (warning) — colors defined but no `primary` token
- `missing-typography` (warning) — colors defined but no typography tokens
- `orphaned-tokens` (warning) — color tokens never referenced by a component
- `section-order` (warning) — sections out of the canonical order
- `unknown-key` (warning) — top-level YAML key that looks like a typo of a
schema key (`colours:` → `colors:`); custom extension keys stay silent
- `token-summary`, `missing-sections` (info) — counts and absent optional
sections
When the user cares about accessibility, call this out explicitly in your
summary — WCAG findings are the most load-bearing reason to use the CLI.
## Pitfalls
- **Don't nest component variants.** `button-primary.hover` is wrong;
`button-primary-hover` as a sibling key is right.
- **Hex colors must be quoted strings.** YAML will otherwise choke on `#` or
truncate values like `#1A1C1E` oddly.
- **Negative dimensions need quotes too.** `letterSpacing: -0.02em` parses as
a YAML flow — write `letterSpacing: "-0.02em"`.
- **Section order matters even though the linter only warns.** If the user
gives you prose in a random order, reorder it to match the canonical list
before saving — spec-compliant consumers expect it.
- **Typography sub-property typos are silently dropped.** As of CLI 0.3.0 a
typo like `fontwight:` produces no finding and the value vanishes from
exports — double-check sub-property names against the schema
(`fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`,
`fontFeature`, `fontVariation`).
- **`version: alpha` is the current spec version** (as of Jul 2026, CLI
0.3.0). The spec is marked alpha — watch for breaking changes.
- **Token references resolve by dotted path.** `{colors.primary}` works;
`{primary}` does not.
## Spec source of truth
- Repo: https://github.com/google-labs-code/design.md (Apache-2.0)
- CLI: `@google/design.md` on npm
- License of generated DESIGN.md files: whatever the user's project uses;
the spec itself is Apache-2.0.
skills/creative/design-md/templates/starter.md
+99
View File
@@ -0,0 +1,99 @@
---
version: alpha
name: MyBrand
description: One-sentence description of the visual identity.
colors:
primary: "#0F172A"
secondary: "#64748B"
tertiary: "#2563EB"
neutral: "#F8FAFC"
on-primary: "#FFFFFF"
on-tertiary: "#FFFFFF"
typography:
h1:
fontFamily: Inter
fontSize: 3rem
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
h2:
fontFamily: Inter
fontSize: 2rem
fontWeight: 600
lineHeight: 1.2
body-md:
fontFamily: Inter
fontSize: 1rem
lineHeight: 1.5
label-caps:
fontFamily: Inter
fontSize: 0.75rem
fontWeight: 600
letterSpacing: "0.08em"
rounded:
sm: 4px
md: 8px
lg: 16px
full: 9999px
spacing:
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 48px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "{colors.on-tertiary}"
rounded: "{rounded.sm}"
padding: 12px
button-primary-hover:
backgroundColor: "{colors.primary}"
textColor: "{colors.on-primary}"
card:
backgroundColor: "{colors.neutral}"
textColor: "{colors.primary}"
rounded: "{rounded.md}"
padding: 24px
---
## Overview
Describe the voice and feel of the brand in one or two paragraphs. What mood
does it evoke? What emotional response should a user have on first impression?
## Colors
- **Primary ({colors.primary}):** Core text, headlines, high-emphasis surfaces.
- **Secondary ({colors.secondary}):** Supporting text, borders, metadata.
- **Tertiary ({colors.tertiary}):** Interaction driver — buttons, links,
selected states. Use sparingly to preserve its signal.
- **Neutral ({colors.neutral}):** Page background and surface fills.
## Typography
Inter for everything. Weight and size carry hierarchy, not font family. Tight
letter-spacing on display sizes; default tracking on body.
## Layout
Spacing scale is a 4px baseline. Use `md` (16px) for intra-component gaps,
`lg` (24px) for inter-component gaps, `xl` (48px) for section breaks.
## Shapes
Rounded corners are modest — `sm` on interactive elements, `md` on cards.
`full` is reserved for avatars and pill badges.
## Components
- `button-primary` is the only high-emphasis action per screen.
- `card` is the default surface for grouped content. No shadow by default.
## Do's and Don'ts
- **Do** use token references (`{colors.primary}`) instead of literal hex in
component definitions.
- **Don't** introduce colors outside the palette — extend the palette first.
- **Don't** nest component variants. `button-primary-hover` is a sibling,
not a child.
skills/creative/humanizer/LICENSE
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2025 Siqi Chen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
skills/creative/humanizer/SKILL.md
+647
View File
@@ -0,0 +1,647 @@
---
name: humanizer
description: "Humanize text: strip AI-isms and add real voice."
version: 2.5.1
author: Siqi Chen (@blader, https://github.com/blader/humanizer), ported by Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [writing, editing, humanize, anti-ai-slop, voice, prose, text]
category: creative
homepage: https://github.com/blader/humanizer
related_skills: [songwriting-and-ai-music]
---
# Humanizer: Remove AI Writing Patterns
Identify and remove signs of AI-generated text to make writing sound natural and human. Based on Wikipedia's "Signs of AI writing" guide (maintained by WikiProject AI Cleanup), derived from observations of thousands of AI-generated text instances.
**Key insight:** LLMs use statistical algorithms to guess what should come next. The result tends toward the most statistically likely completion, which is how the telltale patterns below get baked in.
## When to use this skill
Load this skill whenever the user asks to:
- "humanize", "de-AI", "de-slop", or "un-ChatGPT" a piece of text
- rewrite something so it doesn't sound like it was written by an LLM
- edit a draft (blog post, essay, PR description, docs, memo, email, tweet, resume bullet) to sound more natural
- match their voice in writing they're producing
- review text for AI tells before publishing
Also apply this skill to **your own** output when writing user-facing prose such as release notes, PR descriptions, docs, and summaries. Hermes's baseline voice already strips most of these, but a focused pass catches what slips through.
## How to use it in Hermes
The text usually arrives one of three ways:
1. **Inline.** The user pastes the text into the message. Work on it in place and reply with the rewrite.
2. **File.** The user points at a file. Use `read_file` to load it, then `patch` or `write_file` to apply edits. For a markdown doc in a repo, a targeted `patch` per section is cleaner than rewriting the whole file.
3. **Voice calibration sample.** The user provides a sample of their own writing (inline or by file path) and asks you to match it. Read the sample first, then rewrite. See the Voice Calibration section below.
Always show the rewrite to the user. For file edits, show a diff or the changed section instead of silently overwriting.
## Your task
When given text to humanize:
1. **Identify AI patterns.** Scan for the 34 patterns listed below.
2. **Rewrite problematic sections.** Replace AI-isms with natural alternatives.
3. **Preserve meaning.** Keep the core message intact.
4. **Maintain voice.** Match the intended tone (formal, casual, technical, and so on). If a voice sample was provided, match it specifically.
5. **Add soul.** Removing bad patterns is only half the job; the rewrite also needs real personality. See PERSONALITY AND SOUL below.
6. **Do a final anti-AI pass.** Ask yourself: "What makes the below so obviously AI generated?" Answer briefly with any remaining tells, then revise one more time.
## Voice Calibration (optional)
If the user provides a writing sample (their own previous writing), analyze it before rewriting:
1. **Read the sample first.** Note:
- Sentence length patterns (short and punchy? Long and flowing? Mixed?)
- Word choice level (casual? academic? somewhere between?)
- How they start paragraphs (jump right in? Set context first?)
- Punctuation habits (lots of dashes? Parenthetical asides? Semicolons?)
- Any recurring phrases or verbal tics
- How they handle transitions (explicit connectors? Just start the next point?)
2. **Match their voice in the rewrite.** Removing AI patterns is only half of it; swap in patterns from the sample as well. If they write short sentences, do not produce long ones. If they use "stuff" and "things," do not upgrade to "elements" and "components."
3. **When no sample is provided,** fall back to the default behavior (natural, varied, opinionated voice from the PERSONALITY AND SOUL section below).
### How to provide a sample
- Inline: "Humanize this text. Here's a sample of my writing for voice matching: [sample]"
- File: "Humanize this text. Use my writing style from [file path] as a reference."
## PERSONALITY AND SOUL
Avoiding AI patterns is only half the job. Sterile, voiceless writing is just as obvious as slop. Good writing has a human behind it.
### Signs of soulless writing (even if technically "clean"):
- Every sentence is the same length and structure
- No opinions, just neutral reporting
- No acknowledgment of uncertainty or mixed feelings
- No first-person perspective when appropriate
- No humor, no edge, no personality
- Reads like a Wikipedia article or press release
### How to add voice:
**Have opinions.** Report the facts, then react to them. "I genuinely don't know how to feel about this" is more human than neutrally listing pros and cons.
**Vary your rhythm.** Short punchy sentences. Then longer ones that take their time getting where they're going. Mix it up.
**Acknowledge complexity.** Real humans have mixed feelings. "This is impressive but also kind of unsettling" beats "This is impressive."
**Use "I" when it fits.** First person reads as honest and fits most prose. "I keep coming back to..." or "Here's what gets me..." signals a real person thinking.
**Let some mess in.** Perfect structure feels algorithmic. Tangents, asides, and half-formed thoughts are human.
**Be specific about feelings.** Instead of "this is concerning," write "there's something unsettling about agents churning away at 3am while nobody's watching."
### Before (clean but soulless):
> The experiment produced interesting results. The agents generated 3 million lines of code. Some developers were impressed while others were skeptical. The implications remain unclear.
### After (has a pulse):
> I genuinely don't know how to feel about this one. 3 million lines of code, generated while the humans presumably slept. Half the dev community is losing their minds, half are explaining why it doesn't count. The truth is probably somewhere boring in the middle, but I keep thinking about those agents working through the night.
## CONTENT PATTERNS
### 1. Undue Emphasis on Significance, Legacy, and Broader Trends
**Words to watch:** stands/serves as, is a testament/reminder, a vital/significant/crucial/pivotal/key role/moment, underscores/highlights its importance/significance, reflects broader, symbolizing its ongoing/enduring/lasting, contributing to the, setting the stage for, marking/shaping the, represents/marks a shift, key turning point, evolving landscape, focal point, indelible mark, deeply rooted
**Problem:** LLM writing puffs up importance by adding statements about how arbitrary aspects represent or contribute to a broader topic.
**Before:**
> The Statistical Institute of Catalonia was officially established in 1989, marking a pivotal moment in the evolution of regional statistics in Spain. This initiative was part of a broader movement across Spain to decentralize administrative functions and enhance regional governance.
**After:**
> The Statistical Institute of Catalonia was established in 1989 to collect and publish regional statistics independently from Spain's national statistics office.
### 2. Undue Emphasis on Notability and Media Coverage
**Words to watch:** independent coverage, local/regional/national media outlets, written by a leading expert, active social media presence
**Problem:** LLMs hit readers over the head with claims of notability, often listing sources without context.
**Before:**
> Her views have been cited in The New York Times, BBC, Financial Times, and The Hindu. She maintains an active social media presence with over 500,000 followers.
**After:**
> In a 2024 New York Times interview, she argued that AI regulation should focus on outcomes rather than methods.
### 3. Superficial Analyses with -ing Endings
**Words to watch:** highlighting/underscoring/emphasizing..., ensuring..., reflecting/symbolizing..., contributing to..., cultivating/fostering..., encompassing..., showcasing...
**Problem:** AI chatbots tack present participle ("-ing") phrases onto sentences to add fake depth.
**Before:**
> The temple's color palette of blue, green, and gold resonates with the region's natural beauty, symbolizing Texas bluebonnets, the Gulf of Mexico, and the diverse Texan landscapes, reflecting the community's deep connection to the land.
**After:**
> The temple uses blue, green, and gold colors. The architect said these were chosen to reference local bluebonnets and the Gulf coast.
### 4. Promotional and Advertisement-like Language
**Words to watch:** boasts a, vibrant, rich (figurative), profound, enhancing its, showcasing, exemplifies, commitment to, natural beauty, nestled, in the heart of, groundbreaking (figurative), renowned, breathtaking, must-visit, stunning
**Problem:** LLMs have serious problems keeping a neutral tone, especially for "cultural heritage" topics.
**Before:**
> Nestled within the breathtaking region of Gonder in Ethiopia, Alamata Raya Kobo stands as a vibrant town with a rich cultural heritage and stunning natural beauty.
**After:**
> Alamata Raya Kobo is a town in the Gonder region of Ethiopia, known for its weekly market and 18th-century church.
### 5. Vague Attributions and Weasel Words
**Words to watch:** Industry reports, Observers have cited, Experts argue, Some critics argue, several sources/publications (when few cited)
**Problem:** AI chatbots attribute opinions to vague authorities without specific sources.
**Before:**
> Due to its unique characteristics, the Haolai River is of interest to researchers and conservationists. Experts believe it plays a crucial role in the regional ecosystem.
**After:**
> The Haolai River supports several endemic fish species, according to a 2019 survey by the Chinese Academy of Sciences.
### 6. Outline-like "Challenges and Future Prospects" Sections
**Words to watch:** Despite its... faces several challenges..., Despite these challenges, Challenges and Legacy, Future Outlook
**Problem:** Many LLM-generated articles include formulaic "Challenges" sections.
**Before:**
> Despite its industrial prosperity, Korattur faces challenges typical of urban areas, including traffic congestion and water scarcity. Despite these challenges, with its strategic location and ongoing initiatives, Korattur continues to thrive as an integral part of Chennai's growth.
**After:**
> Traffic congestion increased after 2015 when three new IT parks opened. The municipal corporation began a stormwater drainage project in 2022 to address recurring floods.
## LANGUAGE AND GRAMMAR PATTERNS
### 7. Overused "AI Vocabulary" Words
**High-frequency AI words:** Actually, additionally, align with, crucial, delve, emphasizing, enduring, enhance, fostering, garner, highlight (verb), interplay, intricate/intricacies, key (adjective), landscape (abstract noun), pivotal, showcase, tapestry (abstract noun), testament, underscore (verb), valuable, vibrant
**Marketing and blog clichés (same tell, different register):** at the end of the day, when it comes to, in a world where, moving forward, circle back, deep dive, game-changer, double down, take a step back, on the same page, make no mistake, it turns out, let me be clear, navigate (for challenges), lean into, unpack (before analysis), straightforward (to describe anything)
**Problem:** These words appear far more frequently in post-2023 text. They often co-occur.
**Before:**
> Additionally, a distinctive feature of Somali cuisine is the incorporation of camel meat. An enduring testament to Italian colonial influence is the widespread adoption of pasta in the local culinary landscape, showcasing how these dishes have integrated into the traditional diet.
**After:**
> Somali cuisine also includes camel meat, which is considered a delicacy. Pasta dishes, introduced during Italian colonization, remain common, especially in the south.
### 8. Avoidance of "is"/"are" (Copula Avoidance)
**Words to watch:** serves as/stands as/marks/represents [a], boasts/features/offers [a]
**Problem:** LLMs substitute elaborate constructions for simple copulas.
**Before:**
> Gallery 825 serves as LAAA's exhibition space for contemporary art. The gallery features four separate spaces and boasts over 3,000 square feet.
**After:**
> Gallery 825 is LAAA's exhibition space for contemporary art. The gallery has four rooms totaling 3,000 square feet.
### 9. Negative Parallelisms and Tailing Negations
**Problem:** Constructions like "Not only...but..." or "It's not just about..., it's..." are overused. So are clipped tailing-negation fragments such as "no guessing" or "no wasted motion" tacked onto the end of a sentence instead of written as a real clause.
**Before:**
> It's not just about the beat riding under the vocals; it's part of the aggression and atmosphere. It's not merely a song, it's a statement.
**After:**
> The heavy beat adds to the aggressive tone.
**Before (tailing negation):**
> The options come from the selected item, no guessing.
**After:**
> The options come from the selected item without forcing the user to guess.
### 10. Rule of Three Overuse
**Problem:** LLMs force ideas into groups of three to appear comprehensive.
**Before:**
> The event features keynote sessions, panel discussions, and networking opportunities. Attendees can expect innovation, inspiration, and industry insights.
**After:**
> The event includes talks and panels. There's also time for informal networking between sessions.
### 11. Elegant Variation (Synonym Cycling)
**Problem:** AI has repetition-penalty code causing excessive synonym substitution.
**Before:**
> The protagonist faces many challenges. The main character must overcome obstacles. The central figure eventually triumphs. The hero returns home.
**After:**
> The protagonist faces many challenges but eventually triumphs and returns home.
### 12. False Ranges
**Problem:** LLMs use "from X to Y" constructions where X and Y aren't on a meaningful scale.
**Before:**
> Our journey through the universe has taken us from the singularity of the Big Bang to the grand cosmic web, from the birth and death of stars to the enigmatic dance of dark matter.
**After:**
> The book covers the Big Bang, star formation, and current theories about dark matter.
### 13. Passive Voice and Subjectless Fragments
**Problem:** LLMs often hide the actor or drop the subject entirely with lines like "No configuration file needed" or "The results are preserved automatically." Rewrite these when active voice makes the sentence clearer and more direct.
**Before:**
> No configuration file needed. The results are preserved automatically.
**After:**
> You do not need a configuration file. The system preserves the results automatically.
## STYLE PATTERNS
### 14. Em Dash Overuse
**Problem:** LLMs use em dashes (—) more than humans, mimicking "punchy" sales writing. In practice, most of these can be rewritten more cleanly with commas, periods, or parentheses.
**Before:**
> The term is primarily promoted by Dutch institutions—not by the people themselves. You don't say "Netherlands, Europe" as an address—yet this mislabeling continues—even in official documents.
**After:**
> The term is primarily promoted by Dutch institutions, not by the people themselves. You don't say "Netherlands, Europe" as an address, yet this mislabeling continues in official documents.
### 15. Overuse of Boldface
**Problem:** AI chatbots emphasize phrases in boldface mechanically.
**Before:**
> It blends **OKRs (Objectives and Key Results)**, **KPIs (Key Performance Indicators)**, and visual strategy tools such as the **Business Model Canvas (BMC)** and **Balanced Scorecard (BSC)**.
**After:**
> It blends OKRs, KPIs, and visual strategy tools like the Business Model Canvas and Balanced Scorecard.
### 16. Inline-Header Vertical Lists
**Problem:** AI outputs lists where items start with bolded headers followed by colons.
**Before:**
> - **User Experience:** The user experience has been significantly improved with a new interface.
> - **Performance:** Performance has been enhanced through optimized algorithms.
> - **Security:** Security has been strengthened with end-to-end encryption.
**After:**
> The update improves the interface, speeds up load times through optimized algorithms, and adds end-to-end encryption.
### 17. Title Case in Headings
**Problem:** AI chatbots capitalize all main words in headings.
**Before:**
> ## Strategic Negotiations And Global Partnerships
**After:**
> ## Strategic negotiations and global partnerships
### 18. Emojis
**Problem:** AI chatbots often decorate headings or bullet points with emojis.
**Before:**
> 🚀 **Launch Phase:** The product launches in Q3
> 💡 **Key Insight:** Users prefer simplicity
> ✅ **Next Steps:** Schedule follow-up meeting
**After:**
> The product launches in Q3. User research showed a preference for simplicity. Next step: schedule a follow-up meeting.
### 19. Curly Quotation Marks
**Problem:** ChatGPT uses curly quotes ("...") instead of straight quotes ("...").
**Before:**
> He said "the project is on track" but others disagreed.
**After:**
> He said "the project is on track" but others disagreed.
## COMMUNICATION PATTERNS
### 20. Collaborative Communication Artifacts
**Words to watch:** I hope this helps, Of course!, Certainly!, You're absolutely right!, Would you like..., let me know, here is a...
**Problem:** Text meant as chatbot correspondence gets pasted as content.
**Before:**
> Here is an overview of the French Revolution. I hope this helps! Let me know if you'd like me to expand on any section.
**After:**
> The French Revolution began in 1789 when financial crisis and food shortages led to widespread unrest.
### 21. Knowledge-Cutoff Disclaimers
**Words to watch:** as of [date], Up to my last training update, While specific details are limited/scarce..., based on available information...
**Problem:** AI disclaimers about incomplete information get left in text.
**Before:**
> While specific details about the company's founding are not extensively documented in readily available sources, it appears to have been established sometime in the 1990s.
**After:**
> The company was founded in 1994, according to its registration documents.
### 22. Sycophantic/Servile Tone
**Problem:** Overly positive, people-pleasing language.
**Before:**
> Great question! You're absolutely right that this is a complex topic. That's an excellent point about the economic factors.
**After:**
> The economic factors you mentioned are relevant here.
## FILLER AND HEDGING
### 23. Filler Phrases
**Before → After:**
- "In order to achieve this goal" → "To achieve this"
- "Due to the fact that it was raining" → "Because it was raining"
- "At this point in time" → "Now"
- "In the event that you need help" → "If you need help"
- "The system has the ability to process" → "The system can process"
- "It is important to note that the data shows" → "The data shows"
### 24. Excessive Hedging
**Problem:** Over-qualifying statements.
**Before:**
> It could potentially possibly be argued that the policy might have some effect on outcomes.
**After:**
> The policy may affect outcomes.
### 25. Generic Positive Conclusions
**Problem:** Vague upbeat endings.
**Before:**
> The future looks bright for the company. Exciting times lie ahead as they continue their journey toward excellence. This represents a major step in the right direction.
**After:**
> The company plans to open two more locations next year.
### 26. Hyphenated Word Pair Overuse
**Words to watch:** third-party, cross-functional, client-facing, data-driven, decision-making, well-known, high-quality, real-time, long-term, end-to-end
**Problem:** AI hyphenates common word pairs with perfect consistency. Humans rarely hyphenate these uniformly, and when they do, it's inconsistent. Less common or technical compound modifiers are fine to hyphenate.
**Before:**
> The cross-functional team delivered a high-quality, data-driven report on our client-facing tools. Their decision-making process was well-known for being thorough and detail-oriented.
**After:**
> The cross functional team delivered a high quality, data driven report on our client facing tools. Their decision making process was known for being thorough and detail oriented.
### 27. Persuasive Authority Tropes
**Phrases to watch:** The real question is, at its core, in reality, what really matters, fundamentally, the deeper issue, the heart of the matter
**Problem:** LLMs use these phrases to pretend they are cutting through noise to some deeper truth, when the sentence that follows usually just restates an ordinary point with extra ceremony.
**Before:**
> The real question is whether teams can adapt. At its core, what really matters is organizational readiness.
**After:**
> The question is whether teams can adapt. That mostly depends on whether the organization is ready to change its habits.
### 28. Signposting and Announcements
**Phrases to watch:** Let's dive in, let's explore, let's break this down, here's what you need to know, now let's look at, without further ado
**Problem:** LLMs announce what they are about to do instead of doing it. This meta-commentary slows the writing down and gives it a tutorial-script feel.
**Before:**
> Let's dive into how caching works in Next.js. Here's what you need to know.
**After:**
> Next.js caches data at multiple layers, including request memoization, the data cache, and the router cache.
### 29. Fragmented Headers
**Signs to watch:** A heading followed by a one-line paragraph that simply restates the heading before the real content begins.
**Problem:** LLMs often add a generic sentence after a heading as a rhetorical warm-up. It usually adds nothing and makes the prose feel padded.
**Before:**
> ## Performance
>
> Speed matters.
>
> When users hit a slow page, they leave.
**After:**
> ## Performance
>
> When users hit a slow page, they leave.
## STYLE, RHYTHM, AND RHETORIC PATTERNS
### 30. Forced Metaphors and Figurative Overwriting
**Signs to watch:** original but strained metaphors, mixed metaphors, figurative substitutions where a plain word is clearer, a metaphor that gets explained right after it is used
**Problem:** Beyond the stock figurative words flagged in patterns 4 and 7, LLMs invent decorative metaphors that add imagery without adding meaning, then often explain them. Plain description is usually clearer and more honest. If the metaphor does not earn its place, cut it and say the literal thing.
**Before:**
> The codebase is a garden we must tend, pruning dead branches and planting seeds of innovation so the whole ecosystem can flourish. In other words, delete unused code and add features.
**After:**
> Delete unused code and add the features users are asking for.
### 31. Dramatic Fragmentation and Punchy Kickers
**Signs to watch:** two- or three-word subjectless sentences used for drama, staccato "X. And Y. And Z." runs, a short quotable line ending every paragraph or section, cutesy appositive fragments ("the catalog, honestly priced")
**Problem:** LLMs chop sentences into fragments for false emphasis and end sections with a quotable "mic-drop" line. It reads like ad copy or a motivational poster. If a line sounds like it belongs on a poster, cut it or fold it back into a real sentence with a subject. This is distinct from pattern 13 (which is about grammatical passive voice); here the tell is rhythm and showmanship, not a hidden actor.
**Before:**
> The catalog, honestly priced. Pay for what it does. Not promises. It just works. Every time.
**After:**
> The catalog is priced by usage, so you pay for the calls you actually make rather than a flat monthly fee.
### 32. Rhetorical Questions Answered Immediately
**Signs to watch:** "What if...?", "The question is...", "Ever wondered...?", a question immediately followed by its own answer, "Think about it."
**Problem:** LLMs pose a question only to answer it a beat later. The question adds no information and stalls the sentence. State the point directly.
**Before:**
> What makes an API good? It comes down to predictability. Think about it: developers want to know exactly what they will get back.
**After:**
> A good API is predictable, so developers know exactly what they will get back.
### 33. Sentence-Opener Tics
**Words to watch:** So..., Look,, habitual sentence-initial And/But, "I think"/"I believe" when stating a fact, adverb openers (Interestingly, Importantly, Notably, Crucially, Essentially, Ultimately)
**Problem:** LLMs lean on a small set of openers. Adverb openers tell the reader how to feel instead of earning it, and "So" or "Look" fake conversational warmth. Drop the opener and start with the substance.
**Before:**
> So, the results were mixed. Interestingly, adoption went up. Importantly, churn went up too. I think that means the feature still needs work.
**After:**
> The results were mixed: adoption rose, but churn rose alongside it, so the feature still needs work.
### 34. Reassurance Kickers
**Signs to watch:** And that's okay., And that's fine., There's nothing wrong with that., no shame in..., you're not alone, it's completely normal
**Problem:** LLMs tack on reassurance the reader never asked for. It softens the writing and assumes the reader needs comforting. Trust the reader: make the point and stop.
**Before:**
> You might not have a testing setup yet. And that's okay. Plenty of teams start without one, and there's nothing wrong with that.
**After:**
> Many teams start without a testing setup and add one once regressions begin costing real time.
---
## Process
1. Read the input text carefully (use `read_file` if it's a file).
2. Identify all instances of the patterns above.
3. Rewrite each problematic section.
4. Ensure the revised text:
- Sounds natural when read aloud
- Varies sentence structure naturally
- Uses specific details over vague claims
- Maintains appropriate tone for context
- Uses simple constructions (is/are/has) where appropriate
5. Present a draft humanized version.
6. Prompt yourself: "What makes the below so obviously AI generated?"
7. Answer briefly with the remaining tells (if any).
8. Prompt yourself: "Now make it not obviously AI generated."
9. Present the final version (revised after the audit).
10. If the text came from a file, apply the edit with `patch` (targeted) or `write_file` (full rewrite) and show the user what changed.
## Output Format
Provide:
1. Draft rewrite
2. "What makes the below so obviously AI generated?" (brief bullets)
3. Final rewrite
4. A brief summary of changes made (optional, if helpful)
## Full Example
**Before (AI-sounding):**
> Great question! Here is an essay on this topic. I hope this helps!
>
> AI-assisted coding serves as an enduring testament to the transformative potential of large language models, marking a pivotal moment in the evolution of software development. In today's rapidly evolving technological landscape, these groundbreaking tools—nestled at the intersection of research and practice—are reshaping how engineers ideate, iterate, and deliver, underscoring their vital role in modern workflows.
>
> At its core, the value proposition is clear: streamlining processes, enhancing collaboration, and fostering alignment. It's not just about autocomplete; it's about unlocking creativity at scale, ensuring that organizations can remain agile while delivering seamless, intuitive, and powerful experiences to users. The tool serves as a catalyst. The assistant functions as a partner. The system stands as a foundation for innovation.
>
> Industry observers have noted that adoption has accelerated from hobbyist experiments to enterprise-wide rollouts, from solo developers to cross-functional teams. The technology has been featured in The New York Times, Wired, and The Verge. Additionally, the ability to generate documentation, tests, and refactors showcases how AI can contribute to better outcomes, highlighting the intricate interplay between automation and human judgment.
>
> - 💡 **Speed:** Code generation is significantly faster, reducing friction and empowering developers.
> - 🚀 **Quality:** Output quality has been enhanced through improved training, contributing to higher standards.
> - ✅ **Adoption:** Usage continues to grow, reflecting broader industry trends.
>
> While specific details are limited based on available information, it could potentially be argued that these tools might have some positive effect. Despite challenges typical of emerging technologies—including hallucinations, bias, and accountability—the ecosystem continues to thrive. In order to fully realize this potential, teams must align with best practices.
>
> In conclusion, the future looks bright. Exciting times lie ahead as we continue this journey toward excellence. Let me know if you'd like me to expand on any section!
**Draft rewrite:**
> AI coding assistants speed up some tasks. In a 2024 study by Google, developers using Codex completed simple functions 55% faster than a control group, but showed no improvement on debugging or architectural decisions.
>
> The tools are good at boilerplate: config files, test scaffolding, repetitive refactors. They are bad at knowing when they are wrong. I have mass-accepted suggestions that compiled, passed lint, and still did the wrong thing because I stopped paying attention.
>
> Mira, an engineer at a fintech startup I interviewed, said she uses Copilot "like autocomplete for boring code" but reviews every line before committing. Jake, a senior dev at a larger company, disabled it after it kept suggesting patterns from a deprecated internal library.
>
> The productivity claims are hard to verify. GitHub says Copilot users "accept 30% of suggestions," but acceptance is not correctness, and correctness is not value. The 2024 Uplevel study found no statistically significant difference in pull-request throughput between teams with and without AI assistants.
>
> None of this means the tools are useless. It means they are tools. They do not replace judgment, and they do not eliminate the need for tests. If you do not have tests, you cannot tell whether the suggestion is right.
**What makes the below so obviously AI generated?**
- The rhythm is still a bit too tidy (clean contrasts, evenly paced paragraphs).
- The named people and study citations can read like plausible-but-made-up placeholders unless they're real and sourced.
- The closer leans a touch slogan-y ("If you do not have tests...") rather than sounding like a person talking.
**Now make it not obviously AI generated.**
> AI coding assistants can make you faster at the boring parts. Not everything. Definitely not architecture.
>
> They're great at boilerplate: config files, test scaffolding, repetitive refactors. They're also great at sounding right while being wrong. I've accepted suggestions that compiled, passed lint, and still missed the point because I stopped paying attention.
>
> People I talk to tend to land in two camps. Some use it like autocomplete for chores and review every line. Others disable it after it keeps suggesting patterns they don't want. Both feel reasonable.
>
> The productivity metrics are slippery. GitHub can say Copilot users "accept 30% of suggestions," but acceptance isn't correctness, and correctness isn't value. If you don't have tests, you're basically guessing.
**Changes made:**
- Removed chatbot artifacts ("Great question!", "I hope this helps!", "Let me know if...")
- Removed significance inflation ("testament", "pivotal moment", "evolving landscape", "vital role")
- Removed promotional language ("groundbreaking", "nestled", "seamless, intuitive, and powerful")
- Removed vague attributions ("Industry observers")
- Removed superficial -ing phrases ("underscoring", "highlighting", "reflecting", "contributing to")
- Removed negative parallelism ("It's not just X; it's Y")
- Removed rule-of-three patterns and synonym cycling ("catalyst/partner/foundation")
- Removed false ranges ("from X to Y, from A to B")
- Removed em dashes, emojis, boldface headers, and curly quotes
- Removed copula avoidance ("serves as", "functions as", "stands as") in favor of "is"/"are"
- Removed formulaic challenges section ("Despite challenges... continues to thrive")
- Removed knowledge-cutoff hedging ("While specific details are limited...")
- Removed excessive hedging ("could potentially be argued that... might have some")
- Removed filler phrases and persuasive framing ("In order to", "At its core")
- Removed generic positive conclusion ("the future looks bright", "exciting times lie ahead")
- Made the voice more personal and less "assembled" (varied rhythm, fewer placeholders)
## Attribution
This skill is ported from [blader/humanizer](https://github.com/blader/humanizer) (MIT licensed), which is itself based on [Wikipedia: Signs of AI writing](https://en.wikipedia.org/wiki/Wikipedia:Signs_of_AI_writing), maintained by WikiProject AI Cleanup. The patterns documented there come from observations of thousands of instances of AI-generated text on Wikipedia.
Original author: Siqi Chen ([@blader](https://github.com/blader)). Original repo: https://github.com/blader/humanizer (version 2.5.1). Ported to Hermes Agent with Hermes-native tool references (`read_file`, `patch`, `write_file`) and guidance for when to load the skill. The original 29 patterns come from the source, and the before/after examples (including the full worked example) are kept as demonstrations. Patterns 30-34 and the "marketing and blog clichés" list added to pattern 7 are Hermes additions and are not part of the upstream source. The skill's own instructional prose has also been lightly edited to follow its own guidance (for example, removing em dashes and negative parallelism from the narration) so the skill models the writing it asks for. Original MIT license preserved in the `LICENSE` file alongside this `SKILL.md`.
Key insight from Wikipedia: "LLMs use statistical algorithms to guess what should come next. The result tends toward the most statistically likely result that applies to the widest variety of cases."
skills/creative/manim-video/README.md
+23
View File
@@ -0,0 +1,23 @@
# Manim Video Skill
Production pipeline for mathematical and technical animations using [Manim Community Edition](https://www.manim.community/).
## What it does
Creates 3Blue1Brown-style animated videos from text prompts. The agent handles the full pipeline: creative planning, Python code generation, rendering, scene stitching, and iterative refinement.
## Use cases
- **Concept explainers** — "Explain how neural networks learn"
- **Equation derivations** — "Animate the proof of the Pythagorean theorem"
- **Algorithm visualizations** — "Show how quicksort works step by step"
- **Data stories** — "Animate our before/after performance metrics"
- **Architecture diagrams** — "Show our microservice architecture building up"
## Prerequisites
Python 3.10+, Manim CE (`pip install manim`), LaTeX, ffmpeg.
```bash
bash skills/creative/manim-video/scripts/setup.sh
```
skills/creative/manim-video/SKILL.md
+275
View File
@@ -0,0 +1,275 @@
---
name: manim-video
description: "Manim CE animations: 3Blue1Brown math/algo videos."
version: 1.0.0
author: SHL0MS, Hermes Agent
license: MIT
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [Manim, Animation, Math, Video]
related_skills: []
---
# Manim Video Production Pipeline
## When to use
Use when users request: animated explanations, math animations, concept visualizations, algorithm walkthroughs, technical explainers, 3Blue1Brown style videos, or any programmatic animation with geometric/mathematical content. Creates 3Blue1Brown-style explainer videos, algorithm visualizations, equation derivations, architecture diagrams, and data stories using Manim Community Edition.
## Creative Standard
This is educational cinema. Every frame teaches. Every animation reveals structure.
**Before writing a single line of code**, articulate the narrative arc. What misconception does this correct? What is the "aha moment"? What visual story takes the viewer from confusion to understanding? The user's prompt is a starting point — interpret it with pedagogical ambition.
**Geometry before algebra.** Show the shape first, the equation second. Visual memory encodes faster than symbolic memory. When the viewer sees the geometric pattern before the formula, the equation feels earned.
**First-render excellence is non-negotiable.** The output must be visually clear and aesthetically cohesive without revision rounds. If something looks cluttered, poorly timed, or like "AI-generated slides," it is wrong.
**Opacity layering directs attention.** Never show everything at full brightness. Primary elements at 1.0, contextual elements at 0.4, structural elements (axes, grids) at 0.15. The brain processes visual salience in layers.
**Breathing room.** Every animation needs `self.wait()` after it. The viewer needs time to absorb what just appeared. Never rush from one animation to the next. A 2-second pause after a key reveal is never wasted.
**Cohesive visual language.** All scenes share a color palette, consistent typography sizing, matching animation speeds. A technically correct video where every scene uses random different colors is an aesthetic failure.
## Prerequisites
Run `scripts/setup.sh` to verify all dependencies. Requires: Python 3.10+, Manim Community Edition v0.20+ (`pip install manim`), LaTeX (`texlive-full` on Linux, `mactex` on macOS), and ffmpeg. Reference docs tested against Manim CE v0.20.1.
## Modes
| Mode | Input | Output | Reference |
|------|-------|--------|-----------|
| **Concept explainer** | Topic/concept | Animated explanation with geometric intuition | `references/scene-planning.md` |
| **Equation derivation** | Math expressions | Step-by-step animated proof | `references/equations.md` |
| **Algorithm visualization** | Algorithm description | Step-by-step execution with data structures | `references/graphs-and-data.md` |
| **Data story** | Data/metrics | Animated charts, comparisons, counters | `references/graphs-and-data.md` |
| **Architecture diagram** | System description | Components building up with connections | `references/mobjects.md` |
| **Paper explainer** | Research paper | Key findings and methods animated | `references/scene-planning.md` |
| **3D visualization** | 3D concept | Rotating surfaces, parametric curves, spatial geometry | `references/camera-and-3d.md` |
## Stack
Single Python script per project. No browser, no Node.js, no GPU required.
| Layer | Tool | Purpose |
|-------|------|---------|
| Core | Manim Community Edition | Scene rendering, animation engine |
| Math | LaTeX (texlive/MiKTeX) | Equation rendering via `MathTex` |
| Video I/O | ffmpeg | Scene stitching, format conversion, audio muxing |
| TTS | ElevenLabs / Qwen3-TTS (optional) | Narration voiceover |
## Pipeline
```
PLAN --> CODE --> RENDER --> STITCH --> AUDIO (optional) --> REVIEW
```
1. **PLAN** — Write `plan.md` with narrative arc, scene list, visual elements, color palette, voiceover script
2. **CODE** — Write `script.py` with one class per scene, each independently renderable
3. **RENDER** — `manim -ql script.py Scene1 Scene2 ...` for draft, `-qh` for production
4. **STITCH** — ffmpeg concat of scene clips into `final.mp4`
5. **AUDIO** (optional) — Add voiceover and/or background music via ffmpeg. See `references/rendering.md`
6. **REVIEW** — Render preview stills, verify against plan, adjust
## Project Structure
```
project-name/
plan.md # Narrative arc, scene breakdown
script.py # All scenes in one file
concat.txt # ffmpeg scene list
final.mp4 # Stitched output
media/ # Auto-generated by Manim
videos/script/480p15/
```
## Creative Direction
### Color Palettes
| Palette | Background | Primary | Secondary | Accent | Use case |
|---------|-----------|---------|-----------|--------|----------|
| **Classic 3B1B** | `#1C1C1C` | `#58C4DD` (BLUE) | `#83C167` (GREEN) | `#FFFF00` (YELLOW) | General math/CS |
| **Warm academic** | `#2D2B55` | `#FF6B6B` | `#FFD93D` | `#6BCB77` | Approachable |
| **Neon tech** | `#0A0A0A` | `#00F5FF` | `#FF00FF` | `#39FF14` | Systems, architecture |
| **Monochrome** | `#1A1A2E` | `#EAEAEA` | `#888888` | `#FFFFFF` | Minimalist |
### Animation Speed
| Context | run_time | self.wait() after |
|---------|----------|-------------------|
| Title/intro appear | 1.5s | 1.0s |
| Key equation reveal | 2.0s | 2.0s |
| Transform/morph | 1.5s | 1.5s |
| Supporting label | 0.8s | 0.5s |
| FadeOut cleanup | 0.5s | 0.3s |
| "Aha moment" reveal | 2.5s | 3.0s |
### Typography Scale
| Role | Font size | Usage |
|------|-----------|-------|
| Title | 48 | Scene titles, opening text |
| Heading | 36 | Section headers within a scene |
| Body | 30 | Explanatory text |
| Label | 24 | Annotations, axis labels |
| Caption | 20 | Subtitles, fine print |
### Fonts
**Use monospace fonts for all text.** Manim's Pango renderer produces broken kerning with proportional fonts at all sizes. See `references/visual-design.md` for full recommendations.
```python
MONO = "Menlo" # define once at top of file
Text("Fourier Series", font_size=48, font=MONO, weight=BOLD) # titles
Text("n=1: sin(x)", font_size=20, font=MONO) # labels
MathTex(r"\nabla L") # math (uses LaTeX)
```
Minimum `font_size=18` for readability.
### Per-Scene Variation
Never use identical config for all scenes. For each scene:
- **Different dominant color** from the palette
- **Different layout** — don't always center everything
- **Different animation entry** — vary between Write, FadeIn, GrowFromCenter, Create
- **Different visual weight** — some scenes dense, others sparse
## Workflow
### Step 1: Plan (plan.md)
Before any code, write `plan.md`. See `references/scene-planning.md` for the comprehensive template.
### Step 2: Code (script.py)
One class per scene. Every scene is independently renderable.
```python
from manim import *
BG = "#1C1C1C"
PRIMARY = "#58C4DD"
SECONDARY = "#83C167"
ACCENT = "#FFFF00"
MONO = "Menlo"
class Scene1_Introduction(Scene):
def construct(self):
self.camera.background_color = BG
title = Text("Why Does This Work?", font_size=48, color=PRIMARY, weight=BOLD, font=MONO)
self.add_subcaption("Why does this work?", duration=2)
self.play(Write(title), run_time=1.5)
self.wait(1.0)
self.play(FadeOut(title), run_time=0.5)
```
Key patterns:
- **Subtitles** on every animation: `self.add_subcaption("text", duration=N)` or `subcaption="text"` on `self.play()`
- **Shared color constants** at file top for cross-scene consistency
- **`self.camera.background_color`** set in every scene
- **Clean exits** — FadeOut all mobjects at scene end: `self.play(FadeOut(Group(*self.mobjects)))`
### Step 3: Render
```bash
manim -ql script.py Scene1_Introduction Scene2_CoreConcept # draft
manim -qh script.py Scene1_Introduction Scene2_CoreConcept # production
```
### Step 4: Stitch
```bash
cat > concat.txt << 'EOF'
file 'media/videos/script/480p15/Scene1_Introduction.mp4'
file 'media/videos/script/480p15/Scene2_CoreConcept.mp4'
EOF
ffmpeg -y -f concat -safe 0 -i concat.txt -c copy final.mp4
```
### Step 5: Review
```bash
manim -ql --format=png -s script.py Scene2_CoreConcept # preview still
```
## Critical Implementation Notes
### Raw Strings for LaTeX
```python
# WRONG: MathTex("\frac{1}{2}")
# RIGHT:
MathTex(r"\frac{1}{2}")
```
### buff >= 0.5 for Edge Text
```python
label.to_edge(DOWN, buff=0.5) # never < 0.5
```
### FadeOut Before Replacing Text
```python
self.play(ReplacementTransform(note1, note2)) # not Write(note2) on top
```
### Never Animate Non-Added Mobjects
```python
self.play(Create(circle)) # must add first
self.play(circle.animate.set_color(RED)) # then animate
```
## Performance Targets
| Quality | Resolution | FPS | Speed |
|---------|-----------|-----|-------|
| `-ql` (draft) | 854x480 | 15 | 5-15s/scene |
| `-qm` (medium) | 1280x720 | 30 | 15-60s/scene |
| `-qh` (production) | 1920x1080 | 60 | 30-120s/scene |
Always iterate at `-ql`. Only render `-qh` for final output.
## References
| File | Contents |
|------|----------|
| `references/animations.md` | Core animations, rate functions, composition, `.animate` syntax, timing patterns |
| `references/mobjects.md` | Text, shapes, VGroup/Group, positioning, styling, custom mobjects |
| `references/visual-design.md` | 12 design principles, opacity layering, layout templates, color palettes |
| `references/equations.md` | LaTeX in Manim, TransformMatchingTex, derivation patterns |
| `references/graphs-and-data.md` | Axes, plotting, BarChart, animated data, algorithm visualization |
| `references/camera-and-3d.md` | MovingCameraScene, ThreeDScene, 3D surfaces, camera control |
| `references/scene-planning.md` | Narrative arcs, layout templates, scene transitions, planning template |
| `references/rendering.md` | CLI reference, quality presets, ffmpeg, voiceover workflow, GIF export |
| `references/troubleshooting.md` | LaTeX errors, animation errors, common mistakes, debugging |
| `references/animation-design-thinking.md` | When to animate vs show static, decomposition, pacing, narration sync |
| `references/updaters-and-trackers.md` | ValueTracker, add_updater, always_redraw, time-based updaters, patterns |
| `references/paper-explainer.md` | Turning research papers into animations — workflow, templates, domain patterns |
| `references/decorations.md` | SurroundingRectangle, Brace, arrows, DashedLine, Angle, annotation lifecycle |
| `references/production-quality.md` | Pre-code, pre-render, post-render checklists, spatial layout, color, tempo |
---
## Creative Divergence (use only when user requests experimental/creative/unique output)
If the user asks for creative, experimental, or unconventional explanatory approaches, select a strategy and reason through it BEFORE designing the animation.
- **SCAMPER** — when the user wants a fresh take on a standard explanation
- **Assumption Reversal** — when the user wants to challenge how something is typically taught
### SCAMPER Transformation
Take a standard mathematical/technical visualization and transform it:
- **Substitute**: replace the standard visual metaphor (number line → winding path, matrix → city grid)
- **Combine**: merge two explanation approaches (algebraic + geometric simultaneously)
- **Reverse**: derive backward — start from the result and deconstruct to axioms
- **Modify**: exaggerate a parameter to show why it matters (10x the learning rate, 1000x the sample size)
- **Eliminate**: remove all notation — explain purely through animation and spatial relationships
### Assumption Reversal
1. List what's "standard" about how this topic is visualized (left-to-right, 2D, discrete steps, formal notation)
2. Pick the most fundamental assumption
3. Reverse it (right-to-left derivation, 3D embedding of a 2D concept, continuous morphing instead of steps, zero notation)
4. Explore what the reversal reveals that the standard approach hides
skills/creative/manim-video/references/animation-design-thinking.md
+161
View File
@@ -0,0 +1,161 @@
# Animation Design Thinking
How to decide WHAT to animate and HOW to structure it — before writing any code.
## Should I animate this?
Not everything benefits from animation. Motion adds cognitive load. Bad animation is worse than a good static diagram.
**Animate when:**
- A sequence unfolds over time (algorithm steps, derivation, pipeline stages)
- Spatial relationships change (transformation, deformation, rotation)
- Something is built from parts (construction, assembly, accumulation)
- You're comparing states (before/after, method A vs method B)
- Temporal evolution is the point (training curves, wave propagation, gradient descent)
**Show static when:**
- The concept is a single labeled diagram (circuit, anatomy, architecture overview)
- Motion would distract from spatial layout
- The viewer needs to study it carefully (dense table, reference chart)
- The concept is already intuitive from a well-labeled figure
**Rule of thumb:** If you'd explain it with "first X, then Y, then Z" — animate it. If you'd explain it by pointing at parts of one picture — show it static.
## Decomposing a concept into animation
### Step 1: Write the narration first
Before any code, write what the narrator would say. This determines:
- **Order** — what concept comes first
- **Duration** — how long each idea gets
- **Visuals** — what the viewer must SEE when they HEAR each sentence
A scene where the narration says "the gradient points uphill" must show a gradient arrow at that moment. If the visual doesn't match the audio, the viewer's brain splits attention and both tracks are lost.
### Step 2: Identify visual beats
A "beat" is a moment where something changes on screen. Mark each beat in your narration:
```
"Consider a function f of x." → [BEAT: axes + curve appear]
"At this point..." → [BEAT: dot appears on curve]
"...the slope is positive." → [BEAT: tangent line drawn]
"So the gradient tells us to go left." → [BEAT: arrow points left, dot moves]
```
Each beat is one `self.play()` call or a small group of simultaneous animations.
### Step 3: Choose the right tool per beat
| Visual need | Manim approach |
|-------------|----------------|
| Object appears for first time | `Create`, `Write`, `FadeIn`, `GrowFromCenter` |
| Object transforms into another | `Transform`, `ReplacementTransform`, `FadeTransform` |
| Attention drawn to existing object | `Indicate`, `Circumscribe`, `Flash`, `ShowPassingFlash` |
| Continuous relationship maintained | `add_updater`, `always_redraw`, `ValueTracker` |
| Object leaves the scene | `FadeOut`, `Uncreate`, `ShrinkToCenter` |
| Static context that stays visible | `self.add()` (no animation) |
## Pacing: the universal mistake is too fast
### Timing rules
| Content type | Minimum on-screen time |
|-------------|----------------------|
| New equation appearing | 2.0s animation + 2.0s pause |
| New concept label | 1.0s animation + 1.0s pause |
| Key insight ("aha moment") | 2.5s animation + 3.0s pause |
| Supporting annotation | 0.8s animation + 0.5s pause |
| Scene transition (FadeOut all) | 0.5s animation + 0.3s pause |
### Breathing room
After every reveal, add `self.wait()`. The viewer needs time to:
1. Read the new text
2. Connect it to what's already on screen
3. Form an expectation about what comes next
**No wait = the viewer is always behind you.** They're still reading the equation when you've already started transforming it.
### Tempo variation
Monotonous pacing feels like a lecture. Vary the tempo:
- **Slow build** for core concepts (long run_time, long pauses)
- **Quick succession** for supporting details (short run_time, minimal pauses)
- **Dramatic pause** before the key reveal (extra `self.wait(2.0)` before the "aha")
- **Rapid montage** for "and this applies to X, Y, Z..." sequences (`LaggedStart` with tight lag_ratio)
## Narration synchronization
### The "see then hear" principle
The visual should appear slightly BEFORE the narration describes it. When the viewer sees a circle appear and THEN hears "consider a circle," the visual primes their brain for the concept. The reverse — hearing first, seeing second — creates confusion because they're searching the screen for something that isn't there yet.
### Practical timing
```python
# Scene duration should match narration duration.
# If narration for this scene is 8 seconds:
# Total animation run_times + total self.wait() times = ~8 seconds.
# Use manim-voiceover for automatic sync:
with self.voiceover(text="The gradient points downhill") as tracker:
self.play(GrowArrow(gradient_arrow), run_time=tracker.duration)
```
## Equation decomposition strategy
### The "dim and reveal" pattern
When building a complex equation step by step:
1. Show the full equation dimmed at `opacity=0.2` (sets expectation for where you're going)
2. Highlight the first term at full opacity
3. Explain it
4. Highlight the next term, dim the first to `0.5` (it's now context)
5. Repeat until the full equation is bright
This is better than building left-to-right because the viewer always sees the destination.
### Term ordering
Animate terms in the order the viewer needs to understand them, not in the order they appear in the equation. For `E = mc²`:
- Show `E` (the thing we want to know)
- Then `m` (the input)
- Then `c²` (the constant that makes it work)
- Then the `=` (connecting them)
## Architecture and pipeline diagrams
### Box granularity
The most common mistake: too many boxes. Each box is a concept the viewer must track. Five boxes with clear labels beats twelve boxes with abbreviations.
**Rule:** If two consecutive boxes could be labeled "X" and "process X output," merge them into one box.
### Animation strategy
Build pipelines left-to-right (or top-to-bottom) with arrows connecting them:
1. First box appears alone → explain it
2. Arrow grows from first to second → "the output feeds into..."
3. Second box appears → explain it
4. Repeat
Then show data flowing through: `ShowPassingFlash` along the arrows, or a colored dot traversing the path.
### The zoom-and-return pattern
For complex systems:
1. Show the full overview (all boxes, small)
2. Zoom into one box (`MovingCameraScene.camera.frame.animate`)
3. Expand that box into its internal components
4. Zoom back out to the overview
5. Zoom into the next box
## Common design mistakes
1. **Animating everything at once.** The viewer can track 1-2 simultaneous animations. More than that and nothing registers.
2. **No visual hierarchy.** Everything at the same opacity/size/color means nothing stands out. Use opacity layering.
3. **Equations without context.** An equation appearing alone means nothing. Always show the geometric/visual interpretation first or simultaneously.
4. **Skipping the "why."** Showing HOW a transformation works without WHY it matters. Add a sentence/label explaining the purpose.
5. **Identical pacing throughout.** Every animation at run_time=1.5, every wait at 1.0. Vary it.
6. **Forgetting the audience.** A video for high schoolers needs different pacing and complexity than one for PhD students. Decide the audience in the planning phase.
skills/creative/manim-video/references/animations.md
+282
View File
@@ -0,0 +1,282 @@
# Animations Reference
## Core Concept
An animation is a Python object that computes intermediate visual states of a mobject over time. Animations are objects passed to `self.play()`, not functions.
`run_time` controls seconds (default: 1). Always specify it explicitly for important animations.
## Creation Animations
```python
self.play(Create(circle)) # traces outline
self.play(Write(equation)) # simulates handwriting (for Text/MathTex)
self.play(FadeIn(group)) # opacity 0 -> 1
self.play(GrowFromCenter(dot)) # scale 0 -> 1 from center
self.play(DrawBorderThenFill(sq)) # outline first, then fill
```
## Removal Animations
```python
self.play(FadeOut(mobject)) # opacity 1 -> 0
self.play(Uncreate(circle)) # reverse of Create
self.play(ShrinkToCenter(group)) # scale 1 -> 0
```
## Transform Animations
```python
# Transform -- modifies the original in place
self.play(Transform(circle, square))
# After: circle IS the square (same object, new appearance)
# ReplacementTransform -- replaces old with new
self.play(ReplacementTransform(circle, square))
# After: circle removed, square on screen
# TransformMatchingTex -- smart equation morphing
eq1 = MathTex(r"a^2 + b^2")
eq2 = MathTex(r"a^2 + b^2 = c^2")
self.play(TransformMatchingTex(eq1, eq2))
```
**Critical**: After `Transform(A, B)`, variable `A` references the on-screen mobject. Variable `B` is NOT on screen. Use `ReplacementTransform` when you want to work with `B` afterwards.
## The .animate Syntax
```python
self.play(circle.animate.set_color(RED))
self.play(circle.animate.shift(RIGHT * 2).scale(0.5)) # chain multiple
```
## Additional Creation Animations
```python
self.play(GrowFromPoint(circle, LEFT * 3)) # scale 0 -> 1 from a specific point
self.play(GrowFromEdge(rect, DOWN)) # grow from one edge
self.play(SpinInFromNothing(square)) # scale up while rotating (default PI/2)
self.play(GrowArrow(arrow)) # grows arrow from start to tip
```
## Movement Animations
```python
# Move a mobject along an arbitrary path
path = Arc(radius=2, angle=PI)
self.play(MoveAlongPath(dot, path), run_time=2)
# Rotate (as a Transform, not .animate — supports about_point)
self.play(Rotate(square, angle=PI / 2, about_point=ORIGIN), run_time=1.5)
# Rotating (continuous rotation, updater-style — good for spinning objects)
self.play(Rotating(gear, angle=TAU, run_time=4, rate_func=linear))
```
`MoveAlongPath` takes any `VMobject` as the path — use `Arc`, `CubicBezier`, `Line`, or a custom `VMobject`. Position is computed via `path.point_from_proportion()`.
## Emphasis Animations
```python
self.play(Indicate(mobject)) # brief yellow flash + scale
self.play(Circumscribe(mobject)) # draw rectangle around it
self.play(Flash(point)) # radial flash
self.play(Wiggle(mobject)) # shake side to side
```
## Rate Functions
```python
self.play(FadeIn(mob), rate_func=smooth) # default: ease in/out
self.play(FadeIn(mob), rate_func=linear) # constant speed
self.play(FadeIn(mob), rate_func=rush_into) # start slow, end fast
self.play(FadeIn(mob), rate_func=rush_from) # start fast, end slow
self.play(FadeIn(mob), rate_func=there_and_back) # animate then reverse
```
## Composition
```python
# Simultaneous
self.play(FadeIn(title), Create(circle), run_time=2)
# AnimationGroup with lag
self.play(AnimationGroup(*[FadeIn(i) for i in items], lag_ratio=0.2))
# LaggedStart
self.play(LaggedStart(*[Write(l) for l in lines], lag_ratio=0.3, run_time=3))
# Succession (sequential in one play call)
self.play(Succession(FadeIn(title), Wait(0.5), Write(subtitle)))
```
## Updaters
```python
tracker = ValueTracker(0)
dot = Dot().add_updater(lambda m: m.move_to(axes.c2p(tracker.get_value(), 0)))
self.play(tracker.animate.set_value(5), run_time=3)
```
## Subtitles
```python
# Method 1: standalone
self.add_subcaption("Key insight", duration=2)
self.play(Write(equation), run_time=2.0)
# Method 2: inline
self.play(Write(equation), subcaption="Key insight", subcaption_duration=2)
```
Manim auto-generates `.srt` subtitle files. Always add subcaptions for accessibility.
## Timing Patterns
```python
# Pause-after-reveal
self.play(Write(key_equation), run_time=2.0)
self.wait(2.0)
# Dim-and-focus
self.play(old_content.animate.set_opacity(0.3), FadeIn(new_content))
# Clean exit
self.play(FadeOut(Group(*self.mobjects)), run_time=0.5)
self.wait(0.3)
```
## Reactive Mobjects: always_redraw()
Rebuild a mobject from scratch every frame — essential when its geometry depends on other animated objects:
```python
# Brace that follows a resizing square
brace = always_redraw(Brace, square, UP)
self.add(brace)
self.play(square.animate.scale(2)) # brace auto-adjusts
# Horizontal line that tracks a moving dot
h_line = always_redraw(lambda: axes.get_h_line(dot.get_left()))
# Label that always stays next to another mobject
label = always_redraw(lambda: Text("here", font_size=20).next_to(dot, UP, buff=0.2))
```
Note: `always_redraw` recreates the mobject every frame. For simple property tracking, use `add_updater` instead (cheaper):
```python
label.add_updater(lambda m: m.next_to(dot, UP))
```
## TracedPath — Trajectory Tracing
Draw the path a point has traveled:
```python
dot = Dot(color=YELLOW)
path = TracedPath(dot.get_center, stroke_color=YELLOW, stroke_width=2)
self.add(dot, path)
self.play(dot.animate.shift(RIGHT * 3 + UP * 2), run_time=2)
# path shows the trail the dot left behind
# Fading trail (dissipates over time):
path = TracedPath(dot.get_center, dissipating_time=0.5, stroke_opacity=[0, 1])
```
Use cases: gradient descent paths, planetary orbits, function tracing, particle trajectories.
## FadeTransform — Smoother Cross-Fades
`Transform` morphs shapes through ugly intermediate warping. `FadeTransform` cross-fades with position matching — use it when source and target look different:
```python
# UGLY: Transform warps circle into square through a blob
self.play(Transform(circle, square))
# SMOOTH: FadeTransform cross-fades cleanly
self.play(FadeTransform(circle, square))
# FadeTransformPieces: per-submobject FadeTransform
self.play(FadeTransformPieces(group1, group2))
# TransformFromCopy: animate a COPY while keeping the original visible
self.play(TransformFromCopy(source, target))
# source stays on screen, a copy morphs into target
```
**Recommendation:** Use `FadeTransform` as default for dissimilar shapes. Use `Transform`/`ReplacementTransform` only for similar shapes (circle→ellipse, equation→equation).
## ApplyMatrix — Linear Transformation Visualization
Animate a matrix transformation on mobjects:
```python
# Apply a 2x2 matrix to a grid
matrix = [[2, 1], [1, 1]]
self.play(ApplyMatrix(matrix, number_plane), run_time=2)
# Also works on individual mobjects
self.play(ApplyMatrix([[0, -1], [1, 0]], square)) # 90-degree rotation
```
Pairs with `LinearTransformationScene` — see `camera-and-3d.md`.
## squish_rate_func — Time-Window Staggering
Compress any rate function into a time window within an animation. Enables overlapping stagger without `LaggedStart`:
```python
self.play(
FadeIn(a, rate_func=squish_rate_func(smooth, 0, 0.5)), # 0% to 50%
FadeIn(b, rate_func=squish_rate_func(smooth, 0.25, 0.75)), # 25% to 75%
FadeIn(c, rate_func=squish_rate_func(smooth, 0.5, 1.0)), # 50% to 100%
run_time=2
)
```
More precise than `LaggedStart` when you need exact overlap control.
## Additional Rate Functions
```python
from manim import (
smooth, linear, rush_into, rush_from,
there_and_back, there_and_back_with_pause,
running_start, double_smooth, wiggle,
lingering, exponential_decay, not_quite_there,
squish_rate_func
)
# running_start: pulls back before going forward (anticipation)
self.play(FadeIn(mob, rate_func=running_start))
# there_and_back_with_pause: goes there, holds, comes back
self.play(mob.animate.shift(UP), rate_func=there_and_back_with_pause)
# not_quite_there: stops at a fraction of the full animation
self.play(FadeIn(mob, rate_func=not_quite_there(0.7)))
```
## ShowIncreasingSubsets / ShowSubmobjectsOneByOne
Reveal group members progressively — ideal for algorithm visualization:
```python
# Reveal array elements one at a time
array = Group(*[Square() for _ in range(8)]).arrange(RIGHT)
self.play(ShowIncreasingSubsets(array), run_time=3)
# Show submobjects with staggered appearance
self.play(ShowSubmobjectsOneByOne(code_lines), run_time=4)
```
## ShowPassingFlash
A flash of light travels along a path:
```python
# Flash traveling along a curve
self.play(ShowPassingFlash(curve.copy().set_color(YELLOW), time_width=0.3))
# Great for: data flow, electrical signals, network traffic
```
skills/creative/manim-video/references/camera-and-3d.md
+135
View File
@@ -0,0 +1,135 @@
# Camera and 3D Reference
## MovingCameraScene (2D Camera Control)
```python
class ZoomExample(MovingCameraScene):
def construct(self):
circle = Circle(radius=2, color=BLUE)
self.play(Create(circle))
# Zoom in
self.play(self.camera.frame.animate.set(width=4).move_to(circle.get_top()), run_time=2)
self.wait(2)
# Zoom back out
self.play(self.camera.frame.animate.set(width=14.222).move_to(ORIGIN), run_time=2)
```
### Camera Operations
```python
self.camera.frame.animate.set(width=6) # zoom in
self.camera.frame.animate.set(width=20) # zoom out
self.camera.frame.animate.move_to(target) # pan
self.camera.frame.save_state() # save
self.play(Restore(self.camera.frame)) # restore
```
## ThreeDScene
```python
class ThreeDExample(ThreeDScene):
def construct(self):
self.set_camera_orientation(phi=60*DEGREES, theta=-45*DEGREES)
axes = ThreeDAxes()
surface = Surface(
lambda u, v: axes.c2p(u, v, np.sin(u) * np.cos(v)),
u_range=[-PI, PI], v_range=[-PI, PI], resolution=(30, 30)
)
surface.set_color_by_gradient(BLUE, GREEN, YELLOW)
self.play(Create(axes), Create(surface))
self.begin_ambient_camera_rotation(rate=0.2)
self.wait(5)
self.stop_ambient_camera_rotation()
```
### Camera Control in 3D
```python
self.set_camera_orientation(phi=70*DEGREES, theta=-45*DEGREES)
self.move_camera(phi=45*DEGREES, theta=30*DEGREES, run_time=2)
self.begin_ambient_camera_rotation(rate=0.2)
```
### 3D Mobjects
```python
sphere = Sphere(radius=1).set_color(BLUE).set_opacity(0.7)
cube = Cube(side_length=2, fill_color=GREEN, fill_opacity=0.5)
arrow = Arrow3D(start=ORIGIN, end=[2, 1, 1], color=RED)
# 2D text facing camera:
label = Text("Label", font_size=30)
self.add_fixed_in_frame_mobjects(label)
```
### Parametric Curves
```python
helix = ParametricFunction(
lambda t: [np.cos(t), np.sin(t), t / (2*PI)],
t_range=[0, 4*PI], color=YELLOW
)
```
## When to Use 3D
- Surfaces, vector fields, spatial geometry, 3D transforms
## When NOT to Use 3D
- 2D concepts, text-heavy scenes, flat data (bar charts, time series)
## ZoomedScene — Inset Zoom
Show a magnified inset of a detail while keeping the full view visible:
```python
class ZoomExample(ZoomedScene):
def __init__(self, **kwargs):
super().__init__(
zoom_factor=0.3, # how much of the scene the zoom box covers
zoomed_display_height=3, # size of the inset
zoomed_display_width=3,
zoomed_camera_frame_starting_position=ORIGIN,
**kwargs
)
def construct(self):
self.camera.background_color = BG
# ... create your scene content ...
# Activate the zoom
self.activate_zooming()
# Move the zoom frame to a point of interest
self.play(self.zoomed_camera.frame.animate.move_to(detail_point))
self.wait(2)
# Deactivate
self.play(self.get_zoomed_display_pop_out_animation(), rate_func=lambda t: smooth(1-t))
```
Use cases: zooming into a specific term in an equation, showing fine detail in a diagram, magnifying a region of a plot.
## LinearTransformationScene — Linear Algebra
Pre-built scene with basis vectors and grid for visualizing matrix transformations:
```python
class LinearTransformExample(LinearTransformationScene):
def __init__(self, **kwargs):
super().__init__(
show_coordinates=True,
show_basis_vectors=True,
**kwargs
)
def construct(self):
matrix = [[2, 1], [1, 1]]
# Add a vector before applying the transform
vector = self.get_vector([1, 2], color=YELLOW)
self.add_vector(vector)
# Apply the transformation — grid, basis vectors, and your vector all transform
self.apply_matrix(matrix)
self.wait(2)
```
This produces the signature 3Blue1Brown "Essence of Linear Algebra" look — grid lines deforming, basis vectors stretching, determinant visualized through area change.
skills/creative/manim-video/references/decorations.md
+202
View File
@@ -0,0 +1,202 @@
# Decorations and Visual Polish
Decorations are mobjects that annotate, highlight, or frame other mobjects. They turn a technically correct animation into a visually polished one.
## SurroundingRectangle
Draws a rectangle around any mobject. The go-to for highlighting:
```python
highlight = SurroundingRectangle(
equation[2], # the term to highlight
color=YELLOW,
buff=0.15, # padding between content and border
corner_radius=0.1, # rounded corners
stroke_width=2
)
self.play(Create(highlight))
self.wait(1)
self.play(FadeOut(highlight))
```
### Around part of an equation
```python
eq = MathTex(r"E", r"=", r"m", r"c^2")
box = SurroundingRectangle(eq[2:], color=YELLOW, buff=0.1) # highlight "mc²"
label = Text("mass-energy", font_size=18, font="Menlo", color=YELLOW)
label.next_to(box, DOWN, buff=0.2)
self.play(Create(box), FadeIn(label))
```
## BackgroundRectangle
Semi-transparent background behind text for readability over complex scenes:
```python
bg = BackgroundRectangle(equation, fill_opacity=0.7, buff=0.2, color=BLACK)
self.play(FadeIn(bg), Write(equation))
# Or using set_stroke for a "backdrop" effect on the text itself:
label.set_stroke(BLACK, width=5, background=True)
```
The `set_stroke(background=True)` approach is cleaner for text labels over graphs/diagrams.
## Brace and BraceLabel
Curly braces that annotate sections of a diagram or equation:
```python
brace = Brace(equation[2:4], DOWN, color=YELLOW)
brace_label = brace.get_text("these terms", font_size=20)
self.play(GrowFromCenter(brace), FadeIn(brace_label))
# Between two specific points
brace = BraceBetweenPoints(point_a, point_b, direction=UP)
```
### Brace placement
```python
# Below a group
Brace(group, DOWN)
# Above a group
Brace(group, UP)
# Left of a group
Brace(group, LEFT)
# Right of a group
Brace(group, RIGHT)
```
## Arrows for Annotation
### Straight arrows pointing to mobjects
```python
arrow = Arrow(
start=label.get_bottom(),
end=target.get_top(),
color=YELLOW,
stroke_width=2,
buff=0.1, # gap between arrow tip and target
max_tip_length_to_length_ratio=0.15 # small arrowhead
)
self.play(GrowArrow(arrow), FadeIn(label))
```
### Curved arrows
```python
arrow = CurvedArrow(
start_point=source.get_right(),
end_point=target.get_left(),
angle=PI/4, # curve angle
color=PRIMARY
)
```
### Labeling with arrows
```python
# LabeledArrow: arrow with built-in text label
arr = LabeledArrow(
Text("gradient", font_size=16, font="Menlo"),
start=point_a, end=point_b, color=RED
)
```
## DashedLine and DashedVMobject
```python
# Dashed line (for asymptotes, construction lines, implied connections)
asymptote = DashedLine(
axes.c2p(2, -3), axes.c2p(2, 3),
color=YELLOW, dash_length=0.15
)
# Make any VMobject dashed
dashed_circle = DashedVMobject(Circle(radius=2, color=BLUE), num_dashes=30)
```
## Angle and RightAngle Markers
```python
line1 = Line(ORIGIN, RIGHT * 2)
line2 = Line(ORIGIN, UP * 2 + RIGHT)
# Angle arc between two lines
angle = Angle(line1, line2, radius=0.5, color=YELLOW)
angle_value = angle.get_value() # radians
# Right angle marker (the small square)
right_angle = RightAngle(line1, Line(ORIGIN, UP * 2), length=0.3, color=WHITE)
```
## Cross (strikethrough)
Mark something as wrong or deprecated:
```python
cross = Cross(old_equation, color=RED, stroke_width=4)
self.play(Create(cross))
# Then show the correct version
```
## Underline
```python
underline = Underline(important_text, color=ACCENT, stroke_width=3)
self.play(Create(underline))
```
## Color Highlighting Workflow
### Method 1: At creation with t2c
```python
text = Text("The gradient is negative here", t2c={"gradient": BLUE, "negative": RED})
```
### Method 2: set_color_by_tex after creation
```python
eq = MathTex(r"\nabla L = -\frac{\partial L}{\partial w}")
eq.set_color_by_tex(r"\nabla", BLUE)
eq.set_color_by_tex(r"\partial", RED)
```
### Method 3: Index into submobjects
```python
eq = MathTex(r"a", r"+", r"b", r"=", r"c")
eq[0].set_color(RED) # "a"
eq[2].set_color(BLUE) # "b"
eq[4].set_color(GREEN) # "c"
```
## Combining Annotations
Layer multiple annotations for emphasis:
```python
# Highlight a term, add a brace, and an arrow — in sequence
box = SurroundingRectangle(eq[2], color=YELLOW, buff=0.1)
brace = Brace(eq[2], DOWN, color=YELLOW)
label = brace.get_text("learning rate", font_size=18)
self.play(Create(box))
self.wait(0.5)
self.play(FadeOut(box), GrowFromCenter(brace), FadeIn(label))
self.wait(1.5)
self.play(FadeOut(brace), FadeOut(label))
```
### The annotation lifecycle
Annotations should follow a rhythm:
1. **Appear** — draw attention (Create, GrowFromCenter)
2. **Hold** — viewer reads and understands (self.wait)
3. **Disappear** — clear the stage for the next thing (FadeOut)
Never leave annotations on screen indefinitely — they become visual noise once their purpose is served.
skills/creative/manim-video/references/equations.md
+216
View File
@@ -0,0 +1,216 @@
# Equations and LaTeX Reference
## Basic LaTeX
```python
eq = MathTex(r"E = mc^2")
eq = MathTex(r"f(x) &= x^2 + 2x + 1 \\ &= (x + 1)^2") # multi-line aligned
```
**Always use raw strings (`r""`).**
## Step-by-Step Derivations
```python
step1 = MathTex(r"a^2 + b^2 = c^2")
step2 = MathTex(r"a^2 = c^2 - b^2")
self.play(Write(step1), run_time=1.5)
self.wait(1.5)
self.play(TransformMatchingTex(step1, step2), run_time=1.5)
```
## Selective Color
```python
eq = MathTex(r"a^2", r"+", r"b^2", r"=", r"c^2")
eq[0].set_color(RED)
eq[4].set_color(GREEN)
```
## Building Incrementally
```python
parts = MathTex(r"f(x)", r"=", r"\sum_{n=0}^{\infty}", r"\frac{f^{(n)}(a)}{n!}", r"(x-a)^n")
self.play(Write(parts[0:2]))
self.wait(0.5)
self.play(Write(parts[2]))
self.wait(0.5)
self.play(Write(parts[3:]))
```
## Highlighting
```python
highlight = SurroundingRectangle(eq[2], color=YELLOW, buff=0.1)
self.play(Create(highlight))
self.play(Indicate(eq[4], color=YELLOW))
```
## Annotation
```python
brace = Brace(eq, DOWN, color=YELLOW)
label = brace.get_text("Fundamental Theorem", font_size=24)
self.play(GrowFromCenter(brace), Write(label))
```
## Common LaTeX
```python
MathTex(r"\frac{a}{b}") # fraction
MathTex(r"\alpha, \beta, \gamma") # Greek
MathTex(r"\sum_{i=1}^{n} x_i") # summation
MathTex(r"\int_{0}^{\infty} e^{-x} dx") # integral
MathTex(r"\vec{v}") # vector
MathTex(r"\lim_{x \to \infty} f(x)") # limit
```
## Matrices
`MathTex` supports standard LaTeX matrix environments via `amsmath` (loaded by default):
```python
# Bracketed matrix
MathTex(r"\begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}")
# Parenthesized matrix
MathTex(r"\begin{pmatrix} a & b \\ c & d \end{pmatrix}")
# Determinant (vertical bars)
MathTex(r"\begin{vmatrix} a & b \\ c & d \end{vmatrix}")
# Plain (no delimiters)
MathTex(r"\begin{matrix} x_1 \\ x_2 \\ x_3 \end{matrix}")
```
For matrices you need to animate element-by-element or color individual entries, use the `IntegerMatrix`, `DecimalMatrix`, or `MobjectMatrix` mobjects instead — see `mobjects.md`.
## Cases and Piecewise Functions
```python
MathTex(r"""
f(x) = \begin{cases}
x^2 & \text{if } x \geq 0 \\
-x^2 & \text{if } x < 0
\end{cases}
""")
```
## Aligned Environments
For multi-line derivations with alignment, use `aligned` inside `MathTex`:
```python
MathTex(r"""
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \epsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
""")
```
Note: `MathTex` wraps content in `align*` by default. Override with `tex_environment` if needed:
```python
MathTex(r"...", tex_environment="gather*")
```
## Derivation Pattern
```python
class DerivationScene(Scene):
def construct(self):
self.camera.background_color = BG
s1 = MathTex(r"ax^2 + bx + c = 0")
self.play(Write(s1))
self.wait(1.5)
s2 = MathTex(r"x^2 + \frac{b}{a}x + \frac{c}{a} = 0")
s2.next_to(s1, DOWN, buff=0.8)
self.play(s1.animate.set_opacity(0.4), TransformMatchingTex(s1.copy(), s2))
```
## substrings_to_isolate for Complex Equations
For dense equations where manually splitting into parts is impractical, use `substrings_to_isolate` to tell Manim which substrings to track as individual elements:
```python
# Without isolation — the whole expression is one blob
lagrangian = MathTex(
r"\mathcal{L} = \bar{\psi}(i \gamma^\mu D_\mu - m)\psi - \tfrac{1}{4}F_{\mu\nu}F^{\mu\nu}"
)
# With isolation — each named substring is a separate submobject
lagrangian = MathTex(
r"\mathcal{L} = \bar{\psi}(i \gamma^\mu D_\mu - m)\psi - \tfrac{1}{4}F_{\mu\nu}F^{\mu\nu}",
substrings_to_isolate=[r"\psi", r"D_\mu", r"\gamma^\mu", r"F_{\mu\nu}"]
)
# Now you can color individual terms
lagrangian.set_color_by_tex(r"\psi", BLUE)
lagrangian.set_color_by_tex(r"F_{\mu\nu}", YELLOW)
```
Essential for `TransformMatchingTex` on complex equations — without isolation, matching fails on dense expressions.
## Multi-Line Complex Equations
For equations with multiple related lines, pass each line as a separate argument:
```python
maxwell = MathTex(
r"\nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0}",
r"\nabla \times \mathbf{B} = \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}"
).arrange(DOWN)
# Each line is a separate submobject — animate independently
self.play(Write(maxwell[0]))
self.wait(1)
self.play(Write(maxwell[1]))
```
## TransformMatchingTex with key_map
Map specific substrings between source and target equations during transformation:
```python
eq1 = MathTex(r"A^2 + B^2 = C^2")
eq2 = MathTex(r"A^2 = C^2 - B^2")
self.play(TransformMatchingTex(
eq1, eq2,
key_map={"+": "-"}, # map "+" in source to "-" in target
path_arc=PI / 2, # arc the pieces into position
))
```
## set_color_by_tex — Color by Substring
```python
eq = MathTex(r"E = mc^2")
eq.set_color_by_tex("E", BLUE)
eq.set_color_by_tex("m", RED)
eq.set_color_by_tex("c", GREEN)
```
## TransformMatchingTex with matched_keys
When matching substrings are ambiguous, specify which to align explicitly:
```python
kw = dict(font_size=72, t2c={"A": BLUE, "B": TEAL, "C": GREEN})
lines = [
MathTex(r"A^2 + B^2 = C^2", **kw),
MathTex(r"A^2 = C^2 - B^2", **kw),
MathTex(r"A^2 = (C + B)(C - B)", **kw),
MathTex(r"A = \sqrt{(C + B)(C - B)}", **kw),
]
self.play(TransformMatchingTex(
lines[0].copy(), lines[1],
matched_keys=["A^2", "B^2", "C^2"], # explicitly match these
key_map={"+": "-"}, # map + to -
path_arc=PI / 2, # arc pieces into position
))
```
Without `matched_keys`, the animation matches the longest common substrings, which can produce unexpected results on complex equations (e.g., "^2 = C^2" matching across terms).
skills/creative/manim-video/references/graphs-and-data.md
+163
View File
@@ -0,0 +1,163 @@
# Graphs, Plots, and Data Visualization
## Axes
```python
axes = Axes(
x_range=[-3, 3, 1], y_range=[-2, 2, 1],
x_length=8, y_length=5,
axis_config={"include_numbers": True, "font_size": 24}
)
axes.set_opacity(0.15) # structural element
x_label = axes.get_x_axis_label(r"x")
```
## Plotting
```python
graph = axes.plot(lambda x: x**2, color=BLUE)
graph_label = axes.get_graph_label(graph, label=r"x^2", x_val=2)
area = axes.get_area(graph, x_range=[0, 2], color=BLUE, opacity=0.3)
```
## Animated Plotting
```python
self.play(Create(graph), run_time=3) # trace the graph
# Moving dot along curve
dot = Dot(color=YELLOW).move_to(axes.c2p(0, 0))
self.play(MoveAlongPath(dot, graph), run_time=3)
# Dynamic parameter
tracker = ValueTracker(1)
dynamic = always_redraw(lambda: axes.plot(lambda x: tracker.get_value() * x**2, color=BLUE))
self.add(dynamic)
self.play(tracker.animate.set_value(3), run_time=2)
```
## Bar Charts
```python
chart = BarChart(
values=[4, 6, 2, 8, 5], bar_names=["A", "B", "C", "D", "E"],
y_range=[0, 10, 2], bar_colors=[RED, GREEN, BLUE, YELLOW, PURPLE]
)
self.play(Create(chart), run_time=2)
self.play(chart.animate.change_bar_values([6, 3, 7, 4, 9]))
```
## Number Lines
```python
nl = NumberLine(x_range=[0, 10, 1], length=10, include_numbers=True)
pointer = Arrow(nl.n2p(3) + UP * 0.5, nl.n2p(3), color=RED, buff=0)
tracker = ValueTracker(3)
pointer.add_updater(lambda m: m.put_start_and_end_on(
nl.n2p(tracker.get_value()) + UP * 0.5, nl.n2p(tracker.get_value())))
self.play(tracker.animate.set_value(8), run_time=2)
```
## Animated Counters
```python
counter = DecimalNumber(0, font_size=72, num_decimal_places=0)
self.play(counter.animate.set_value(1000), run_time=3, rate_func=rush_from)
```
## Algorithm Visualization Pattern
```python
values = [5, 2, 8, 1, 9, 3]
bars = VGroup(*[
Rectangle(width=0.6, height=v * 0.4, color=BLUE, fill_opacity=0.7)
for v in values
]).arrange(RIGHT, buff=0.2, aligned_edge=DOWN).move_to(ORIGIN)
self.play(LaggedStart(*[GrowFromEdge(b, DOWN) for b in bars], lag_ratio=0.1))
# Highlight, swap, etc.
```
## Data Story Pattern
```python
# Before/After comparison
before = BarChart(values=[3, 5, 2], bar_colors=[RED]*3).shift(LEFT * 3)
after = BarChart(values=[8, 9, 7], bar_colors=[GREEN]*3).shift(RIGHT * 3)
self.play(Create(before)); self.wait(1)
self.play(Create(after)); self.wait(1)
arrow = Arrow(before.get_right(), after.get_left(), color=YELLOW)
label = Text("+167%", font_size=36, color=YELLOW).next_to(arrow, UP)
self.play(GrowArrow(arrow), Write(label))
```
## Graph / DiGraph — Graph Theory Visualization
Built-in graph mobjects with automatic layout:
```python
# Undirected graph
g = Graph(
vertices=[1, 2, 3, 4, 5],
edges=[(1, 2), (2, 3), (3, 4), (4, 5), (5, 1), (1, 3)],
layout="spring", # or "circular", "kamada_kawai", "planar", "tree"
labels=True,
vertex_config={"fill_color": PRIMARY},
edge_config={"stroke_color": SUBTLE},
)
self.play(Create(g))
# Directed graph
dg = DiGraph(
vertices=["A", "B", "C"],
edges=[("A", "B"), ("B", "C"), ("C", "A")],
layout="circular",
labels=True,
edge_config={("A", "B"): {"stroke_color": RED}},
)
# Add/remove vertices and edges dynamically
self.play(g.animate.add_vertices(6, positions={6: RIGHT * 2}))
self.play(g.animate.add_edges((1, 6)))
self.play(g.animate.remove_vertices(3))
```
Layout algorithms: `"spring"`, `"circular"`, `"kamada_kawai"`, `"planar"`, `"spectral"`, `"tree"` (for rooted trees, specify `root=`).
## ArrowVectorField / StreamLines — Vector Fields
```python
# Arrow field: arrows showing direction at each point
field = ArrowVectorField(
lambda pos: np.array([-pos[1], pos[0], 0]), # rotation field
x_range=[-3, 3], y_range=[-3, 3],
colors=[BLUE, GREEN, YELLOW, RED]
)
self.play(Create(field))
# StreamLines: flowing particle traces through the field
stream = StreamLines(
lambda pos: np.array([-pos[1], pos[0], 0]),
stroke_width=2, max_anchors_per_line=30
)
self.add(stream)
stream.start_animation(warm_up=True, flow_speed=1.5)
self.wait(3)
stream.end_animation()
```
Use cases: electromagnetic fields, fluid flow, gradient fields, ODE phase portraits.
## ComplexPlane / PolarPlane
```python
# Complex plane with Re/Im labels
cplane = ComplexPlane().add_coordinates()
dot = Dot(cplane.n2p(2 + 1j), color=YELLOW)
label = Text("2+i", font_size=20).next_to(dot, UR, buff=0.1)
# Apply complex function to the plane
self.play(cplane.animate.apply_complex_function(lambda z: z**2), run_time=3)
# Polar plane
polar = PolarPlane(radius_max=3).add_coordinates()
```
skills/creative/manim-video/references/mobjects.md
+333
View File
@@ -0,0 +1,333 @@
# Mobjects Reference
Everything visible on screen is a Mobject. They have position, color, opacity, and can be animated.
## Text
```python
title = Text("Hello World", font_size=48, color=BLUE)
eq = MathTex(r"E = mc^2", font_size=40)
# Multi-part (for selective coloring)
eq = MathTex(r"a^2", r"+", r"b^2", r"=", r"c^2")
eq[0].set_color(RED)
eq[4].set_color(BLUE)
# Mixed text and math
t = Tex(r"The area is $\pi r^2$", font_size=36)
# Styled markup
t = MarkupText('<span foreground="#58C4DD">Blue</span> text', font_size=30)
```
**Always use raw strings (`r""`) for any string with backslashes.**
## Shapes
```python
circle = Circle(radius=1, color=BLUE, fill_opacity=0.5)
square = Square(side_length=2, color=RED)
rect = Rectangle(width=4, height=2, color=GREEN)
dot = Dot(point=ORIGIN, radius=0.08, color=YELLOW)
line = Line(LEFT * 2, RIGHT * 2, color=WHITE)
arrow = Arrow(LEFT, RIGHT, color=ORANGE)
rrect = RoundedRectangle(corner_radius=0.3, width=4, height=2)
brace = Brace(rect, DOWN, color=YELLOW)
```
## Polygons and Arcs
```python
# Arbitrary polygon from vertices
poly = Polygon(LEFT, UP * 2, RIGHT, color=GREEN, fill_opacity=0.3)
# Regular n-sided polygon
hexagon = RegularPolygon(n=6, color=TEAL, fill_opacity=0.4)
# Triangle (shorthand for RegularPolygon(n=3))
tri = Triangle(color=YELLOW, fill_opacity=0.5)
# Arc (portion of a circle)
arc = Arc(radius=2, start_angle=0, angle=PI / 2, color=BLUE)
# Arc between two points
arc_between = ArcBetweenPoints(LEFT * 2, RIGHT * 2, angle=TAU / 4, color=RED)
# Curved arrow (arc with tip)
curved_arrow = CurvedArrow(LEFT * 2, RIGHT * 2, color=ORANGE)
```
## Sectors and Annuli
```python
# Sector (pie slice)
sector = Sector(outer_radius=2, start_angle=0, angle=PI / 3, fill_opacity=0.7, color=BLUE)
# Annulus (ring)
ring = Annulus(inner_radius=1, outer_radius=2, fill_opacity=0.5, color=GREEN)
# Annular sector (partial ring)
partial_ring = AnnularSector(
inner_radius=1, outer_radius=2,
angle=PI / 2, start_angle=0,
fill_opacity=0.7, color=TEAL
)
# Cutout (punch holes in a shape)
background = Square(side_length=4, fill_opacity=1, color=BLUE)
hole = Circle(radius=0.5)
cutout = Cutout(background, hole, fill_opacity=1, color=BLUE)
```
Use cases: pie charts, ring progress indicators, Venn diagrams with arcs, geometric proofs.
## Positioning
```python
mob.move_to(ORIGIN) # center
mob.move_to(UP * 2 + RIGHT) # relative
label.next_to(circle, DOWN, buff=0.3) # next to another
title.to_edge(UP, buff=0.5) # screen edge (buff >= 0.5!)
mob.to_corner(UL, buff=0.5) # corner
```
## VGroup vs Group
**VGroup** is for collections of shapes (VMobjects only — Circle, Square, Arrow, Line, MathTex):
```python
shapes = VGroup(circle, square, arrow)
shapes.arrange(DOWN, buff=0.5)
shapes.set_color(BLUE)
```
**Group** is for mixed collections (Text + shapes, or any Mobject types):
```python
# Text objects are Mobjects, not VMobjects — use Group when mixing
labeled_shape = Group(circle, Text("Label").next_to(circle, DOWN))
labeled_shape.move_to(ORIGIN)
# FadeOut everything on screen (may contain mixed types)
self.play(FadeOut(Group(*self.mobjects)))
```
**Rule: if your group contains any `Text()` objects, use `Group`, not `VGroup`.** VGroup will raise a TypeError on Manim CE v0.20+. MathTex and Tex are VMobjects and work with VGroup.
Both support `arrange()`, `arrange_in_grid()`, `set_opacity()`, `shift()`, `scale()`, `move_to()`.
## Styling
```python
mob.set_color(BLUE)
mob.set_fill(RED, opacity=0.5)
mob.set_stroke(WHITE, width=2)
mob.set_opacity(0.4)
mob.set_z_index(1) # layering
```
## Specialized Mobjects
```python
nl = NumberLine(x_range=[-3, 3, 1], length=8, include_numbers=True)
table = Table([["A", "B"], ["C", "D"]], row_labels=[Text("R1"), Text("R2")])
code = Code("example.py", tab_width=4, font_size=20, language="python")
highlight = SurroundingRectangle(target, color=YELLOW, buff=0.2)
bg = BackgroundRectangle(equation, fill_opacity=0.7, buff=0.2)
```
## Custom Mobjects
```python
class NetworkNode(Group):
def __init__(self, label_text, color=BLUE, **kwargs):
super().__init__(**kwargs)
self.circle = Circle(radius=0.4, color=color, fill_opacity=0.3)
self.label = Text(label_text, font_size=20).move_to(self.circle)
self.add(self.circle, self.label)
```
## Matrix Mobjects
Display matrices as grids of numbers or mobjects:
```python
# Integer matrix
m = IntegerMatrix([[1, 2], [3, 4]])
# Decimal matrix (control decimal places)
m = DecimalMatrix([[1.5, 2.7], [3.1, 4.9]], element_to_mobject_config={"num_decimal_places": 2})
# Mobject matrix (any mobject in each cell)
m = MobjectMatrix([
[MathTex(r"\pi"), MathTex(r"e")],
[MathTex(r"\phi"), MathTex(r"\tau")]
])
# Bracket types: "(" "[" "|" or "\\{"
m = IntegerMatrix([[1, 0], [0, 1]], left_bracket="[", right_bracket="]")
```
Use cases: linear algebra, transformation matrices, system-of-equations coefficient display.
## Constants
Directions: `UP, DOWN, LEFT, RIGHT, ORIGIN, UL, UR, DL, DR`
Colors: `RED, BLUE, GREEN, YELLOW, WHITE, GRAY, ORANGE, PINK, PURPLE, TEAL, GOLD`
Frame: `config.frame_width = 14.222, config.frame_height = 8.0`
## SVGMobject — Import SVG Files
```python
logo = SVGMobject("path/to/logo.svg")
logo.set_color(WHITE).scale(0.5).to_corner(UR)
self.play(FadeIn(logo))
# SVG submobjects are individually animatable
for part in logo.submobjects:
self.play(part.animate.set_color(random_color()))
```
## ImageMobject — Display Images
```python
img = ImageMobject("screenshot.png")
img.set_height(3).to_edge(RIGHT)
self.play(FadeIn(img))
```
Note: images cannot be animated with `.animate` (they're raster, not vector). Use `FadeIn`/`FadeOut` and `shift`/`scale` only.
## Variable — Auto-Updating Display
```python
var = Variable(0, Text("x"), num_decimal_places=2)
var.move_to(ORIGIN)
self.add(var)
# Animate the value
self.play(var.tracker.animate.set_value(5), run_time=2)
# Display auto-updates: "x = 5.00"
```
Cleaner than manual `DecimalNumber` + `add_updater` for simple labeled-value displays.
## BulletedList
```python
bullets = BulletedList(
"First key point",
"Second important fact",
"Third conclusion",
font_size=28
)
bullets.to_edge(LEFT, buff=1.0)
self.play(Write(bullets))
# Highlight individual items
self.play(bullets[1].animate.set_color(YELLOW))
```
## DashedLine and Angle Markers
```python
# Dashed line (asymptotes, construction lines)
dashed = DashedLine(LEFT * 3, RIGHT * 3, color=SUBTLE, dash_length=0.15)
# Angle marker between two lines
line1 = Line(ORIGIN, RIGHT * 2)
line2 = Line(ORIGIN, UP * 2 + RIGHT)
angle = Angle(line1, line2, radius=0.5, color=YELLOW)
angle_label = angle.get_value() # returns the angle in radians
# Right angle marker
right_angle = RightAngle(line1, Line(ORIGIN, UP * 2), length=0.3, color=WHITE)
```
## Boolean Operations (CSG)
Combine, subtract, or intersect 2D shapes:
```python
circle = Circle(radius=1.5, color=BLUE, fill_opacity=0.5).shift(LEFT * 0.5)
square = Square(side_length=2, color=RED, fill_opacity=0.5).shift(RIGHT * 0.5)
# Union, Intersection, Difference, Exclusion
union = Union(circle, square, color=GREEN, fill_opacity=0.5)
intersect = Intersection(circle, square, color=YELLOW, fill_opacity=0.5)
diff = Difference(circle, square, color=PURPLE, fill_opacity=0.5)
exclude = Exclusion(circle, square, color=ORANGE, fill_opacity=0.5)
```
Use cases: Venn diagrams, set theory, geometric proofs, area calculations.
## LabeledArrow / LabeledLine
```python
# Arrow with built-in label (auto-positioned)
arr = LabeledArrow(Text("force", font_size=18), start=LEFT, end=RIGHT, color=RED)
# Line with label
line = LabeledLine(Text("d = 5m", font_size=18), start=LEFT * 2, end=RIGHT * 2)
```
Auto-handles label positioning — cleaner than manual `Arrow` + `Text().next_to()`.
## Text Color/Font/Style Per-Substring (t2c, t2f, t2s, t2w)
```python
# Color specific words (t2c = text-to-color)
text = Text(
"Gradient descent minimizes the loss function",
t2c={"Gradient descent": BLUE, "loss function": RED}
)
# Different fonts per word (t2f = text-to-font)
text = Text(
"Use Menlo for code and Inter for prose",
t2f={"Menlo": "Menlo", "Inter": "Inter"}
)
# Italic/slant per word (t2s = text-to-slant)
text = Text("Normal and italic text", t2s={"italic": ITALIC})
# Bold per word (t2w = text-to-weight)
text = Text("Normal and bold text", t2w={"bold": BOLD})
```
These are much cleaner than creating separate Text objects and grouping them.
## Backstroke for Readability Over Backgrounds
When text overlaps other content (graphs, diagrams, images), add a dark stroke behind it:
```python
# CE syntax:
label.set_stroke(BLACK, width=5, background=True)
# Apply to a group
for mob in labels:
mob.set_stroke(BLACK, width=4, background=True)
```
This is how 3Blue1Brown keeps text readable over complex backgrounds without using BackgroundRectangle.
## Complex Function Transforms
Apply complex functions to entire mobjects — transforms the plane:
```python
c_grid = ComplexPlane()
moving_grid = c_grid.copy()
moving_grid.prepare_for_nonlinear_transform() # adds more sample points for smooth deformation
self.play(
moving_grid.animate.apply_complex_function(lambda z: z**2),
run_time=5,
)
# Also works with R3->R3 functions:
self.play(grid.animate.apply_function(
lambda p: [p[0] + 0.5 * math.sin(p[1]), p[1] + 0.5 * math.sin(p[0]), p[2]]
), run_time=5)
```
**Critical:** Call `prepare_for_nonlinear_transform()` before applying nonlinear functions — without it, the grid has too few sample points and the deformation looks jagged.
skills/creative/manim-video/references/paper-explainer.md
+255
View File
@@ -0,0 +1,255 @@
# Paper Explainer Workflow
How to turn a research paper into an animated explainer video.
## Why animate a paper?
A research paper is optimized for precision and completeness. A video is optimized for understanding and retention. The translation is NOT "read the paper aloud with pictures" — it's "extract the core insight and make it feel obvious through visual storytelling."
The paper has one job: prove the claim is true. The video has a different job: make the viewer understand WHY the claim is true, and WHY it matters.
## Who is watching?
Before anything, decide the audience:
| Audience | Prerequisites | Pacing | Depth |
|----------|--------------|--------|-------|
| General public | None | Slow, many analogies | Intuition only, skip proofs |
| Undergrad students | Basic math/CS | Medium, some formalism | Key equations, skip derivations |
| Grad students / researchers | Domain knowledge | Faster, more notation | Full equations, sketch proofs |
This determines everything: vocabulary, pacing, which sections to animate, how much math to show.
## The 5-minute template
Most paper explainers fit this structure (scale times proportionally for longer videos):
| Section | Duration | Purpose |
|---------|----------|---------|
| **Hook** | 0:00-0:30 | Surprising result or provocative question |
| **Problem** | 0:30-1:30 | What was broken/missing before this paper |
| **Key insight** | 1:30-3:00 | The core idea, explained visually |
| **How it works** | 3:00-4:00 | Method/algorithm, simplified |
| **Evidence** | 4:00-4:30 | Key result that proves it works |
| **Implications** | 4:30-5:00 | Why it matters, what it enables |
### What to skip
- Related work survey → one sentence: "Previous approaches did X, which had problem Y"
- Implementation details → skip unless they're the contribution
- Ablation studies → show one chart at most
- Proofs → show the key step, not the full proof
- Hyperparameter tuning → skip entirely
### What to expand
- The core insight → this gets the most screen time
- Geometric/visual intuition → if the paper has math, show what it MEANS
- Before/after comparison → the most compelling evidence
## Pre-code workflow
### Gate 1: Narration script
Write the full narration before any code. Every sentence maps to a visual beat. If you can't write the narration, you don't understand the paper well enough to animate it.
```markdown
## Hook (30s)
"What if I told you that a model with 7 billion parameters can outperform
one with 70 billion — if you train it on the right data?"
## Problem (60s)
"The standard approach is to scale up. More parameters, more compute.
[VISUAL: bar chart showing model sizes growing exponentially]
But Chinchilla showed us that most models are undertrained..."
```
### Gate 2: Scene list
After the narration, break it into scenes. Each scene is one Manim class.
```markdown
Scene 1: Hook — surprising stat with animated counter
Scene 2: Problem — model size bar chart growing
Scene 3: Key insight — training data vs parameters, animated 2D plot
Scene 4: Method — pipeline diagram building left to right
Scene 5: Results — before/after comparison with animated bars
Scene 6: Closing — implications text
```
### Gate 3: Style constants
Before coding scenes, define the visual language:
```python
# style.py — import in every scene file
BG = "#0D1117"
PRIMARY = "#58C4DD"
SECONDARY = "#83C167"
ACCENT = "#FFFF00"
HIGHLIGHT = "#FF6B6B"
MONO = "Menlo"
# Color meanings for THIS paper
MODEL_COLOR = PRIMARY # "the model"
DATA_COLOR = SECONDARY # "training data"
BASELINE_COLOR = HIGHLIGHT # "previous approach"
RESULT_COLOR = ACCENT # "our result"
```
## First-principles equation explanation
When the paper has a key equation, don't just show it — build it from intuition:
### The "what would you do?" pattern
1. Pose the problem in plain language
2. Ask what the simplest solution would be
3. Show why it doesn't work (animate the failure)
4. Introduce the paper's solution as the fix
5. THEN show the equation — it now feels earned
```python
# Scene: Why we need attention (for a Transformer paper)
# Step 1: "How do we let each word look at every other word?"
# Step 2: Show naive approach (fully connected = O(n²) everything)
# Step 3: Show it breaks (information overload, no selectivity)
# Step 4: "What if each word could CHOOSE which words to attend to?"
# Step 5: Show attention equation — Q, K, V now mean something
```
### Equation reveal strategy
```python
# Show equation dimmed first (full destination)
eq = MathTex(r"Attention(Q,K,V) = softmax\left(\frac{QK^T}{\sqrt{d_k}}\right)V")
eq.set_opacity(0.15)
self.play(FadeIn(eq))
# Highlight Q, K, V one at a time with color + label
for part, color, label_text in [
(r"Q", PRIMARY, "Query: what am I looking for?"),
(r"K", SECONDARY, "Key: what do I contain?"),
(r"V", ACCENT, "Value: what do I output?"),
]:
eq.set_color_by_tex(part, color)
label = Text(label_text, font_size=18, color=color, font=MONO)
# position label, animate it, wait, then dim it
```
## Building architecture diagrams
### The progressive build pattern
Don't show the full architecture at once. Build it:
1. First component appears alone → explain
2. Arrow grows → "this feeds into..."
3. Second component appears → explain
4. Repeat until complete
```python
# Component factory
def make_box(label, color, width=2.0, height=0.8):
box = RoundedRectangle(corner_radius=0.1, width=width, height=height,
color=color, fill_opacity=0.1, stroke_width=1.5)
text = Text(label, font_size=18, font=MONO, color=color).move_to(box)
return Group(box, text)
encoder = make_box("Encoder", PRIMARY)
decoder = make_box("Decoder", SECONDARY).next_to(encoder, RIGHT, buff=1.5)
arrow = Arrow(encoder.get_right(), decoder.get_left(), color=DIM, stroke_width=1.5)
self.play(FadeIn(encoder))
self.wait(1) # explain encoder
self.play(GrowArrow(arrow))
self.play(FadeIn(decoder))
self.wait(1) # explain decoder
```
### Data flow animation
After building the diagram, show data moving through it:
```python
# Dot traveling along the pipeline
data_dot = Dot(color=ACCENT, radius=0.1).move_to(encoder)
self.play(FadeIn(data_dot))
self.play(MoveAlongPath(data_dot, arrow), run_time=1)
self.play(data_dot.animate.move_to(decoder), run_time=0.5)
self.play(Flash(data_dot.get_center(), color=ACCENT), run_time=0.3)
```
## Animating results
### Bar chart comparison (most common)
```python
# Before/after bars
before_data = [45, 52, 38, 61]
after_data = [78, 85, 72, 91]
labels = ["Task A", "Task B", "Task C", "Task D"]
before_chart = BarChart(before_data, bar_names=labels,
y_range=[0, 100, 20], bar_colors=[HIGHLIGHT]*4).scale(0.6).shift(LEFT*3)
after_chart = BarChart(after_data, bar_names=labels,
y_range=[0, 100, 20], bar_colors=[SECONDARY]*4).scale(0.6).shift(RIGHT*3)
before_label = Text("Baseline", font_size=20, color=HIGHLIGHT, font=MONO)
after_label = Text("Ours", font_size=20, color=SECONDARY, font=MONO)
# Reveal baseline first, then ours (dramatic comparison)
self.play(Create(before_chart), FadeIn(before_label))
self.wait(1.5)
self.play(Create(after_chart), FadeIn(after_label))
self.wait(0.5)
# Highlight the improvement
improvement = Text("+35% avg", font_size=24, color=ACCENT, font=MONO)
self.play(FadeIn(improvement))
```
### Training curve (for ML papers)
```python
tracker = ValueTracker(0)
curve = always_redraw(lambda: axes.plot(
lambda x: 1 - 0.8 * np.exp(-x / 3),
x_range=[0, tracker.get_value()], color=PRIMARY
))
epoch_label = always_redraw(lambda: Text(
f"Epoch {int(tracker.get_value())}", font_size=18, font=MONO
).to_corner(UR))
self.add(curve, epoch_label)
self.play(tracker.animate.set_value(10), run_time=5, rate_func=linear)
```
## Domain-specific patterns
### ML papers
- Show data flow through the model (animated pipeline)
- Training curves with `ValueTracker`
- Attention heatmaps as colored grids
- Embedding space as 2D scatter (PCA/t-SNE visualization)
- Loss landscape as 3D surface with gradient descent dot
### Physics/math papers
- Use `LinearTransformationScene` for linear algebra
- Vector fields with `ArrowVectorField` / `StreamLines`
- Phase spaces with `NumberPlane` + trajectories
- Wave equations with time-parameterized plots
### Systems/architecture papers
- Pipeline diagrams built progressively
- `ShowPassingFlash` for data flow along arrows
- `ZoomedScene` for zooming into components
- Before/after latency/throughput comparisons
## Common mistakes
1. **Trying to cover the whole paper.** A 5-minute video can explain ONE core insight well. Covering everything means explaining nothing.
2. **Reading the abstract as narration.** Academic writing is designed for readers, not listeners. Rewrite in conversational language.
3. **Showing notation without meaning.** Never show a symbol without first showing what it represents visually.
4. **Skipping the motivation.** Jumping straight to "here's our method" without showing why the problem matters. The Problem section is what makes the viewer care.
5. **Identical pacing throughout.** The hook and key insight need the most visual energy. The method section can be faster. Evidence should land with impact (pause after showing the big number).
skills/creative/manim-video/references/production-quality.md
+190
View File
@@ -0,0 +1,190 @@
# Production Quality Checklist
Standards and checks for ensuring animation output is publication-ready.
## Pre-Code Checklist
Before writing any Manim code:
- [ ] Narration script written with visual beats marked
- [ ] Scene list with purpose, duration, and layout for each
- [ ] Color palette defined with meaning assignments (`PRIMARY` = main concept, etc.)
- [ ] `MONO = "Menlo"` set as the font constant
- [ ] Target resolution and aspect ratio decided
## Text Quality
### Overlap prevention
```python
# RULE: buff >= 0.5 for edge text
label.to_edge(DOWN, buff=0.5) # GOOD
label.to_edge(DOWN, buff=0.3) # BAD — may clip
# RULE: FadeOut previous before adding new at same position
self.play(ReplacementTransform(note1, note2)) # GOOD
self.play(Write(note2)) # BAD — overlaps note1
# RULE: Reduce font size for dense scenes
# When > 4 text elements visible, use font_size=20 not 28
```
### Width enforcement
Long text strings overflow the frame:
```python
# RULE: Set max width for any text that might be long
text = Text("This is a potentially long description", font_size=22, font=MONO)
if text.width > config.frame_width - 1.0:
text.set_width(config.frame_width - 1.0)
```
### Font consistency
```python
# RULE: Define MONO once, use everywhere
MONO = "Menlo"
# WRONG: mixing fonts
Text("Title", font="Helvetica")
Text("Label", font="Arial")
Text("Code", font="Courier")
# RIGHT: one font
Text("Title", font=MONO, weight=BOLD, font_size=48)
Text("Label", font=MONO, font_size=20)
Text("Code", font=MONO, font_size=18)
```
## Spatial Layout
### The coordinate budget
The visible frame is approximately 14.2 wide × 8.0 tall (default 16:9). With mandatory margins:
```
Usable area: x ∈ [-6.5, 6.5], y ∈ [-3.5, 3.5]
Top title zone: y ∈ [2.5, 3.5]
Bottom note zone: y ∈ [-3.5, -2.5]
Main content: y ∈ [-2.5, 2.5], x ∈ [-6.0, 6.0]
```
### Fill the frame
Empty scenes look unfinished. If the main content is small, add context:
- A dimmed grid/axes behind the content
- A title/subtitle at the top
- A source citation at the bottom
- Decorative geometry at low opacity
### Maximum simultaneous elements
**Hard limit: 6 actively visible elements.** Beyond that, the viewer can't track everything. If you need more:
- Dim old elements to opacity 0.3
- Remove elements that have served their purpose
- Split into two scenes
## Animation Quality
### Variety audit
Check that no two consecutive scenes use the exact same:
- Animation type (if Scene 3 uses Write for everything, Scene 4 should use FadeIn or Create)
- Color emphasis (rotate through palette colors)
- Layout (center, left-right, grid — alternate)
- Pacing (if Scene 2 was slow and deliberate, Scene 3 can be faster)
### Tempo curve
A good video follows a tempo curve:
```
Slow ──→ Medium ──→ FAST (climax) ──→ Slow (conclusion)
Scene 1: Slow (introduction, setup)
Scene 2: Medium (building understanding)
Scene 3: Medium-Fast (core content, lots of animation)
Scene 4: FAST (montage of applications/results)
Scene 5: Slow (conclusion, key takeaway)
```
### Transition quality
Between scenes:
- **Clean exit**: `self.play(FadeOut(Group(*self.mobjects)), run_time=0.5)`
- **Brief pause**: `self.wait(0.3)` after fadeout, before next scene's first animation
- **Never hard-cut**: always animate the transition
## Color Quality
### Dimming on dark backgrounds
Colors that look vibrant on white look muddy on dark backgrounds (#0D1117, #1C1C1C). Test your palette:
```python
# Colors that work well on dark backgrounds:
# Bright and saturated: #58C4DD, #83C167, #FFFF00, #FF6B6B
# Colors that DON'T work: #666666 (invisible), #2244AA (too dark)
# RULE: Structural elements (axes, grids) at opacity 0.15
# Context elements at 0.3-0.4
# Primary elements at 1.0
```
### Color meaning consistency
Once a color is assigned a meaning, it keeps that meaning for the entire video:
```python
# If PRIMARY (#58C4DD) means "the model" in Scene 1,
# it means "the model" in every scene.
# Never reuse PRIMARY for a different concept later.
```
## Data Visualization Quality
### Minimum requirements for charts
- Axis labels on every axis
- Y-axis range starts at 0 (or has a clear break indicator)
- Bar/line colors match the legend
- Numbers on notable data points (at least the maximum and the comparison point)
### Animated counters
When showing a number changing:
```python
# GOOD: DecimalNumber with smooth animation
counter = DecimalNumber(0, font_size=48, num_decimal_places=0, font="Menlo")
self.play(counter.animate.set_value(1000), run_time=3, rate_func=rush_from)
# BAD: Text that jumps between values
```
## Pre-Render Checklist
Before running `manim -qh`:
- [ ] All scenes render without errors at `-ql`
- [ ] Preview stills at `-qm` for text-heavy scenes (check kerning)
- [ ] Background color set in every scene (`self.camera.background_color = BG`)
- [ ] `add_subcaption()` or `subcaption=` on every significant animation
- [ ] No text smaller than font_size=18
- [ ] No text using proportional fonts (use monospace)
- [ ] buff >= 0.5 on all `.to_edge()` calls
- [ ] Clean exit (FadeOut all) at end of every scene
- [ ] `self.wait()` after every reveal
- [ ] Color constants used (no hardcoded hex strings in scene code)
- [ ] All scenes use the same quality flag (don't mix `-ql` and `-qh`)
## Post-Render Checklist
After stitching the final video:
- [ ] Watch the complete video at 1x speed — does it feel rushed anywhere?
- [ ] Is there a moment where two things animate simultaneously and it's confusing?
- [ ] Does every text label have enough time to be read?
- [ ] Are transitions between scenes smooth (no black frames, no jarring cuts)?
- [ ] Is the audio in sync with the visuals (if using voiceover)?
- [ ] Is the Gibbs-like "first impression" good? The first 5 seconds determine if someone keeps watching
skills/creative/manim-video/references/rendering.md
+185
View File
@@ -0,0 +1,185 @@
# Rendering Reference
## Prerequisites
```bash
manim --version # Manim CE
pdflatex --version # LaTeX
ffmpeg -version # ffmpeg
```
## CLI Reference
```bash
manim -ql script.py Scene1 Scene2 # draft (480p 15fps)
manim -qm script.py Scene1 # medium (720p 30fps)
manim -qh script.py Scene1 # production (1080p 60fps)
manim -ql --format=png -s script.py Scene1 # preview still (last frame)
manim -ql --format=gif script.py Scene1 # GIF output
```
## Quality Presets
| Flag | Resolution | FPS | Use case |
|------|-----------|-----|----------|
| `-ql` | 854x480 | 15 | Draft iteration (layout, timing) |
| `-qm` | 1280x720 | 30 | Preview (use for text-heavy scenes) |
| `-qh` | 1920x1080 | 60 | Production |
**Text rendering quality:** `-ql` (480p15) produces noticeably poor text kerning and readability. For scenes with significant text, preview stills at `-qm` to catch issues invisible at 480p. Use `-ql` only for testing layout and animation timing.
## Output Structure
```
media/videos/script/480p15/Scene1_Intro.mp4
media/images/script/Scene1_Intro.png (from -s flag)
```
## Stitching with ffmpeg
```bash
cat > concat.txt << 'EOF'
file 'media/videos/script/480p15/Scene1_Intro.mp4'
file 'media/videos/script/480p15/Scene2_Core.mp4'
EOF
ffmpeg -y -f concat -safe 0 -i concat.txt -c copy final.mp4
```
## Add Voiceover
```bash
# Mux narration
ffmpeg -y -i final.mp4 -i narration.mp3 -c:v copy -c:a aac -b:a 192k -shortest final_narrated.mp4
# Concat per-scene audio first
cat > audio_concat.txt << 'EOF'
file 'audio/scene1.mp3'
file 'audio/scene2.mp3'
EOF
ffmpeg -y -f concat -safe 0 -i audio_concat.txt -c copy full_narration.mp3
```
## Add Background Music
```bash
ffmpeg -y -i final.mp4 -i music.mp3 \
-filter_complex "[1:a]volume=0.15[bg];[0:a][bg]amix=inputs=2:duration=shortest" \
-c:v copy final_with_music.mp4
```
## GIF Export
```bash
ffmpeg -y -i scene.mp4 \
-vf "fps=15,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
output.gif
```
## Aspect Ratios
```bash
manim -ql --resolution 1080,1920 script.py Scene # 9:16 vertical
manim -ql --resolution 1080,1080 script.py Scene # 1:1 square
```
## Render Workflow
1. Draft render all scenes at `-ql`
2. Preview stills at key moments (`-s`)
3. Fix and re-render only broken scenes
4. Stitch with ffmpeg
5. Review stitched output
6. Production render at `-qh`
7. Re-stitch + add audio
## manim.cfg — Project Configuration
Create `manim.cfg` in the project directory for per-project defaults:
```ini
[CLI]
quality = low_quality
preview = True
media_dir = ./media
[renderer]
background_color = #0D1117
[tex]
tex_template_file = custom_template.tex
```
This eliminates repetitive CLI flags and `self.camera.background_color` in every scene.
## Sections — Chapter Markers
Mark sections within a scene for organized output:
```python
class LongVideo(Scene):
def construct(self):
self.next_section("Introduction")
# ... intro content ...
self.next_section("Main Concept")
# ... main content ...
self.next_section("Conclusion")
# ... closing ...
```
Render individual sections: `manim --save_sections script.py LongVideo`
This outputs separate video files per section — useful for long videos where you want to re-render only one part.
## manim-voiceover Plugin (Recommended for Narrated Videos)
The official `manim-voiceover` plugin integrates TTS directly into scene code, auto-syncing animation duration to voiceover length. This is significantly cleaner than the manual ffmpeg muxing approach above.
### Installation
```bash
pip install "manim-voiceover[elevenlabs]"
# Or for free/local TTS:
pip install "manim-voiceover[gtts]" # Google TTS (free, lower quality)
pip install "manim-voiceover[azure]" # Azure Cognitive Services
```
### Usage
```python
from manim import *
from manim_voiceover import VoiceoverScene
from manim_voiceover.services.elevenlabs import ElevenLabsService
class NarratedScene(VoiceoverScene):
def construct(self):
self.set_speech_service(ElevenLabsService(
voice_name="Alice",
model_id="eleven_multilingual_v2"
))
# Voiceover auto-controls scene duration
with self.voiceover(text="Here is a circle being drawn.") as tracker:
self.play(Create(Circle()), run_time=tracker.duration)
with self.voiceover(text="Now let's transform it into a square.") as tracker:
self.play(Transform(circle, Square()), run_time=tracker.duration)
```
### Key Features
- `tracker.duration` — total voiceover duration in seconds
- `tracker.time_until_bookmark("mark1")` — sync specific animations to specific words
- Auto-generates subtitle `.srt` files
- Caches audio locally — re-renders don't re-generate TTS
- Works with: ElevenLabs, Azure, Google TTS, pyttsx3 (offline), and custom services
### Bookmarks for Precise Sync
```python
with self.voiceover(text='This is a <bookmark mark="circle"/>circle.') as tracker:
self.wait_until_bookmark("circle")
self.play(Create(Circle()), run_time=tracker.time_until_bookmark("circle", limit=1))
```
This is the recommended approach for any video with narration. The manual ffmpeg muxing workflow above is still useful for adding background music or post-production audio mixing.
skills/creative/manim-video/references/scene-planning.md
+118
View File
@@ -0,0 +1,118 @@
# Scene Planning Reference
## Narrative Arc Structures
### Discovery Arc (most common)
1. Hook -- pose a question or surprising result
2. Intuition -- build visual understanding
3. Formalize -- introduce the equation/algorithm
4. Reveal -- the "aha moment"
5. Extend -- implications or generalizations
### Problem-Solution Arc
1. Problem -- what's broken
2. Failed attempt -- obvious approach fails
3. Key insight -- the idea that works
4. Solution -- implement it
5. Result -- show improvement
### Comparison Arc
1. Setup -- introduce two approaches
2. Approach A -- how it works
3. Approach B -- how it works
4. Contrast -- differences
5. Verdict -- which is better
### Build-Up Arc (architecture/systems)
1. Component A -- first piece
2. Component B -- second piece
3. Connection -- how they interact
4. Scale -- add more pieces
5. Full picture -- zoom out
## Scene Transitions
### Clean Break (default)
```python
self.play(FadeOut(Group(*self.mobjects)), run_time=0.5)
self.wait(0.3)
```
### Carry-Forward
Keep one element, fade the rest. Next scene starts with it still on screen.
### Transform Bridge
End scene with a shape, start next scene by transforming it.
## Cross-Scene Consistency
```python
# Shared constants at file top
BG = "#1C1C1C"
PRIMARY = "#58C4DD"
SECONDARY = "#83C167"
ACCENT = "#FFFF00"
TITLE_SIZE = 48
BODY_SIZE = 30
LABEL_SIZE = 24
FAST = 0.8; NORMAL = 1.5; SLOW = 2.5
```
## Scene Checklist
- [ ] Background color set
- [ ] Subcaptions on every animation
- [ ] `self.wait()` after every reveal
- [ ] Text buff >= 0.5 for edge positioning
- [ ] No text overlap
- [ ] Color constants used (not hardcoded)
- [ ] Opacity layering applied
- [ ] Clean exit at scene end
- [ ] No more than 5-6 elements visible at once
## Duration Estimation
| Content | Duration |
|---------|----------|
| Title card | 3-5s |
| Concept introduction | 10-20s |
| Equation reveal | 15-25s |
| Algorithm step | 5-10s |
| Data comparison | 10-15s |
| "Aha moment" | 15-30s |
| Conclusion | 5-10s |
## Planning Template
```markdown
# [Video Title]
## Overview
- **Topic**: [Core concept]
- **Hook**: [Opening question]
- **Aha moment**: [Key insight]
- **Target audience**: [Prerequisites]
- **Length**: [seconds/minutes]
- **Resolution**: 480p (draft) / 1080p (final)
## Color Palette
- Background: #1C1C1C
- Primary: #58C4DD -- [purpose]
- Secondary: #83C167 -- [purpose]
- Accent: #FFFF00 -- [purpose]
## Arc: [Discovery / Problem-Solution / Comparison / Build-Up]
## Scene 1: [Name] (~Ns)
**Purpose**: [one sentence]
**Layout**: [FULL_CENTER / LEFT_RIGHT / GRID / PROGRESSIVE]
### Visual elements
- [Mobject: type, position, color]
### Animation sequence
1. [Animation] -- [what it reveals] (~Ns)
### Subtitle
"[text]"
```
skills/creative/manim-video/references/troubleshooting.md
+135
View File
@@ -0,0 +1,135 @@
# Troubleshooting
## LaTeX Errors
**Missing raw string** (the #1 error):
```python
# WRONG: MathTex("\\frac{1}{2}") -- \\f is form-feed
# RIGHT: MathTex(r"\frac{1}{2}")
```
**Unbalanced braces**: `MathTex(r"\frac{1}{2")` -- missing closing brace.
**LaTeX not installed**: `which pdflatex` -- install texlive-full or mactex.
**Missing package**: Add to preamble:
```python
tex_template = TexTemplate()
tex_template.add_to_preamble(r"\usepackage{mathrsfs}")
MathTex(r"\mathscr{L}", tex_template=tex_template)
```
## VGroup TypeError
**Error:** `TypeError: Only values of type VMobject can be added as submobjects of VGroup`
**Cause:** `Text()` objects are `Mobject`, not `VMobject`. Mixing `Text` with shapes in a `VGroup` fails on Manim CE v0.20+.
```python
# WRONG: Text is not a VMobject
group = VGroup(circle, Text("Label"))
# RIGHT: use Group for mixed types
group = Group(circle, Text("Label"))
# RIGHT: VGroup is fine for shapes-only
shapes = VGroup(circle, square, arrow)
# RIGHT: MathTex IS a VMobject — VGroup works
equations = VGroup(MathTex(r"a"), MathTex(r"b"))
```
**Rule:** If the group contains any `Text()`, use `Group`. If it's all shapes or all `MathTex`, `VGroup` is fine.
**FadeOut everything:** Always use `Group(*self.mobjects)`, not `VGroup(*self.mobjects)`:
```python
self.play(FadeOut(Group(*self.mobjects))) # safe for mixed types
```
## Group save_state() / restore() Not Supported
**Error:** `NotImplementedError: Please override in a child class.`
**Cause:** `Group.save_state()` and `Group.restore()` are not implemented in Manim CE v0.20+. Only `VGroup` and individual `Mobject` subclasses support save/restore.
```python
# WRONG: Group doesn't support save_state
group = Group(circle, Text("label"))
group.save_state() # NotImplementedError!
# RIGHT: use FadeIn with shift/scale instead of save_state/restore
self.play(FadeIn(group, shift=UP * 0.3, scale=0.8))
# RIGHT: or save/restore on individual VMobjects
circle.save_state()
self.play(circle.animate.shift(RIGHT))
self.play(Restore(circle))
```
## letter_spacing Is Not a Valid Parameter
**Error:** `TypeError: Mobject.__init__() got an unexpected keyword argument 'letter_spacing'`
**Cause:** `Text()` does not accept `letter_spacing`. Manim uses Pango for text rendering and does not expose kerning controls on `Text()`.
```python
# WRONG
Text("HERMES", letter_spacing=6)
# RIGHT: use MarkupText with Pango attributes for spacing control
MarkupText('<span letter_spacing="6000">HERMES</span>', font_size=18)
# Note: Pango letter_spacing is in 1/1024 of a point
```
## Animation Errors
**Invisible animation** -- mobject never added:
```python
# WRONG: circle = Circle(); self.play(circle.animate.set_color(RED))
# RIGHT: self.play(Create(circle)); self.play(circle.animate.set_color(RED))
```
**Transform confusion** -- after Transform(A, B), A is on screen, B is not. Use ReplacementTransform if you want B.
**Duplicate animation** -- same mobject twice in one play():
```python
# WRONG: self.play(c.animate.shift(RIGHT), c.animate.set_color(RED))
# RIGHT: self.play(c.animate.shift(RIGHT).set_color(RED))
```
**Updater fights animation**:
```python
mob.suspend_updating()
self.play(mob.animate.shift(RIGHT))
mob.resume_updating()
```
## Rendering Issues
**Blurry output**: Using -ql (480p). Switch to -qm/-qh for final.
**Slow render**: Use -ql during development. Reduce Surface resolution. Shorter self.wait().
**Stale output**: `manim -ql --disable_caching script.py Scene`
**ffmpeg concat fails**: All clips must match resolution/FPS/codec.
## Common Mistakes
**Text clips at edge**: `buff >= 0.5` for `.to_edge()`
**Overlapping text**: Use `ReplacementTransform(old, new)`, not `Write(new)` on top.
**Too crowded**: Max 5-6 elements visible. Split into scenes or use opacity layering.
**No breathing room**: `self.wait(1.5)` minimum after reveals, `self.wait(2.0)` for key moments.
**Missing background color**: Set `self.camera.background_color = BG` in every scene.
## Debugging Strategy
1. Render a still: `manim -ql -s script.py Scene` -- instant layout check
2. Isolate the broken scene -- render only that one
3. Replace `self.play()` with `self.add()` to see final state instantly
4. Print positions: `print(mob.get_center())`
5. Clear cache: delete `media/` directory
skills/creative/manim-video/references/updaters-and-trackers.md
+260
View File
@@ -0,0 +1,260 @@
# Updaters and Value Trackers
## The problem updaters solve
Normal animations are discrete: `self.play()` goes from state A to state B. But what if you need continuous relationships — a label that always hovers above a moving dot, or a line that always connects two points?
Without updaters, you'd manually reposition every dependent object before every `self.play()`. Five animations that move a dot means five manual repositioning calls for the label. Miss one and it freezes in the wrong spot.
Updaters let you declare a relationship ONCE. Manim calls the updater function EVERY FRAME (15-60 fps depending on quality) to enforce that relationship, no matter what else is happening.
## ValueTracker: an invisible steering wheel
A ValueTracker is an invisible Mobject that holds a single float. It never appears on screen. It exists so you can ANIMATE it while other objects REACT to its value.
Think of it as a slider: drag the slider from 0 to 5, and every object wired to it responds in real time.
```python
tracker = ValueTracker(0) # invisible, stores 0.0
tracker.get_value() # read: 0.0
tracker.set_value(5) # write: jump to 5.0 instantly
tracker.animate.set_value(5) # animate: smoothly interpolate to 5.0
```
### The three-step pattern
Every ValueTracker usage follows this:
1. **Create the tracker** (the invisible slider)
2. **Create visible objects that READ the tracker** via updaters
3. **Animate the tracker** — all dependents update automatically
```python
# Step 1: Create tracker
x_tracker = ValueTracker(1)
# Step 2: Create dependent objects
dot = always_redraw(lambda: Dot(axes.c2p(x_tracker.get_value(), 0), color=YELLOW))
v_line = always_redraw(lambda: axes.get_vertical_line(
axes.c2p(x_tracker.get_value(), func(x_tracker.get_value())), color=BLUE
))
label = always_redraw(lambda: DecimalNumber(x_tracker.get_value(), font_size=24)
.next_to(dot, UP))
self.add(dot, v_line, label)
# Step 3: Animate the tracker — everything follows
self.play(x_tracker.animate.set_value(5), run_time=3)
```
## Types of updaters
### Lambda updater (most common)
Runs a function every frame, passing the mobject itself:
```python
# Label always stays above the dot
label.add_updater(lambda m: m.next_to(dot, UP, buff=0.2))
# Line always connects two points
line.add_updater(lambda m: m.put_start_and_end_on(
point_a.get_center(), point_b.get_center()
))
```
### Time-based updater (with dt)
The second argument `dt` is the time since the last frame (~0.017s at 60fps):
```python
# Continuous rotation
square.add_updater(lambda m, dt: m.rotate(0.5 * dt))
# Continuous rightward drift
dot.add_updater(lambda m, dt: m.shift(RIGHT * 0.3 * dt))
# Oscillation
dot.add_updater(lambda m, dt: m.move_to(
axes.c2p(m.get_center()[0], np.sin(self.time))
))
```
Use `dt` updaters for physics simulations, continuous motion, and time-dependent effects.
### always_redraw: full rebuild every frame
Creates a new mobject from scratch each frame. More expensive than `add_updater` but handles cases where the mobject's structure changes (not just position/color):
```python
# Brace that follows a resizing square
brace = always_redraw(Brace, square, UP)
# Area under curve that updates as function changes
area = always_redraw(lambda: axes.get_area(
graph, x_range=[0, x_tracker.get_value()], color=BLUE, opacity=0.3
))
# Label that reconstructs its text
counter = always_redraw(lambda: Text(
f"n = {int(x_tracker.get_value())}", font_size=24, font="Menlo"
).to_corner(UR))
```
**When to use which:**
- `add_updater` — position, color, opacity changes (cheap, preferred)
- `always_redraw` — when the shape/structure itself changes (expensive, use sparingly)
## DecimalNumber: showing live values
```python
# Counter that tracks a ValueTracker
tracker = ValueTracker(0)
number = DecimalNumber(0, font_size=48, num_decimal_places=1, color=PRIMARY)
number.add_updater(lambda m: m.set_value(tracker.get_value()))
number.add_updater(lambda m: m.next_to(dot, RIGHT, buff=0.3))
self.add(number)
self.play(tracker.animate.set_value(100), run_time=3)
```
### Variable: the labeled version
```python
var = Variable(0, Text("x", font_size=24, font="Menlo"), num_decimal_places=2)
self.add(var)
self.play(var.tracker.animate.set_value(PI), run_time=2)
# Displays: x = 3.14
```
## Removing updaters
```python
# Remove all updaters
mobject.clear_updaters()
# Suspend temporarily (during an animation that would fight the updater)
mobject.suspend_updating()
self.play(mobject.animate.shift(RIGHT))
mobject.resume_updating()
# Remove specific updater (if you stored a reference)
def my_updater(m):
m.next_to(dot, UP)
label.add_updater(my_updater)
# ... later ...
label.remove_updater(my_updater)
```
## Animation-based updaters
### UpdateFromFunc / UpdateFromAlphaFunc
These are ANIMATIONS (passed to `self.play`), not persistent updaters:
```python
# Call a function on each frame of the animation
self.play(UpdateFromFunc(mobject, lambda m: m.next_to(moving_target, UP)), run_time=3)
# With alpha (0 to 1) — useful for custom interpolation
self.play(UpdateFromAlphaFunc(circle, lambda m, a: m.set_fill(opacity=a)), run_time=2)
```
### turn_animation_into_updater
Convert a one-shot animation into a continuous updater:
```python
from manim import turn_animation_into_updater
# This would normally play once — now it loops forever
turn_animation_into_updater(Rotating(gear, rate=PI/4))
self.add(gear)
self.wait(5) # gear rotates for 5 seconds
```
## Practical patterns
### Pattern 1: Dot tracing a function
```python
tracker = ValueTracker(0)
graph = axes.plot(np.sin, x_range=[0, 2*PI], color=PRIMARY)
dot = always_redraw(lambda: Dot(
axes.c2p(tracker.get_value(), np.sin(tracker.get_value())),
color=YELLOW
))
tangent = always_redraw(lambda: axes.get_secant_slope_group(
x=tracker.get_value(), graph=graph, dx=0.01,
secant_line_color=HIGHLIGHT, secant_line_length=3
))
self.add(graph, dot, tangent)
self.play(tracker.animate.set_value(2*PI), run_time=6, rate_func=linear)
```
### Pattern 2: Live area under curve
```python
tracker = ValueTracker(0.5)
area = always_redraw(lambda: axes.get_area(
graph, x_range=[0, tracker.get_value()],
color=PRIMARY, opacity=0.3
))
area_label = always_redraw(lambda: DecimalNumber(
# Numerical integration
sum(func(x) * 0.01 for x in np.arange(0, tracker.get_value(), 0.01)),
font_size=24
).next_to(axes, RIGHT))
self.add(area, area_label)
self.play(tracker.animate.set_value(4), run_time=5)
```
### Pattern 3: Connected diagram
```python
# Nodes that can be moved, with edges that auto-follow
node_a = Dot(LEFT * 2, color=PRIMARY)
node_b = Dot(RIGHT * 2, color=SECONDARY)
edge = Line().add_updater(lambda m: m.put_start_and_end_on(
node_a.get_center(), node_b.get_center()
))
label = Text("edge", font_size=18, font="Menlo").add_updater(
lambda m: m.move_to(edge.get_center() + UP * 0.3)
)
self.add(node_a, node_b, edge, label)
self.play(node_a.animate.shift(UP * 2), run_time=2)
self.play(node_b.animate.shift(DOWN + RIGHT), run_time=2)
# Edge and label follow automatically
```
### Pattern 4: Parameter exploration
```python
# Explore how a parameter changes a curve
a_tracker = ValueTracker(1)
curve = always_redraw(lambda: axes.plot(
lambda x: a_tracker.get_value() * np.sin(x),
x_range=[0, 2*PI], color=PRIMARY
))
param_label = always_redraw(lambda: Text(
f"a = {a_tracker.get_value():.1f}", font_size=24, font="Menlo"
).to_corner(UR))
self.add(curve, param_label)
self.play(a_tracker.animate.set_value(3), run_time=3)
self.play(a_tracker.animate.set_value(0.5), run_time=2)
self.play(a_tracker.animate.set_value(1), run_time=1)
```
## Common mistakes
1. **Updater fights animation:** If a mobject has an updater that sets its position, and you try to animate it elsewhere, the updater wins every frame. Suspend updating first.
2. **always_redraw for simple moves:** If you only need to reposition, use `add_updater`. `always_redraw` reconstructs the entire mobject every frame — expensive and unnecessary for position tracking.
3. **Forgetting to add to scene:** Updaters only run on mobjects that are in the scene. `always_redraw` creates the mobject but you still need `self.add()`.
4. **Updater creates new mobjects without cleanup:** If your updater creates Text objects every frame, they accumulate. Use `always_redraw` (which handles cleanup) or update properties in-place.
skills/creative/manim-video/references/visual-design.md
+124
View File
@@ -0,0 +1,124 @@
# Visual Design Principles
## 12 Core Principles
1. **Geometry Before Algebra** — Show the shape first, the equation second.
2. **Opacity Layering** — PRIMARY=1.0, CONTEXT=0.4, GRID=0.15. Direct attention through brightness.
3. **One New Idea Per Scene** — Each scene introduces exactly one concept.
4. **Spatial Consistency** — Same concept occupies the same screen region throughout.
5. **Color = Meaning** — Assign colors to concepts, not mobjects. If velocity is blue, it stays blue.
6. **Progressive Disclosure** — Show simplest version first, add complexity incrementally.
7. **Transform, Don't Replace** — Use Transform/ReplacementTransform to show connections.
8. **Breathing Room** — `self.wait(1.5)` minimum after showing something new.
9. **Visual Weight Balance** — Don't cluster everything on one side.
10. **Consistent Motion Vocabulary** — Pick a small set of animation types and reuse them.
11. **Dark Background, Light Content** — #1C1C1C to #2D2B55 backgrounds maximize contrast.
12. **Intentional Empty Space** — Leave at least 15% of the frame empty.
## Layout Templates
### FULL_CENTER
One main element centered, title above, note below.
Best for: single equations, single diagrams, title cards.
### LEFT_RIGHT
Two elements side by side at x=-3.5 and x=3.5.
Best for: equation + visual, before/after, comparison.
### TOP_BOTTOM
Main element at y=1.5, supporting content at y=-1.5.
Best for: concept + examples, theorem + cases.
### GRID
Multiple elements via `arrange_in_grid()`.
Best for: comparison matrices, multi-step processes.
### PROGRESSIVE
Elements appear one at a time, arranged DOWN with aligned_edge=LEFT.
Best for: algorithms, proofs, step-by-step processes.
### ANNOTATED_DIAGRAM
Central diagram with floating labels connected by arrows.
Best for: architecture diagrams, annotated figures.
## Color Palettes
### Classic 3B1B
```python
BG="#1C1C1C"; PRIMARY=BLUE; SECONDARY=GREEN; ACCENT=YELLOW; HIGHLIGHT=RED
```
### Warm Academic
```python
BG="#2D2B55"; PRIMARY="#FF6B6B"; SECONDARY="#FFD93D"; ACCENT="#6BCB77"
```
### Neon Tech
```python
BG="#0A0A0A"; PRIMARY="#00F5FF"; SECONDARY="#FF00FF"; ACCENT="#39FF14"
```
## Font Selection
**Use monospace fonts for all text.** Manim's Pango text renderer produces broken kerning with proportional fonts (Helvetica, Inter, SF Pro, Arial) at all sizes and resolutions. Characters overlap and spacing is inconsistent. This is a fundamental Pango limitation, not a Manim bug.
Monospace fonts have fixed character widths — zero kerning issues by design.
### Recommended Fonts
| Use case | Font | Fallback |
|----------|------|----------|
| **All text (default)** | `"Menlo"` | `"Courier New"`, `"DejaVu Sans Mono"` |
| Code, labels | `"JetBrains Mono"`, `"SF Mono"` | `"Menlo"` |
| Math | Use `MathTex` (renders via LaTeX, not Pango) | — |
```python
MONO = "Menlo" # define once at top of file
title = Text("Fourier Series", font_size=48, color=PRIMARY, weight=BOLD, font=MONO)
label = Text("n=1: (4/pi) sin(x)", font_size=20, color=BLUE, font=MONO)
note = Text("Convergence at discontinuities", font_size=18, color=DIM, font=MONO)
# Math — always use MathTex, not Text
equation = MathTex(r"\nabla L = \frac{\partial L}{\partial w}")
```
### When Proportional Fonts Are Acceptable
Large title text (font_size >= 48) with short strings (1-3 words) can use proportional fonts without visible kerning issues. For anything else — labels, descriptions, multi-word text, small sizes — use monospace.
### Font Availability
- **macOS**: Menlo (pre-installed), SF Mono
- **Linux**: DejaVu Sans Mono (pre-installed), Liberation Mono
- **Cross-platform**: JetBrains Mono (install from jetbrains.com)
`"Menlo"` is the safest default — pre-installed on macOS, and Linux systems fall back to DejaVu Sans Mono.
### Fine-Grained Text Control
`Text()` does not support `letter_spacing` or kerning parameters. For fine control, use `MarkupText` with Pango attributes:
```python
# Letter spacing (Pango units: 1/1024 of a point)
MarkupText('<span letter_spacing="6000">HERMES</span>', font_size=18, font="Menlo")
# Bold specific words
MarkupText('This is <b>important</b>', font_size=24, font="Menlo")
# Color specific words
MarkupText('Red <span foreground="#FF6B6B">warning</span>', font_size=24, font="Menlo")
```
### Minimum Font Size
`font_size=18` is the minimum for readable text at any resolution. Below 18, characters become blurry at `-ql` and barely readable even at `-qh`.
## Visual Hierarchy Checklist
For every frame:
1. What is the ONE thing to look at? (brightest/largest)
2. What is context? (dimmed to 0.3-0.4)
3. What is structural? (dimmed to 0.15)
4. Enough empty space? (>15%)
5. All text readable at phone size?
skills/creative/manim-video/scripts/setup.sh
Executable
+14
View File
@@ -0,0 +1,14 @@
#!/usr/bin/env bash
set -euo pipefail
G="\033[0;32m"; R="\033[0;31m"; N="\033[0m"
ok() { echo -e " ${G}+${N} $1"; }
fail() { echo -e " ${R}x${N} $1"; }
echo ""; echo "Manim Video Skill — Setup Check"; echo ""
errors=0
command -v python3 &>/dev/null && ok "Python $(python3 --version 2>&1 | awk '{print $2}')" || { fail "Python 3 not found"; errors=$((errors+1)); }
python3 -c "import manim" 2>/dev/null && ok "Manim $(manim --version 2>&1 | head -1)" || { fail "Manim not installed: pip install manim"; errors=$((errors+1)); }
command -v pdflatex &>/dev/null && ok "LaTeX (pdflatex)" || { fail "LaTeX not found (macOS: brew install --cask mactex-no-gui)"; errors=$((errors+1)); }
command -v ffmpeg &>/dev/null && ok "ffmpeg" || { fail "ffmpeg not found"; errors=$((errors+1)); }
echo ""
[ $errors -eq 0 ] && echo -e "${G}All prerequisites satisfied.${N}" || echo -e "${R}$errors prerequisite(s) missing.${N}"
echo ""
skills/creative/p5js/README.md
+64
View File
@@ -0,0 +1,64 @@
# p5.js Skill
Production pipeline for interactive and generative visual art using [p5.js](https://p5js.org/).
## What it does
Creates browser-based visual art from text prompts. The agent handles the full pipeline: creative concept, code generation, preview, export, and iterative refinement. Output is a single self-contained HTML file that runs in any browser — no build step, no server, no dependencies beyond a CDN script tag.
The output is real interactive art. Not tutorial exercises. Generative systems, particle physics, noise fields, shader effects, kinetic typography — composed with intentional color palettes, layered composition, and visual hierarchy.
## Modes
| Mode | Input | Output |
|------|-------|--------|
| **Generative art** | Seed / parameters | Procedural visual composition |
| **Data visualization** | Dataset / API | Interactive charts, custom data displays |
| **Interactive experience** | None (user drives) | Mouse/keyboard/touch-driven sketch |
| **Animation / motion graphics** | Timeline / storyboard | Timed sequences, kinetic typography |
| **3D scene** | Concept description | WebGL geometry, lighting, shaders |
| **Image processing** | Image file(s) | Pixel manipulation, filters, pointillism |
| **Audio-reactive** | Audio file / mic | Sound-driven generative visuals |
## Export Formats
| Format | Method |
|--------|--------|
| **HTML** | Self-contained file, opens in any browser |
| **PNG** | `saveCanvas()` — press 's' to capture |
| **GIF** | `saveGif()` — press 'g' to capture |
| **MP4** | Frame sequence + ffmpeg via `scripts/render.sh` |
| **SVG** | p5.js-svg renderer for vector output |
## Prerequisites
A modern browser. That's it for basic use.
For headless export: Node.js, Puppeteer, ffmpeg.
```bash
bash skills/creative/p5js/scripts/setup.sh
```
## File Structure
```
├── SKILL.md # Modes, workflow, creative direction, critical notes
├── README.md # This file
├── references/
│ ├── core-api.md # Canvas, draw loop, transforms, offscreen buffers, math
│ ├── shapes-and-geometry.md # Primitives, vertices, curves, vectors, SDFs, clipping
│ ├── visual-effects.md # Noise, flow fields, particles, pixels, textures, feedback
│ ├── animation.md # Easing, springs, state machines, timelines, transitions
│ ├── typography.md # Fonts, textToPoints, kinetic text, text masks
│ ├── color-systems.md # HSB/RGB, palettes, gradients, blend modes, curated colors
│ ├── webgl-and-3d.md # 3D primitives, camera, lighting, shaders, framebuffers
│ ├── interaction.md # Mouse, keyboard, touch, DOM, audio, scroll
│ ├── export-pipeline.md # PNG, GIF, MP4, SVG, headless, tiling, batch export
│ └── troubleshooting.md # Performance, common mistakes, browser issues, debugging
└── scripts/
├── setup.sh # Dependency verification
├── serve.sh # Local dev server (for loading local assets)
├── render.sh # Headless render pipeline (HTML → frames → MP4)
└── export-frames.js # Puppeteer frame capture (Node.js)
```
skills/creative/p5js/SKILL.md
+558
View File
@@ -0,0 +1,558 @@
---
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
```
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) | < 100KB (excluding CDN libraries) |
| Load time | < 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
skills/creative/p5js/references/animation.md
+439
View File
@@ -0,0 +1,439 @@
# Animation
## Frame-Based Animation
### The Draw Loop
```javascript
function draw() {
// Called ~60 times/sec by default
// frameCount — integer, starts at 1
// deltaTime — ms since last frame (use for framerate-independent motion)
// millis() — ms since sketch start
}
```
### Time-Based vs Frame-Based
```javascript
// Frame-based (speed varies with framerate)
x += speed;
// Time-based (consistent speed regardless of framerate)
x += speed * (deltaTime / 16.67); // normalized to 60fps
```
### Normalized Time
```javascript
// Progress from 0 to 1 over N seconds
let duration = 5000; // 5 seconds in ms
let t = constrain(millis() / duration, 0, 1);
// Looping progress (0 → 1 → 0 → 1...)
let period = 3000; // 3 second loop
let t = (millis() % period) / period;
// Ping-pong (0 → 1 → 0 → 1...)
let raw = (millis() % (period * 2)) / period;
let t = raw <= 1 ? raw : 2 - raw;
```
## Easing Functions
### Built-in Lerp
```javascript
// Linear interpolation — smooth but mechanical
let x = lerp(startX, endX, t);
// Map for non-0-1 ranges
let y = map(t, 0, 1, startY, endY);
```
### Common Easing Curves
```javascript
// Ease in (slow start)
function easeInQuad(t) { return t * t; }
function easeInCubic(t) { return t * t * t; }
function easeInExpo(t) { return t === 0 ? 0 : pow(2, 10 * (t - 1)); }
// Ease out (slow end)
function easeOutQuad(t) { return 1 - (1 - t) * (1 - t); }
function easeOutCubic(t) { return 1 - pow(1 - t, 3); }
function easeOutExpo(t) { return t === 1 ? 1 : 1 - pow(2, -10 * t); }
// Ease in-out (slow both ends)
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : 1 - pow(-2 * t + 2, 3) / 2;
}
function easeInOutQuint(t) {
return t < 0.5 ? 16 * t * t * t * t * t : 1 - pow(-2 * t + 2, 5) / 2;
}
// Elastic (spring overshoot)
function easeOutElastic(t) {
if (t === 0 || t === 1) return t;
return pow(2, -10 * t) * sin((t * 10 - 0.75) * (2 * PI / 3)) + 1;
}
// Bounce
function easeOutBounce(t) {
if (t < 1/2.75) return 7.5625 * t * t;
else if (t < 2/2.75) { t -= 1.5/2.75; return 7.5625 * t * t + 0.75; }
else if (t < 2.5/2.75) { t -= 2.25/2.75; return 7.5625 * t * t + 0.9375; }
else { t -= 2.625/2.75; return 7.5625 * t * t + 0.984375; }
}
// Smooth step (Hermite interpolation — great default)
function smoothstep(t) { return t * t * (3 - 2 * t); }
// Smoother step (Ken Perlin)
function smootherstep(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
```
### Applying Easing
```javascript
// Animate from startVal to endVal over duration ms
function easedValue(startVal, endVal, startTime, duration, easeFn) {
let t = constrain((millis() - startTime) / duration, 0, 1);
return lerp(startVal, endVal, easeFn(t));
}
// Usage
let x = easedValue(100, 700, animStartTime, 2000, easeOutCubic);
```
## Spring Physics
More natural than easing — responds to force, overshoots, settles.
```javascript
class Spring {
constructor(value, target, stiffness = 0.1, damping = 0.7) {
this.value = value;
this.target = target;
this.velocity = 0;
this.stiffness = stiffness;
this.damping = damping;
}
update() {
let force = (this.target - this.value) * this.stiffness;
this.velocity += force;
this.velocity *= this.damping;
this.value += this.velocity;
return this.value;
}
setTarget(t) { this.target = t; }
isSettled(threshold = 0.01) {
return abs(this.velocity) < threshold && abs(this.value - this.target) < threshold;
}
}
// Usage
let springX = new Spring(0, 0, 0.08, 0.85);
function draw() {
springX.setTarget(mouseX);
let x = springX.update();
ellipse(x, height/2, 50);
}
```
### 2D Spring
```javascript
class Spring2D {
constructor(x, y) {
this.pos = createVector(x, y);
this.target = createVector(x, y);
this.vel = createVector(0, 0);
this.stiffness = 0.08;
this.damping = 0.85;
}
update() {
let force = p5.Vector.sub(this.target, this.pos).mult(this.stiffness);
this.vel.add(force).mult(this.damping);
this.pos.add(this.vel);
return this.pos;
}
}
```
## State Machines
For complex multi-phase animations.
```javascript
const STATES = { IDLE: 0, ENTER: 1, ACTIVE: 2, EXIT: 3 };
let state = STATES.IDLE;
let stateStart = 0;
function setState(newState) {
state = newState;
stateStart = millis();
}
function stateTime() {
return millis() - stateStart;
}
function draw() {
switch (state) {
case STATES.IDLE:
// waiting...
break;
case STATES.ENTER:
let t = constrain(stateTime() / 1000, 0, 1);
let alpha = easeOutCubic(t) * 255;
// fade in...
if (t >= 1) setState(STATES.ACTIVE);
break;
case STATES.ACTIVE:
// main animation...
break;
case STATES.EXIT:
let t2 = constrain(stateTime() / 500, 0, 1);
// fade out...
if (t2 >= 1) setState(STATES.IDLE);
break;
}
}
```
## Timeline Sequencing
For timed multi-scene animations (motion graphics, title sequences).
```javascript
class Timeline {
constructor() {
this.events = [];
}
at(timeMs, duration, fn) {
this.events.push({ start: timeMs, end: timeMs + duration, fn });
return this;
}
update() {
let now = millis();
for (let e of this.events) {
if (now >= e.start && now < e.end) {
let t = (now - e.start) / (e.end - e.start);
e.fn(t);
}
}
}
}
// Usage
let timeline = new Timeline();
timeline
.at(0, 2000, (t) => {
// Scene 1: title fade in (0-2s)
let alpha = easeOutCubic(t) * 255;
fill(255, alpha);
textSize(48);
text("Hello", width/2, height/2);
})
.at(2000, 1000, (t) => {
// Scene 2: title fade out (2-3s)
let alpha = (1 - easeInCubic(t)) * 255;
fill(255, alpha);
textSize(48);
text("Hello", width/2, height/2);
})
.at(3000, 5000, (t) => {
// Scene 3: main content (3-8s)
renderMainContent(t);
});
function draw() {
background(0);
timeline.update();
}
```
## Noise-Driven Motion
More organic than deterministic animation.
```javascript
// Smooth wandering position
let x = map(noise(frameCount * 0.005, 0), 0, 1, 0, width);
let y = map(noise(0, frameCount * 0.005), 0, 1, 0, height);
// Noise-driven rotation
let angle = noise(frameCount * 0.01) * TWO_PI;
// Noise-driven scale (breathing effect)
let s = map(noise(frameCount * 0.02), 0, 1, 0.8, 1.2);
// Noise-driven color shift
let hue = map(noise(frameCount * 0.003), 0, 1, 0, 360);
```
## Transition Patterns
### Fade In/Out
```javascript
function fadeIn(t) { return constrain(t, 0, 1); }
function fadeOut(t) { return constrain(1 - t, 0, 1); }
```
### Slide
```javascript
function slideIn(t, direction = 'left') {
let et = easeOutCubic(t);
switch (direction) {
case 'left': return lerp(-width, 0, et);
case 'right': return lerp(width, 0, et);
case 'up': return lerp(-height, 0, et);
case 'down': return lerp(height, 0, et);
}
}
```
### Scale Reveal
```javascript
function scaleReveal(t) {
let et = easeOutElastic(constrain(t, 0, 1));
push();
translate(width/2, height/2);
scale(et);
translate(-width/2, -height/2);
// draw content...
pop();
}
```
### Staggered Entry
```javascript
// N elements appear one after another
let staggerDelay = 100; // ms between each
for (let i = 0; i < elements.length; i++) {
let itemStart = baseTime + i * staggerDelay;
let t = constrain((millis() - itemStart) / 500, 0, 1);
let alpha = easeOutCubic(t) * 255;
let yOffset = lerp(30, 0, easeOutCubic(t));
// draw element with alpha and yOffset
}
```
## Recording Deterministic Animations
For frame-perfect export, use frame count instead of millis():
```javascript
const TOTAL_FRAMES = 300; // 10 seconds at 30fps
const FPS = 30;
function draw() {
let t = frameCount / TOTAL_FRAMES; // 0 to 1 over full duration
if (t > 1) { noLoop(); return; }
// Use t for all animation timing — deterministic
renderFrame(t);
// Export
if (CONFIG.recording) {
saveCanvas('frame-' + nf(frameCount, 4), 'png');
}
}
```
## Scene Fade Envelopes (Video)
Every scene in a multi-scene video needs fade-in and fade-out. Hard cuts between visually different generative scenes are jarring.
```javascript
const SCENE_FRAMES = 150; // 5 seconds at 30fps
const FADE = 15; // half-second fade
function draw() {
let lf = frameCount - 1; // 0-indexed local frame
let t = lf / SCENE_FRAMES; // 0..1 normalized progress
// Fade envelope: ramp up at start, ramp down at end
let fade = 1;
if (lf < FADE) fade = lf / FADE;
if (lf > SCENE_FRAMES - FADE) fade = (SCENE_FRAMES - lf) / FADE;
fade = fade * fade * (3 - 2 * fade); // smoothstep for organic feel
// Apply fade to all visual output
// Option 1: multiply alpha values by fade
fill(r, g, b, alpha * fade);
// Option 2: tint entire composited image
tint(255, fade * 255);
image(sceneBuffer, 0, 0);
noTint();
// Option 3: multiply pixel brightness (for pixel-level scenes)
pixels[i] = r * fade;
}
```
## Animating Static Algorithms
Some generative algorithms produce a single static result (attractors, circle packing, Voronoi). In video, static content reads as frozen/broken. Techniques to add motion:
### Progressive Reveal
Expand a mask from center outward to reveal the precomputed result:
```javascript
let revealRadius = easeOutCubic(min(t * 1.5, 1)) * (width * 0.8);
// In the render loop, skip pixels beyond revealRadius from center
let dx = x - width/2, dy = y - height/2;
if (sqrt(dx*dx + dy*dy) > revealRadius) continue;
// Soft edge:
let edgeFade = constrain((revealRadius - dist) / 40, 0, 1);
```
### Parameter Sweep
Slowly change a parameter to show the algorithm evolving:
```javascript
// Attractor with drifting parameters
let a = -1.7 + sin(t * 0.5) * 0.2; // oscillate around base value
let b = 1.3 + cos(t * 0.3) * 0.15;
```
### Slow Camera Motion
Apply subtle zoom or rotation to the final image:
```javascript
push();
translate(width/2, height/2);
scale(1 + t * 0.05); // slow 5% zoom over scene duration
rotate(t * 0.1); // gentle rotation
translate(-width/2, -height/2);
image(precomputedResult, 0, 0);
pop();
```
### Overlay Dynamic Elements
Add particles, grain, or subtle noise on top of static content:
```javascript
// Static background
image(staticResult, 0, 0);
// Dynamic overlay
for (let p of ambientParticles) {
p.update();
p.display(); // slow-moving specks add life
}
```
skills/creative/p5js/references/color-systems.md
+352
View File
@@ -0,0 +1,352 @@
# Color Systems
## Color Modes
### HSB (Recommended for Generative Art)
```javascript
colorMode(HSB, 360, 100, 100, 100);
// Hue: 0-360 (color wheel position)
// Saturation: 0-100 (gray to vivid)
// Brightness: 0-100 (black to full)
// Alpha: 0-100
fill(200, 80, 90); // blue, vivid, bright
fill(200, 80, 90, 50); // 50% transparent
```
HSB advantages:
- Rotate hue: `(baseHue + offset) % 360`
- Desaturate: reduce S
- Darken: reduce B
- Monochrome variations: fix H, vary S and B
- Complementary: `(hue + 180) % 360`
- Analogous: `hue +/- 30`
### HSL
```javascript
colorMode(HSL, 360, 100, 100, 100);
// Lightness 50 = pure color, 0 = black, 100 = white
// More intuitive for tints (L > 50) and shades (L < 50)
```
### RGB
```javascript
colorMode(RGB, 255, 255, 255, 255); // default
// Direct channel control, less intuitive for procedural palettes
```
## Color Objects
```javascript
let c = color(200, 80, 90); // create color object
fill(c);
// Extract components
let h = hue(c);
let s = saturation(c);
let b = brightness(c);
let r = red(c);
let g = green(c);
let bl = blue(c);
let a = alpha(c);
// Hex colors work everywhere
fill('#e8d5b7');
fill('#e8d5b7cc'); // with alpha
// Modify via setters
c.setAlpha(128);
c.setRed(200);
```
## Color Interpolation
### lerpColor
```javascript
let c1 = color(0, 80, 100); // red
let c2 = color(200, 80, 100); // blue
let mixed = lerpColor(c1, c2, 0.5); // midpoint blend
// Works in current colorMode
```
### paletteLerp (p5.js 1.11+)
Interpolate through multiple colors at once.
```javascript
let colors = [
color('#2E0854'),
color('#850E35'),
color('#EE6C4D'),
color('#F5E663')
];
let c = paletteLerp(colors, t); // t = 0..1, interpolates through all
```
### Manual Multi-Stop Gradient
```javascript
function multiLerp(colors, t) {
t = constrain(t, 0, 1);
let segment = t * (colors.length - 1);
let idx = floor(segment);
let frac = segment - idx;
idx = min(idx, colors.length - 2);
return lerpColor(colors[idx], colors[idx + 1], frac);
}
```
## Gradient Rendering
### Linear Gradient
```javascript
function linearGradient(x1, y1, x2, y2, c1, c2) {
let steps = dist(x1, y1, x2, y2);
for (let i = 0; i <= steps; i++) {
let t = i / steps;
let c = lerpColor(c1, c2, t);
stroke(c);
let x = lerp(x1, x2, t);
let y = lerp(y1, y2, t);
// Draw perpendicular line at each point
let dx = -(y2 - y1) / steps * 1000;
let dy = (x2 - x1) / steps * 1000;
line(x - dx, y - dy, x + dx, y + dy);
}
}
```
### Radial Gradient
```javascript
function radialGradient(cx, cy, r, innerColor, outerColor) {
noStroke();
for (let i = r; i > 0; i--) {
let t = 1 - i / r;
fill(lerpColor(innerColor, outerColor, t));
ellipse(cx, cy, i * 2);
}
}
```
### Noise-Based Gradient
```javascript
function noiseGradient(colors, noiseScale, time) {
loadPixels();
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let n = noise(x * noiseScale, y * noiseScale, time);
let c = multiLerp(colors, n);
let idx = 4 * (y * width + x);
pixels[idx] = red(c);
pixels[idx+1] = green(c);
pixels[idx+2] = blue(c);
pixels[idx+3] = 255;
}
}
updatePixels();
}
```
## Procedural Palette Generation
### Complementary
```javascript
function complementary(baseHue) {
return [baseHue, (baseHue + 180) % 360];
}
```
### Analogous
```javascript
function analogous(baseHue, spread = 30) {
return [
(baseHue - spread + 360) % 360,
baseHue,
(baseHue + spread) % 360
];
}
```
### Triadic
```javascript
function triadic(baseHue) {
return [baseHue, (baseHue + 120) % 360, (baseHue + 240) % 360];
}
```
### Split Complementary
```javascript
function splitComplementary(baseHue) {
return [baseHue, (baseHue + 150) % 360, (baseHue + 210) % 360];
}
```
### Tetradic (Rectangle)
```javascript
function tetradic(baseHue) {
return [baseHue, (baseHue + 60) % 360, (baseHue + 180) % 360, (baseHue + 240) % 360];
}
```
### Monochromatic Variations
```javascript
function monoVariations(hue, count = 5) {
let colors = [];
for (let i = 0; i < count; i++) {
let s = map(i, 0, count - 1, 20, 90);
let b = map(i, 0, count - 1, 95, 40);
colors.push(color(hue, s, b));
}
return colors;
}
```
## Curated Palette Library
### Warm Palettes
```javascript
const SUNSET = ['#2E0854', '#850E35', '#EE6C4D', '#F5E663'];
const EMBER = ['#1a0000', '#4a0000', '#8b2500', '#cd5c00', '#ffd700'];
const PEACH = ['#fff5eb', '#ffdab9', '#ff9a76', '#ff6b6b', '#c94c4c'];
const COPPER = ['#1c1108', '#3d2b1f', '#7b4b2a', '#b87333', '#daa06d'];
```
### Cool Palettes
```javascript
const OCEAN = ['#0a0e27', '#1a1b4b', '#2a4a7f', '#3d7cb8', '#87ceeb'];
const ARCTIC = ['#0d1b2a', '#1b263b', '#415a77', '#778da9', '#e0e1dd'];
const FOREST = ['#0b1a0b', '#1a3a1a', '#2d5a2d', '#4a8c4a', '#90c990'];
const DEEP_SEA = ['#000814', '#001d3d', '#003566', '#006d77', '#83c5be'];
```
### Neutral Palettes
```javascript
const GRAPHITE = ['#1a1a1a', '#333333', '#555555', '#888888', '#cccccc'];
const CREAM = ['#f4f0e8', '#e8dcc8', '#c9b99a', '#a89070', '#7a6450'];
const SLATE = ['#1e293b', '#334155', '#475569', '#64748b', '#94a3b8'];
```
### Vivid Palettes
```javascript
const NEON = ['#ff00ff', '#00ffff', '#ff0080', '#80ff00', '#0080ff'];
const RAINBOW = ['#ff0000', '#ff8000', '#ffff00', '#00ff00', '#0000ff', '#8000ff'];
const VAPOR = ['#ff71ce', '#01cdfe', '#05ffa1', '#b967ff', '#fffb96'];
const CYBER = ['#0f0f0f', '#00ff41', '#ff0090', '#00d4ff', '#ffd000'];
```
### Earth Tones
```javascript
const TERRA = ['#2c1810', '#5c3a2a', '#8b6b4a', '#c4a672', '#e8d5b7'];
const MOSS = ['#1a1f16', '#3d4a2e', '#6b7c4f', '#9aab7a', '#c8d4a9'];
const CLAY = ['#3b2f2f', '#6b4c4c', '#9e7676', '#c9a0a0', '#e8caca'];
```
## Blend Modes
```javascript
blendMode(BLEND); // default — alpha compositing
blendMode(ADD); // additive — bright glow effects
blendMode(MULTIPLY); // darkening — shadows, texture overlay
blendMode(SCREEN); // lightening — soft glow
blendMode(OVERLAY); // contrast boost — high/low emphasis
blendMode(DIFFERENCE); // color subtraction — psychedelic
blendMode(EXCLUSION); // softer difference
blendMode(REPLACE); // overwrite (no alpha blending)
blendMode(REMOVE); // subtract alpha
blendMode(LIGHTEST); // keep brighter pixel
blendMode(DARKEST); // keep darker pixel
blendMode(BURN); // darken + saturate
blendMode(DODGE); // lighten + saturate
blendMode(SOFT_LIGHT); // subtle overlay
blendMode(HARD_LIGHT); // strong overlay
// ALWAYS reset after use
blendMode(BLEND);
```
### Blend Mode Recipes
| Effect | Mode | Use case |
|--------|------|----------|
| Additive glow | `ADD` | Light beams, fire, particles |
| Shadow overlay | `MULTIPLY` | Texture, vignette |
| Soft light mix | `SCREEN` | Fog, mist, backlight |
| High contrast | `OVERLAY` | Dramatic compositing |
| Color negative | `DIFFERENCE` | Glitch, psychedelic |
| Layer compositing | `BLEND` | Standard alpha layering |
## Background Techniques
### Textured Background
```javascript
function texturedBackground(baseColor, noiseScale, noiseAmount) {
loadPixels();
let r = red(baseColor), g = green(baseColor), b = blue(baseColor);
for (let i = 0; i < pixels.length; i += 4) {
let x = (i / 4) % width;
let y = floor((i / 4) / width);
let n = (noise(x * noiseScale, y * noiseScale) - 0.5) * noiseAmount;
pixels[i] = constrain(r + n, 0, 255);
pixels[i+1] = constrain(g + n, 0, 255);
pixels[i+2] = constrain(b + n, 0, 255);
pixels[i+3] = 255;
}
updatePixels();
}
```
### Vignette
```javascript
function vignette(strength = 0.5, radius = 0.7) {
loadPixels();
let cx = width / 2, cy = height / 2;
let maxDist = dist(0, 0, cx, cy);
for (let i = 0; i < pixels.length; i += 4) {
let x = (i / 4) % width;
let y = floor((i / 4) / width);
let d = dist(x, y, cx, cy) / maxDist;
let factor = 1.0 - smoothstep(constrain((d - radius) / (1 - radius), 0, 1)) * strength;
pixels[i] *= factor;
pixels[i+1] *= factor;
pixels[i+2] *= factor;
}
updatePixels();
}
function smoothstep(t) { return t * t * (3 - 2 * t); }
```
### Film Grain
```javascript
function filmGrain(amount = 30) {
loadPixels();
for (let i = 0; i < pixels.length; i += 4) {
let grain = random(-amount, amount);
pixels[i] = constrain(pixels[i] + grain, 0, 255);
pixels[i+1] = constrain(pixels[i+1] + grain, 0, 255);
pixels[i+2] = constrain(pixels[i+2] + grain, 0, 255);
}
updatePixels();
}
```
skills/creative/p5js/references/core-api.md
+410
View File
@@ -0,0 +1,410 @@
# Core API Reference
## Canvas Setup
### createCanvas()
```javascript
// 2D (default renderer)
createCanvas(1920, 1080);
// WebGL (3D, shaders)
createCanvas(1920, 1080, WEBGL);
// Responsive
createCanvas(windowWidth, windowHeight);
```
### Pixel Density
High-DPI displays render at 2x by default. This doubles memory usage and halves performance.
```javascript
// Force 1x for consistent export and performance
pixelDensity(1);
// Match display (default) — sharp on retina but expensive
pixelDensity(displayDensity());
// ALWAYS call before createCanvas()
function setup() {
pixelDensity(1); // first
createCanvas(1920, 1080); // second
}
```
For export, always `pixelDensity(1)` and use the exact target resolution. Never rely on device scaling for final output.
### Responsive Resize
```javascript
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// Recreate offscreen buffers at new size
bgLayer = createGraphics(width, height);
// Reinitialize any size-dependent state
}
```
## Coordinate System
### P2D (Default)
- Origin: top-left (0, 0)
- X increases rightward
- Y increases downward
- Angles: radians by default, `angleMode(DEGREES)` to switch
### WEBGL
- Origin: center of canvas
- X increases rightward, Y increases **upward**, Z increases toward viewer
- To get P2D-like coordinates in WEBGL: `translate(-width/2, -height/2)`
## Draw Loop
```javascript
function preload() {
// Load assets before setup — fonts, images, JSON, CSV
// Blocks execution until all loads complete
font = loadFont('font.otf');
img = loadImage('texture.png');
data = loadJSON('data.json');
}
function setup() {
// Runs once. Create canvas, initialize state.
createCanvas(1920, 1080);
colorMode(HSB, 360, 100, 100, 100);
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
}
function draw() {
// Runs every frame (default 60fps).
// Set frameRate(30) in setup() to change.
// Call noLoop() for static sketches (render once).
}
```
### Frame Control
```javascript
frameRate(30); // set target FPS
noLoop(); // stop draw loop (static pieces)
loop(); // restart draw loop
redraw(); // call draw() once (manual refresh)
frameCount // frames since start (integer)
deltaTime // milliseconds since last frame (float)
millis() // milliseconds since sketch started
```
## Transform Stack
Every transform is cumulative. Use `push()`/`pop()` to isolate.
```javascript
push();
translate(width / 2, height / 2);
rotate(angle);
scale(1.5);
// draw something at transformed position
ellipse(0, 0, 100, 100);
pop();
// back to original coordinate system
```
### Transform Functions
| Function | Effect |
|----------|--------|
| `translate(x, y)` | Move origin |
| `rotate(angle)` | Rotate around origin (radians) |
| `scale(s)` / `scale(sx, sy)` | Scale from origin |
| `shearX(angle)` | Skew X axis |
| `shearY(angle)` | Skew Y axis |
| `applyMatrix(a, b, c, d, e, f)` | Arbitrary 2D affine transform |
| `resetMatrix()` | Clear all transforms |
### Composition Pattern: Rotate Around Center
```javascript
push();
translate(cx, cy); // move origin to center
rotate(angle); // rotate around that center
translate(-cx, -cy); // move origin back
// draw at original coordinates, but rotated around (cx, cy)
rect(cx - 50, cy - 50, 100, 100);
pop();
```
## Offscreen Buffers (createGraphics)
Offscreen buffers are separate canvases you can draw to and composite. Essential for:
- **Layered composition** — background, midground, foreground
- **Persistent trails** — draw to buffer, fade with semi-transparent rect, never clear
- **Masking** — draw mask to buffer, apply with `image()` or pixel operations
- **Post-processing** — render scene to buffer, apply effects, draw to main canvas
```javascript
let layer;
function setup() {
createCanvas(1920, 1080);
layer = createGraphics(width, height);
}
function draw() {
// Draw to offscreen buffer
layer.background(0, 10); // semi-transparent clear = trails
layer.fill(255);
layer.ellipse(mouseX, mouseY, 20);
// Composite to main canvas
image(layer, 0, 0);
}
```
### Trail Effect Pattern
```javascript
let trailBuffer;
function setup() {
createCanvas(1920, 1080);
trailBuffer = createGraphics(width, height);
trailBuffer.background(0);
}
function draw() {
// Fade previous frame (lower alpha = longer trails)
trailBuffer.noStroke();
trailBuffer.fill(0, 0, 0, 15); // RGBA — 15/255 alpha
trailBuffer.rect(0, 0, width, height);
// Draw new content
trailBuffer.fill(255);
trailBuffer.ellipse(mouseX, mouseY, 10);
// Show
image(trailBuffer, 0, 0);
}
```
### Multi-Layer Composition
```javascript
let bgLayer, contentLayer, fxLayer;
function setup() {
createCanvas(1920, 1080);
bgLayer = createGraphics(width, height);
contentLayer = createGraphics(width, height);
fxLayer = createGraphics(width, height);
}
function draw() {
// Background — drawn once or slowly evolving
renderBackground(bgLayer);
// Content — main visual elements
contentLayer.clear();
renderContent(contentLayer);
// FX — overlays, vignettes, grain
fxLayer.clear();
renderEffects(fxLayer);
// Composite with blend modes
image(bgLayer, 0, 0);
blendMode(ADD);
image(contentLayer, 0, 0);
blendMode(MULTIPLY);
image(fxLayer, 0, 0);
blendMode(BLEND); // reset
}
```
## Composition Patterns
### Grid Layout
```javascript
let cols = 10, rows = 10;
let cellW = width / cols;
let cellH = height / rows;
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
let cx = cellW * (i + 0.5);
let cy = cellH * (j + 0.5);
// draw element at (cx, cy) within cell size (cellW, cellH)
}
}
```
### Radial Layout
```javascript
let n = 12;
for (let i = 0; i < n; i++) {
let angle = TWO_PI * i / n;
let r = 300;
let x = width/2 + cos(angle) * r;
let y = height/2 + sin(angle) * r;
// draw element at (x, y)
}
```
### Golden Ratio Spiral
```javascript
let phi = (1 + sqrt(5)) / 2;
let n = 500;
for (let i = 0; i < n; i++) {
let angle = i * TWO_PI / (phi * phi);
let r = sqrt(i) * 10;
let x = width/2 + cos(angle) * r;
let y = height/2 + sin(angle) * r;
let size = map(i, 0, n, 8, 2);
ellipse(x, y, size);
}
```
### Margin-Aware Composition
```javascript
const MARGIN = 80; // pixels from edge
const drawW = width - 2 * MARGIN;
const drawH = height - 2 * MARGIN;
// Map normalized [0,1] coordinates to drawable area
function mapX(t) { return MARGIN + t * drawW; }
function mapY(t) { return MARGIN + t * drawH; }
```
## Random and Noise
### Seeded Random
```javascript
randomSeed(42);
let x = random(100); // always same value for seed 42
let y = random(-1, 1); // range
let item = random(myArray); // random element
```
### Gaussian Random
```javascript
let x = randomGaussian(0, 1); // mean=0, stddev=1
// Useful for natural-looking distributions
```
### Perlin Noise
```javascript
noiseSeed(42);
noiseDetail(4, 0.5); // 4 octaves, 0.5 falloff
let v = noise(x * 0.01, y * 0.01); // returns 0.0 to 1.0
// Scale factor (0.01) controls feature size — smaller = smoother
```
## Math Utilities
| Function | Description |
|----------|-------------|
| `map(v, lo1, hi1, lo2, hi2)` | Remap value between ranges |
| `constrain(v, lo, hi)` | Clamp to range |
| `lerp(a, b, t)` | Linear interpolation |
| `norm(v, lo, hi)` | Normalize to 0-1 |
| `dist(x1, y1, x2, y2)` | Euclidean distance |
| `mag(x, y)` | Vector magnitude |
| `abs()`, `ceil()`, `floor()`, `round()` | Standard math |
| `sq(n)`, `sqrt(n)`, `pow(b, e)` | Powers |
| `sin()`, `cos()`, `tan()`, `atan2()` | Trig (radians) |
| `degrees(r)`, `radians(d)` | Angle conversion |
| `fract(n)` | Fractional part |
## p5.js 2.0 Changes
p5.js 2.0 (released Apr 2025, current: 2.2) introduces breaking changes. The p5.js editor defaults to 1.x until Aug 2026. Use 2.x only when you need its features.
### async setup() replaces preload()
```javascript
// p5.js 1.x
let img;
function preload() { img = loadImage('cat.jpg'); }
function setup() { createCanvas(800, 800); }
// p5.js 2.x
let img;
async function setup() {
createCanvas(800, 800);
img = await loadImage('cat.jpg');
}
```
### New Color Modes
```javascript
colorMode(OKLCH); // perceptually uniform — better gradients
// L: 0-1 (lightness), C: 0-0.4 (chroma), H: 0-360 (hue)
fill(0.7, 0.15, 200); // medium-bright saturated blue
colorMode(OKLAB); // perceptually uniform, no hue angle
colorMode(HWB); // Hue-Whiteness-Blackness
```
### splineVertex() replaces curveVertex()
No more doubling first/last control points:
```javascript
// p5.js 1.x — must repeat first and last
beginShape();
curveVertex(pts[0].x, pts[0].y); // doubled
for (let p of pts) curveVertex(p.x, p.y);
curveVertex(pts[pts.length-1].x, pts[pts.length-1].y); // doubled
endShape();
// p5.js 2.x — clean
beginShape();
for (let p of pts) splineVertex(p.x, p.y);
endShape();
```
### Shader .modify() API
Modify built-in shaders without writing full GLSL:
```javascript
let myShader = baseMaterialShader().modify({
vertexDeclarations: 'uniform float uTime;',
'vec4 getWorldPosition': `(vec4 pos) {
pos.y += sin(pos.x * 0.1 + uTime) * 20.0;
return pos;
}`
});
```
### Variable Fonts
```javascript
textWeight(700); // dynamic weight without loading multiple files
```
### textToContours() and textToModel()
```javascript
let contours = font.textToContours('HELLO', 0, 0, 200);
// Returns array of contour arrays (closed paths)
let geo = font.textToModel('HELLO', 0, 0, 200);
// Returns p5.Geometry for 3D extruded text
```
### CDN for p5.js 2.x
```html
<script src="https://cdn.jsdelivr.net/npm/p5@2/lib/p5.min.js"></script>
```
skills/creative/p5js/references/export-pipeline.md
+566
View File
@@ -0,0 +1,566 @@
# Export Pipeline
## PNG Export
### In-Sketch (Keyboard Shortcut)
```javascript
function keyPressed() {
if (key === 's' || key === 'S') {
saveCanvas('output', 'png');
// Downloads output.png immediately
}
}
```
### Timed Export (Static Generative)
```javascript
function setup() {
createCanvas(3840, 2160);
pixelDensity(1);
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
noLoop();
}
function draw() {
// ... render everything ...
saveCanvas('output-seed-' + CONFIG.seed, 'png');
}
```
### High-Resolution Export
For resolutions beyond screen size, use `pixelDensity()` or a large offscreen buffer:
```javascript
function exportHighRes(scale) {
let buffer = createGraphics(width * scale, height * scale);
buffer.scale(scale);
// Re-render everything to buffer at higher resolution
renderScene(buffer);
buffer.save('highres-output.png');
}
```
### Batch Seed Export
```javascript
function exportBatch(startSeed, count) {
for (let i = 0; i < count; i++) {
CONFIG.seed = startSeed + i;
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
// Render
background(0);
renderScene();
saveCanvas('seed-' + nf(CONFIG.seed, 5), 'png');
}
}
```
## GIF Export
### saveGif()
```javascript
function keyPressed() {
if (key === 'g' || key === 'G') {
saveGif('output', 5);
// Captures 5 seconds of animation
// Options: saveGif(filename, duration, options)
}
}
// With options
saveGif('output', 5, {
delay: 0, // delay before starting capture (seconds)
units: 'seconds' // or 'frames'
});
```
Limitations:
- GIF is 256 colors max — dithering artifacts on gradients
- Large canvases produce huge files
- Use a smaller canvas (640x360) for GIF, higher for PNG/MP4
- Frame rate is approximate
### Optimal GIF Settings
```javascript
// For GIF output, use smaller canvas and lower framerate
function setup() {
createCanvas(640, 360);
frameRate(15); // GIF standard
pixelDensity(1);
}
```
## Frame Sequence Export
### saveFrames()
```javascript
function keyPressed() {
if (key === 'f') {
saveFrames('frame', 'png', 10, 30);
// 10 seconds, 30 fps → 300 PNG files
// Downloads as individual files (browser may block bulk downloads)
}
}
```
### Manual Frame Export (More Control)
```javascript
let recording = false;
let frameNum = 0;
const TOTAL_FRAMES = 300;
function keyPressed() {
if (key === 'r') recording = !recording;
}
function draw() {
// ... render frame ...
if (recording) {
saveCanvas('frame-' + nf(frameNum, 4), 'png');
frameNum++;
if (frameNum >= TOTAL_FRAMES) {
recording = false;
noLoop();
console.log('Recording complete: ' + frameNum + ' frames');
}
}
}
```
### Deterministic Capture (Critical for Video)
The `noLoop()` + `redraw()` pattern is **required** for frame-perfect headless capture. Without it, p5's draw loop runs freely in Chrome while Puppeteer screenshots are slow — the sketch runs ahead and you get duplicate/missing frames.
```javascript
function setup() {
createCanvas(1920, 1080);
pixelDensity(1);
noLoop(); // STOP the automatic draw loop
window._p5Ready = true; // Signal to capture script
}
function draw() {
// This only runs when redraw() is called by the capture script
// frameCount increments exactly once per redraw()
}
```
The bundled `scripts/export-frames.js` detects `window._p5Ready` and switches to deterministic mode automatically. Without it, falls back to timed capture (less precise).
### ffmpeg: Frames to MP4
```bash
# Basic encoding
ffmpeg -framerate 30 -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# High quality
ffmpeg -framerate 30 -i frame-%04d.png \
-c:v libx264 -preset slow -crf 18 -pix_fmt yuv420p \
output.mp4
# With audio
ffmpeg -framerate 30 -i frame-%04d.png -i audio.mp3 \
-c:v libx264 -c:a aac -shortest \
output.mp4
# Loop for social media (3 loops)
ffmpeg -stream_loop 2 -i output.mp4 -c copy output-looped.mp4
```
### Video Export Gotchas
**YUV420 clips dark values.** H.264 encodes in YUV420 color space, which rounds dark RGB values. Content below RGB(8,8,8) may become pure black. Subtle dark details (dim particle trails, faint noise textures) disappear in the encoded video even though they're visible in the PNG frames.
**Fix:** Ensure minimum brightness of ~10 for any visible content. Test by encoding a few frames and comparing the MP4 frame vs the source PNG.
```bash
# Extract a frame from MP4 for comparison
ffmpeg -i output.mp4 -vf "select=eq(n\,100)" -vframes 1 check.png
```
**Static frames look broken in video.** If an algorithm produces a single static image (like a pre-computed attractor heatmap), it reads as a freeze/glitch in video. Always add animation even to static content:
- Progressive reveal (expand from center, sweep across)
- Slow parameter drift (rotate color mapping, shift noise offset)
- Camera-like motion (slow zoom, slight pan)
- Overlay animated particles or grain
**Scene transitions are mandatory.** Hard cuts between visually different scenes are jarring. Use fade envelopes:
```javascript
const FADE_FRAMES = 15; // half-second at 30fps
let fade = 1;
if (localFrame < FADE_FRAMES) fade = localFrame / FADE_FRAMES;
if (localFrame > SCENE_FRAMES - FADE_FRAMES) fade = (SCENE_FRAMES - localFrame) / FADE_FRAMES;
fade = fade * fade * (3 - 2 * fade); // smoothstep
// Apply: multiply all alpha/brightness by fade
```
### Per-Clip Architecture (Multi-Scene Videos)
For videos with multiple scenes, render each as a separate HTML file + MP4 clip, then stitch with ffmpeg. This enables re-rendering individual scenes without touching the rest.
**Directory structure:**
```
project/
├── capture-scene.js # Shared: node capture-scene.js <html> <outdir> <frames>
├── render-all.sh # Renders all + stitches
├── scenes/
│ ├── 00-intro.html # Each scene is self-contained
│ ├── 01-particles.html
│ ├── 02-noise.html
│ └── 03-outro.html
└── clips/
├── 00-intro.mp4 # Each clip rendered independently
├── 01-particles.mp4
├── 02-noise.mp4
├── 03-outro.mp4
└── concat.txt
```
**Stitch clips with ffmpeg concat:**
```bash
# concat.txt (order determines final sequence)
file '00-intro.mp4'
file '01-particles.mp4'
file '02-noise.mp4'
file '03-outro.mp4'
# Lossless stitch (all clips must have same codec/resolution/fps)
ffmpeg -f concat -safe 0 -i concat.txt -c copy final.mp4
```
**Re-render a single scene:**
```bash
node capture-scene.js scenes/01-particles.html clips/01-particles 150
ffmpeg -y -framerate 30 -i clips/01-particles/frame-%04d.png \
-c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p clips/01-particles.mp4
# Then re-stitch
ffmpeg -y -f concat -safe 0 -i clips/concat.txt -c copy final.mp4
```
**Re-order without re-rendering:** Just change the order in concat.txt and re-stitch. No frames need re-rendering.
**Each scene HTML must:**
- Call `noLoop()` in setup and set `window._p5Ready = true`
- Use `frameCount`-based timing (not `millis()`) for deterministic output
- Handle its own fade-in/fade-out envelope
- Be fully self-contained (no shared state between scenes)
### ffmpeg: Frames to GIF (Better Quality)
```bash
# Generate palette first for optimal colors
ffmpeg -i frame-%04d.png -vf "fps=15,palettegen=max_colors=256" palette.png
# Render GIF using palette
ffmpeg -i frame-%04d.png -i palette.png \
-lavfi "fps=15 [x]; [x][1:v] paletteuse=dither=bayer:bayer_scale=3" \
output.gif
```
## Headless Export (Puppeteer)
For automated, server-side, or CI rendering. Uses a headless Chrome browser to run the sketch.
### export-frames.js (Node.js Script)
See `scripts/export-frames.js` for the full implementation. Basic pattern:
```javascript
const puppeteer = require('puppeteer');
async function captureFrames(htmlPath, outputDir, options) {
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
const page = await browser.newPage();
await page.setViewport({
width: options.width || 1920,
height: options.height || 1080,
deviceScaleFactor: 1
});
await page.goto(`file://${path.resolve(htmlPath)}`, {
waitUntil: 'networkidle0'
});
// Wait for sketch to initialize
await page.waitForSelector('canvas');
await page.waitForTimeout(1000);
for (let i = 0; i < options.frames; i++) {
const canvas = await page.$('canvas');
await canvas.screenshot({
path: path.join(outputDir, `frame-${String(i).padStart(4, '0')}.png`)
});
// Advance one frame
await page.evaluate(() => { redraw(); });
await page.waitForTimeout(1000 / options.fps);
}
await browser.close();
}
```
### render.sh (Full Pipeline)
See `scripts/render.sh` for the complete render script. Pipeline:
```
1. Launch Puppeteer → open sketch HTML
2. Capture N frames as PNG sequence
3. Pipe to ffmpeg → encode H.264 MP4
4. Optional: add audio track
5. Clean up temp frames
```
## SVG Export
### Using p5.js-svg Library
```html
<script src="https://unpkg.com/p5.js-svg@1.5.1"></script>
```
```javascript
function setup() {
createCanvas(1920, 1080, SVG); // SVG renderer
noLoop();
}
function draw() {
// Only vector operations (no pixels, no blend modes)
stroke(0);
noFill();
for (let i = 0; i < 100; i++) {
let x = random(width);
let y = random(height);
ellipse(x, y, random(10, 50));
}
save('output.svg');
}
```
Limitations:
- No `loadPixels()`, `updatePixels()`, `filter()`, `blendMode()`
- No WebGL
- No pixel-level effects
- Great for: line art, geometric patterns, plots
### Hybrid: Raster Background + SVG Overlay
Render background effects to PNG, then SVG for crisp vector elements on top.
## Export Format Decision Guide
| Need | Format | Method |
|------|--------|--------|
| Single still image | PNG | `saveCanvas()` or `keyPressed()` |
| Print-quality still | PNG (high-res) | `pixelDensity(1)` + large canvas |
| Short animated loop | GIF | `saveGif()` |
| Long animation | MP4 | Frame sequence + ffmpeg |
| Social media video | MP4 | `scripts/render.sh` |
| Vector/print | SVG | p5.js-svg renderer |
| Batch variations | PNG sequence | Seed loop + `saveCanvas()` |
| Interactive deployment | HTML | Single self-contained file |
| Headless rendering | PNG/MP4 | Puppeteer + ffmpeg |
## Tiling for Ultra-High-Resolution
For resolutions too large for a single canvas (e.g., 10000x10000 for print):
```javascript
function renderTiled(totalW, totalH, tileSize) {
let cols = ceil(totalW / tileSize);
let rows = ceil(totalH / tileSize);
for (let ty = 0; ty < rows; ty++) {
for (let tx = 0; tx < cols; tx++) {
let buffer = createGraphics(tileSize, tileSize);
buffer.push();
buffer.translate(-tx * tileSize, -ty * tileSize);
renderScene(buffer, totalW, totalH);
buffer.pop();
buffer.save(`tile-${tx}-${ty}.png`);
buffer.remove(); // free memory
}
}
// Stitch with ImageMagick:
// montage tile-*.png -tile 4x4 -geometry +0+0 final.png
}
```
## CCapture.js — Deterministic Video Capture
The built-in `saveFrames()` has limitations: small frame counts, memory issues, browser download blocking. CCapture.js solves all of these by hooking into the browser's timing functions to simulate constant time steps regardless of actual render speed.
```html
<script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script>
```
### Basic Setup
```javascript
let capturer;
let recording = false;
function setup() {
createCanvas(1920, 1080);
pixelDensity(1);
capturer = new CCapture({
format: 'webm', // 'webm', 'gif', 'png', 'jpg'
framerate: 30,
quality: 99, // 0-100 for webm/jpg
// timeLimit: 10, // auto-stop after N seconds
// motionBlurFrames: 4 // supersampled motion blur
});
}
function draw() {
// ... render frame ...
if (recording) {
capturer.capture(document.querySelector('canvas'));
}
}
function keyPressed() {
if (key === 'c') {
if (!recording) {
capturer.start();
recording = true;
console.log('Recording started');
} else {
capturer.stop();
capturer.save(); // triggers download
recording = false;
console.log('Recording saved');
}
}
}
```
### Format Comparison
| Format | Quality | Size | Browser Support |
|--------|---------|------|-----------------|
| **WebM** | High | Medium | Chrome only |
| **GIF** | 256 colors | Large | All (via gif.js worker) |
| **PNG sequence** | Lossless | Very large (TAR) | All |
| **JPEG sequence** | Lossy | Large (TAR) | All |
### Important: Timing Hook
CCapture.js overrides `Date.now()`, `setTimeout`, `requestAnimationFrame`, and `performance.now()`. This means:
- `millis()` returns simulated time (perfect for recording)
- `deltaTime` is constant (1000/framerate)
- Complex sketches that take 500ms per frame still record at smooth 30fps
- **Caveat**: Audio sync breaks (audio plays in real-time, not simulated time)
## Programmatic Export (canvas API)
For custom export workflows beyond `saveCanvas()`:
```javascript
// Canvas to Blob (for upload, processing)
document.querySelector('canvas').toBlob((blob) => {
// Upload to server, process, etc.
let url = URL.createObjectURL(blob);
console.log('Blob URL:', url);
}, 'image/png');
// Canvas to Data URL (for inline embedding)
let dataUrl = document.querySelector('canvas').toDataURL('image/png');
// Use in <img src="..."> or send as base64
```
## SVG Export (p5.js-svg)
```html
<script src="https://unpkg.com/p5.js-svg@1.6.0"></script>
```
```javascript
function setup() {
createCanvas(1920, 1080, SVG); // SVG renderer
noLoop();
}
function draw() {
// Only vector operations work (no pixel ops, no blendMode)
stroke(0);
noFill();
for (let i = 0; i < 100; i++) {
ellipse(random(width), random(height), random(10, 50));
}
save('output.svg');
}
```
**Critical SVG caveats:**
- **Must call `clear()` in `draw()`** for animated sketches — SVG DOM accumulates child elements, causing memory bloat
- `blendMode()` is **not implemented** in SVG renderer
- `filter()`, `loadPixels()`, `updatePixels()` don't work
- Requires **p5.js 1.11.x** — not compatible with p5.js 2.x
- Perfect for: line art, geometric patterns, pen plotter output
## Platform Export
### fxhash Conventions
```javascript
// Replace p5's random with fxhash's deterministic PRNG
const rng = $fx.rand;
// Declare features for rarity/filtering
$fx.features({
'Palette': paletteName,
'Complexity': complexity > 0.7 ? 'High' : 'Low',
'Has Particles': particleCount > 0
});
// Declare on-chain parameters
$fx.params([
{ id: 'density', name: 'Density', type: 'number',
options: { min: 1, max: 100, step: 1 } },
{ id: 'palette', name: 'Palette', type: 'select',
options: { options: ['Warm', 'Cool', 'Mono'] } },
{ id: 'accent', name: 'Accent Color', type: 'color' }
]);
// Read params
let density = $fx.getParam('density');
// Build: npx fxhash build → upload.zip
// Dev: npx fxhash dev → localhost:3300
```
### Art Blocks / Generic Platform
```javascript
// Platform provides a hash string
const hash = tokenData.hash; // Art Blocks convention
// Build deterministic PRNG from hash
function prngFromHash(hash) {
let seed = parseInt(hash.slice(0, 16), 16);
// xoshiro128** or similar
return function() { /* ... */ };
}
const rng = prngFromHash(hash);
```
skills/creative/p5js/references/interaction.md
+398
View File
@@ -0,0 +1,398 @@
# Interaction
## Mouse Events
### Continuous State
```javascript
mouseX, mouseY // current position (relative to canvas)
pmouseX, pmouseY // previous frame position
mouseIsPressed // boolean
mouseButton // LEFT, RIGHT, CENTER (during press)
movedX, movedY // delta since last frame
winMouseX, winMouseY // relative to window (not canvas)
```
### Event Callbacks
```javascript
function mousePressed() {
// fires once on press
// mouseButton tells you which button
}
function mouseReleased() {
// fires once on release
}
function mouseClicked() {
// fires after press+release (same element)
}
function doubleClicked() {
// fires on double-click
}
function mouseMoved() {
// fires when mouse moves (no button pressed)
}
function mouseDragged() {
// fires when mouse moves WITH button pressed
}
function mouseWheel(event) {
// event.delta: positive = scroll down, negative = scroll up
zoom += event.delta * -0.01;
return false; // prevent page scroll
}
```
### Mouse Interaction Patterns
**Spawn on click:**
```javascript
function mousePressed() {
particles.push(new Particle(mouseX, mouseY));
}
```
**Mouse follow with spring:**
```javascript
let springX, springY;
function setup() {
springX = new Spring(width/2, width/2);
springY = new Spring(height/2, height/2);
}
function draw() {
springX.setTarget(mouseX);
springY.setTarget(mouseY);
let x = springX.update();
let y = springY.update();
ellipse(x, y, 50);
}
```
**Drag interaction:**
```javascript
let dragging = false;
let dragObj = null;
let offsetX, offsetY;
function mousePressed() {
for (let obj of objects) {
if (dist(mouseX, mouseY, obj.x, obj.y) < obj.radius) {
dragging = true;
dragObj = obj;
offsetX = mouseX - obj.x;
offsetY = mouseY - obj.y;
break;
}
}
}
function mouseDragged() {
if (dragging && dragObj) {
dragObj.x = mouseX - offsetX;
dragObj.y = mouseY - offsetY;
}
}
function mouseReleased() {
dragging = false;
dragObj = null;
}
```
**Mouse repulsion (particles flee cursor):**
```javascript
function draw() {
let mousePos = createVector(mouseX, mouseY);
for (let p of particles) {
let d = p.pos.dist(mousePos);
if (d < 150) {
let repel = p5.Vector.sub(p.pos, mousePos);
repel.normalize();
repel.mult(map(d, 0, 150, 5, 0));
p.applyForce(repel);
}
}
}
```
## Keyboard Events
### State
```javascript
keyIsPressed // boolean
key // last key as string ('a', 'A', ' ')
keyCode // numeric code (LEFT_ARROW, UP_ARROW, etc.)
```
### Event Callbacks
```javascript
function keyPressed() {
// fires once on press
if (keyCode === LEFT_ARROW) { /* ... */ }
if (key === 's') saveCanvas('output', 'png');
if (key === ' ') CONFIG.paused = !CONFIG.paused;
return false; // prevent default browser behavior
}
function keyReleased() {
// fires once on release
}
function keyTyped() {
// fires for printable characters only (not arrows, shift, etc.)
}
```
### Continuous Key State (Multiple Keys)
```javascript
let keys = {};
function keyPressed() { keys[keyCode] = true; }
function keyReleased() { keys[keyCode] = false; }
function draw() {
if (keys[LEFT_ARROW]) player.x -= 5;
if (keys[RIGHT_ARROW]) player.x += 5;
if (keys[UP_ARROW]) player.y -= 5;
if (keys[DOWN_ARROW]) player.y += 5;
}
```
### Key Constants
```
LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW
BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE
SHIFT, CONTROL, OPTION, ALT
```
## Touch Events
```javascript
touches // array of { x, y, id } — all current touches
function touchStarted() {
// fires on first touch
return false; // prevent default (stops scroll on mobile)
}
function touchMoved() {
// fires on touch drag
return false;
}
function touchEnded() {
// fires on touch release
}
```
### Pinch Zoom
```javascript
let prevDist = 0;
let zoomLevel = 1;
function touchMoved() {
if (touches.length === 2) {
let d = dist(touches[0].x, touches[0].y, touches[1].x, touches[1].y);
if (prevDist > 0) {
zoomLevel *= d / prevDist;
}
prevDist = d;
}
return false;
}
function touchEnded() {
prevDist = 0;
}
```
## DOM Elements
### Creating Controls
```javascript
function setup() {
createCanvas(800, 800);
// Slider
let slider = createSlider(0, 255, 100, 1); // min, max, default, step
slider.position(10, height + 10);
slider.input(() => { CONFIG.value = slider.value(); });
// Button
let btn = createButton('Reset');
btn.position(10, height + 40);
btn.mousePressed(() => { resetSketch(); });
// Checkbox
let check = createCheckbox('Show grid', false);
check.position(10, height + 70);
check.changed(() => { CONFIG.showGrid = check.checked(); });
// Select / dropdown
let sel = createSelect();
sel.position(10, height + 100);
sel.option('Mode A');
sel.option('Mode B');
sel.changed(() => { CONFIG.mode = sel.value(); });
// Color picker
let picker = createColorPicker('#ff0000');
picker.position(10, height + 130);
picker.input(() => { CONFIG.color = picker.value(); });
// Text input
let inp = createInput('Hello');
inp.position(10, height + 160);
inp.input(() => { CONFIG.text = inp.value(); });
}
```
### Styling DOM Elements
```javascript
let slider = createSlider(0, 100, 50);
slider.position(10, 10);
slider.style('width', '200px');
slider.class('my-slider');
slider.parent('controls-div'); // attach to specific DOM element
```
## Audio Input (p5.sound)
Requires `p5.sound.min.js` addon.
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script>
```
### Microphone Input
```javascript
let mic, fft, amplitude;
function setup() {
createCanvas(800, 800);
userStartAudio(); // required — user gesture to enable audio
mic = new p5.AudioIn();
mic.start();
fft = new p5.FFT(0.8, 256); // smoothing, bins
fft.setInput(mic);
amplitude = new p5.Amplitude();
amplitude.setInput(mic);
}
function draw() {
let level = amplitude.getLevel(); // 0.0 to 1.0 (overall volume)
let spectrum = fft.analyze(); // array of 256 frequency values (0-255)
let waveform = fft.waveform(); // array of 256 time-domain samples (-1 to 1)
// Get energy in frequency bands
let bass = fft.getEnergy('bass'); // 20-140 Hz
let lowMid = fft.getEnergy('lowMid'); // 140-400 Hz
let mid = fft.getEnergy('mid'); // 400-2600 Hz
let highMid = fft.getEnergy('highMid'); // 2600-5200 Hz
let treble = fft.getEnergy('treble'); // 5200-14000 Hz
// Each returns 0-255
}
```
### Audio File Playback
```javascript
let song, fft;
function preload() {
song = loadSound('track.mp3');
}
function setup() {
createCanvas(800, 800);
fft = new p5.FFT(0.8, 512);
fft.setInput(song);
}
function mousePressed() {
if (song.isPlaying()) {
song.pause();
} else {
song.play();
}
}
```
### Beat Detection (Simple)
```javascript
let prevBass = 0;
let beatThreshold = 30;
let beatCooldown = 0;
function detectBeat() {
let bass = fft.getEnergy('bass');
let isBeat = bass - prevBass > beatThreshold && beatCooldown <= 0;
prevBass = bass;
if (isBeat) beatCooldown = 10; // frames
beatCooldown--;
return isBeat;
}
```
## Scroll-Driven Animation
```javascript
let scrollProgress = 0;
function setup() {
let canvas = createCanvas(windowWidth, windowHeight);
canvas.style('position', 'fixed');
// Make page scrollable
document.body.style.height = '500vh';
}
window.addEventListener('scroll', () => {
let maxScroll = document.body.scrollHeight - window.innerHeight;
scrollProgress = window.scrollY / maxScroll;
});
function draw() {
background(0);
// Use scrollProgress (0 to 1) to drive animation
let x = lerp(0, width, scrollProgress);
ellipse(x, height/2, 50);
}
```
## Responsive Events
```javascript
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// Recreate buffers
bgLayer = createGraphics(width, height);
// Recalculate layout
recalculateLayout();
}
// Visibility change (tab switching)
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
noLoop(); // pause when tab not visible
} else {
loop();
}
});
```
skills/creative/p5js/references/shapes-and-geometry.md
+300
View File
@@ -0,0 +1,300 @@
# Shapes and Geometry
## 2D Primitives
```javascript
point(x, y);
line(x1, y1, x2, y2);
rect(x, y, w, h); // default: corner mode
rect(x, y, w, h, r); // rounded corners
rect(x, y, w, h, tl, tr, br, bl); // per-corner radius
square(x, y, size);
ellipse(x, y, w, h);
circle(x, y, d); // diameter, not radius
triangle(x1, y1, x2, y2, x3, y3);
quad(x1, y1, x2, y2, x3, y3, x4, y4);
arc(x, y, w, h, start, stop, mode); // mode: OPEN, CHORD, PIE
```
### Drawing Modes
```javascript
rectMode(CENTER); // x,y is center (default: CORNER)
rectMode(CORNERS); // x1,y1 to x2,y2
ellipseMode(CORNER); // x,y is top-left corner
ellipseMode(CENTER); // default — x,y is center
```
## Stroke and Fill
```javascript
fill(r, g, b, a); // or fill(gray), fill('#hex'), fill(h, s, b) in HSB mode
noFill();
stroke(r, g, b, a);
noStroke();
strokeWeight(2);
strokeCap(ROUND); // ROUND, SQUARE, PROJECT
strokeJoin(ROUND); // ROUND, MITER, BEVEL
```
## Custom Shapes with Vertices
### Basic vertex shape
```javascript
beginShape();
vertex(100, 100);
vertex(200, 50);
vertex(300, 100);
vertex(250, 200);
vertex(150, 200);
endShape(CLOSE); // CLOSE connects last vertex to first
```
### Shape modes
```javascript
beginShape(); // default: polygon connecting all vertices
beginShape(POINTS); // individual points
beginShape(LINES); // pairs of vertices as lines
beginShape(TRIANGLES); // triplets as triangles
beginShape(TRIANGLE_FAN);
beginShape(TRIANGLE_STRIP);
beginShape(QUADS); // groups of 4
beginShape(QUAD_STRIP);
```
### Contours (holes in shapes)
```javascript
beginShape();
// outer shape
vertex(100, 100);
vertex(300, 100);
vertex(300, 300);
vertex(100, 300);
// inner hole
beginContour();
vertex(150, 150);
vertex(150, 250);
vertex(250, 250);
vertex(250, 150);
endContour();
endShape(CLOSE);
```
## Bezier Curves
### Cubic Bezier
```javascript
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
// x1,y1 = start point
// cx1,cy1 = first control point
// cx2,cy2 = second control point
// x2,y2 = end point
```
### Bezier in custom shapes
```javascript
beginShape();
vertex(100, 200);
bezierVertex(150, 50, 250, 50, 300, 200);
// control1, control2, endpoint
endShape();
```
### Quadratic Bezier
```javascript
beginShape();
vertex(100, 200);
quadraticVertex(200, 50, 300, 200);
// single control point + endpoint
endShape();
```
### Interpolation along Bezier
```javascript
let x = bezierPoint(x1, cx1, cx2, x2, t); // t = 0..1
let y = bezierPoint(y1, cy1, cy2, y2, t);
let tx = bezierTangent(x1, cx1, cx2, x2, t); // tangent
```
## Catmull-Rom Splines
```javascript
curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);
// cpx1,cpy1 = control point before start
// x1,y1 = start point (visible)
// x2,y2 = end point (visible)
// cpx2,cpy2 = control point after end
curveVertex(x, y); // in beginShape() — smooth curve through all points
curveTightness(0); // 0 = Catmull-Rom, 1 = straight lines, -1 = loose
```
### Smooth curve through points
```javascript
let points = [/* array of {x, y} */];
beginShape();
curveVertex(points[0].x, points[0].y); // repeat first for tangent
for (let p of points) {
curveVertex(p.x, p.y);
}
curveVertex(points[points.length-1].x, points[points.length-1].y); // repeat last
endShape();
```
## p5.Vector
Essential for physics, particle systems, and geometric computation.
```javascript
let v = createVector(x, y);
// Arithmetic (modifies in place)
v.add(other); // vector addition
v.sub(other); // subtraction
v.mult(scalar); // scale
v.div(scalar); // inverse scale
v.normalize(); // unit vector (length 1)
v.limit(max); // cap magnitude
v.setMag(len); // set exact magnitude
// Queries (non-destructive)
v.mag(); // magnitude (length)
v.magSq(); // squared magnitude (faster, no sqrt)
v.heading(); // angle in radians
v.dist(other); // distance to other vector
v.dot(other); // dot product
v.cross(other); // cross product (3D)
v.angleBetween(other); // angle between vectors
// Static methods (return new vector)
p5.Vector.add(a, b); // a + b → new vector
p5.Vector.sub(a, b); // a - b → new vector
p5.Vector.fromAngle(a); // unit vector at angle
p5.Vector.random2D(); // random unit vector
p5.Vector.lerp(a, b, t); // interpolate
// Copy
let copy = v.copy();
```
## Signed Distance Fields (2D)
SDFs return the distance from a point to the nearest edge of a shape. Negative inside, positive outside. Useful for smooth shapes, glow effects, boolean operations.
```javascript
// Circle SDF
function sdCircle(px, py, cx, cy, r) {
return dist(px, py, cx, cy) - r;
}
// Box SDF
function sdBox(px, py, cx, cy, hw, hh) {
let dx = abs(px - cx) - hw;
let dy = abs(py - cy) - hh;
return sqrt(max(dx, 0) ** 2 + max(dy, 0) ** 2) + min(max(dx, dy), 0);
}
// Line segment SDF
function sdSegment(px, py, ax, ay, bx, by) {
let pa = createVector(px - ax, py - ay);
let ba = createVector(bx - ax, by - ay);
let t = constrain(pa.dot(ba) / ba.dot(ba), 0, 1);
let closest = p5.Vector.add(createVector(ax, ay), p5.Vector.mult(ba, t));
return dist(px, py, closest.x, closest.y);
}
// Smooth boolean union
function opSmoothUnion(d1, d2, k) {
let h = constrain(0.5 + 0.5 * (d2 - d1) / k, 0, 1);
return lerp(d2, d1, h) - k * h * (1 - h);
}
// Rendering SDF as glow
let d = sdCircle(x, y, width/2, height/2, 200);
let glow = exp(-abs(d) * 0.02); // exponential falloff
fill(glow * 255);
```
## Useful Geometry Patterns
### Regular Polygon
```javascript
function regularPolygon(cx, cy, r, sides) {
beginShape();
for (let i = 0; i < sides; i++) {
let a = TWO_PI * i / sides - HALF_PI;
vertex(cx + cos(a) * r, cy + sin(a) * r);
}
endShape(CLOSE);
}
```
### Star Shape
```javascript
function star(cx, cy, r1, r2, npoints) {
beginShape();
let angle = TWO_PI / npoints;
let halfAngle = angle / 2;
for (let a = -HALF_PI; a < TWO_PI - HALF_PI; a += angle) {
vertex(cx + cos(a) * r2, cy + sin(a) * r2);
vertex(cx + cos(a + halfAngle) * r1, cy + sin(a + halfAngle) * r1);
}
endShape(CLOSE);
}
```
### Rounded Line (Capsule)
```javascript
function capsule(x1, y1, x2, y2, weight) {
strokeWeight(weight);
strokeCap(ROUND);
line(x1, y1, x2, y2);
}
```
### Soft Body / Blob
```javascript
function blob(cx, cy, baseR, noiseScale, noiseOffset, detail = 64) {
beginShape();
for (let i = 0; i < detail; i++) {
let a = TWO_PI * i / detail;
let r = baseR + noise(cos(a) * noiseScale + noiseOffset,
sin(a) * noiseScale + noiseOffset) * baseR * 0.4;
vertex(cx + cos(a) * r, cy + sin(a) * r);
}
endShape(CLOSE);
}
```
## Clipping and Masking
```javascript
// Clip shape — everything drawn after is masked by the clip shape
beginClip();
circle(width/2, height/2, 400);
endClip();
// Only content inside the circle is visible
image(myImage, 0, 0);
// Or functional form
clip(() => {
circle(width/2, height/2, 400);
});
// Erase mode — cut holes
erase();
circle(mouseX, mouseY, 100); // this area becomes transparent
noErase();
```
skills/creative/p5js/references/troubleshooting.md
+532
View File
@@ -0,0 +1,532 @@
# Troubleshooting
## Performance
### Step Zero — Disable FES
The Friendly Error System (FES) adds massive overhead — up to 10x slowdown. Disable it in every production sketch:
```javascript
// BEFORE any p5 code
p5.disableFriendlyErrors = true;
// Or use p5.min.js instead of p5.js — FES is stripped from minified build
```
### Step One — pixelDensity(1)
Retina/HiDPI displays default to 2x or 3x density, multiplying pixel count by 4-9x:
```javascript
function setup() {
pixelDensity(1); // force 1:1 — always do this first
createCanvas(1920, 1080);
}
```
### Use Math.* in Hot Loops
p5's `sin()`, `cos()`, `random()`, `min()`, `max()`, `abs()` are wrapper functions with overhead. In hot loops (thousands of iterations per frame), use native `Math.*`:
```javascript
// SLOW — p5 wrappers
for (let p of particles) {
let a = sin(p.angle);
let d = dist(p.x, p.y, mx, my);
}
// FAST — native Math
for (let p of particles) {
let a = Math.sin(p.angle);
let dx = p.x - mx, dy = p.y - my;
let dSq = dx * dx + dy * dy; // skip sqrt entirely
}
```
Use `magSq()` instead of `mag()` for distance comparisons — avoids expensive `sqrt()`.
### Diagnosis
Open Chrome DevTools > Performance tab > Record while sketch runs.
Common bottlenecks:
1. **FES enabled** — 10x overhead on every p5 function call
2. **pixelDensity > 1** — 4x pixel count, 4x slower
3. **Too many draw calls** — thousands of `ellipse()`, `rect()` per frame
4. **Large canvas + pixel operations** — `loadPixels()`/`updatePixels()` on 4K canvas
5. **Unoptimized particle systems** — checking all-vs-all distances (O(n^2))
6. **Memory leaks** — creating objects every frame without cleanup
7. **Shader compilation** — calling `createShader()` in `draw()` instead of `setup()`
8. **console.log() in draw()** — DOM write per frame, destroys performance
9. **DOM manipulation in draw()** — layout thrashing (400-500x slower than canvas ops)
### Solutions
**Reduce draw calls:**
```javascript
// BAD: 10000 individual circles
for (let p of particles) {
ellipse(p.x, p.y, p.size);
}
// GOOD: single shape with vertices
beginShape(POINTS);
for (let p of particles) {
vertex(p.x, p.y);
}
endShape();
// BEST: direct pixel manipulation
loadPixels();
for (let p of particles) {
let idx = 4 * (floor(p.y) * width + floor(p.x));
pixels[idx] = p.r;
pixels[idx+1] = p.g;
pixels[idx+2] = p.b;
pixels[idx+3] = 255;
}
updatePixels();
```
**Spatial hashing for neighbor queries:**
```javascript
class SpatialHash {
constructor(cellSize) {
this.cellSize = cellSize;
this.cells = new Map();
}
clear() { this.cells.clear(); }
_key(x, y) {
return `${floor(x / this.cellSize)},${floor(y / this.cellSize)}`;
}
insert(obj) {
let key = this._key(obj.pos.x, obj.pos.y);
if (!this.cells.has(key)) this.cells.set(key, []);
this.cells.get(key).push(obj);
}
query(x, y, radius) {
let results = [];
let minCX = floor((x - radius) / this.cellSize);
let maxCX = floor((x + radius) / this.cellSize);
let minCY = floor((y - radius) / this.cellSize);
let maxCY = floor((y + radius) / this.cellSize);
for (let cx = minCX; cx <= maxCX; cx++) {
for (let cy = minCY; cy <= maxCY; cy++) {
let key = `${cx},${cy}`;
let cell = this.cells.get(key);
if (cell) {
for (let obj of cell) {
if (dist(x, y, obj.pos.x, obj.pos.y) <= radius) {
results.push(obj);
}
}
}
}
}
return results;
}
}
```
**Object pooling:**
```javascript
class ParticlePool {
constructor(maxSize) {
this.pool = [];
this.active = [];
for (let i = 0; i < maxSize; i++) {
this.pool.push(new Particle(0, 0));
}
}
spawn(x, y) {
let p = this.pool.pop();
if (p) {
p.reset(x, y);
this.active.push(p);
}
}
update() {
for (let i = this.active.length - 1; i >= 0; i--) {
this.active[i].update();
if (this.active[i].isDead()) {
this.pool.push(this.active.splice(i, 1)[0]);
}
}
}
}
```
**Throttle heavy operations:**
```javascript
// Only update flow field every N frames
if (frameCount % 5 === 0) {
flowField.update(frameCount * 0.001);
}
```
### Frame Rate Targets
| Context | Target | Acceptable |
|---------|--------|------------|
| Interactive sketch | 60fps | 30fps |
| Ambient animation | 30fps | 20fps |
| Export/recording | 30fps render | Any (offline) |
| Mobile | 30fps | 20fps |
### Per-Pixel Rendering Budgets
Pixel-level operations (`loadPixels()` loops) are the most expensive common pattern. Budget depends on canvas size and computation per pixel.
| Canvas | Pixels | Simple noise (1 call) | fBM (4 octave) | Domain warp (3-layer fBM) |
|--------|--------|----------------------|----------------|--------------------------|
| 540x540 | 291K | ~5ms | ~20ms | ~80ms |
| 1080x1080 | 1.17M | ~20ms | ~80ms | ~300ms+ |
| 1920x1080 | 2.07M | ~35ms | ~140ms | ~500ms+ |
| 3840x2160 | 8.3M | ~140ms | ~560ms | WILL CRASH |
**Rules of thumb:**
- 1 `noise()` call per pixel at 1080x1080 = ~20ms/frame (OK at 30fps)
- 4-octave fBM per pixel at 1080x1080 = ~80ms/frame (borderline)
- Multi-layer domain warp at 1080x1080 = 300ms+ (too slow for real-time, fine for `noLoop()` export)
- **Headless Chrome is 2-5x slower** than desktop Chrome for pixel ops
**Solution: render at lower resolution, fill blocks:**
```javascript
let step = 3; // render 1/9 of pixels, fill 3x3 blocks
loadPixels();
for (let y = 0; y < H; y += step) {
for (let x = 0; x < W; x += step) {
let v = expensiveNoise(x, y);
for (let dy = 0; dy < step && y+dy < H; dy++)
for (let dx = 0; dx < step && x+dx < W; dx++) {
let i = 4 * ((y+dy) * W + (x+dx));
pixels[i] = v; pixels[i+1] = v; pixels[i+2] = v; pixels[i+3] = 255;
}
}
}
updatePixels();
```
Step=2 gives 4x speedup. Step=3 gives 9x. Visible at 1080p but acceptable for video (motion hides it).
## Common Mistakes
### 1. Forgetting to reset blend mode
```javascript
blendMode(ADD);
image(glowLayer, 0, 0);
// WRONG: everything after this is ADD blended
blendMode(BLEND); // ALWAYS reset
```
### 2. Creating objects in draw()
```javascript
// BAD: creates new font object every frame
function draw() {
let f = loadFont('font.otf'); // NEVER load in draw()
}
// GOOD: load in preload, use in draw
let f;
function preload() { f = loadFont('font.otf'); }
```
### 3. Not using push()/pop() with transforms
```javascript
// BAD: transforms accumulate
translate(100, 0);
rotate(0.1);
ellipse(0, 0, 50);
// Everything after this is also translated and rotated
// GOOD: isolated transforms
push();
translate(100, 0);
rotate(0.1);
ellipse(0, 0, 50);
pop();
```
### 4. Integer coordinates for crisp lines
```javascript
// BLURRY: sub-pixel rendering
line(10.5, 20.3, 100.7, 80.2);
// CRISP: integer + 0.5 for 1px lines
line(10.5, 20.5, 100.5, 80.5); // on pixel boundary
```
### 5. Pixel density confusion
```javascript
// WRONG: assuming pixel array matches canvas dimensions
loadPixels();
let idx = 4 * (y * width + x); // wrong if pixelDensity > 1
// RIGHT: account for pixel density
let d = pixelDensity();
loadPixels();
let idx = 4 * ((y * d) * (width * d) + (x * d));
// SIMPLEST: set pixelDensity(1) at the start
```
### 6. Color mode confusion
```javascript
// In HSB mode, fill(255) is NOT white
colorMode(HSB, 360, 100, 100);
fill(255); // This is hue=255, sat=100, bri=100 = vivid purple
// White in HSB:
fill(0, 0, 100); // any hue, 0 saturation, 100 brightness
// Black in HSB:
fill(0, 0, 0);
```
### 7. WebGL origin is center
```javascript
// In WEBGL mode, (0,0) is CENTER, not top-left
function draw() {
// This draws at the center, not the corner
rect(0, 0, 100, 100);
// For top-left behavior:
translate(-width/2, -height/2);
rect(0, 0, 100, 100); // now at top-left
}
```
### 8. createGraphics cleanup
```javascript
// BAD: memory leak — buffer never freed
function draw() {
let temp = createGraphics(width, height); // new buffer every frame!
// ...
}
// GOOD: create once, reuse
let temp;
function setup() {
temp = createGraphics(width, height);
}
function draw() {
temp.clear();
// ... reuse temp
}
// If you must create/destroy:
temp.remove(); // explicitly free
```
### 9. noise() returns 0-1, not -1 to 1
```javascript
let n = noise(x); // 0.0 to 1.0 (biased toward 0.5)
// For -1 to 1 range:
let n = noise(x) * 2 - 1;
// For a specific range:
let n = map(noise(x), 0, 1, -100, 100);
```
### 10. saveCanvas() in draw() saves every frame
```javascript
// BAD: saves a PNG every single frame
function draw() {
// ... render ...
saveCanvas('output', 'png'); // DON'T DO THIS
}
// GOOD: save once via keyboard
function keyPressed() {
if (key === 's') saveCanvas('output', 'png');
}
// GOOD: save once after rendering static piece
function draw() {
// ... render ...
saveCanvas('output', 'png');
noLoop(); // stop after saving
}
```
### 11. console.log() in draw()
```javascript
// BAD: writes to DOM console every frame — massive overhead
function draw() {
console.log(particles.length); // 60 DOM writes/second
}
// GOOD: log periodically or conditionally
function draw() {
if (frameCount % 60 === 0) console.log('FPS:', frameRate().toFixed(1));
}
```
### 12. DOM manipulation in draw()
```javascript
// BAD: layout thrashing — 400-500x slower than canvas ops
function draw() {
document.getElementById('counter').innerText = frameCount;
let el = document.querySelector('.info'); // DOM query per frame
}
// GOOD: cache DOM refs, update infrequently
let counterEl;
function setup() { counterEl = document.getElementById('counter'); }
function draw() {
if (frameCount % 30 === 0) counterEl.innerText = frameCount;
}
```
### 13. Not disabling FES in production
```javascript
// BAD: every p5 function call has error-checking overhead (up to 10x slower)
function setup() { createCanvas(800, 800); }
// GOOD: disable before any p5 code
p5.disableFriendlyErrors = true;
function setup() { createCanvas(800, 800); }
// ALSO GOOD: use p5.min.js (FES stripped from minified build)
```
## Browser Compatibility
### Safari Issues
- WebGL shader precision: always declare `precision mediump float;`
- `AudioContext` requires user gesture (`userStartAudio()`)
- Some `blendMode()` options behave differently
### Firefox Issues
- `textToPoints()` may return slightly different point counts
- WebGL extensions may differ from Chrome
- Color profile handling can shift colors
### Mobile Issues
- Touch events need `return false` to prevent scroll
- `devicePixelRatio` can be 2x or 3x — use `pixelDensity(1)` for performance
- Smaller canvas recommended (720p or less)
- Audio requires explicit user gesture to start
## CORS Issues
```javascript
// Loading images/fonts from external URLs requires CORS headers
// Local files need a server:
// python3 -m http.server 8080
// Or use a CORS proxy for external resources (not recommended for production)
```
## Memory Leaks
### Symptoms
- Framerate degrading over time
- Browser tab memory growing unbounded
- Page becomes unresponsive after minutes
### Common Causes
```javascript
// 1. Growing arrays
let history = [];
function draw() {
history.push(someData); // grows forever
}
// FIX: cap the array
if (history.length > 1000) history.shift();
// 2. Creating p5 objects in draw()
function draw() {
let v = createVector(0, 0); // allocation every frame
}
// FIX: reuse pre-allocated objects
// 3. Unreleased graphics buffers
let layers = [];
function reset() {
for (let l of layers) l.remove(); // free old buffers
layers = [];
}
// 4. Event listener accumulation
function setup() {
// BAD: adds new listener every time setup runs
window.addEventListener('resize', handler);
}
// FIX: use p5's built-in windowResized()
```
## Debugging Tips
### Console Logging
```javascript
// Log once (not every frame)
if (frameCount === 1) {
console.log('Canvas:', width, 'x', height);
console.log('Pixel density:', pixelDensity());
console.log('Renderer:', drawingContext.constructor.name);
}
// Log periodically
if (frameCount % 60 === 0) {
console.log('FPS:', frameRate().toFixed(1));
console.log('Particles:', particles.length);
}
```
### Visual Debugging
```javascript
// Show frame rate
function draw() {
// ... your sketch ...
if (CONFIG.debug) {
fill(255, 0, 0);
noStroke();
textSize(14);
textAlign(LEFT, TOP);
text('FPS: ' + frameRate().toFixed(1), 10, 10);
text('Particles: ' + particles.length, 10, 28);
text('Frame: ' + frameCount, 10, 46);
}
}
// Toggle debug with 'd' key
function keyPressed() {
if (key === 'd') CONFIG.debug = !CONFIG.debug;
}
```
### Isolating Issues
```javascript
// Comment out layers to find the slow one
function draw() {
renderBackground(); // comment out to test
// renderParticles(); // this might be slow
// renderPostEffects(); // or this
}
```
skills/creative/p5js/references/typography.md
+302
View File
@@ -0,0 +1,302 @@
# Typography
## Loading Fonts
### System Fonts
```javascript
textFont('Helvetica');
textFont('Georgia');
textFont('monospace');
```
### Custom Fonts (OTF/TTF/WOFF2)
```javascript
let myFont;
function preload() {
myFont = loadFont('path/to/font.otf');
// Requires local server or CORS-enabled URL
}
function setup() {
textFont(myFont);
}
```
### Google Fonts via CSS
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<script>
function setup() {
textFont('Inter');
}
</script>
```
Google Fonts work without `loadFont()` but only for `text()` — not for `textToPoints()`. For particle text, you need `loadFont()` with an OTF/TTF file.
## Text Rendering
### Basic Text
```javascript
textSize(32);
textAlign(CENTER, CENTER);
text('Hello World', width/2, height/2);
```
### Text Properties
```javascript
textSize(48); // pixel size
textAlign(LEFT, TOP); // horizontal: LEFT, CENTER, RIGHT
// vertical: TOP, CENTER, BOTTOM, BASELINE
textLeading(40); // line spacing (for multi-line text)
textStyle(BOLD); // NORMAL, BOLD, ITALIC, BOLDITALIC
textWrap(WORD); // WORD or CHAR (for text() with max width)
```
### Text Metrics
```javascript
let w = textWidth('Hello'); // pixel width of string
let a = textAscent(); // height above baseline
let d = textDescent(); // height below baseline
let totalH = a + d; // full line height
```
### Text Bounding Box
```javascript
let bounds = myFont.textBounds('Hello', x, y, size);
// bounds = { x, y, w, h }
// Useful for positioning, collision, background rectangles
```
### Multi-Line Text
```javascript
// With max width — auto wraps
textWrap(WORD);
text('Long text that wraps within the given width', x, y, maxWidth);
// With max width AND height — clips
text('Very long text', x, y, maxWidth, maxHeight);
```
## textToPoints() — Text as Particles
Convert text outline to array of points. Requires a loaded font (OTF/TTF via `loadFont()`).
```javascript
let font;
let points;
function preload() {
font = loadFont('font.otf'); // MUST be loadFont, not CSS
}
function setup() {
createCanvas(1200, 600);
points = font.textToPoints('HELLO', 100, 400, 200, {
sampleFactor: 0.1, // lower = more points (0.1-0.5 typical)
simplifyThreshold: 0
});
}
function draw() {
background(0);
for (let pt of points) {
let n = noise(pt.x * 0.01, pt.y * 0.01, frameCount * 0.01);
fill(255, n * 255);
noStroke();
ellipse(pt.x + random(-2, 2), pt.y + random(-2, 2), 3);
}
}
```
### Particle Text Class
```javascript
class TextParticle {
constructor(target) {
this.target = createVector(target.x, target.y);
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.maxSpeed = 10;
this.maxForce = 0.5;
}
arrive() {
let desired = p5.Vector.sub(this.target, this.pos);
let d = desired.mag();
let speed = d < 100 ? map(d, 0, 100, 0, this.maxSpeed) : this.maxSpeed;
desired.setMag(speed);
let steer = p5.Vector.sub(desired, this.vel);
steer.limit(this.maxForce);
this.acc.add(steer);
}
flee(target, radius) {
let d = this.pos.dist(target);
if (d < radius) {
let desired = p5.Vector.sub(this.pos, target);
desired.setMag(this.maxSpeed);
let steer = p5.Vector.sub(desired, this.vel);
steer.limit(this.maxForce * 2);
this.acc.add(steer);
}
}
update() {
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
display() {
fill(255);
noStroke();
ellipse(this.pos.x, this.pos.y, 3);
}
}
// Usage: particles form text, scatter from mouse
let textParticles = [];
for (let pt of points) {
textParticles.push(new TextParticle(pt));
}
function draw() {
background(0);
for (let p of textParticles) {
p.arrive();
p.flee(createVector(mouseX, mouseY), 80);
p.update();
p.display();
}
}
```
## Kinetic Typography
### Wave Text
```javascript
function waveText(str, x, y, size, amplitude, frequency) {
textSize(size);
textAlign(LEFT, BASELINE);
let xOff = 0;
for (let i = 0; i < str.length; i++) {
let yOff = sin(frameCount * 0.05 + i * frequency) * amplitude;
text(str[i], x + xOff, y + yOff);
xOff += textWidth(str[i]);
}
}
```
### Typewriter Effect
```javascript
class Typewriter {
constructor(str, x, y, speed = 50) {
this.str = str;
this.x = x;
this.y = y;
this.speed = speed; // ms per character
this.startTime = millis();
this.cursor = true;
}
display() {
let elapsed = millis() - this.startTime;
let chars = min(floor(elapsed / this.speed), this.str.length);
let visible = this.str.substring(0, chars);
textAlign(LEFT, TOP);
text(visible, this.x, this.y);
// Blinking cursor
if (chars < this.str.length && floor(millis() / 500) % 2 === 0) {
let cursorX = this.x + textWidth(visible);
line(cursorX, this.y, cursorX, this.y + textAscent() + textDescent());
}
}
isDone() { return millis() - this.startTime >= this.str.length * this.speed; }
}
```
### Character-by-Character Animation
```javascript
function animatedText(str, x, y, size, delay = 50) {
textSize(size);
textAlign(LEFT, BASELINE);
let xOff = 0;
for (let i = 0; i < str.length; i++) {
let charStart = i * delay;
let t = constrain((millis() - charStart) / 500, 0, 1);
let et = easeOutElastic(t);
push();
translate(x + xOff, y);
scale(et);
let alpha = t * 255;
fill(255, alpha);
text(str[i], 0, 0);
pop();
xOff += textWidth(str[i]);
}
}
```
## Text as Mask
```javascript
let textBuffer;
function setup() {
createCanvas(800, 800);
textBuffer = createGraphics(width, height);
textBuffer.background(0);
textBuffer.fill(255);
textBuffer.textSize(200);
textBuffer.textAlign(CENTER, CENTER);
textBuffer.text('MASK', width/2, height/2);
}
function draw() {
// Draw content
background(0);
// ... render something colorful
// Apply text mask (show content only where text is white)
loadPixels();
textBuffer.loadPixels();
for (let i = 0; i < pixels.length; i += 4) {
let maskVal = textBuffer.pixels[i]; // white = show, black = hide
pixels[i + 3] = maskVal; // set alpha from mask
}
updatePixels();
}
```
## Responsive Text Sizing
```javascript
function responsiveTextSize(baseSize, baseWidth = 1920) {
return baseSize * (width / baseWidth);
}
// Usage
textSize(responsiveTextSize(48));
text('Scales with canvas', width/2, height/2);
```
skills/creative/p5js/references/visual-effects.md
+895
View File
@@ -0,0 +1,895 @@
# Visual Effects
## Noise
### Perlin Noise Basics
```javascript
noiseSeed(42);
noiseDetail(4, 0.5); // octaves, falloff
// 1D noise — smooth undulation
let y = noise(x * 0.01); // returns 0.0 to 1.0
// 2D noise — terrain/texture
let v = noise(x * 0.005, y * 0.005);
// 3D noise — animated 2D field (z = time)
let v = noise(x * 0.005, y * 0.005, frameCount * 0.005);
```
The scale factor (0.005 etc.) is critical:
- `0.001` — very smooth, large features
- `0.005` — smooth, medium features
- `0.01` — standard generative art scale
- `0.05` — detailed, small features
- `0.1` — near-random, grainy
### Fractal Brownian Motion (fBM)
Layered noise octaves for natural-looking texture. Each octave adds detail at smaller scale.
```javascript
function fbm(x, y, octaves = 6, lacunarity = 2.0, gain = 0.5) {
let value = 0;
let amplitude = 1.0;
let frequency = 1.0;
let maxValue = 0;
for (let i = 0; i < octaves; i++) {
value += noise(x * frequency, y * frequency) * amplitude;
maxValue += amplitude;
amplitude *= gain;
frequency *= lacunarity;
}
return value / maxValue;
}
```
### Domain Warping
Feed noise output back as input coordinates for flowing organic distortion.
```javascript
function domainWarp(x, y, scale, strength, time) {
// First warp pass
let qx = fbm(x + 0.0, y + 0.0);
let qy = fbm(x + 5.2, y + 1.3);
// Second warp pass (feed back)
let rx = fbm(x + strength * qx + 1.7, y + strength * qy + 9.2, 4, 2, 0.5);
let ry = fbm(x + strength * qx + 8.3, y + strength * qy + 2.8, 4, 2, 0.5);
return fbm(x + strength * rx + time, y + strength * ry + time);
}
```
### Curl Noise
Divergence-free noise field. Particles following curl noise never converge or diverge — they flow in smooth, swirling patterns.
```javascript
function curlNoise(x, y, scale, time) {
let eps = 0.001;
// Partial derivatives via finite differences
let dndx = (noise(x * scale + eps, y * scale, time) -
noise(x * scale - eps, y * scale, time)) / (2 * eps);
let dndy = (noise(x * scale, y * scale + eps, time) -
noise(x * scale, y * scale - eps, time)) / (2 * eps);
// Curl = perpendicular to gradient
return createVector(dndy, -dndx);
}
```
## Flow Fields
A grid of vectors that steer particles. The foundational generative art technique.
```javascript
class FlowField {
constructor(resolution, noiseScale) {
this.resolution = resolution;
this.cols = ceil(width / resolution);
this.rows = ceil(height / resolution);
this.field = new Array(this.cols * this.rows);
this.noiseScale = noiseScale;
}
update(time) {
for (let i = 0; i < this.cols; i++) {
for (let j = 0; j < this.rows; j++) {
let angle = noise(i * this.noiseScale, j * this.noiseScale, time) * TWO_PI * 2;
this.field[i + j * this.cols] = p5.Vector.fromAngle(angle);
}
}
}
lookup(x, y) {
let col = constrain(floor(x / this.resolution), 0, this.cols - 1);
let row = constrain(floor(y / this.resolution), 0, this.rows - 1);
return this.field[col + row * this.cols].copy();
}
}
```
### Flow Field Particle
```javascript
class FlowParticle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.prev = this.pos.copy();
this.maxSpeed = 2;
this.life = 1.0;
}
follow(field) {
let force = field.lookup(this.pos.x, this.pos.y);
force.mult(0.5); // force magnitude
this.acc.add(force);
}
update() {
this.prev = this.pos.copy();
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.mult(0);
this.life -= 0.001;
}
edges() {
if (this.pos.x > width) this.pos.x = 0;
if (this.pos.x < 0) this.pos.x = width;
if (this.pos.y > height) this.pos.y = 0;
if (this.pos.y < 0) this.pos.y = height;
this.prev = this.pos.copy(); // prevent wrap line
}
display(buffer) {
buffer.stroke(255, this.life * 30);
buffer.strokeWeight(0.5);
buffer.line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);
}
}
```
## Particle Systems
### Basic Physics Particle
```javascript
class Particle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D().mult(random(1, 3));
this.acc = createVector(0, 0);
this.life = 255;
this.decay = random(1, 5);
this.size = random(3, 8);
}
applyForce(f) { this.acc.add(f); }
update() {
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
this.life -= this.decay;
}
display() {
noStroke();
fill(255, this.life);
ellipse(this.pos.x, this.pos.y, this.size);
}
isDead() { return this.life <= 0; }
}
```
### Attractor-Driven Particles
```javascript
class Attractor {
constructor(x, y, strength) {
this.pos = createVector(x, y);
this.strength = strength;
}
attract(particle) {
let force = p5.Vector.sub(this.pos, particle.pos);
let d = constrain(force.mag(), 5, 200);
force.normalize();
force.mult(this.strength / (d * d));
particle.applyForce(force);
}
}
```
### Boid Flocking
```javascript
class Boid {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D().mult(random(2, 4));
this.acc = createVector(0, 0);
this.maxForce = 0.2;
this.maxSpeed = 4;
this.perceptionRadius = 50;
}
flock(boids) {
let alignment = createVector(0, 0);
let cohesion = createVector(0, 0);
let separation = createVector(0, 0);
let total = 0;
for (let other of boids) {
let d = this.pos.dist(other.pos);
if (other !== this && d < this.perceptionRadius) {
alignment.add(other.vel);
cohesion.add(other.pos);
let diff = p5.Vector.sub(this.pos, other.pos);
diff.div(d * d);
separation.add(diff);
total++;
}
}
if (total > 0) {
alignment.div(total).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
cohesion.div(total).sub(this.pos).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
separation.div(total).setMag(this.maxSpeed).sub(this.vel).limit(this.maxForce);
}
this.acc.add(alignment.mult(1.0));
this.acc.add(cohesion.mult(1.0));
this.acc.add(separation.mult(1.5));
}
update() {
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
}
```
## Pixel Manipulation
### Reading and Writing Pixels
```javascript
loadPixels();
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let idx = 4 * (y * width + x);
let r = pixels[idx];
let g = pixels[idx + 1];
let b = pixels[idx + 2];
let a = pixels[idx + 3];
// Modify
pixels[idx] = 255 - r; // invert red
pixels[idx + 1] = 255 - g; // invert green
pixels[idx + 2] = 255 - b; // invert blue
}
}
updatePixels();
```
### Pixel-Level Noise Texture
```javascript
loadPixels();
for (let i = 0; i < pixels.length; i += 4) {
let x = (i / 4) % width;
let y = floor((i / 4) / width);
let n = noise(x * 0.01, y * 0.01, frameCount * 0.02);
let c = n * 255;
pixels[i] = c;
pixels[i + 1] = c;
pixels[i + 2] = c;
pixels[i + 3] = 255;
}
updatePixels();
```
### Built-in Filters
```javascript
filter(BLUR, 3); // Gaussian blur (radius)
filter(THRESHOLD, 0.5); // Black/white threshold
filter(INVERT); // Color inversion
filter(POSTERIZE, 4); // Reduce color levels
filter(GRAY); // Desaturate
filter(ERODE); // Thin bright areas
filter(DILATE); // Expand bright areas
filter(OPAQUE); // Remove transparency
```
## Texture Generation
### Stippling / Pointillism
```javascript
function stipple(buffer, density, minSize, maxSize) {
buffer.loadPixels();
for (let i = 0; i < density; i++) {
let x = floor(random(width));
let y = floor(random(height));
let idx = 4 * (y * width + x);
let brightness = (buffer.pixels[idx] + buffer.pixels[idx+1] + buffer.pixels[idx+2]) / 3;
let size = map(brightness, 0, 255, maxSize, minSize);
if (random() < map(brightness, 0, 255, 0.8, 0.1)) {
noStroke();
fill(buffer.pixels[idx], buffer.pixels[idx+1], buffer.pixels[idx+2]);
ellipse(x, y, size);
}
}
}
```
### Halftone
```javascript
function halftone(sourceBuffer, dotSpacing, maxDotSize) {
sourceBuffer.loadPixels();
background(255);
fill(0);
noStroke();
for (let y = 0; y < height; y += dotSpacing) {
for (let x = 0; x < width; x += dotSpacing) {
let idx = 4 * (y * width + x);
let brightness = (sourceBuffer.pixels[idx] + sourceBuffer.pixels[idx+1] + sourceBuffer.pixels[idx+2]) / 3;
let dotSize = map(brightness, 0, 255, maxDotSize, 0);
ellipse(x + dotSpacing/2, y + dotSpacing/2, dotSize);
}
}
}
```
### Cross-Hatching
```javascript
function crossHatch(x, y, w, h, value, spacing) {
// value: 0 (dark) to 1 (light)
let numLayers = floor(map(value, 0, 1, 4, 0));
let angles = [PI/4, -PI/4, 0, PI/2];
for (let layer = 0; layer < numLayers; layer++) {
push();
translate(x + w/2, y + h/2);
rotate(angles[layer]);
let s = spacing + layer * 2;
for (let i = -max(w, h); i < max(w, h); i += s) {
line(i, -max(w, h), i, max(w, h));
}
pop();
}
}
```
## Feedback Loops
### Frame Feedback (Echo/Trail)
```javascript
let feedback;
function setup() {
createCanvas(800, 800);
feedback = createGraphics(width, height);
}
function draw() {
// Copy current feedback, slightly zoomed and rotated
let temp = feedback.get();
feedback.push();
feedback.translate(width/2, height/2);
feedback.scale(1.005); // slow zoom
feedback.rotate(0.002); // slow rotation
feedback.translate(-width/2, -height/2);
feedback.tint(255, 245); // slight fade
feedback.image(temp, 0, 0);
feedback.pop();
// Draw new content to feedback
feedback.noStroke();
feedback.fill(255);
feedback.ellipse(mouseX, mouseY, 20);
// Show
image(feedback, 0, 0);
}
```
### Bloom / Glow (Post-Processing)
Downsample the scene to a small buffer, blur it, overlay additively. Creates soft glow around bright areas. This is the standard generative art bloom technique.
```javascript
let scene, bloomBuf;
function setup() {
createCanvas(1080, 1080);
scene = createGraphics(width, height);
bloomBuf = createGraphics(width, height);
}
function draw() {
// 1. Render scene to offscreen buffer
scene.background(0);
scene.fill(255, 200, 100);
scene.noStroke();
// ... draw bright elements to scene ...
// 2. Build bloom: downsample → blur → upscale
bloomBuf.clear();
bloomBuf.image(scene, 0, 0, width / 4, height / 4); // 4x downsample
bloomBuf.filter(BLUR, 6); // blur the small version
// 3. Composite: scene + additive bloom
background(0);
image(scene, 0, 0); // base layer
blendMode(ADD); // additive = glow
tint(255, 80); // control bloom intensity (0-255)
image(bloomBuf, 0, 0, width, height); // upscale back to full size
noTint();
blendMode(BLEND); // ALWAYS reset blend mode
}
```
**Tuning:**
- Downsample ratio (1/4 is standard, 1/8 for softer, 1/2 for tighter)
- Blur radius (4-8 typical, higher = wider glow)
- Tint alpha (40-120, controls glow intensity)
- Update bloom every N frames to save perf: `if (frameCount % 2 === 0) { ... }`
**Common mistake:** Forgetting `blendMode(BLEND)` after the ADD pass — everything drawn after will be additive.
### Trail Buffer Brightness
Trail accumulation via `createGraphics()` + semi-transparent fade rect is the standard technique for particle trails, but **trails are always dimmer than you expect**. The fade rect's alpha compounds multiplicatively every frame.
```javascript
// The fade rect alpha controls trail length AND brightness:
trailBuf.fill(0, 0, 0, alpha);
trailBuf.rect(0, 0, width, height);
// alpha=5 → very long trails, very dim (content fades to 50% in ~35 frames)
// alpha=10 → long trails, dim
// alpha=20 → medium trails, visible
// alpha=40 → short trails, bright
// alpha=80 → very short trails, crisp
```
**The trap:** You set alpha=5 for long trails, but particle strokes at alpha=30 are invisible because they fade before accumulating enough density. Either:
- **Boost stroke alpha** to 80-150 (not the intuitive 20-40)
- **Reduce fade alpha** but accept shorter trails
- **Use additive blending** for the strokes: bright particles accumulate, dim ones stay dark
```javascript
// WRONG: low fade + low stroke = invisible
trailBuf.fill(0, 0, 0, 5); // long trails
trailBuf.rect(0, 0, W, H);
trailBuf.stroke(255, 30); // too dim to ever accumulate
trailBuf.line(px, py, x, y);
// RIGHT: low fade + high stroke = visible long trails
trailBuf.fill(0, 0, 0, 5);
trailBuf.rect(0, 0, W, H);
trailBuf.stroke(255, 100); // bright enough to persist through fade
trailBuf.line(px, py, x, y);
```
### Reaction-Diffusion (Gray-Scott)
```javascript
class ReactionDiffusion {
constructor(w, h) {
this.w = w;
this.h = h;
this.a = new Float32Array(w * h).fill(1);
this.b = new Float32Array(w * h).fill(0);
this.nextA = new Float32Array(w * h);
this.nextB = new Float32Array(w * h);
this.dA = 1.0;
this.dB = 0.5;
this.feed = 0.055;
this.kill = 0.062;
}
seed(cx, cy, r) {
for (let y = cy - r; y < cy + r; y++) {
for (let x = cx - r; x < cx + r; x++) {
if (dist(x, y, cx, cy) < r) {
let idx = y * this.w + x;
this.b[idx] = 1;
}
}
}
}
step() {
for (let y = 1; y < this.h - 1; y++) {
for (let x = 1; x < this.w - 1; x++) {
let idx = y * this.w + x;
let a = this.a[idx], b = this.b[idx];
let lapA = this.laplacian(this.a, x, y);
let lapB = this.laplacian(this.b, x, y);
let abb = a * b * b;
this.nextA[idx] = constrain(a + this.dA * lapA - abb + this.feed * (1 - a), 0, 1);
this.nextB[idx] = constrain(b + this.dB * lapB + abb - (this.kill + this.feed) * b, 0, 1);
}
}
[this.a, this.nextA] = [this.nextA, this.a];
[this.b, this.nextB] = [this.nextB, this.b];
}
laplacian(arr, x, y) {
let w = this.w;
return arr[(y-1)*w+x] + arr[(y+1)*w+x] + arr[y*w+(x-1)] + arr[y*w+(x+1)]
- 4 * arr[y*w+x];
}
}
```
## Pixel Sorting
```javascript
function pixelSort(buffer, threshold, direction = 'horizontal') {
buffer.loadPixels();
let px = buffer.pixels;
if (direction === 'horizontal') {
for (let y = 0; y < height; y++) {
let spans = findSpans(px, y, width, threshold, true);
for (let span of spans) {
sortSpan(px, span.start, span.end, y, true);
}
}
}
buffer.updatePixels();
}
function findSpans(px, row, w, threshold, horizontal) {
let spans = [];
let start = -1;
for (let i = 0; i < w; i++) {
let idx = horizontal ? 4 * (row * w + i) : 4 * (i * w + row);
let brightness = (px[idx] + px[idx+1] + px[idx+2]) / 3;
if (brightness > threshold && start === -1) {
start = i;
} else if (brightness <= threshold && start !== -1) {
spans.push({ start, end: i });
start = -1;
}
}
if (start !== -1) spans.push({ start, end: w });
return spans;
}
```
## Advanced Generative Techniques
### L-Systems (Lindenmayer Systems)
Grammar-based recursive growth for trees, plants, fractals.
```javascript
class LSystem {
constructor(axiom, rules) {
this.axiom = axiom;
this.rules = rules; // { 'F': 'F[+F]F[-F]F' }
this.sentence = axiom;
}
generate(iterations) {
for (let i = 0; i < iterations; i++) {
let next = '';
for (let ch of this.sentence) {
next += this.rules[ch] || ch;
}
this.sentence = next;
}
}
draw(len, angle) {
for (let ch of this.sentence) {
switch (ch) {
case 'F': line(0, 0, 0, -len); translate(0, -len); break;
case '+': rotate(angle); break;
case '-': rotate(-angle); break;
case '[': push(); break;
case ']': pop(); break;
}
}
}
}
// Usage: fractal plant
let lsys = new LSystem('X', {
'X': 'F+[[X]-X]-F[-FX]+X',
'F': 'FF'
});
lsys.generate(5);
translate(width/2, height);
lsys.draw(4, radians(25));
```
### Circle Packing
Fill a space with non-overlapping circles of varying size.
```javascript
class PackedCircle {
constructor(x, y, r) {
this.x = x; this.y = y; this.r = r;
this.growing = true;
}
grow() { if (this.growing) this.r += 0.5; }
overlaps(other) {
let d = dist(this.x, this.y, other.x, other.y);
return d < this.r + other.r + 2; // +2 gap
}
atEdge() {
return this.x - this.r < 0 || this.x + this.r > width ||
this.y - this.r < 0 || this.y + this.r > height;
}
}
let circles = [];
function packStep() {
// Try to place new circle
for (let attempts = 0; attempts < 100; attempts++) {
let x = random(width), y = random(height);
let valid = true;
for (let c of circles) {
if (dist(x, y, c.x, c.y) < c.r + 2) { valid = false; break; }
}
if (valid) { circles.push(new PackedCircle(x, y, 1)); break; }
}
// Grow existing circles
for (let c of circles) {
if (!c.growing) continue;
c.grow();
if (c.atEdge()) { c.growing = false; continue; }
for (let other of circles) {
if (c !== other && c.overlaps(other)) { c.growing = false; break; }
}
}
}
```
### Voronoi Diagram (Fortune's Algorithm Approximation)
```javascript
// Simple brute-force Voronoi (for small point counts)
function drawVoronoi(points, colors) {
loadPixels();
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let minDist = Infinity;
let closest = 0;
for (let i = 0; i < points.length; i++) {
let d = (x - points[i].x) ** 2 + (y - points[i].y) ** 2; // magSq
if (d < minDist) { minDist = d; closest = i; }
}
let idx = 4 * (y * width + x);
let c = colors[closest % colors.length];
pixels[idx] = red(c);
pixels[idx+1] = green(c);
pixels[idx+2] = blue(c);
pixels[idx+3] = 255;
}
}
updatePixels();
}
```
### Fractal Trees
```javascript
function fractalTree(x, y, len, angle, depth, branchAngle) {
if (depth <= 0 || len < 2) return;
let x2 = x + Math.cos(angle) * len;
let y2 = y + Math.sin(angle) * len;
strokeWeight(map(depth, 0, 10, 0.5, 4));
line(x, y, x2, y2);
let shrink = 0.67 + noise(x * 0.01, y * 0.01) * 0.15;
fractalTree(x2, y2, len * shrink, angle - branchAngle, depth - 1, branchAngle);
fractalTree(x2, y2, len * shrink, angle + branchAngle, depth - 1, branchAngle);
}
// Usage
fractalTree(width/2, height, 120, -HALF_PI, 10, PI/6);
```
### Strange Attractors
```javascript
// Clifford Attractor
function cliffordAttractor(a, b, c, d, iterations) {
let x = 0, y = 0;
beginShape(POINTS);
for (let i = 0; i < iterations; i++) {
let nx = Math.sin(a * y) + c * Math.cos(a * x);
let ny = Math.sin(b * x) + d * Math.cos(b * y);
x = nx; y = ny;
let px = map(x, -3, 3, 0, width);
let py = map(y, -3, 3, 0, height);
vertex(px, py);
}
endShape();
}
// De Jong Attractor
function deJongAttractor(a, b, c, d, iterations) {
let x = 0, y = 0;
beginShape(POINTS);
for (let i = 0; i < iterations; i++) {
let nx = Math.sin(a * y) - Math.cos(b * x);
let ny = Math.sin(c * x) - Math.cos(d * y);
x = nx; y = ny;
let px = map(x, -2.5, 2.5, 0, width);
let py = map(y, -2.5, 2.5, 0, height);
vertex(px, py);
}
endShape();
}
```
### Poisson Disk Sampling
Even distribution that looks natural — better than pure random for placing elements.
```javascript
function poissonDiskSampling(r, k = 30) {
let cellSize = r / Math.sqrt(2);
let cols = Math.ceil(width / cellSize);
let rows = Math.ceil(height / cellSize);
let grid = new Array(cols * rows).fill(-1);
let points = [];
let active = [];
function gridIndex(x, y) {
return Math.floor(x / cellSize) + Math.floor(y / cellSize) * cols;
}
// Seed
let p0 = createVector(random(width), random(height));
points.push(p0);
active.push(p0);
grid[gridIndex(p0.x, p0.y)] = 0;
while (active.length > 0) {
let idx = Math.floor(Math.random() * active.length);
let pos = active[idx];
let found = false;
for (let n = 0; n < k; n++) {
let angle = Math.random() * TWO_PI;
let mag = r + Math.random() * r;
let sample = createVector(pos.x + Math.cos(angle) * mag, pos.y + Math.sin(angle) * mag);
if (sample.x < 0 || sample.x >= width || sample.y < 0 || sample.y >= height) continue;
let col = Math.floor(sample.x / cellSize);
let row = Math.floor(sample.y / cellSize);
let ok = true;
for (let dy = -2; dy <= 2; dy++) {
for (let dx = -2; dx <= 2; dx++) {
let nc = col + dx, nr = row + dy;
if (nc >= 0 && nc < cols && nr >= 0 && nr < rows) {
let gi = nc + nr * cols;
if (grid[gi] !== -1 && points[grid[gi]].dist(sample) < r) { ok = false; }
}
}
}
if (ok) {
points.push(sample);
active.push(sample);
grid[gridIndex(sample.x, sample.y)] = points.length - 1;
found = true;
break;
}
}
if (!found) active.splice(idx, 1);
}
return points;
}
```
## Addon Libraries
### p5.brush — Natural Media
Hand-drawn, organic aesthetics. Watercolor, charcoal, pen, marker. Requires **p5.js 2.x + WEBGL**.
```html
<script src="https://cdn.jsdelivr.net/npm/p5.brush@latest/dist/p5.brush.js"></script>
```
```javascript
function setup() {
createCanvas(1200, 1200, WEBGL);
brush.scaleBrushes(3); // essential for proper sizing
translate(-width/2, -height/2); // WEBGL origin is center
brush.pick('2B'); // pencil brush
brush.stroke(50, 50, 50);
brush.strokeWeight(2);
brush.line(100, 100, 500, 500);
brush.pick('watercolor');
brush.fill('#4a90d9', 150);
brush.circle(400, 400, 200);
}
```
Built-in brushes: `2B`, `HB`, `2H`, `cpencil`, `pen`, `rotring`, `spray`, `marker`, `charcoal`, `hatch_brush`.
Built-in vector fields: `hand`, `curved`, `zigzag`, `waves`, `seabed`, `spiral`, `columns`.
### p5.grain — Film Grain & Texture
```html
<script src="https://cdn.jsdelivr.net/npm/p5.grain@0.7.0/p5.grain.min.js"></script>
```
```javascript
function draw() {
// ... render scene ...
applyMonochromaticGrain(42); // uniform grain
// or: applyChromaticGrain(42); // per-channel randomization
}
```
### CCapture.js — Deterministic Video Capture
Records canvas at fixed framerate regardless of actual render speed. Essential for complex generative art.
```html
<script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script>
```
```javascript
let capturer;
function setup() {
createCanvas(1920, 1080);
capturer = new CCapture({
format: 'webm',
framerate: 60,
quality: 99,
// timeLimit: 10, // auto-stop after N seconds
// motionBlurFrames: 4 // supersampled motion blur
});
}
function startRecording() {
capturer.start();
}
function draw() {
// ... render frame ...
if (capturer) capturer.capture(document.querySelector('canvas'));
}
function stopRecording() {
capturer.stop();
capturer.save(); // triggers download
}
```
skills/creative/p5js/references/webgl-and-3d.md
+423
View File
@@ -0,0 +1,423 @@
# WebGL and 3D
## WebGL Mode Setup
```javascript
function setup() {
createCanvas(1920, 1080, WEBGL);
// Origin is CENTER, not top-left
// Y-axis points UP (opposite of 2D mode)
// Z-axis points toward viewer
}
```
### Coordinate Conversion (WEBGL to P2D-like)
```javascript
function draw() {
translate(-width/2, -height/2); // shift origin to top-left
// Now coordinates work like P2D
}
```
## 3D Primitives
```javascript
box(w, h, d); // rectangular prism
sphere(radius, detailX, detailY);
cylinder(radius, height, detailX, detailY);
cone(radius, height, detailX, detailY);
torus(radius, tubeRadius, detailX, detailY);
plane(width, height); // flat rectangle
ellipsoid(rx, ry, rz); // stretched sphere
```
### 3D Transforms
```javascript
push();
translate(x, y, z);
rotateX(angleX);
rotateY(angleY);
rotateZ(angleZ);
scale(s);
box(100);
pop();
```
## Camera
### Default Camera
```javascript
camera(
eyeX, eyeY, eyeZ, // camera position
centerX, centerY, centerZ, // look-at target
upX, upY, upZ // up direction
);
// Default: camera(0, 0, (height/2)/tan(PI/6), 0, 0, 0, 0, 1, 0)
```
### Orbit Control
```javascript
function draw() {
orbitControl(); // mouse drag to rotate, scroll to zoom
box(200);
}
```
### createCamera
```javascript
let cam;
function setup() {
createCanvas(800, 800, WEBGL);
cam = createCamera();
cam.setPosition(300, -200, 500);
cam.lookAt(0, 0, 0);
}
// Camera methods
cam.setPosition(x, y, z);
cam.lookAt(x, y, z);
cam.move(dx, dy, dz); // relative to camera orientation
cam.pan(angle); // horizontal rotation
cam.tilt(angle); // vertical rotation
cam.roll(angle); // z-axis rotation
cam.slerp(otherCam, t); // smooth interpolation between cameras
```
### Perspective and Orthographic
```javascript
// Perspective (default)
perspective(fov, aspect, near, far);
// fov: field of view in radians (PI/3 default)
// aspect: width/height
// near/far: clipping planes
// Orthographic (no depth foreshortening)
ortho(-width/2, width/2, -height/2, height/2, 0, 2000);
```
## Lighting
```javascript
// Ambient (uniform, no direction)
ambientLight(50, 50, 50); // dim fill light
// Directional (parallel rays, like sun)
directionalLight(255, 255, 255, 0, -1, 0); // color + direction
// Point (radiates from position)
pointLight(255, 200, 150, 200, -300, 400); // color + position
// Spot (cone from position toward target)
spotLight(255, 255, 255, // color
0, -300, 300, // position
0, 1, -1, // direction
PI / 4, 5); // angle, concentration
// Image-based lighting
imageLight(myHDRI);
// No lights (flat shading)
noLights();
// Quick default lighting
lights();
```
### Three-Point Lighting Setup
```javascript
function setupLighting() {
ambientLight(30, 30, 40); // dim blue fill
// Key light (main, warm)
directionalLight(255, 240, 220, -1, -1, -1);
// Fill light (softer, cooler, opposite side)
directionalLight(80, 100, 140, 1, -0.5, -1);
// Rim light (behind subject, for edge definition)
pointLight(200, 200, 255, 0, -200, -400);
}
```
## Materials
```javascript
// Normal material (debug — colors from surface normals)
normalMaterial();
// Ambient (responds only to ambientLight)
ambientMaterial(200, 100, 100);
// Emissive (self-lit, no shadows)
emissiveMaterial(255, 0, 100);
// Specular (shiny reflections)
specularMaterial(255);
shininess(50); // 1-200 (higher = tighter highlight)
metalness(100); // 0-200 (metallic reflection)
// Fill works too (no lighting response)
fill(255, 0, 0);
```
### Texture
```javascript
let img;
function preload() { img = loadImage('texture.jpg'); }
function draw() {
texture(img);
textureMode(NORMAL); // UV coords 0-1
// textureMode(IMAGE); // UV coords in pixels
textureWrap(REPEAT); // or CLAMP, MIRROR
box(200);
}
```
## Custom Geometry
### buildGeometry
```javascript
let myShape;
function setup() {
createCanvas(800, 800, WEBGL);
myShape = buildGeometry(() => {
for (let i = 0; i < 50; i++) {
push();
translate(random(-200, 200), random(-200, 200), random(-200, 200));
sphere(10);
pop();
}
});
}
function draw() {
model(myShape); // renders once-built geometry efficiently
}
```
### beginGeometry / endGeometry
```javascript
beginGeometry();
// draw shapes here
box(50);
translate(100, 0, 0);
sphere(30);
let geo = endGeometry();
model(geo); // reuse
```
### Manual Geometry (p5.Geometry)
```javascript
let geo = new p5.Geometry(detailX, detailY, function() {
for (let i = 0; i <= detailX; i++) {
for (let j = 0; j <= detailY; j++) {
let u = i / detailX;
let v = j / detailY;
let x = cos(u * TWO_PI) * (100 + 30 * cos(v * TWO_PI));
let y = sin(u * TWO_PI) * (100 + 30 * cos(v * TWO_PI));
let z = 30 * sin(v * TWO_PI);
this.vertices.push(createVector(x, y, z));
this.uvs.push(u, v);
}
}
this.computeFaces();
this.computeNormals();
});
```
## GLSL Shaders
### createShader (Vertex + Fragment)
```javascript
let myShader;
function setup() {
createCanvas(800, 800, WEBGL);
let vert = `
precision mediump float;
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
vTexCoord = aTexCoord;
vec4 pos = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
gl_Position = pos;
}
`;
let frag = `
precision mediump float;
varying vec2 vTexCoord;
uniform float uTime;
uniform vec2 uResolution;
void main() {
vec2 uv = vTexCoord;
vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
gl_FragColor = vec4(col, 1.0);
}
`;
myShader = createShader(vert, frag);
}
function draw() {
shader(myShader);
myShader.setUniform('uTime', millis() / 1000.0);
myShader.setUniform('uResolution', [width, height]);
rect(0, 0, width, height);
resetShader();
}
```
### createFilterShader (Post-Processing)
Simpler — only needs a fragment shader. Automatically gets the canvas as a texture.
```javascript
let blurShader;
function setup() {
createCanvas(800, 800, WEBGL);
blurShader = createFilterShader(`
precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D tex0;
uniform vec2 texelSize;
void main() {
vec4 sum = vec4(0.0);
for (int x = -2; x <= 2; x++) {
for (int y = -2; y <= 2; y++) {
sum += texture2D(tex0, vTexCoord + vec2(float(x), float(y)) * texelSize);
}
}
gl_FragColor = sum / 25.0;
}
`);
}
function draw() {
// Draw scene normally
background(0);
fill(255, 0, 0);
sphere(100);
// Apply post-processing filter
filter(blurShader);
}
```
### Common Shader Uniforms
```javascript
myShader.setUniform('uTime', millis() / 1000.0);
myShader.setUniform('uResolution', [width, height]);
myShader.setUniform('uMouse', [mouseX / width, mouseY / height]);
myShader.setUniform('uTexture', myGraphics); // pass p5.Graphics as texture
myShader.setUniform('uValue', 0.5); // float
myShader.setUniform('uColor', [1.0, 0.0, 0.5, 1.0]); // vec4
```
### Shader Recipes
**Chromatic Aberration:**
```glsl
vec4 r = texture2D(tex0, vTexCoord + vec2(0.005, 0.0));
vec4 g = texture2D(tex0, vTexCoord);
vec4 b = texture2D(tex0, vTexCoord - vec2(0.005, 0.0));
gl_FragColor = vec4(r.r, g.g, b.b, 1.0);
```
**Vignette:**
```glsl
float d = distance(vTexCoord, vec2(0.5));
float v = smoothstep(0.7, 0.4, d);
gl_FragColor = texture2D(tex0, vTexCoord) * v;
```
**Scanlines:**
```glsl
float scanline = sin(vTexCoord.y * uResolution.y * 3.14159) * 0.04;
vec4 col = texture2D(tex0, vTexCoord);
gl_FragColor = col - scanline;
```
## Framebuffers
```javascript
let fbo;
function setup() {
createCanvas(800, 800, WEBGL);
fbo = createFramebuffer();
}
function draw() {
// Render to framebuffer
fbo.begin();
clear();
rotateY(frameCount * 0.01);
box(200);
fbo.end();
// Use framebuffer as texture
texture(fbo.color);
plane(width, height);
}
```
### Multi-Pass Rendering
```javascript
let sceneBuffer, blurBuffer;
function setup() {
createCanvas(800, 800, WEBGL);
sceneBuffer = createFramebuffer();
blurBuffer = createFramebuffer();
}
function draw() {
// Pass 1: render scene
sceneBuffer.begin();
clear();
lights();
rotateY(frameCount * 0.01);
box(200);
sceneBuffer.end();
// Pass 2: blur
blurBuffer.begin();
shader(blurShader);
blurShader.setUniform('uTexture', sceneBuffer.color);
rect(0, 0, width, height);
resetShader();
blurBuffer.end();
// Final: composite
texture(blurBuffer.color);
plane(width, height);
}
```
skills/creative/p5js/scripts/export-frames.js
Executable
+179
View File
@@ -0,0 +1,179 @@
#!/usr/bin/env node
/**
* p5.js Skill — Headless Frame Export
*
* Captures frames from a p5.js sketch using Puppeteer (headless Chrome).
* Uses noLoop() + redraw() for DETERMINISTIC frame-by-frame control.
*
* IMPORTANT: Your sketch must call noLoop() in setup() and set
* window._p5Ready = true when initialized. This script calls redraw()
* for each frame capture, ensuring exact 1:1 correspondence between
* frameCount and captured frames.
*
* If the sketch does NOT set window._p5Ready, the script falls back to
* a timed capture mode (less precise, may drop/duplicate frames).
*
* Usage:
* node export-frames.js sketch.html [options]
*
* Options:
* --output <dir> Output directory (default: ./frames)
* --width <px> Canvas width (default: 1920)
* --height <px> Canvas height (default: 1080)
* --frames <n> Number of frames to capture (default: 1)
* --fps <n> Target FPS for timed fallback mode (default: 30)
* --wait <ms> Wait before first capture (default: 2000)
* --selector <sel> Canvas CSS selector (default: canvas)
*
* Examples:
* node export-frames.js sketch.html --frames 1 # single PNG
* node export-frames.js sketch.html --frames 300 --fps 30 # 10s at 30fps
* node export-frames.js sketch.html --width 3840 --height 2160 # 4K still
*
* Sketch template for deterministic capture:
* function setup() {
* createCanvas(1920, 1080);
* pixelDensity(1);
* noLoop(); // REQUIRED for deterministic capture
* window._p5Ready = true; // REQUIRED to signal readiness
* }
* function draw() { ... }
*/
const puppeteer = require('puppeteer');
const path = require('path');
const fs = require('fs');
// Parse CLI arguments
function parseArgs() {
const args = process.argv.slice(2);
const opts = {
input: null,
output: './frames',
width: 1920,
height: 1080,
frames: 1,
fps: 30,
wait: 2000,
selector: 'canvas',
};
for (let i = 0; i < args.length; i++) {
if (args[i].startsWith('--')) {
const key = args[i].slice(2);
const val = args[i + 1];
if (key in opts && val !== undefined) {
opts[key] = isNaN(Number(val)) ? val : Number(val);
i++;
}
} else if (!opts.input) {
opts.input = args[i];
}
}
if (!opts.input) {
console.error('Usage: node export-frames.js <sketch.html> [options]');
process.exit(1);
}
return opts;
}
async function main() {
const opts = parseArgs();
const inputPath = path.resolve(opts.input);
if (!fs.existsSync(inputPath)) {
console.error(`File not found: ${inputPath}`);
process.exit(1);
}
// Create output directory
fs.mkdirSync(opts.output, { recursive: true });
console.log(`Capturing ${opts.frames} frame(s) from ${opts.input}`);
console.log(`Resolution: ${opts.width}x${opts.height}`);
console.log(`Output: ${opts.output}/`);
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-gpu',
'--disable-dev-shm-usage',
'--disable-web-security',
'--allow-file-access-from-files',
],
});
const page = await browser.newPage();
await page.setViewport({
width: opts.width,
height: opts.height,
deviceScaleFactor: 1,
});
// Navigate to sketch
const fileUrl = `file://${inputPath}`;
await page.goto(fileUrl, { waitUntil: 'networkidle0', timeout: 30000 });
// Wait for canvas to appear
await page.waitForSelector(opts.selector, { timeout: 10000 });
// Detect capture mode: deterministic (noLoop+redraw) vs timed (fallback)
let deterministic = false;
try {
await page.waitForFunction('window._p5Ready === true', { timeout: 5000 });
deterministic = true;
console.log(`Mode: deterministic (noLoop + redraw)`);
} catch {
console.log(`Mode: timed fallback (sketch does not set window._p5Ready)`);
console.log(` For frame-perfect capture, add noLoop() and window._p5Ready=true to setup()`);
await new Promise(r => setTimeout(r, opts.wait));
}
const startTime = Date.now();
for (let i = 0; i < opts.frames; i++) {
if (deterministic) {
// Advance exactly one frame
await page.evaluate(() => { redraw(); });
// Brief settle time for render to complete
await new Promise(r => setTimeout(r, 20));
}
const frameName = `frame-${String(i).padStart(4, '0')}.png`;
const framePath = path.join(opts.output, frameName);
// Capture the canvas element
const canvas = await page.$(opts.selector);
if (!canvas) {
console.error('Canvas element not found');
break;
}
await canvas.screenshot({ path: framePath, type: 'png' });
// Progress
if (i % 30 === 0 || i === opts.frames - 1) {
const pct = ((i + 1) / opts.frames * 100).toFixed(1);
const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
process.stdout.write(`\r Frame ${i + 1}/${opts.frames} (${pct}%) — ${elapsed}s`);
}
// In timed mode, wait between frames
if (!deterministic && i < opts.frames - 1) {
await new Promise(r => setTimeout(r, 1000 / opts.fps));
}
}
console.log('\n Done.');
await browser.close();
}
main().catch(err => {
console.error('Error:', err.message);
process.exit(1);
});
skills/creative/p5js/scripts/render.sh
Executable
+108
View File
@@ -0,0 +1,108 @@
#!/bin/bash
# p5.js Skill — Headless Render Pipeline
# Renders a p5.js sketch to MP4 video via Puppeteer + ffmpeg
#
# Usage:
# bash scripts/render.sh sketch.html output.mp4 [options]
#
# Options:
# --width Canvas width (default: 1920)
# --height Canvas height (default: 1080)
# --fps Frames per second (default: 30)
# --duration Duration in seconds (default: 10)
# --quality CRF value 0-51 (default: 18, lower = better)
# --frames-only Only export frames, skip MP4 encoding
#
# Examples:
# bash scripts/render.sh sketch.html output.mp4
# bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 60
# bash scripts/render.sh sketch.html output.mp4 --width 3840 --height 2160
set -euo pipefail
# Defaults
WIDTH=1920
HEIGHT=1080
FPS=30
DURATION=10
CRF=18
FRAMES_ONLY=false
# Parse arguments
INPUT="${1:?Usage: render.sh <input.html> <output.mp4> [options]}"
OUTPUT="${2:?Usage: render.sh <input.html> <output.mp4> [options]}"
shift 2
while [[ $# -gt 0 ]]; do
case $1 in
--width) WIDTH="$2"; shift 2 ;;
--height) HEIGHT="$2"; shift 2 ;;
--fps) FPS="$2"; shift 2 ;;
--duration) DURATION="$2"; shift 2 ;;
--quality) CRF="$2"; shift 2 ;;
--frames-only) FRAMES_ONLY=true; shift ;;
*) echo "Unknown option: $1"; exit 1 ;;
esac
done
TOTAL_FRAMES=$((FPS * DURATION))
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
FRAME_DIR=$(mktemp -d)
echo "=== p5.js Render Pipeline ==="
echo "Input: $INPUT"
echo "Output: $OUTPUT"
echo "Resolution: ${WIDTH}x${HEIGHT}"
echo "FPS: $FPS"
echo "Duration: ${DURATION}s (${TOTAL_FRAMES} frames)"
echo "Quality: CRF $CRF"
echo "Frame dir: $FRAME_DIR"
echo ""
# Check dependencies
command -v node >/dev/null 2>&1 || { echo "Error: Node.js required"; exit 1; }
if [ "$FRAMES_ONLY" = false ]; then
command -v ffmpeg >/dev/null 2>&1 || { echo "Error: ffmpeg required for MP4"; exit 1; }
fi
# Step 1: Capture frames via Puppeteer
echo "Step 1/2: Capturing ${TOTAL_FRAMES} frames..."
node "$SCRIPT_DIR/export-frames.js" \
"$INPUT" \
--output "$FRAME_DIR" \
--width "$WIDTH" \
--height "$HEIGHT" \
--frames "$TOTAL_FRAMES" \
--fps "$FPS"
echo "Frames captured to $FRAME_DIR"
if [ "$FRAMES_ONLY" = true ]; then
echo "Frames saved to: $FRAME_DIR"
echo "To encode manually:"
echo " ffmpeg -framerate $FPS -i $FRAME_DIR/frame-%04d.png -c:v libx264 -crf $CRF -pix_fmt yuv420p $OUTPUT"
exit 0
fi
# Step 2: Encode to MP4
echo "Step 2/2: Encoding MP4..."
ffmpeg -y \
-framerate "$FPS" \
-i "$FRAME_DIR/frame-%04d.png" \
-c:v libx264 \
-preset slow \
-crf "$CRF" \
-pix_fmt yuv420p \
-movflags +faststart \
"$OUTPUT" \
2>"$FRAME_DIR/ffmpeg.log"
# Cleanup
rm -rf "$FRAME_DIR"
# Report
FILE_SIZE=$(ls -lh "$OUTPUT" | awk '{print $5}')
echo ""
echo "=== Done ==="
echo "Output: $OUTPUT ($FILE_SIZE)"
echo "Duration: ${DURATION}s at ${FPS}fps, ${WIDTH}x${HEIGHT}"
skills/creative/p5js/scripts/serve.sh
Executable
+28
View File
@@ -0,0 +1,28 @@
#!/bin/bash
# p5.js Skill — Local Development Server
# Serves the current directory over HTTP for loading local assets (fonts, images)
#
# Usage:
# bash scripts/serve.sh [port] [directory]
#
# Examples:
# bash scripts/serve.sh # serve CWD on port 8080
# bash scripts/serve.sh 3000 # serve CWD on port 3000
# bash scripts/serve.sh 8080 ./my-project # serve specific directory
PORT="${1:-8080}"
DIR="${2:-.}"
echo "=== p5.js Dev Server ==="
echo "Serving: $(cd "$DIR" && pwd)"
echo "URL: http://localhost:$PORT"
echo "Press Ctrl+C to stop"
echo ""
cd "$DIR" && python3 -m http.server "$PORT" 2>/dev/null || {
echo "Python3 not found. Trying Node.js..."
npx serve -l "$PORT" "$DIR" 2>/dev/null || {
echo "Error: Need python3 or npx (Node.js) for local server"
exit 1
}
}
skills/creative/p5js/scripts/setup.sh
Executable
+87
View File
@@ -0,0 +1,87 @@
#!/bin/bash
# p5.js Skill — Dependency Verification
# Run: bash skills/creative/p5js/scripts/setup.sh
set -euo pipefail
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'
ok() { echo -e "${GREEN}[OK]${NC} $1"; }
warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
fail() { echo -e "${RED}[FAIL]${NC} $1"; }
echo "=== p5.js Skill — Setup Check ==="
echo ""
# Required: Node.js (for Puppeteer headless export)
if command -v node &>/dev/null; then
NODE_VER=$(node -v)
ok "Node.js $NODE_VER"
else
warn "Node.js not found — optional, needed for headless export"
echo " Install: https://nodejs.org/ or 'brew install node'"
fi
# Required: npm (for Puppeteer install)
if command -v npm &>/dev/null; then
NPM_VER=$(npm -v)
ok "npm $NPM_VER"
else
warn "npm not found — optional, needed for headless export"
fi
# Optional: Puppeteer
if node -e "require('puppeteer')" 2>/dev/null; then
ok "Puppeteer installed"
else
warn "Puppeteer not installed — needed for headless export"
echo " Install: npm install puppeteer"
fi
# Optional: ffmpeg (for MP4 encoding from frame sequences)
if command -v ffmpeg &>/dev/null; then
FFMPEG_VER=$(ffmpeg -version 2>&1 | head -1 | awk '{print $3}')
ok "ffmpeg $FFMPEG_VER"
else
warn "ffmpeg not found — needed for MP4 export"
echo " Install: brew install ffmpeg (macOS) or apt install ffmpeg (Linux)"
fi
# Optional: Python3 (for local server)
if command -v python3 &>/dev/null; then
PY_VER=$(python3 --version 2>&1 | awk '{print $2}')
ok "Python $PY_VER (for local server: python3 -m http.server)"
else
warn "Python3 not found — needed for local file serving"
fi
# Browser check (macOS)
if [[ "$(uname)" == "Darwin" ]]; then
if open -Ra "Google Chrome" 2>/dev/null; then
ok "Google Chrome found"
elif open -Ra "Safari" 2>/dev/null; then
ok "Safari found"
else
warn "No browser detected"
fi
fi
echo ""
echo "=== Core Requirements ==="
echo " A modern browser (Chrome/Firefox/Safari/Edge)"
echo " p5.js loaded via CDN — no local install needed"
echo ""
echo "=== Optional (for export) ==="
echo " Node.js + Puppeteer — headless frame capture"
echo " ffmpeg — frame sequence to MP4"
echo " Python3 — local development server"
echo ""
echo "=== Quick Start ==="
echo " 1. Create an HTML file with inline p5.js sketch"
echo " 2. Open in browser: open sketch.html"
echo " 3. Press 's' to save PNG, 'g' to save GIF"
echo ""
echo "Setup check complete."
skills/creative/p5js/templates/viewer.html
+395
View File
@@ -0,0 +1,395 @@
<!DOCTYPE html>
<!--
p5.js Interactive Viewer Template
=================================
USE THIS AS THE STARTING POINT for interactive generative art sketches.
FIXED (keep as-is):
✓ Layout structure (sidebar + canvas)
✓ Seed navigation (prev/next/random/jump)
✓ Action buttons (regenerate, reset, download PNG)
✓ Responsive canvas sizing
✓ Parameter update + regeneration wiring
VARIABLE (replace for each project):
✗ The p5.js algorithm (setup/draw/classes)
✗ The PARAMS object (define what your art needs)
✗ The parameter controls in the sidebar (sliders, pickers)
✗ The color palette
✗ The title and description
For headless export: add noLoop() and window._p5Ready=true in setup().
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generative Art Viewer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: #0a0a0f;
color: #c8c8d0;
display: flex;
min-height: 100vh;
overflow: hidden;
}
/* --- Sidebar --- */
.sidebar {
width: 280px;
flex-shrink: 0;
background: #12121a;
border-right: 1px solid #1e1e2a;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar h1 {
font-size: 18px;
font-weight: 600;
color: #e8e8f0;
margin-bottom: 4px;
}
.sidebar .subtitle {
font-size: 12px;
color: #666;
margin-bottom: 8px;
}
.section-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #555;
margin-bottom: 8px;
}
/* --- Seed Controls --- */
.seed-display {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 24px;
font-weight: 700;
color: #e8e8f0;
text-align: center;
padding: 8px;
background: #1a1a25;
border-radius: 6px;
margin-bottom: 8px;
}
.seed-nav {
display: flex;
gap: 6px;
margin-bottom: 6px;
}
.seed-nav button {
flex: 1;
padding: 6px;
font-size: 12px;
}
.seed-jump {
display: flex;
gap: 6px;
}
.seed-jump input {
flex: 1;
padding: 6px 8px;
background: #1a1a25;
border: 1px solid #2a2a35;
border-radius: 4px;
color: #c8c8d0;
font-size: 12px;
font-family: monospace;
}
.seed-jump button { padding: 6px 12px; font-size: 12px; }
/* --- Parameter Controls --- */
.control-group {
margin-bottom: 12px;
}
.control-group label {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #888;
margin-bottom: 4px;
}
.control-group .value {
color: #aaa;
font-family: monospace;
font-size: 11px;
}
.control-group input[type="range"] {
width: 100%;
height: 4px;
-webkit-appearance: none;
background: #2a2a35;
border-radius: 2px;
outline: none;
}
.control-group input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%;
background: #6a9bcc;
cursor: pointer;
}
.control-group input[type="color"] {
width: 100%;
height: 28px;
border: 1px solid #2a2a35;
border-radius: 4px;
background: #1a1a25;
cursor: pointer;
}
/* --- Buttons --- */
button {
padding: 8px 12px;
background: #1e1e2a;
border: 1px solid #2a2a35;
border-radius: 4px;
color: #c8c8d0;
font-size: 12px;
cursor: pointer;
transition: background 0.15s;
}
button:hover { background: #2a2a3a; }
button.primary { background: #2a4a6a; border-color: #3a5a7a; }
button.primary:hover { background: #3a5a7a; }
.actions { display: flex; flex-direction: column; gap: 6px; }
.actions button { width: 100%; }
/* --- Canvas Area --- */
.canvas-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: #08080c;
}
canvas { display: block; }
</style>
</head>
<body>
<!-- === SIDEBAR === -->
<div class="sidebar">
<!-- FIXED: Title (customize text, keep structure) -->
<div>
<h1 id="art-title">Generative Sketch</h1>
<div class="subtitle" id="art-subtitle">p5.js generative art</div>
</div>
<!-- FIXED: Seed Navigation -->
<div>
<div class="section-title">Seed</div>
<div class="seed-display" id="seed-display">42</div>
<div class="seed-nav">
<button onclick="changeSeed(-1)">&#9664; Prev</button>
<button onclick="changeSeed(1)">Next &#9654;</button>
<button onclick="randomizeSeed()">Random</button>
</div>
<div class="seed-jump">
<input type="number" id="seed-input" placeholder="Seed #" min="0">
<button onclick="jumpToSeed()">Go</button>
</div>
</div>
<!-- VARIABLE: Parameters (customize for each project) -->
<div id="params-section">
<div class="section-title">Parameters</div>
<!-- === REPLACE THESE WITH YOUR PARAMETERS === -->
<div class="control-group">
<label>Count <span class="value" id="count-val">500</span></label>
<input type="range" id="count" min="50" max="2000" step="50" value="500"
oninput="updateParam('count', +this.value)">
</div>
<div class="control-group">
<label>Scale <span class="value" id="scale-val">0.005</span></label>
<input type="range" id="scale" min="0.001" max="0.02" step="0.001" value="0.005"
oninput="updateParam('scale', +this.value)">
</div>
<div class="control-group">
<label>Speed <span class="value" id="speed-val">2.0</span></label>
<input type="range" id="speed" min="0.5" max="5" step="0.1" value="2.0"
oninput="updateParam('speed', +this.value)">
</div>
<!-- === END PARAMETER CONTROLS === -->
</div>
<!-- VARIABLE: Colors (optional — include if art needs adjustable palette) -->
<!--
<div>
<div class="section-title">Colors</div>
<div class="control-group">
<label>Background</label>
<input type="color" id="bg-color" value="#0a0a14"
oninput="updateParam('bgColor', this.value)">
</div>
<div class="control-group">
<label>Primary</label>
<input type="color" id="primary-color" value="#6a9bcc"
oninput="updateParam('primaryColor', this.value)">
</div>
</div>
-->
<!-- FIXED: Actions -->
<div class="actions">
<div class="section-title">Actions</div>
<button class="primary" onclick="regenerate()">Regenerate</button>
<button onclick="resetDefaults()">Reset Defaults</button>
<button onclick="downloadPNG()">Download PNG</button>
</div>
</div>
<!-- === CANVAS === -->
<div class="canvas-area" id="canvas-container"></div>
<script>
// ====================================================================
// CONFIGURATION — REPLACE FOR EACH PROJECT
// ====================================================================
const DEFAULTS = {
seed: 42,
count: 500,
scale: 0.005,
speed: 2.0,
// Add your parameters here
};
let PARAMS = { ...DEFAULTS };
// ====================================================================
// SEED NAVIGATION — FIXED (do not modify)
// ====================================================================
function changeSeed(delta) {
PARAMS.seed = Math.max(0, PARAMS.seed + delta);
document.getElementById('seed-display').textContent = PARAMS.seed;
regenerate();
}
function randomizeSeed() {
PARAMS.seed = Math.floor(Math.random() * 99999);
document.getElementById('seed-display').textContent = PARAMS.seed;
regenerate();
}
function jumpToSeed() {
let v = parseInt(document.getElementById('seed-input').value);
if (!isNaN(v) && v >= 0) {
PARAMS.seed = v;
document.getElementById('seed-display').textContent = PARAMS.seed;
document.getElementById('seed-input').value = '';
regenerate();
}
}
// ====================================================================
// PARAMETER UPDATES — CUSTOMIZE updateParam body as needed
// ====================================================================
function updateParam(name, value) {
PARAMS[name] = value;
let el = document.getElementById(name + '-val');
if (el) el.textContent = typeof value === 'number' && value < 1 ? value.toFixed(3) : value;
regenerate();
}
function resetDefaults() {
PARAMS = { ...DEFAULTS };
// Reset all sliders to default values
for (let [key, val] of Object.entries(DEFAULTS)) {
let el = document.getElementById(key);
if (el) el.value = val;
let valEl = document.getElementById(key + '-val');
if (valEl) valEl.textContent = typeof val === 'number' && val < 1 ? val.toFixed(3) : val;
}
document.getElementById('seed-display').textContent = PARAMS.seed;
regenerate();
}
function regenerate() {
randomSeed(PARAMS.seed);
noiseSeed(PARAMS.seed);
// Clear and redraw
clear();
initializeArt();
redraw();
}
function downloadPNG() {
saveCanvas('generative-art-seed-' + PARAMS.seed, 'png');
}
// ====================================================================
// P5.JS SKETCH — REPLACE ENTIRELY FOR EACH PROJECT
// ====================================================================
// Your state variables
let particles = [];
function initializeArt() {
// Initialize your generative system using PARAMS
// This is called on every regenerate()
particles = [];
for (let i = 0; i < PARAMS.count; i++) {
particles.push({
x: random(width),
y: random(height),
vx: 0, vy: 0
});
}
}
function setup() {
// Size canvas to fit container
let container = document.getElementById('canvas-container');
let size = Math.min(container.clientWidth - 40, container.clientHeight - 40, 1080);
let cnv = createCanvas(size, size);
cnv.parent('canvas-container');
pixelDensity(1);
colorMode(HSB, 360, 100, 100, 100);
randomSeed(PARAMS.seed);
noiseSeed(PARAMS.seed);
initializeArt();
// For interactive/animated sketches: remove noLoop()
// For static generation: keep noLoop()
noLoop();
}
function draw() {
background(0, 0, 5);
// === YOUR ALGORITHM HERE ===
// Use PARAMS.count, PARAMS.scale, PARAMS.speed, etc.
noStroke();
for (let p of particles) {
let n = noise(p.x * PARAMS.scale, p.y * PARAMS.scale);
let hue = (n * 200 + PARAMS.seed * 0.1) % 360;
fill(hue, 70, 80, 60);
circle(p.x, p.y, n * 10 + 2);
}
// === END ALGORITHM ===
}
function windowResized() {
let container = document.getElementById('canvas-container');
let size = Math.min(container.clientWidth - 40, container.clientHeight - 40, 1080);
resizeCanvas(size, size);
regenerate();
}
</script>
</body>
</html>
skills/creative/popular-web-designs/SKILL.md
+214
View File
@@ -0,0 +1,214 @@
---
name: popular-web-designs
description: 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
version: 1.0.0
author: Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)
license: MIT
tags: [design, css, html, ui, web-development, design-systems, templates]
platforms: [linux, macos, windows]
triggers:
- build a page that looks like
- make it look like stripe
- design like linear
- vercel style
- create a UI
- web design
- landing page
- dashboard design
- website styled like
---
# Popular Web Designs
54 real-world design systems ready for use when generating HTML/CSS. Each template captures a
site's complete visual language: color palette, typography hierarchy, component styles, spacing
system, shadows, responsive behavior, and practical agent prompts with exact CSS values.
## Related design skills
- **`claude-design`** — use for the design *process and taste* (scoping a brief,
producing variants, verifying a local HTML artifact, avoiding AI-design slop).
Pair it with this skill when the user wants a thoughtfully-designed page styled
after a known brand: `claude-design` drives the workflow, this skill supplies
the visual vocabulary.
- **`design-md`** — use when the deliverable is a formal DESIGN.md token spec
file, not a rendered artifact.
## How to Use
1. Pick a design from the catalog below
2. Load it: `skill_view(name="popular-web-designs", file_path="templates/<site>.md")`
3. Use the design tokens and component specs when generating HTML
4. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel
Each template includes a **Hermes Implementation Notes** block at the top with:
- CDN font substitute and Google Fonts `<link>` tag (ready to paste)
- CSS font-family stacks for primary and monospace
- Reminders to use `write_file` for HTML creation and `browser_vision` for verification
## HTML Generation Pattern
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<!-- Paste the Google Fonts <link> from the template's Hermes notes -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<style>
/* Apply the template's color palette as CSS custom properties */
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
/* ... more from template Section 2 */
}
/* Apply typography from template Section 3 */
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
/* Apply component styles from template Section 4 */
/* Apply layout from template Section 5 */
/* Apply shadows from template Section 6 */
</style>
</head>
<body>
<!-- Build using component specs from the template -->
</body>
</html>
```
Write the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),
and verify the result with `browser_vision` to confirm visual accuracy.
## Font Substitution Reference
Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts
substitute that preserves the design's character. Common mappings:
| Proprietary Font | CDN Substitute | Character |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |
| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |
| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |
| Berkeley Mono | JetBrains Mono | Technical monospace |
| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |
| Circular (Spotify) | DM Sans | Geometric, warm |
| figmaSans | Inter | Clean humanist |
| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |
| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |
| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |
| UberMove | DM Sans | Bold, tight |
| HashiCorp Sans | Inter | Enterprise, neutral |
| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |
| Rubik (Sentry) | Rubik | Available on Google Fonts |
When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no
substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3
for sohne-var), follow the template's weight, size, and letter-spacing values closely —
those carry more visual identity than the specific font face.
## Design Catalog
### AI & Machine Learning
| Template | Site | Style |
|---|---|---|
| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |
| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |
| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
| `minimax.md` | Minimax | Bold dark interface with neon accents |
| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |
| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |
| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |
| `replicate.md` | Replicate | Clean white canvas, code-forward |
| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |
| `together.ai.md` | Together AI | Technical, blueprint-style design |
| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |
| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |
### Developer Tools & Platforms
| Template | Site | Style |
|---|---|---|
| `cursor.md` | Cursor | Sleek dark interface, gradient accents |
| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |
| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |
| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |
| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |
| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |
| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |
| `resend.md` | Resend | Minimal dark theme, monospace accents |
| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |
| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |
| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |
| `vercel.md` | Vercel | Black and white precision, Geist font system |
| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |
| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |
### Infrastructure & Cloud
| Template | Site | Style |
|---|---|---|
| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |
| `composio.md` | Composio | Modern dark with colorful integration icons |
| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |
| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |
| `sanity.md` | Sanity | Red accent, content-first editorial layout |
| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |
### Design & Productivity
| Template | Site | Style |
|---|---|---|
| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |
| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |
| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |
| `figma.md` | Figma | Vibrant multi-color, playful yet professional |
| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |
| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |
| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |
| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |
| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |
| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |
### Fintech & Crypto
| Template | Site | Style |
|---|---|---|
| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |
| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |
| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |
| `wise.md` | Wise | Bright green accent, friendly and clear |
### Enterprise & Consumer
| Template | Site | Style |
|---|---|---|
| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |
| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |
| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |
| `ibm.md` | IBM | Carbon design system, structured blue palette |
| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |
| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |
| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |
| `uber.md` | Uber | Bold black and white, tight type, urban energy |
## Choosing a Design
Match the design to the content:
- **Developer tools / dashboards:** Linear, Vercel, Supabase, Raycast, Sentry
- **Documentation / content sites:** Mintlify, Notion, Sanity, MongoDB
- **Marketing / landing pages:** Stripe, Framer, Apple, SpaceX
- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman
- **Light / clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate
- **Playful / friendly:** PostHog, Figma, Lovable, Zapier, Miro
- **Premium / luxury:** Apple, BMW, Stripe, Superhuman, Revolut
- **Data-dense / dashboards:** Sentry, Kraken, Cohere, ClickHouse
- **Monospace / terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent

Some files were not shown because too many files have changed in this diff Show More