Compare all models on this prompt →
Boids flocking · grok-4.20
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.
⛨ sandboxed Open in new tab ↗
transcript · 8 messages
user
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.
assistant
thinking
The task is: "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."
First, the task is to create a single self-contained index.html file with HTML, CSS, and JS for a full-screen Boids simulation.
Key requirements:
- Full-screen: Canvas should cover the entire viewport.
- Boids as oriented triangles that steer smoothly.
- Using separation, alignment, cohesion.
- Flee from mouse cursor.
- No external resources.
I need to implement Craig Reynolds' Boids rules.
Boid class:
- Position (x, y)
- Velocity (vx, vy)
- Acceleration (ax, ay)
- Methods: update, render (draw triangle), apply force, etc.
Rules:
- Separation 1/r^2 force
- Alignment: average velocity
- Cohesion: average position
- Flee: stronger force away from mouse when close.
- Wrap around edges for infinite space.
- Use requestAnimationFrame for loop.
- Mouse position update on mousemove.
- Draw with rotation based on velocity angle.
Triangle: equilateral-ish pointing forward.
- Background: black, clear with alpha for trails? But for crisp, full clear.
I'll go with full clear for performance.
Number of boids: 100 for balance.
Confidence: This is a standard implementation, so high confidence in concept, but code details might need tuning 70.
Now, to build the file, I'll use the write tool to create index.html with the complete code. But since the code is long, I'll compose it in reasoning and write it.
The response should be the final answer as the content of index.html, but no, the task is to create the file, so use tool to write it, then perhaps confirm.
The human says "Create a full-screen flocking simulation..." and then "--" then the task.
I need to produce the index.html as the answer.
But the format is to report the answer with confidence.
The final answer is the HTML code.
But it's a 1000+ char file, so perhaps the answer is the file content.
Let's write the code in my mind.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Boids Simulation</title>
<style>
body { margin:0; overflow:hidden; background:#000 }
canvas { display:block }
#ui { position:absolute; top:10px; left:10px; color:white; font-family:sans-serif; background:rgba(0,0,0,0.5); padding:10px; border-radius:5px; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
<h2>Boids</h2>
<p>Count: <span id="count">100</span> | FPS: <span id="fps">0</span></p>
</div>
<script>
// JS code here
</script>
</body>
</html>
Then JS:
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let countEl = document.getElementById('count');
let fpsEl = document.getElementById('fps');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
window.addEventListener('resize', () => {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
});
class Vector {
constructor(x, y) {
this.x = x || 0;
this.y = y || 0;
}
add(v) {
this.x += v.x;
this.y += v.y;
return this;
}
sub(v) {
this.x -= v.x;
this.y -= v.y;
return this;
}
mult(s) {
this.x *= s;
this.y *= s;
return this;
}
div(s) {
this.x /= s;
this.→ bash
{"command":"ls -la"}toolResult
total 0 drwxr-sr-x. 2 node node 6 Aug 1 19:44 . drwxrwsrwx. 3 root node 16 Aug 1 19:44 ..
assistant
thinking
The task is to create a full-screen flocking simulation of boids using separation, alignment, and cohesion. They should be drawn as oriented triangles that steer smoothly and flee from the mouse curso...The task is to 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. All in one self-contained index.html file with CSS and JS inline.
I need to implement Craig Reynolds' Boids algorithm.
Key components:
- A canvas that takes full screen.
- Multiple boids (say 100-200).
- Each boid has position, velocity, acceleration.
- Behaviors:
- Separation: avoid crowding neighbors.
- Alignment: steer towards average heading of neighbors.
- Cohesion: steer towards average position of neighbors.
- Additional: Flee from mouse cursor (treat mouse as a predator).
- Boids drawn as oriented triangles pointing in velocity direction.
- Smooth steering, so use forces with limits.
- Wrap around edges or bounce? Wrapping is common for flocking.
- Full screen, responsive to resize.
- Maybe controls for parameters like number of boids, force strengths, etc., but keep it simple since it's a simulation, dark background, colorful boids or white/bright.
Structure of index.html:
- <!DOCTYPE html>
- <html>
- <head> with title, style tag </head>
- <body> with canvas, maybe some UI overlays, script tag </body>
- </html>
In the script, implement the Boid class and the simulation loop using requestAnimationFrame.
Define constants for:
- NUM_BOIDS = 150
- MAX_SPEED, MAX_FORCE
- NE IGHBOR_RADIUS for separation, alignment, cohesion (maybe different radii)
- Mouse as a point with radius for repulsion.
Boid class with:
- pos: {x,y}
- vel: {x,y}
- acc: {x,y}
- angle for drawing, but can compute from velocity.
Methods:
- update()
- applyForce(f)
- flock(boids, mouse)
- In flock: compute sep, ali, coh forces, add them weighted.
- boundaries() - maybe wrap or avoid edges.
- draw(ctx)
For separation: steer away from close boids.
Alignment: average velocity of neighbors.
Cohesion: average position, seek towards it.
Flee from mouse: if close to mouse, strong repulsion.
To make it flee smoothly.
Triangles: small arrow-like triangles.
Use ctx.save(), translate, rotate, path for triangle.
Full screen: canvas width/height = window.innerWidth/Height, listen to resize.→ write
index.html (19993 bytes)toolResult
Successfully wrote 19993 bytes to index.html
assistant
thinking
The task is complete. I have created a full-screen flocking simulation of boids in a single self-contained index.html file. It includes: The task is to 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.
→ edit
{"path":"index.html","edits":[{"oldText":"@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');\n ","ntoolResult
Successfully replaced 2 block(s) in index.html.
assistant
thinking
The task is complete: a full-screen flocking simulation of boids is in index.html. It uses separation, alignment, and cohesion. Boids are drawn as oriented triangles that steer smoothly. They flee fro...
The file **index.html** has been created with a complete, self-contained boids flocking simulation (separation/alignment/cohesion rules + smooth steering + mouse repulsion). Open it in a browser to run. All code, styles, and assets are inline. Enjoy the flock!
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
modelgrok-4.20
vendorxAI · Grok
harnesspi-agent
generated2026-08-01
EVALUATION
★★★★★ 4/5 working
Boids flock in clusters with triangle shapes, flee mouse cursor on click/drag/wheel; sliders adjust params; keyboard has no effect.
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.
idle motion0.7%
on click10.4%
on drag14.7%
on wheel10.3%
on enter + space0.9%
on arrow keys0.8%
on w/a/s/d0.0%
frame spread22.1 / 255
console errors0
js errors none
METRICS
runtime85.7s
tokens in13k
tokens out12k
cached2.6k
cost / run$0.0463