Stage 3: Single Ghost • p5.js Showcase • 10/05/2026
TNT — p5.js Creative Coding & Henry's Ghost Saga

👻 Henry's Ghost Saga:
Stage 3 — The Ghost Anatomy

A single ghost on a deep-blue canvas, rebuilt with named constants, decomposed functions, and animated floating and blinking.

Stage 3 • Single Ghost Foundation

One Ghost, Documented

Stage 3 isolates the ghost itself — no stars, no wrangling, just one centered ghost on a midnight-blue canvas with clean named constants replacing every last magic number. The result is a sketch that teaches anatomy directly: dome, shoulders, hem, eyes, glow, float cycle, blink timing, and mouth arc.

This is the foundation for Stage 4 (classes). Every property and ratio is now explicitly named, so the transition to class Ghost {} will be almost mechanical: constructor state already exists, geometry is decomposed into helper functions, and the update/draw cycle is already isolated.

p5.js techniques at work: beginShape()/endShape(CLOSE) • vertex() • cos()/sin() on the unit circle • lerp() for hem spacing • sine wave animation • push()/pop() • atan2() for pupil tracking

    Live sketch requires a larger screen.
    Try rotating to landscape.

    Live Sketch

    The ghost gently floats, blinks at random intervals, and keeps both pupils trained on your mouse position.