Boids flocking · qwen3.8-27b
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 · 8 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
Build a single index.html containing a boids simulation. A simple canvas, a spatial grid for performance, triangles oriented in the direction of velocity, mouse avoidance, full screen, responsive, probably 60fps. Keep the code concise and high quality.
/tmp/ws/index.html (9533 bytes)Successfully wrote 9533 bytes to /tmp/ws/index.html
thinking
Simple sanity check: no external resources, file exists. Should I check the JS syntax with node? The script uses the browser API, but syntax checking is possible.
{"command":"cd /tmp/ws && node --check <(sed -n '/<script>/,/<\\/script>/p' index.html | sed '1d;$d') && ls -la index.html"}node:fs:441 return binding.readFileUtf8(path, stringToFlags(options.flag)); ^ Error: ENOENT: no such file or directory, open '/proc/31/fd/pipe:[63655037]' at Object.readFileSync (node:fs:441:20) at node:internal/main/check_syntax:36:21 { errno: -2, code: 'ENOENT', syscall: 'open', path: '/proc/31/fd/pipe:[63655037]' } Node.js v24.18.1 Command exited with code 1
thinking
The process substitution trick failed. Extracting to a temp file.
{"command":"cd /tmp/ws && sed -n '/<script>/,/<\\/script>/p' index.html | sed '1d;$d' > /tmp/check.js && node --check /tmp/check.js && echo SYNTAX_OK -rw-r--r--. 1 node node 9537 Aug 15 13:52 index.html
thinking
complete. Let me wrap it up briefly.
Done. `index.html` is written in `/tmp/ws` — a single self-contained file (CSS in `<style>`, JS in `<script>`, no external resources) with syntax verified. What it does: - **Full-screen canvas** (DPI-aware, resizes with the window) with 260 boids - **Classic three rules** — separation (inverse-distance weighted, stronger when closer), alignment (steer toward mean neighbor heading), cohesion (steer toward local center of mass), each capped by a max steering force so movement is smooth - **Oriented triangles** — each boid is a swept-back arrow drawn along its velocity vector, with hue/brightness shifting slightly with speed, plus translucent-frame motion trails - **Mouse flee** — boids within a 140px radius get a quadratic-falloff repulsion away from the cursor (with a faint red glow ring at the cursor); touch is supported too - **Performance** — spatial hash grid for O(n) neighbor lookup, all state in typed arrays - **Soft edge steering** keeps the flock on screen, with a hard wrap as a safety net Open it in a browser and move the mouse to scatter 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
EVALUATION
Boids flock and swirl continuously, avoiding a visible red glow near the cursor, matching flocking prompt 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.