03 LIVE

Snake in a Box

A rectangle with draggable corner handles contains an autonomous snake with a fixed body length. Drag a corner inward and the walls press the entire body flat — the tail piles against the boundary as the chain tries to stay intact.

The head steers away from its own body to avoid self-crossing. The body uses constraint relaxation: each frame runs three passes of chain-follow and box-clamp, so the walls act as hard boundaries for every segment, not just the head. A final separation pass pushes any overlapping non-adjacent segments apart, tail-side first.

Canvas 2D Chain Constraint Self-Avoidance Constraint Relaxation Drag Interaction

// controls

drag corner Resize the box by pulling any of the four circular corner handles. A minimum size is enforced so the snake always fits.

theme dots Switch between 5 color palettes — changes both the snake gradient and the box border color.

watch The snake moves autonomously and avoids crossing its own body. Shrink the box to press the tail against the walls. Expand it to let the snake uncoil and roam.