Boids flocking · deepseek-v3.1-terminus
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 · 4 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
We are going to create a single-page web app with a full-screen flocking simulation (boids) that uses separation, alignment, and cohesion. The boids will be drawn as oriented triangles and will steer smoothly. They will also flee from the mouse cursor.
The simulation will be contained in a single index.html file with:
- HTML structure: a full-screen canvas
- CSS: to make the canvas full-screen and remove margins
- JavaScript: the boid simulation logic
We'll use the classic boid rules (separation, alignment, cohesion) and add a fourth rule: flee from the mouse.
Steps in the JavaScript:
1. Set up the canvas and context.
2. Define a Boid class with:
- position, velocity, acceleration (vectors)
- methods to update, apply behaviors, and draw (as a triangle)
3. Implement the rules (separation, alignment, cohesion, flee) as vector forces.
4. Create an array of boids and initialize them with random positions and velocities.
5. Animation loop: clear the canvas, update each boid (apply rules and update position), and draw.
We'll make the boids steer smoothly by using a steering force that is limited and applied as acceleration.
Important parameters:
- We'll set some constants for the rules (e.g., desired separation, alignment and cohesion distances, and weights for each rule).
- We'll also set a maximum force and speed for the boids.
The flee behavior will be based on the mouse position: if the mouse is within a certain distance, the boid will flee.
Let's write the code accordingly.I'll create a full-screen flocking simulation with boids that flee from the mouse cursor. Let me build this as a single self-contained HTML file.
index.html (17239 bytes)Successfully wrote 17239 bytes to index.html
thinking
I've created a complete flocking simulation with boids that includes all the requested features: **Key Features:** - **Full-screen canvas** that adapts to window size - **Boids drawn as oriented triangles** showing their direction of movement - **Three flocking behaviors**: Separation, Alignment, and Cohesion - **Mouse interaction**: Boids flee from the cursor with smooth steering - **Real-time controls** to adjust flocking parameters - **Performance stats** showing FPS and boid count **Technical Implementation:** - Custom `Vector2` class for mathematical operations - `Boid` class handling individual boid behavior and rendering - `Flock` class managing the simulation and UI - Smooth steering with velocity limiting - Wrap-around edges for continuous movement - Visual feedback showing mouse influence area **Controls Available:** - Separation strength (how much boids avoid each other) - Alignment strength (how much boids match direction) - Cohesion strength (how much boids stick together) - Flee strength (how strongly boids react to mouse) - Boid count (50-300 boids) The simulation runs smoothly with real-time parameter adjustments and provides an engaging visual experience where the boids naturally flock together while fleeing from your mouse cursor.
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.
RUN
EVALUATION
Boids flock smoothly and flee from a visible red cursor circle; sliders adjust parameters; keyboard input has no distinct effect but mouse works well.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.