textmode-jslisted
Install: claude install-skill vinsonconsulting/claude-skill-foundry
# textmode-js
`textmode.js` is a zero-dependency TypeScript creative-coding library for real-time
ASCII / textmode graphics. It renders to a **grid of character cells** on a WebGL2
canvas with p5.js-like ergonomics. Use it to author, debug, and export
glyph-grid sketches.
## Mental model
- The canvas is a grid of **cells**, not pixels. Each cell holds one **glyph**, a
**char color** (the glyph's foreground), and a **cell color** (its background).
- You draw with p5-style primitives, but coordinates and sizes are in **cells**.
- **The origin `(0,0)` is the grid CENTER.** +x is right, +y is **down**, -y is up.
This is the single biggest trip-up — a `rect`/`point` with no transform lands at
the center, not the top-left.
- A sketch is a lifecycle: `create()` once → `setup()` once → `draw()` every frame.
State setters (`char`, `charColor`, `cellColor`, transforms) are **sticky** —
they apply to every draw call until changed or until `pop()` restores them.
## Minimal sketch (ESM)
```js
import { textmode } from "textmode.js";
const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
frameRate: 60,
});
t.setup(() => {
// Runs once after the renderer + grid exist.
// Load fonts / images / shaders here (these are async — await them).
});
t.draw(() => {
t.background(18, 20, 28); // clear the grid every frame
t.char("@"); // glyph used by following draw calls
t.charColor(120, 220, 160);