Boids flocking · deepseek-v4-flash

The user wants me to build a boids flocking simulation as a single HTML file. Let me think through the requirements:

1. 150 boids drawn as oriented triangles
2. Separation, alignment, cohesion
3. Bounded speed and smooth steering
4. Screen edge wrapping
5. Cursor influence - boids steer away from pointer within a radius
6. Pause/Resume and Reset controls
7. Canvas fits viewport, responsive

Let me write this out carefully.

Key algorithm details:
- Each boid has position (x, y) and velocity (vx, vy)
- Three forces: separation (steer away from nearby boids), alignment (match velocity of nearby boids), cohesion (steer toward center of mass of nearby boids)
- Perception radius for neighbors
- Max speed and max force for steering
- Triangles drawn rotated to face velocity direction

Let me code this up.

For the triangle drawing: use canvas translate and rotate to draw a triangle pointing in the direction of velocity.

For wrapping: if boid goes off one edge, appear on the opposite side.

For cursor interaction: track mouse position, and for any boid within the influence radius, apply a repulsion force.

Let me write the complete HTML file now.

I'll structure it as:
- HTML with canvas and controls
- CSS for full-screen layout
- JS with Boid class and simulation loop

Let me think about the boid rendering:
- A triangle with tip pointing forward (direction of velocity)
- Something like: tip at (0, -size), bottom-left at (-size/2, size/2), bottom-right at (size/2, size/2)
- Then rotate by the angle of velocity

For the flocking rules:
1. Separation: for each nearby boid, steer away by a force inversely proportional to distance
2. Alignment: average velocities of nearby boids, steer toward that average
3. Cohesion: average positions of nearby boids, steer toward that center

Each force is scaled and limited.

Let me also add some random coloring or keep them all one color? I'll keep them one color for simplicity - maybe white with a subtle outline, or a nice color.

Let me write it all now.

Actually, let me think about what makes this look good:
- Dark background
- Boids in a light/colorful color
- Smooth animation
- Responsive canvas

Here's my plan:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* full screen, no margin, controls overlay */
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">
  <button id="pauseBtn">Pause</button>
  <button id="resetBtn">Reset</button>
