Boids flocking · aion-3.0-mini
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
I never include the tag in my thinking.
I need to build a single-page web app: a full-screen flocking simulation of boids. It must be in one self-contained index.html file. CSS in <style>, JS in <script>, no external resources, no CDNs, no network requests.
The requirements:
- Full-screen flocking simulation of boids
- Uses separation, alignment, and cohesion
- Drawn as oriented triangles
- Steer smoothly
- Flee from the mouse cursor
Let me think about the implementation:
1. Canvas-based rendering, full screen
2. Boid class with position, velocity, acceleration
3. Flocking rules:
- Separation: steer away from nearby boids
- Alignment: steer towards average velocity of nearby boids
- Cohesion: steer towards average position of nearby boids
4. Mouse flee: when mouse is near, add a repulsion force
5. Drawing as oriented triangles (pointing in direction of velocity)
6. Smooth steering using acceleration + velocity
I'll write a clean implementation. Let me think about the details:
- Number of boids: ~100-200
- Canvas fills window, resize handler
- Each boid has: pos (x,y), vel (vx,vy), acc (ax,ay)
- Update loop: calculate flocking forces, apply, update position
- Draw triangles: calculate angle from velocity, draw triangle at position
Let me write the code:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boids Flocking Simulation</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// Boids simulation
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let W, H;
function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// Mouse
const mouse = { x: -1000, y: -1000 };
canvas.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; });
canvas.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });
// Boid
const BOID_COUNT = 150;
const MAX_SPEED = 4;
const MAX_FORCE = 0.2;
const PERCEPTION_RADIUS = 50;
const SEPARATION_RADIUS = 25;
class Boid {
constructor() {
this.pos = { x: Math.random() * W, y: Math.random() * H };
const angle = Math.random() * Math.PI * 2;
this.vel = { x: Math.cos(angle), y: Math.sin(angle) };
this.acc = { x: 0, y: 0 };
}
// ... etc
}
```
Let me implement the full thing properly.
For the triangle drawing: I'll draw an isosceles triangle pointing in the direction of velocity. Size maybe 8-10 pixels.
For smooth steering: use acceleration limited by max force, velocity limited by max speed.
Flocking weights: separation ~1.5, alignment ~1.0, cohesion ~1.0, mouse flee ~2.0
Let me write the complete implementation now.
I'll use a more efficient approach: pre-compute neighbors for each boid (brute force O(n²) is fine for 150 boids).
Let me write clean, well-commented code.
Actually, let me just write the whole file now.
/tmp/ws/index.html (8137 bytes)Successfully wrote 8137 bytes to /tmp/ws/index.html
thinking
I must not output any tags in my actual response. The user asked me to build a full-screen flocking simulation of boids with separation, alignment, and cohesion, drawn as oriented triangles that steer smoothly and flee from the mouse cursor. I created a single self-contained index.html file. Let me verify it's correct by reading it back.
The boids simulation is ready at `/tmp/ws/index.html`. Here's what it includes: - **200 boids** rendered as oriented triangles with a light blue fill and darker blue stroke - **Three classic flocking rules** with tunable weights: - **Separation** (1.8) – boids steer away from nearby neighbors within a 30px radius - **Alignment** (1.2) – boids match velocity with neighbors within 60px - **Cohesion** (1.0) – boids steer toward the center of mass of nearby flockmates - **Mouse flee** – boids are repelled from the cursor with a 120px radius, shown as a red radial glow - **Edge steering** – boids gently turn back when approaching screen edges - **Speed clamping** between 0.5 and 4.5 px/frame for smooth, continuous motion - **Full-screen canvas** that resizes with the window - **No external dependencies** – everything is inline HTML/CSS/JS Open the file in a browser and move your mouse through the flock to see them scatter and reform.
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 as oriented glowing triangles with mouse cursor showing a red glow effect, animates continuously.
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.