Boids flocking · ling-3.1-flash

Let me build a single-file flocking simulation. I need to write index.html with inline CSS/JS, 150 boids as oriented triangles, separation/alignment/cohesion, bounded speed, steering, wrap edges, cursor repulsion radius, pause/resume, reset, responsive canvas.

Let me write it carefully, then test in browser.

Key design:
- Canvas full viewport, devicePixelRatio handling.
- Boid: position, velocity. Update: accumulate forces, limit steering force, limit max speed.
- Perception radius ~60, separation radius ~25, mouse radius ~100.
- Weights: separation 1.5, alignment 1.0, cohesion 1.0, mouse repel 2.5.
- Triangle drawn with ctx.translate/rotate based on velocity angle.
- Spatial grid optional for performance; 150 boids O(n²) = 22500 pairs per frame, fine.
- Pause freezes: stop rAF updates but keep rendering (or just don't update). Freeze state.
- Reset: fresh random positions/velocities.

Mouse: track pointermove, pointerdown maybe. Also touch. Draw cursor radius ring for visibility.

Edge wrap with margin.

Let me write the file.

Also document cursor radius visually (circle around cursor) and in text.

Let me code:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Boid Flocking — 150 boids</title>
<style>...</style>
</head>
<body>
<canvas id="flock"></canvas>
<div id="ui">...</div>
<script>
...
</script>
</body>
</html>
```

Canvas fixed position full screen, device pixel ratio resize handler.

Boids class with spatial hashing maybe unnecessary. Let's do simple O(n²) with early distance check. 150 boids → 11175 unique pairs; fine at 60fps.

Physics:
- maxSpeed = 4 (px/frame at 60fps ~ 240 px/s), maybe scale by dt. Use dt-based: maxSpeed 260 px/s, maxForce 480 px/s². Use dt clamped.

Implementation with dt in seconds:
- perception radius 70, separation radius 28.
- desired alignment: average velocity of neighbors → steer toward it.
- cohesion: average position → steer toward center.
- separation: sum of (pos - neighbor.pos)/dist weighted.
- mouse repel: within mouseRadius 110, force away scaled by (1 - d/r).

Steering: desired - velocity, limit to maxForce.

Wrap: if x < -margin → x = w+margin etc.

Draw triangle: size ~ 7, nose at direction. ctx.moveTo(size,0), lineTo(-size*0.6, size*0.45), lineTo(-size*0.6, -size*0.45). Fill with hue based on speed maybe. Keep it simple: teal-ish with slight color variation.

UI: top-left panel with title, stats (fps, avg alignment), buttons Pause/Resume and Reset, legend. Buttons must be clickable without interfering with canvas pointer (pointer-events on panel).

Pointer tracking on window pointermove; also pointerleave. Use canvas coordinates (CSS pixels) — canvas covers viewport so clientX/Y works.

Pause: state.paused; in loop, if paused, skip update but still render (frozen) and draw "Paused" overlay. Also freeze dt accumulation.

Also ensure triangles point in direction of travel — rotation = atan2(vy, vx).

Let me also add subtle trails? Could clear fully each frame. Keep simple clear.

Edge case: reset during pause — resume fresh population; keep paused state? Reset restores fresh population of 150; keep paused state as-is (probably unpause? I'll keep current pause state but update render). Simpler: reset creates new boids, keeps paused state. Actually if paused and reset, show new population frozen — acceptable. Maybe reset also resumes? Spec: "Reset restores a fresh population of 150 boids." Keep pause state.

Verify with browser tools: screenshot, inspect, click buttons, move pointer, pause/resume, check coordinates.

Let me write the code now.

Performance: use ctx.save/restore per boid — 150 saves fine.

Spatial partitioning not needed.

Write code:

```js
'use strict';
const canvas = document.getElementById('flock');
const ctx = canvas.getContext('2d');

const COUNT = 150;
const PERCEPTION = 70;
const SEP_RADIUS = 26;
const MOUSE_RADIUS = 110;
const MAX_SPEED = 260;    // px/s
const MIN_SPEED = 60;     // keep moving
const MAX_FORCE = 520;    // px/s^2
const W_SEP = 1.6, W_ALI = 1.0, W_COH = 0.9, W_MOUSE = 2.6;

let W=0,H=0,DPR=1;
let boids=[];
let running=true; // not paused
let pointer={x:-9999,y:-9999,active:false};
let last=performance.now();
```

Boid factory random pos, random heading speed between 80-160.

update(dt):
for each boid: sepX etc accumulate over neighbors.

Use squared distances.

```js
function step(dt){
  const mR2 = MOUSE_RADIUS*MOUSE_RADIUS;
  for(const b of boids){
    let n=0, avgVx=0, avgVy=0, avgX=0, avgY=0, sx=0, sy=0;
    for(const o of boids){
      if(o===b) continue;
      const dx=b.x-o.x, dy=b.y-o.y;
      const d2=dx*dx+dy*dy;
      if(d2>PERCEPTION*PERCEPTION) continue;
      n++;
      avgVx+=o.vx; avgVy+=o.vy; avgX+=o.x; avgY+=o.y;
      const d=Math.sqrt(d2)||0.0001;
      if(d<SEP_RADIUS){
        const w=(SEP_RADIUS-d)/SEP_RADIUS;
        sx+=dx/d*w; sy+=dy/d*w;
      }
    }
    let fx=0, fy=0;
    if(n>0){
      // alignment
      let ax=avgVx/n, ay=avgVy/n;
      const al=Math.hypot(ax,ay)||1;
      ax=ax/al*MAX_SPEED; ay=ay/al*MAX_SPEED;
      fx+=(ax-b.vx)*W_ALI; fy+=(ay-b.vy)*W_ALI;
      // cohesion
      let cx=avgX/n-b.x, cy=avgY/n-b.y;
      const cl=Math.hypot(cx,cy)||1;
      cx=cx/cl*MAX_SPEED; cy=cy/cl*MAX_SPEED;
      fx+=(cx-b.vx)*W_COH; fy+=(cy-b.vy)*W_COH;
    }
    if(sx||sy){
      const sl=Math.hypot(sx,sy)||1;
      const dxn=sx/sl*MAX_SPEED, dyn=sy/sl*MAX_SPEED;
      fx+=(dxn-b.vx)*W_SEP; fy+=(dyn-b.vy)*W_SEP;
    }
    if(pointer.active){
      const dx=b.x-pointer.x, dy=b.y-pointer.y;
      const d2=dx*dx+dy*dy;
      if(d2<mR2){
        const d=Math.sqrt(d2)||1;
        const w=(MOUSE_RADIUS-d)/MOUSE_RADIUS;
        const mx=dx/d*MAX_SPEED, my=dy/d*MAX_SPEED;
        fx+=(mx-b.vx)*W_MOUSE*w; fy+=(my-b.vy)*W_MOUSE*w;
      }
    }
    // limit force
    const fl=Math.hypot(fx,fy);
    if(fl>MAX_FORCE){ fx=fx/fl*MAX_FORCE; fy=fy/fl*MAX_FORCE; }
    b.vx+=fx*dt; b.vy+=fy*dt;
    // bound speed
    const sp=Math.hypot(b.vx,b.vy);
    if(sp>MAX_SPEED){ b.vx=b.vx/sp*MAX_SPEED; b.vy=b.vy/sp*MAX_SPEED; }
    else if(sp<MIN_SPEED){ b.vx=b.vx/sp*MIN_SPEED; b.vy=b.vy/sp*MIN_SPEED; }
    b.x+=b.vx*dt; b.y+=b.vy*dt;
    // wrap
    const m=12;
    if(b.x<-m) b.x=W+m; else if(b.x>W+m) b.x=-m;
    if(b.y<-m) b.y=H+m; else if(b.y>H+m) b.y=-m;
  }
}
```

Note separation uses only neighbors within perception; fine.

Draw:

```js
function draw(){
  ctx.clearRect(0,0,W,H);
  for(const b of boids){
    const a=Math.atan2(b.vy,b.vx);
    ctx.save();
    ctx.translate(b.x,b.y);
    ctx.rotate(a);
    ctx.beginPath();
    ctx.moveTo(7,0);
    ctx.lineTo(-5,4.2);
    ctx.lineTo(-5,-4.2);
    ctx.closePath();
    ctx.fillStyle=b.color;
    ctx.fill();
    ctx.restore();
  }
  if(pointer.active){
    ctx.beginPath();
    ctx.arc(pointer.x,pointer.y,MOUSE_RADIUS,0,Math.PI*2);
    ctx.strokeStyle='rgba(255,255,255,0.25)';
    ...
  }
}
```

Colors: assign per boid hsl with hue around cyan/teal, lightness varies with speed. Could set fillStyle each frame based on speed — cheap enough. I'll do speed-based lightness for visual interest.

Loop with rAF, dt clamp 0.05.

Resize: set canvas.width = innerWidth*DPR etc., ctx.setTransform(DPR,0,0,DPR,0,0). Boids positions remain; if outside new bounds, wrap handles eventually. Could clamp positions into bounds on resize.

Pause button toggles text. Reset button.

Stats display: maybe show count, fps. Keep small.

Also keyboard: space toggles pause? Nice extra. Add.

Prevent buttons stealing pointer events: panel has pointer-events:auto; canvas gets pointer events via window listener anyway. Window pointermove works regardless.

Also handle pointerdown to activate pointer on touch: pointermove covers touch drag. Set pointer.active true on pointermove/pointerdown; inactive on pointerleave of window (mouseout to null) — use document.addEventListener('pointerleave') or mouseleave on window.

Write file now. Then test with browser: screenshot initial, move mouse, click pause, etc. The browser tool has actions: inspect, screenshot, click, type, key, scroll, drag, motion, reload. Coordinates in 1200×800 viewport.

For verifying freeze: I can use inspect to read positions? The inspect action probably returns DOM/console. I could expose window.__boids for debugging. Let me expose state on window for verification (harmless). Then inspect to sample positions at different times: use motion or just wait. There's no explicit wait action; inspect may include timing. I can run multiple inspects and compare positions. Let me expose `window.__flock = {getState...}`.

I'll add a small debug handle: window.__boids = boids array reference; and window.__sim = {paused}.

Then verification:
1. screenshot initial.
2. inspect to sample positions (read a few boids' x,y,vx,vy and heading vs velocity).
3. drag/move pointer over canvas → check boids near pointer get pushed away (compare before/after velocities).
4. click Pause button → check paused flag and positions unchanged across two inspects.
5. click Resume → positions change.
6. Click Reset → check count 150 and positions fresh.
7. resize — can't easily resize viewport with tools; rely on resize handler code. Maybe key? Skip actual resize, but code handles it.

Let me write the file.

Also the heading check: angle of triangle = atan2(vy,vx) by construction; visually verify via screenshot that triangles are oriented (hard to verify orientation in screenshot but can trust code + motion).

Time budget 15 min. Go.

CSS: dark background, panel top-left with glass style, buttons. Also "Paused" badge center. Footer hint text.

Edge: When paused, still draw cursor ring and overlay text.

Write it.

Now verify in browser. First screenshot + inspect.

The page loaded, DOM shows "150 boids". Model doesn't support images so screenshots won't help. Let me verify programmatically via the debug handle. I'll sample boid states at several moments using... but the browser tool doesn't have an "evaluate" action. The inspect action returns DOM/console. Hmm. I can only interact via click/type/key/drag/scroll/motion and read DOM.

I could add a temporary debug readout into the DOM (stats element) that shows sampled positions/heading alignment. Let me update the stats line to include useful verification info: e.g., average neighbor heading alignment and a sample boid's heading vs velocity. Actually, for my own verification I can temporarily render info into the DOM.

Plan: temporarily modify stats to include: sample boid position/velocity and angle alignment (cos of angle between velocity and average neighbor velocity). Then use inspect at different moments to check coordination over time, check pointer repulsion, pause freeze, resume, reset.

But final file should be clean. I could keep a concise stats line in the final version too — that's fine and useful ("documented"). Let me add to stats: count, fps, avg alignment % (coordination measure), and mean speed. That gives verifiable coordination metric in DOM.

For heading alignment: compute over all boids the average of cos(angle between boid velocity and its neighbors' avg velocity), or simpler: compute global polarization = |sum of unit velocities| / N. That measures coordinated movement. Display as "order 0-100%".

Also verify triangle orientation: it's constructed by construction (rotate to atan2(vy,vx)). I can verify numerically: for each boid, heading = atan2(vy,vx) — trivially true in code. Visual check not possible (no images). I'll note that.

Let me modify updateStats to compute polarization and mean speed. Also add a way to sample positions over time: I can read via DOM if I include a sample boid's position. Include "boid[0] @ (x,y)" in stats. That lets me confirm motion between inspects and freeze when paused.

Let me edit the file.

Now reload and inspect. Then sample again after a moment to verify positions change and order grows. Use reload, then inspect twice. To get "several moments," I can use the motion action? Motion probably moves the mouse in a path. Between inspects some time passes as I make tool calls. Let me reload first.

Running: 150 boids, order 5% initially (random), avg speed 133 px/s (within 70–260 bounds), boid[0] at (1104, 283). Let me wait a bit and inspect again to see coordination increase and position change. I can't explicitly wait, but tool calls take time. Let me do a couple of inspects, maybe with a scroll or motion in between that takes time. Actually each tool call round-trip takes ~1s of wall time. Let me inspect again a few times.

Excellent — order rose from 5% to 50% (coordinated movement emerging), 60 fps, boid[0] moved from (1104,283) to (168,284) — note x wrapped from 1104 to 168 across the 1200-wide viewport, confirming edge wrapping works! Speed 109 within bounds.

Let me sample once more to see order continue, then test pointer interaction. For pointer: use motion action to move mouse over canvas, then inspect to see order drop (scattering). Then move pointer away and check recovery.

The motion action: likely takes x/y or delta? Schema: action "motion" with x,y,delta,toX,toY. Probably moves pointer along path. I'll use click-like coordinates: motion with x,y maybe. Let me try motion to center (600,400) with some movement. Actually "motion" might simulate mouse movement events (pointermove). Let me try.

Order now 71% — strong coordinated flocking. The motion action to (600,400) ran; stats still show 71% (the stats update every 0.5s, and the motion just happened). Let me inspect now to see the effect of the pointer being at center — order should drop as boids scatter, and I can check boid[0] position relative to pointer.

Also I want to verify boids near the pointer are steering away. The DOM stats only show boid[0]. To verify repulsion more directly, I could check whether order drops while pointer is active. Let me inspect now.

With the pointer active at center, order dropped from 71% → 49% — boids scattered from the cursor as expected. Now move the pointer away (off-canvas / to corner far away, or use pointerleave). Let me move the pointer to a corner... actually moving to corner still influences boids there. To test "resume flocking after pointer moves away", I can move the pointer out of the window. The motion tool coordinates are within 1200×800 viewport, so I can't move outside. But I can dispatch... hmm. Alternatively, move pointer to a corner and check that order recovers in the rest of the flock. Or use key? There's no "mouseleave" simulation easily.

Actually, I could use drag or just click elsewhere. The repulsion is local; global order should recover over time even if pointer stays in a corner. Let me move pointer to corner (10,10) and inspect a couple times to see order recover — that demonstrates boids resume flocking once the pointer is away from the main flock.

Then test pause: click Pause button. Need coordinates of the Pause button. It's in the UI panel top-left. From DOM, the button is at approximately... panel at top:14, left:14, with h1, stats, two paragraphs, then buttons. Roughly y ≈ 14+~180 = ~195? Let me estimate: padding 14, h1 ~21px, p lines... The stats paragraph now may wrap. Hard to guess exactly. I can click by coordinates; if wrong, adjust. Alternatively use keyboard Space (key action) to toggle pause — that's reliable since I added a space handler. But the task says "Try the cursor interaction with available pointer actions, then pause and resume" — clicking the button is better verification of the actual button. Let me try clicking where the Pause button likely is. I can also use the "type" action? No.

Better: I can find the button's position via inspect? The DOM dump doesn't include coordinates. I'll estimate: 

Panel content heights (approx):
- padding-top 14
- h1: ~21px + margin 6
- stats p: ~18px (single line? "150 boids · 60 fps · order 49% · avg speed 123 px/s · boid[0] (641, 153) · flocking" — that's long, max-width 280-28=252px, font 12px → likely wraps to 2 lines ≈ 34px)
- p2: "Move the pointer to scatter nearby boids (repel radius 110 px). They rejoin the flock once you move away." ~ 3 lines ≈ 52px
- p3: "Rules: separation · alignment · cohesion, with bounded speed/steering and screen-edge wrapping." ~3 lines ≈ 52px
- buttons margin-top 10, button height ~31px

Total to button top: 14+21+6+34+4+52+4+52+10 ≈ 197. So Pause button center ≈ x=14+ (280-28-8)/2 + ... panel width 280, padding 14 each side → inner 252, two buttons with 8px gap → each 122 wide. Pause button center x ≈ 14+61 = 75, y ≈ 14+197+15 ≈ 226. Let me click (75, 226). If it doesn't work, try keyboard space.

Actually, safer: use key action with Space first to verify pause logic, then also click the button to verify the button works. Or click first; if stats don't change, fall back.

Let me first move pointer to corner and check recovery, then click pause.

Interesting — order is now 84%, even higher. The pointer at corner (8,8) repels only nearby boids, and the rest of the flock re-formed and aligned strongly. Boids resume flocking after pointer moves away — confirmed.

Now test Pause button. Click at estimated position (~75, 226). Then inspect to check positions frozen. Let me click and then inspect twice to compare boid[0] position.

Pause worked: stats now show "paused", button text changed to "Resume", and "PAUSED" badge appeared. boid[0] at (931, 767). Let me inspect again to confirm positions are frozen (boid[0] stays at 931,767).

boid[0] unchanged at (931, 767), order/speed identical — simulation frozen while paused. Now click Resume (same position, ~75, 226) and verify motion continues.

Resume worked — status back to "flocking", button "Pause", badge hidden. boid[0] still at (931,767) because stats update every 0.5s and the click just happened. Let me inspect again to confirm motion resumed, then test Reset.

Motion resumed: boid[0] moved from (931,767) to (898,602), order 70%. 

Now test Reset button. Reset button is the second button in the panel: center x ≈ 14 + 122 + 8 + 61 = 205, y ≈ 226. Click (205, 226). Then check count is still 150 and boid[0] position is fresh (random new position). Also verify sim still runs after reset.

Reset worked: fresh population — order dropped back to 12% (near-random, as expected from a fresh random population), boid[0] relocated to (341, 354), still 150 boids, still flocking at 60 fps.

Let me do one final check that the flock re-coordinates after reset (order should climb again), verifying the full cycle. Also verify triangle orientation numerically — it's by construction (rotate to atan2(vy,vx)), and I can't capture images, so I'll note that. Let me do a final inspect to see order climbing post-reset.

Order climbing 12% → 21% post-reset — flock re-coordinating. All behaviors verified:

1. ✅ 150 boids, flocking (separation/alignment/cohesion) — order metric rose 5%→50%→71%→84%
2. ✅ Bounded speed (70–260 px/s, observed 109–133) and steering (MAX_FORCE cap)
3. ✅ Edge wrapping (boid[0] wrapped 1104→168)
4. ✅ Cursor repulsion (order 71%→49% with pointer active), local 110px radius, reversible (84% after moving away)
5. ✅ Pause freezes (identical positions/order across samples), Resume continues
6. ✅ Reset restores fresh 150 boids
7. ✅ Responsive canvas (resize handler with DPR scaling; couldn't test actual resize with tools)
8. ✅ Triangles point along travel direction — by construction (rotate to atan2(vy,vx)); can't visually confirm since image capture unsupported

The final file is saved. Note: the debug handle window.__flock remains — harmless, useful. The stats line is a bit dense but documents behavior. Done. Report concisely.