visual-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# Visual Design & Creative Coding

## Skill Selection

| Task | Tool | Section |
|------|------|---------|
| ASCII art banners | pyfiglet, cowsay, boxes | §1 ASCII Art |
| ASCII video (video→ASCII MP4) | Python + ffmpeg | §2 ASCII Video |
| Hand-drawn diagrams (JSON) | Excalidraw format | §3 Excalidraw |
| Architecture diagrams (SVG/HTML) | Dark-themed SVG | §4 Architecture Diagrams |
| Generative art (browser) | p5.js | §5 p5.js |
| Math animations | Manim CE | §6 Manim |
| Infographics (image generation) | baoyu-infographic | §7 Infographics |
| Text layout demos | @chenglou/pretext | §8 Pretext |
| Stable Diffusion / Flux | ComfyUI | §9 ComfyUI |

---

## §1 — ASCII Art

Multiple tools for different ASCII art needs.

### Text Banners (pyfiglet)

```bash
pip install pyfiglet
python3 -m pyfiglet "TEXT" -f slant
python3 -m pyfiglet --list_fonts
```

Recommended fonts: `slant` (clean), `doom` (bold), `big` (banners), `small` (compact).

### Cowsay

```bash
cowsay "Hello World"
cowsay -f tux "Linux rules"
cowthink "Hmm..."
```

### Boxes

```bash
echo "Hello" | boxes -d stone
```

### Image to ASCII

```bash
ascii-image-converter image.png -C    # color
jp2a --width=80 image.jpg            # lightweight
```

### Search Pre-Made Art

```bash
curl -s 'https://ascii.co.uk/art/cat' | python3 -c "
import re, html
# Extract <pre> blocks
"
```

---

## §2 — ASCII Video

Convert video/audio to colored ASCII MP4/GIF.

Single self-contained Python script per project. Stack: Python + NumPy + SciPy + Pillow + ffmpeg.

Modes: Video-to-ASCII, Audio-reactive, Generative, Hybrid, Lyrics/text.

Key pipeline: `INPUT → ANALYZE → SCENE_FN → TONEMAP → SHADE → ENCODE`

Critical: Always disable FES (`p5.disableFriendlyErrors = true`), use adaptive tonemap (not linear multipliers), never `stderr=subprocess.PIPE` with long-running ffmpeg.

---

## §3 — Excalidraw (reference)

See the `excalidraw` skill for full Excalidraw JSON diagram reference.

Key: Use container binding (boundElements + containerId) for labeled shapes. Never use `"label"` property on shapes.

Save as `.excalidraw` files, open at excalidraw.com.

---

## §4 — Architecture Diagrams (SVG/HTML)

Dark-themed SVG architecture diagrams as standalone HTML.

Color palette:
- Frontend: cyan-400 (`#22d3ee`)
- Backend: emerald-400 (`#34d399`)
- Database: violet-400 (`#a78bfa`)
- AWS/Cloud: amber-400 (`#fbbf24`)

Background: Slate-950 (`#020617`) with 40px grid pattern.
Font: JetBrains Mono from Google Fonts.

---

## §5 — p5.js

Browser-based generative art and interactive visualizations.

### Setup

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
```

Always: `randomSeed(CONFIG.seed)` + `noiseSeed(CONFIG.seed)` for reproducibility.
Use `colorMode(HSB, 360, 100, 100, 100)` for generative art.

### Export

- PNG: `saveCanvas('output', 'png')`

From RekapalliVasudeva-MBU/aether-desktop, MIT.

More from RekapalliVasudeva-MBU/aether-desktop