Koi Pond — Canvas Simulation

A serene koi pond built entirely on HTML5 canvas — flocking fish, ripple physics, caustic light, lily pads, and a monochrome/colorful mode toggle. Three-step Vibe5 build documenting the full prompt chain from boids simulation to final polish.

Helpful?

Was the prompts helpfull?

Case trace

3 creative leaps

Step 1 — Base pondClaudeSonnet 4.6

Build a koi pond simulation using an HTML5 canvas. Fish should flock using boids rules (separation, cohesion, alignment) with wander behaviour. Add animated caustic light patterns on the water floor. Mouse movement should scatter fish and spawn expanding ripple rings. Click should create a burst of 4 ripples. Keep everything monochrome for now.

I tuned separation radius to 38px, cohesion to 100px, alignment to 80px. The caustic circles drift slowly using sine-offset on x/y each frame to feel organic rather than static.

Step 2 — Lily padsClaudeSonnet 4.6

Add lily pads to the pond. Each pad should have a notch cut out (like a real lily pad), subtle vein lines radiating from centre, a gentle bobbing/rotation over time. Some pads should have a blooming flower — multiple petals arranged in a ring, slowly rotating, with a yellow centre. Place 6 pads at varied positions across the canvas.

The notch is drawn by splitting the arc into two arc() calls with a gap between ~PI*0.85 and ~PI*1.15, both originating from centre (0,0) — this gives the characteristic lily pad silhouette. Veins use three moveTo/lineTo strokes at low opacity. Flower petals are ellipse() calls rotated around the pad centre, offset outward by r*0.38.

Step 3 — Color modesClaudeSonnet 4.6

Add two mode buttons — Monochrome and Colorful. In monochrome, keep the existing grayscale look. In colorful mode: fish become orange/red koi using HSL color per fish, water background shifts to deep teal-green gradient, caustic rings tint green, ripples tint mint, lily pads go dark green, flowers turn pink with yellow centres. Switching modes should be instant with no reload.

Every draw function checks a single colorMode variable — no state duplication. The color switch is essentially free at runtime since canvas redraws every frame anyway. HSL per fish (hue: rnd(0, 40)) gives natural variation between orange, red-orange, and gold koi without any extra logic. Dark mode background uses a createLinearGradient only in color mode to avoid the overhead in mono.