SWGhost Saga

Stage 2 solves the key limitation from Stage 1: the ghost is now a fully draggable, self-contained object. All geometry is handled inside the new SWGhost class — the sketch itself is dramatically simpler as a result.

The SWGhost Class

SWGhost lives in shapeClasses/swGhost.js and follows the same constructor conventions as SWDisk, SWRectangle, and SWEyeball: pass in a center point, sizing values, a color, and an optional stroke color.

• Single anchor point — ghostAnchor (an SWPoint) is the only position value stored. All other geometry (body center, toe centers) is derived from it.
• Live recomputation via _build() — When setPosition(x, y) is called (by the drag handler or any other code), the body SWRectangle and all toe SWDisk instances are reconstructed from the new head position. This runs only when the ghost moves, not every frame.
• Drag interaction — Call handleMousePressed(), handleMouseDragged(), and handleMouseReleased() from the p5.js event functions. The ghost returns true when it consumes a click, allowing the sketch to skip the grid toggle on drag-start.
• shouldShowStroke — Still available as a property on the SWGhost instance; toggle it the same way as Stage 1.

What the Sketch Does Now

The sketch's setup() creates one SWGhost with a single constructor call. The old manual assembly of head, body center, body rectangle, toe centers, and toe disks is gone — that complexity lives inside the class where it belongs. The draw() loop calls ghost.drawOnGrid(grid) and nothing more.

• Click and drag the ghost to move it anywhere on the canvas.
• Click on an empty area to toggle the grid on and off.

The Road Ahead

Stage 3 → Add two SWEyeball instances inside the ghost head, positioned relative to ghostAnchor. Eyes follow the ghost when dragged, and pupils are independently interactive.
Stage 4 → Add animation: a floating sine-wave bob and optional patrol path.
Stage 5+ → Refine the SWGhost API — add eye support, lookAt() delegation, and a full class reference page.