Boids flocking · seed-2.0-lite
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
Got it, let's tackle this. The user wants a full-screen boids flocking simulation with separation, alignment, cohesion, oriented triangles, smooth steering, and mouse avoidance. All in one index.html file, no external resources.
First, I need to structure the HTML: a canvas that's full screen, no margins. Then CSS to make the body and canvas take up the whole viewport, background maybe a dark color so the boids show up.
Next, the JavaScript part. First, get the canvas context, set its size to window inner width and height, handle window resize? Maybe, but at least set it initially. Then create a Boid class or an array of boid objects, each with position, velocity, acceleration. The three main rules plus the mouse avoidance.
Wait, the boids need to be oriented triangles, so I have to calculate the angle of their velocity to rotate the triangle correctly. Each boid's triangle should point in the direction it's moving.
First, set up constants: number of boids, maybe 100? That's a good number. Vision radius, separation distance, weights for each rule: separation, alignment, cohesion, mouse avoidance. Max speed, max steering force to keep movement smooth.
The rules:
1. Separation: steer away from other boids that are too close. Calculate the average vector away from neighbors, normalize, scale to max speed, subtract current velocity to get steering force, limit it.
2. Alignment: average the velocity of nearby boids, steer towards that average. Same process: create desired vector, steer towards it.
3. Cohesion: average the position of nearby boids, steer towards that center.
4. Mouse avoidance: if the mouse is within the vision radius, steer away from it, stronger weight than other rules.
Also, wrap the boids around the screen so if they go off one edge, they come back on the other. That keeps the flock moving without them all leaving the canvas.
Let's outline the steps:
1. HTML structure: <!DOCTYPE html>, <html>, <body> with a canvas, style to make it fullscreen, no overflow.
2. CSS: reset margins, padding, set body to 100vh/100vw, overflow hidden, canvas same size, background #111 (dark gray).
3. JS:
a. Get canvas and ctx.
b. Set canvas width and height to window.innerWidth/innerHeight.
c. Track mouse position: add mousemove event listener to update mouseX and mouseY.
d. Create a Boid class or constructor function that has x, y, vx, vy, ax, ay. Methods to update, apply forces, draw.
e. For each boid, in every frame:
i. Calculate all the steering forces from the four rules.
ii. Add the forces to acceleration.
iii. Update velocity by adding acceleration, limit to max speed.
iv. Update position by adding velocity.
v. Wrap position around screen edges.
vi. Reset acceleration to zero each frame.
f. Draw each boid as a triangle rotated to face its velocity direction. To rotate, use ctx.save(), translate to boid position, rotate the angle of velocity, draw the triangle, then restore.
g. Use requestAnimationFrame to loop the update and draw functions.
Wait, the rotation: the angle is Math.atan2(vy, vx), right? Because atan2 gives the angle from the x-axis, so if the triangle is drawn pointing along the positive x-axis, rotating by that angle will make it point in the direction of movement. The triangle could be something like: moveTo(10, 0), lineTo(-5, -5), lineTo(-5, 5), closePath(). That's a triangle pointing right, so rotating it by the velocity angle will point the boid in the right direction.
Let's set the constants:
const NUM_BOIDS = 120;
const VIEW_RADIUS = 50;
const SEPARATION_DISTANCE = 25;
const MAX_SPEED = 3;
const MAX_FORCE = 0.15;
const SEP_WEIGHT = 1.5;
const ALIGN_WEIGHT = 1.0;
const COHES_WEIGHT = 1.0;
const MOUSE_WEIGHT = 3.0;
const MOUSE_AVOID_RADIUS = 80;
That should make the movement smooth. The mouse avoidance is stronger so they flee the cursor.
For the force calculation functions: write separate functions to calculate separation, alignment, cohesion, mouse avoidance. Each takes a boid and the list of all boids, returns a {x, y} vector that's the steering force.
Wait, also need to implement vector math: add, subtract, multiply, divide, limit, normalize, distance between two points. That's essential. Create helper functions for vector operations to keep code clean.
Edge wrapping: if boid.x < 0, set to canvas.width; if x > canvas.width, set to 0. Same for y. That way they wrap around instead of bouncing, which looks more natural for flocking.
Testing: make sure that all the rules work together, the boids flock, they avoid the mouse, the triangles point in the right direction.
Putting it all together into one index.html file, all inline, no external resources. Let's write that out./tmp/ws/index.html (7739 bytes)Successfully wrote 7739 bytes to /tmp/ws/index.html
thinking
Perfect, the file is created. Let's just check that it meets all the requirements: it's a full-screen simulation, uses the three core boids rules (separation, alignment, cohesion), draws oriented triangles, has smooth steering, and boids flee from the mouse cursor. All code is in one self-contained index.html file, no external resources, no network requests. The canvas is full screen, the boids wrap around edges, there's a subtle trail effect from the semi-transparent background, the triangles point in the direction of movement, mouse avoidance is strong so they flee the cursor. Everything checks out.
The full-screen boids flocking simulation is complete! The single self-contained `index.html` file includes all necessary CSS, HTML, and JavaScript. It implements: - Core flocking rules: separation, alignment, and cohesion - Oriented triangular boids that smoothly steer in their movement direction - Mouse cursor avoidance that makes boids flee from your pointer - Full-screen canvas that resizes with your window - Subtle motion trails for visual fluidity - Edge wrapping so boids never leave the screen To run it, simply open the file in any modern web browser.
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 and flee mouse with smooth trails and oriented triangles; continuous idle animation looks convincing.
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.