Boids flocking · deepseek-v4-pro
Create a full-screen flocking simulation of boids using separation, alignment, and cohesion, drawn as oriented triangles that steer smoothly and flee from the mouse cursor.
transcript · 6 messages
Create a full-screen flocking simulation of boids using separation, alignment, and cohesion, drawn as oriented triangles that steer smoothly and flee from the mouse cursor.
thinking
The user wants a single-page web app with a flocking simulation (boids) with: 1. Separation, alignment, and cohesion behaviors 2. Boids drawn as oriented triangles 3. Smooth steering 4. Mouse cursor avoidance (flee behavior) 5. Full-screen canvas 6. All in one self-contained index.html file Let me build this step by step: - Canvas fills the entire viewport - Boids are oriented triangles that point in their direction of travel - Three classic boid rules: separation (avoid neighbors too close), alignment (match velocity of neighbors), cohesion (move toward center of neighbors) - Flee from mouse: when mouse is near, boids accelerate away - Smooth steering via gradual velocity changes (limited turning rate) Let me write a complete, polished implementation.
/workspace/index.html (13558 bytes)Successfully wrote 13558 bytes to /workspace/index.html
thinking
The file has been written. Let me verify it exists and looks correct.
{"command":"wc -l /workspace/index.html && head -5 /workspace/index.html && echo \"---\" && tail -5 /workspace/index.html"}476 /workspace/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> --- // Kick off loop(); </script> </body> </html>
thinking
The file is complete and valid. Let me give a summary of what was built.
The file is written — `/workspace/index.html`, 476 lines, fully self-contained. Here's what it does: **Flocking simulation** with 180 boids, each drawn as an **oriented triangle** pointing in its direction of travel: - **Separation** — boids push away from near neighbours (radius 28px) - **Alignment** — boids match velocity with mid-range neighbours (radius 65px) - **Cohesion** — boids steer toward the centre of mass of larger-neighbourhood (radius 75px) - **Mouse flee** — boids scatter from the cursor within 140px, with smoothed mouse tracking for fluid response - **Edge steering** — soft-margin force pushes boids away from screen edges, plus full wraparound when they exit - **Smooth steering** — total force is clamped per frame for natural turns (no snap-rotations) - **Spatial grid** — uniform cell grid avoids O(n²) neighbour checks **Visual details:** - Speed-based colour gradient: slow boids are cool blue, fast boids shift to warm amber - Fading motion trail dots behind each boid - Subtle dark radial background and a soft mouse-position glow - FPS counter and boid count in the top-right corner - Responsive full-screen canvas, touch-friendly Open `index.html` in any browser to run.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.