ASCII engine

An ASCII animation engine behind my homepage hero.

It runs the homepage. Speed and frame rate are separate numbers: a pattern asks for a moment in time, not a frame number, so turning speed up moves the animation faster instead of drawing more of it.

ascii engine

Canvas

Algorithm

Speed

Parameters

Breath depth

30%

Ring thickness

patterns/pulse-breathe.ts

excerpt

const phase =
(Math.sin(t * INTERNAL_TEMPO) + 1) / 2;
const breath = breathDepth + phase * (1 - breathDepth);
for (const { frac, ch, c } of rings) {
const ry = frac * breath * maxRy;
const rx = ry * CELL_ASPECT; // cells are tall
for (let i = 0; i < steps; i++) {
const a = (i / steps) * Math.PI * 2;
put(g, Math.round(cx + rx * Math.cos(a)),
Math.round(cy + ry * Math.sin(a)), ch, c);
}
}

What it is

The moving ASCII art at the top of my homepage. It has four patterns, including a live Toronto clock, and four 3D shapes you can spin with your mouse, all adjustable from the panel beside it.

Why I needed it

I wanted my homepage to open with something I’d made that visitors could play with.

How I did it

I decided what it should do and built it with Claude Code. The engine redraws a grid of characters every frame. For the 3D shapes, it works out how much light hits each point and uses a denser character where it’s brighter.