</div>
<script>
// Boid class and simulation
</script>
</body>
</html>
```

Let me write the full implementation now.

For the boid class/object:

```javascript
class Boid {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    const angle = Math.random() * 2 * Math.PI;
    const speed = 2 + Math.random() * 2;
    this.vx = Math.cos(angle) * speed;
    this.vy = Math.sin(angle) * speed;
  }
  
  // Update with forces
  update(boids, mouseX, mouseY, mouseRadius) {
    // Calculate flocking forces
    const separation = this.separate(boids);
    const alignment = this.align(boids);
    const cohesion = this.cohere(boids);
    
    // Apply forces
    this.ax = separation.x + alignment.x + cohesion.x;
    this.ay = separation.y + alignment.y + cohesion.y;
    
    // Mouse avoidance
    if (mouseX !== null) {
      const dx = this.x - mouseX;
      const dy = this.y - mouseY;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < mouseRadius && dist > 0) {
        const force = (mouseRadius - dist) / mouseRadius;
        this.ax += (dx / dist) * force * 2;
        this.ay += (dy / dist) * force * 2;
      }
    }
    
    // Update velocity
    this.vx += this.ax;
    this.vy += this.ay;
    
    // Limit speed
    const speed = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
    if (speed > maxSpeed) {
      this.vx = (this.vx / speed) * maxSpeed;
      this.vy = (this.vy / speed) * maxSpeed;
    }
    
    // Update position
    this.x += this.vx;
    this.y += this.vy;
    
    // Wrap around edges
    if (this.x < 0) this.x += canvas.width;
    if (this.x > canvas.width) this.x -= canvas.width;
    if (this.y < 0) this.y += canvas.height;
    if (this.y > canvas.height) this.y -= canvas.height;
  }
}
```

Let me think about the perception radius and force parameters:

- perceptionRadius: 50-100 pixels
- separationRadius: 25 pixels (smaller for separation)
- maxSpeed: 4-5
- maxForce: 0.1-0.2 (for smooth steering)
- separation weight: 1.5
- alignment weight: 1.0
- cohesion weight: 1.0
- mouse influence radius: 100-150 pixels
- mouse repulsion force: 2-3

Let me write the full file now. I'll be careful about the implementation.

Actually, I want to make sure the triangles look good. Let me think about the triangle shape:
- Size: about 8-10 pixels long, 5-6 pixels wide at base
- Tip at (0, -size) in local space, base at (-width/2, size/2) and (width/2, size/2)

The rotation should be based on the velocity angle.

Let me also think about performance with 150 boids - that's O(n²) for neighbor calculations but with 150 it should be fine.

Let me write the code now.

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

const NUM_BOIDS = 150;
const PERCEPTION_RADIUS = 60;
const SEPARATION_RADIUS = 25;
const MAX_SPEED = 4;
const MAX_FORCE = 0.15;
const SEPARATION_WEIGHT = 1.5;
const ALIGNMENT_WEIGHT = 1.0;
const COHESION_WEIGHT = 1.0;
const MOUSE_RADIUS = 120;
const MOUSE_FORCE = 2.5;
const BOID_SIZE = 10;

let paused = false;
let mouseX = null, mouseY = null;

class Boid {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    const angle = Math.random() * 2 * Math.PI;
    const speed = 2 + Math.random() * 2;
    this.vx = Math.cos(angle) * speed;
    this.vy = Math.sin(angle) * speed;
  }
  
  update(boids) {
    if (paused) return;
    
    let sepX = 0, sepY = 0;
    let aliX = 0, aliY = 0;
    let cohX = 0, cohY = 0;
    let neighbors = 0;
    
    for (const other of boids) {
      if (other === this) continue;
      const dx = other.x - this.x;
      const dy = other.y - this.y;
      // Handle wrapping distance
      let wx = dx;
      let wy = dy;
      if (wx > canvas.width / 2) wx -= canvas.width;
      if (wx < -canvas.width / 2) wx += canvas.width;
      if (wy > canvas.height / 2) wy -= canvas.height;
      if (wy < -canvas.height / 2) wy += canvas.height;
      
      const dist = Math.sqrt(wx*wx + wy*wy);
      
      if (dist < PERCEPTION_RADIUS && dist > 0) {
        // Separation
        if (dist < SEPARATION_RADIUS) {
          const force = (SEPARATION_RADIUS - dist) / SEPARATION_RADIUS;
          sepX -= (wx / dist) * force;
          sepY -= (wy / dist) * force;
        }
        
        // Alignment
        aliX += other.vx;
        aliY += other.vy;
        
        // Cohesion
        cohX += wx;
        cohY += wy;
        
        neighbors++;
      }
    }
    
    if (neighbors > 0) {
      // Separation
      const sepMag = Math.sqrt(sepX*sepX + sepY*sepY);
      if (sepMag > 0) {
        sepX = (sepX / sepMag) * MAX_SPEED;
        sepY = (sepY / sepMag) * MAX_SPEED;
      }
      sepX -= this.vx;
      sepY -= this.vy;
      const sepLimit = Math.sqrt(sepX*sepX + sepY*sepY);
      if (sepLimit > MAX_FORCE) {
        sepX = (sepX / sepLimit) * MAX_FORCE;
        sepY = (sepY / sepLimit) * MAX_FORCE;
      }
      
      // Alignment
      aliX /= neighbors;
      aliY /= neighbors;
      const aliMag = Math.sqrt(aliX*aliX + aliY*aliY);
      if (aliMag > 0) {
        aliX = (aliX / aliMag) * MAX_SPEED;
        aliY = (aliY / aliMag) * MAX_SPEED;
      }
      aliX -= this.vx;
      aliY -= this.vy;
      const aliLimit = Math.sqrt(aliX*aliX + aliY*aliY);
      if (aliLimit > MAX_FORCE) {
        aliX = (aliX / aliLimit) * MAX_FORCE;
        aliY = (aliY / aliLimit) * MAX_FORCE;
      }
      
      // Cohesion
      cohX /= neighbors;
      cohY /= neighbors;
      const cohMag = Math.sqrt(cohX*cohX + cohY*cohY);
      if (cohMag > 0) {
        cohX = (cohX / cohMag) * MAX_SPEED;
        cohY = (cohY / cohMag) * MAX_SPEED;
      }
      cohX -= this.vx;
      cohY -= this.vy;
      const cohLimit = Math.sqrt(cohX*cohX + cohY*cohY);
      if (cohLimit > MAX_FORCE) {
        cohX = (cohX / cohLimit) * MAX_FORCE;
        cohY = (cohY / cohLimit) * MAX_FORCE;
      }
    }
    
    let ax = sepX * SEPARATION_WEIGHT + aliX * ALIGNMENT_WEIGHT + cohX * COHESION_WEIGHT;
    let ay = sepY * SEPARATION_WEIGHT + aliY * ALIGNMENT_WEIGHT + cohY * COHESION_WEIGHT;
    
    // Mouse avoidance
    if (mouseX !== null) {
      const dx = this.x - mouseX;
      const dy = this.y - mouseY;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < MOUSE_RADIUS && dist > 0) {
        const force = (MOUSE_RADIUS - dist) / MOUSE_RADIUS;
        ax += (dx / dist) * force * MOUSE_FORCE;
        ay += (dy / dist) * force * MOUSE_FORCE;
      }
    }
    
    this.vx += ax;
    this.vy += ay;
    
    // Limit speed
    const speed = Math.sqrt(this.vx*this.vx + this.vy*this.vy);
    if (speed > MAX_SPEED) {
      this.vx = (this.vx / speed) * MAX_SPEED;
      this.vy = (this.vy / speed) * MAX_SPEED;
    }
    if (speed < 1) {
      this.vx = (this.vx / speed) * 1;
      this.vy = (this.vy / speed) * 1;
    }
    
    // Update position
    this.x += this.vx;
    this.y += this.vy;
    
    // Wrap
    if (this.x < 0) this.x += canvas.width;
    if (this.x > canvas.width) this.x -= canvas.width;
    if (this.y < 0) this.y += canvas.height;
    if (this.y > canvas.height) this.y -= canvas.height;
  }
  
  draw() {
    const angle = Math.atan2(this.vy, this.vx);
    const size = BOID_SIZE;
    
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(angle);
    
    ctx.beginPath();
    ctx.moveTo(size, 0);
    ctx.lineTo(-size/2, -size/3);
    ctx.lineTo(-size/2, size/3);
    ctx.closePath();
    
    ctx.fillStyle = '#88ccff';
    ctx.fill();
    ctx.strokeStyle = '#5599dd';
    ctx.lineWidth = 1;
    ctx.stroke();
    
    ctx.restore();
  }
}

let boids = [];

function init() {
  boids = [];
  for (let i = 0; i < NUM_BOIDS; i++) {
    boids.push(new Boid());
  }
}

function animate() {
  ctx.fillStyle = '#1a1a2e';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  for (const boid of boids) {
    boid.update(boids);
    boid.draw();
  }
  
  requestAnimationFrame(animate);
}

// Mouse tracking
canvas.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});
canvas.addEventListener('mouseleave', () => {
  mouseX = null;
  mouseY = null;
});

// Touch support for mobile
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  mouseX = touch.clientX;
  mouseY = touch.clientY;
});
canvas.addEventListener('touchend', () => {
  mouseX = null;
  mouseY = null;
});
canvas.addEventListener('touchcancel', () => {
  mouseX = null;
  mouseY = null;
});

// Controls
document.getElementById('pauseBtn').addEventListener('click', () => {
  paused = !paused;
  document.getElementById('pauseBtn').textContent = paused ? 'Resume' : 'Pause';
});
document.getElementById('resetBtn').addEventListener('click', () => {
  init();
});

init();
animate();
```

