SWGhost Saga

Stage 1 establishes the foundational structure of the ghost: a recognizable silhouette built entirely from existing SketchWaveJS core classes — no custom ghost class yet. The goal is to get the shape right and the design decisions locked in before adding behavior.

What Was Built

The ghost is composed of three layers drawn in a specific order each frame:

1. Toes (SWDisk array) — NUM_TOES disks are spaced evenly along the bottom edge of the body. They are drawn first so the body rectangle paints over their top halves, leaving only the lower semicircles visible as bumps — the classic ghost fringe.
2. Body (SWRectangle) — Drawn second, its top edge aligns with the head's center y, blending seamlessly into the head because both share the same fill color.
3. Head (SWDisk) — Drawn last (on top), centered on the y-axis at ghostHeadCenter, which serves as the primary position anchor for the entire ghost.

Key Design Decisions

• ghostColor — A single SWColor variable, initialized via SWColor.copy(swRed), controls the fill of every ghost part. Tweaking its HSB or alpha values reskins the whole ghost at once.
• NUM_TOES — Changing this one constant (try 1–8) automatically recomputes toe diameter, spacing, and positions. No other values need to be touched.
• shouldShowStroke — A boolean control variable that shows or hides the black border on every ghost part by setting strokeColor to swBlack or null each frame.
• Grid coordinate system — All positions and sizes are in user-units (−10 to +10), not pixels. Click the canvas to toggle the grid.

Known Limitation — The Static Layout Problem

All child positions (body center, toe centers) are computed once in setup() from the head anchor's initial coordinates. They do not update if the head moves. This means making ghostHeadCenter draggable would only drag the head disk — the body and toes would stay frozen. This is the key limitation Stage 2 will address.

The Road Ahead

Stage 2 → Recompute all child positions from ghostHeadCenter each frame in draw(), enabling the whole ghost to move as a unit.
Stage 3 → Make the ghost draggable — click and drag to reposition it anywhere on the canvas.
Stage 4 → Add animation: floating, wobbling, or patrolling behavior.
Stage 5+ → Encapsulate everything into a reusable SWGhost class with a clean API for position, color, and animation control.