SWGhost Saga

The SWGhost Saga tells the story of how a fully-featured, draggable ghost character is built from the ground up using core classes in the SketchWaveJS library — no magic, just incremental composition and encapsulation.

The Building Blocks

Every SWGhost is composed of classes you already know:

• SWColor — A single ghostColor variable (copied from a constant via SWColor.copy()) controls the fill of every ghost part. Tweaking its HSB or alpha reskins the whole ghost instantly.
• SWPoint — One anchor point (ghostAnchor) owns the ghost's position. All other geometry is derived from it each time the ghost moves.
• SWDisk — The head and each toe bump are SWDisk instances. In later stages, two SWEyeball instances (which are themselves composed of SWDisk) will live inside the head.
• SWRectangle — The body is a single rectangle whose top edge aligns with the head's equator, making the seam invisible when both share the same fill color.

The Draw-Order Trick

Toes are drawn before the body. The body rectangle then paints over the top half of every toe disk, leaving only the lower semicircles visible as bumps — the classic ghost fringe. No clipping or masking needed.

The Saga in Stages

• Stage 1 — Basic shape assembled manually in the sketch from core classes. Establishes ghostColor, NUM_TOES, and shouldShowStroke control variables.
• Stage 2 — Introduces the SWGhost class. Live recomputation of child positions enables drag. Sketch construction drops to a single constructor call.
• Stage 3 — Two SWEyeball instances inside the head; eyes follow the ghost when dragged. Adds numToes = 0 support for a flat-bottom ghost.
• Stage 4 — Two SWSinusoid instances animate the ghost with horizontal drift and vertical hover. Drag and sinusoid coexist via base-position resyncing on mouse release.
• Stage 5 — Perlin-noise eye animation added via SWEyeball.lookingAround(). Follow mode rotates pupils toward the cursor; Track mode keeps both eyes in sync. Noise state is preserved through every _build() rebuild so the wander is seamless during hover. A Control Panel exposes 13 live parameters across Eye, Hover, and Ghost & Canvas cards.
• Stage 6 — Adds SWGhost.stretching(sinusoid, t), a third SWSinusoid that drives bodyHeight each frame. The head stays fixed; the body and toes shift to reflect the changing height, creating a rhythmic grow-and-shrink effect analogous to SWRectangle.breathe(). Hover, stretch, and eye wander all run simultaneously via independent sinusoids with incommensurable periods.