This looks good. Let me also think about a minimum speed so they don't stop completely.

Actually, let me think about the minimum speed. If speed < 1, I set it to 1. That should work.

Let me also make sure the triangle looks right. I want the tip pointing in the direction of travel. Since angle = atan2(vy, vx), and I rotate by that angle, then drawing the tip at (size, 0) means it points in the direction of motion. Good.

Now let me also think about wrapping properly for the neighbor distance calculation. I need to use the wrapped distance.

Let me write the complete file.

One more thing - I should handle the case where the canvas is resized but boid positions might be outside the new bounds. Actually with wrapping this should be fine as they'll wrap back in.

Let me finalize and write the file.

I also want nice styling for the controls - an overlay at the bottom or top of the screen.

Let me also think about touch interaction - the user mentioned "cursor-influence radius" and "pointer actions" so I should handle both mouse and touch.

OK let me write the complete file now.

Actually, I realize I should think about one more thing: the force calculations. The standard boids algorithm uses "steering force = desired - velocity". For separation, the desired direction is away from neighbors. For alignment, the desired velocity is the average velocity of neighbors. For cohesion, the desired direction is toward the center of mass.

Let me make sure my implementation follows this pattern correctly.

For separation:
- Calculate a repulsion vector (pointing away from nearby boids, weighted by proximity)
- If non-zero, normalize to MAX_SPEED (that's the desired velocity)
- Steering = desired - current velocity
- Limit steering to MAX_FORCE

For alignment:
- Average velocity of neighbors
- Normalize to MAX_SPEED (desired velocity)
- Steering = desired - current velocity
- Limit to MAX_FORCE

For cohesion:
- Average position of neighbors (center of mass)
- Calculate displacement from current position to that center
- Normalize to MAX_SPEED (desired velocity)
- Steering = desired - current velocity
- Limit to MAX_FORCE

My code above does this. Let me double check...

For separation: sepX, sepY is the repulsion vector. I normalize it to MAX_SPEED to get desired, then subtract velocity, then limit. ✓
For alignment: aliX, aliY is the average velocity. I normalize to MAX_SPEED, subtract velocity, limit. ✓
For cohesion: cohX, cohY is the average displacement to center. I normalize to MAX_SPEED, subtract velocity, limit. ✓

Looks correct.

Now about the minimum speed - actually, if a boid's speed goes to 0, then angle is undefined. So I need to handle that. Let me add a minimum speed check.

Actually, `atan2(0, 0)` returns 0, so the triangle would just point right. That's probably fine visually. But they shouldn't really stop moving since we have the forces. Let me add a minimum speed check just in case.

OK let me write the final file now.

Let me now run the browser to check the initial output and console.

Can't see images, but the DOM is showing "Pause" and "Reset" buttons and "150 boids". The console only shows a sandbox warning (expected, no actual issue). Let me try to interact with the simulation and check the console.

Let me take a screenshot to see the visual output.

The model doesn't support images. Let me try to interact with the simulation through clicking on buttons and inspecting the DOM/console.

Let me check if the simulation is running by clicking around and interacting.

The click at (500, 755) probably didn't hit the Pause button. Let me try clicking at coordinates where the Pause button might be. The controls are positioned at bottom: 24px, center. With a viewport of 1200x800, the controls should be around y=776 (800-24). Let me try clicking at the approximate location.

Actually, the buttons have pointer-events: auto and the container has pointer-events: none. Let me try clicking at various positions to find the buttons.

Let me try the center of the bottom area.

The Pause button was clicked successfully - it now shows "▶ Resume" which means the simulation is paused. Good, pause/resume works.

Let me now try moving the mouse around to see if mouse interaction works (console will show if there are errors).

Let me also check the Reset button.

Reset worked - it set the pause button back to "⏸ Pause" and reset the boids. The simulation is now unpaused and running again.

Let me try the mouse interaction by moving the pointer.

No errors in console, so the mouse interaction code is running fine. Let me also test the pause/resume cycle again, and then test that after unpausing, the simulation continues.

Let me also do a quick check - are there any JS errors that might be happening? The console only shows the sandbox warning, so the JS is running fine.

Let me now do a final check: Pause again and then verify the DOM shows the right state.

Paused again. Let me resume once more to make sure the cycle is clean.

Everything looks good. Let me review the state of the code to make sure everything is correct.

The file is written. Let me read it back to verify.

The file is 329 lines, well-formed. Let me summarize what I've verified and what remains.