Boids flocking · deepseek-r1-0528
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.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 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
We are creating a single-page web app that runs entirely in one HTML file (index.html)
The app will:
- Be full-screen (so we'll set the body and canvas to 100% width/height)
- Use a canvas for drawing
- Implement a boids simulation with three rules: separation, alignment, cohesion
- Represent each boid as an oriented triangle (so we'll draw triangles that point in the direction of velocity)
- Make the boids flee from the mouse cursor
We'll structure the index.html file to have:
- A <canvas> element that stretches to full screen
- A <script> tag containing the JavaScript for the simulation
- A <style> tag to remove default margins and set the canvas to full screen
Steps in the JavaScript:
1. Set up the canvas and context.
2. Define a Boid class with properties: position, velocity, acceleration, and methods to update and draw.
3. Implement the three rules (separation, alignment, cohesion) and an additional rule for fleeing the mouse.
4. Create an array of boids and initialize them with random positions and velocities.
5. Set up animation loop (using requestAnimationFrame).
6. Handle mouse movement to get the current mouse position.
Note: We'll use vector math for the boid behaviors. We can create a simple Vector class or use objects with x and y.
Since we are putting everything in one file, we write the entire HTML content in one go.
Let's design the Boid class:
- position: {x, y}
- velocity: {x, y} (we'll limit the magnitude to a max speed)
- acceleration: {x, y} (which we reset every frame after applying)
For the rules, we'll compute steering forces and add them to acceleration.
Important parameters:
- separationRadius, alignmentRadius, cohesionRadius (the radius for each rule)
- weights for each rule (so we can adjust influence)
Fleeing from the mouse:
- When the mouse is within a certain radius (fleeRadius), the boid will steer away.
We'll use a single global variable for the mouse position.
Steps in the animation loop:
- Clear the canvas
- For each boid:
reset acceleration to 0
apply the three rules and the mouse flee rule (if applicable)
update position and velocity (with Euler integration)
draw the boid as a triangle rotated in the direction of velocity
- Request next frame
We'll avoid using an external library and write our own vector operations as functions.
Let's write the code accordingly.
Important: The simulation must be efficient enough to run smoothly with a reasonable number of boids.
We'll start by writing the HTML structure, then the style, then the JavaScript inside the script tag.
I'll create a self-contained flocking simulation page with all code in one HTML file. The solution will implement boids with separation, alignment, and cohesion behaviors, with triangles that flee from the mouse cursor. Here's the complete `index.html` file: 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> body { margin: 0; overflow: hidden; background: linear-gradient(to bottom, #001f3f, #001523); } canvas { display: block; } .info { position: absolute; top: 10px; left: 10px; color: white; font-family: Arial, sans-serif; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; font-size: 14px; } </style> </head> <body> <canvas id="boidsCanvas"></canvas> <div class="info">Boids: <span id="count">100</span> | Mouse influence: <span id="influence">ON</span></div> <script> // Canvas setup const canvas = document.getElementById('boidsCanvas'); const ctx = canvas.getContext('2d'); const infoCount = document.getElementById('count'); const infoInfluence = document.getElementById('influence'); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // Vector math helpers class Vector { constructor(x, y) { this.x = x; this.y = y; } add(v) { return new Vector(this.x + v.x, this.y + v.y); } sub(v) { return new Vector(this.x - v.x, this.y - v.y); } mult(n) { return new Vector(this.x * n, this.y * n); } div(n) { return new Vector(this.x / n, this.y / n); } mag() { return Math.sqrt(this.x * this.x + this.y * this.y); } normalize() { const mag = this.mag(); return mag > 0 ? this.div(mag) : new Vector(0, 0); } limit(max) { const mag = this.mag(); return mag > max ? this.div(mag).mult(max) : this; } setMag(n) { return this.normalize().mult(n); } } // Boid class class Boid { constructor() { this.position = new Vector( Math.random() * canvas.width, Math.random() * canvas.height ); this.velocity = Vector.random().setMag(2 + Math.random() * 2); this.acceleration = new Vector(0, 0); this.size = 6; this.maxForce = 0.3; this.maxSpeed = 4; } static random() { const angle = Math.random() * Math.PI * 2; return new Vector(Math.cos(angle), Math.sin(angle)); } // Flocking behaviors separate(boids) { const perception = 30; let steering = new Vector(0, 0); let total = 0; for (let other of boids) { const distance = this.position.sub(other.position).mag(); if (other !== this && distance < perception) { const diff = this.position.sub(other.position); diff.div(distance * distance); // Weight by inverse square steering = steering.add(diff); total++; } } if (total > 0) { steering = steering.div(total).setMag(this.maxSpeed).sub(this.velocity); steering = steering.limit(this.maxForce * 1.2); } return steering; } align(boids) { const perception = 50; let steering = new Vector(0, 0); let total = 0; for (let other of boids) { const distance = this.position.sub(other.position).mag(); if (other !== this && distance < perception) { steering = steering.add(other.velocity); total++; } } if (total > 0) { steering = steering.div(total).setMag(this.maxSpeed); steering = steering.sub(this.velocity).limit(this.maxForce); } return steering; } cohesion(boids) { const perception = 60; let steering = new Vector(0, 0); let total = 0; for (let other of boids) { const distance = this.position.sub(other.position).mag(); if (other !== this && distance < perception) { steering = steering.add(other.position); total++; } } if (total > 0) { steering = steering.div(total); steering = steering.sub(this.position).setMag(this.maxSpeed); steering = steering.sub(this.velocity).limit(this.maxForce * 0.8); } return steering; } fleeMouse(mousePos) { if (!mousePos) return new Vector(0, 0); const distance = this.position.sub(mousePos).mag(); if (distance < 100) { let steering = this.position.sub(mousePos); steering = steering.setMag(this.maxSpeed * 2.5); steering = steering.sub(this.velocity).limit(this.maxForce * 2); return steering; } return new Vector(0, 0); } boundaries() { let force = new Vector(0, 0); const margin = 50; if (this.position.x < margin) force.x = 1; else if (this.position.x > canvas.width - margin) force.x = -1; if (this.position.y < margin) force.y = 1; else if (this.position.y > canvas.height - margin) force.y = -1; return force.setMag(0.2); } update(boids, mousePos) { const separate = this.separate(boids).mult(1.5); const align = this.align(boids).mult(1.0); const cohesion = this.cohesion(boids).mult(1.0); const flee = this.fleeMouse(mousePos).mult(3.0); const walls = this.boundaries().mult(1.0); this.acceleration = separate.add(align).add(cohesion).add(flee).add(walls); this.velocity = this.velocity.add(this.acceleration).limit(this.maxSpeed); this.position = this.position.add(this.velocity); // Wrap around edges if (this.position.x < -this.size) this.position.x = canvas.width + this.size; else if (this.position.x > canvas.width + this.size) this.position.x = -this.size; if (this.position.y < -this.size) this.position.y = canvas.height + this.size; else if (this.position.y > canvas.height + this.size) this.position.y = -this.size; } draw() { ctx.save(); ctx.translate(this.position.x, this.position.y); ctx.rotate(Math.atan2(this.velocity.y, this.velocity.x)); // Triangle body ctx.fillStyle = 'rgba(200, 240, 255, 0.85)'; ctx.strokeStyle = '#5fbfff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(this.size * 1.5, 0); ctx.lineTo(-this.size, this.size); ctx.lineTo(-this.size, -this.size); ctx.closePath(); ctx.fill(); ctx.stroke(); // Eye ctx.fillStyle = '#0a4f75'; ctx.beginPath(); ctx.arc(this.size * 0.8, 0, this.size * 0.2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } } // Simulation controller let boids = []; let mousePos = null; let influenceActive = true; const boidCount = 150; function init() { boids = []; for (let i = 0; i < boidCount; i++) { boids.push(new Boid()); } infoCount.textContent = boidCount; } function animate() { ctx.fillStyle = 'rgba(0, 16, 32, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.width); // Draw mouse influence radius if (mousePos && influenceActive) { ctx.beginPath(); ctx.arc(mousePos.x, mousePos.y, 100, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 100, 100, 0.1)'; ctx.fill(); ctx.strokeStyle = 'rgba(255, 150, 150, 0.3)'; ctx.lineWidth = 1; ctx.stroke(); } // Update and draw boids for (let boid of boids) { boid.update(boids, influenceActive ? mousePos : null); boid.draw(); } requestAnimationFrame(animate); } // Mouse interaction canvas.addEventListener('mousemove', (e) => { mousePos = new Vector(e.clientX, e.clientY); }); canvas.addEventListener('mouseleave', () => { mousePos = null; }); canvas.addEventListener('dblclick', () => { influenceActive = !influenceActive; infoInfluence.textContent = influenceActive ? 'ON' : 'OFF'; infoInfluence.style.color = influenceActive ? 'lime' : 'red'; }); // Start simulation init(); animate(); </script> </body> </html> Key features: 1. Full-screen flocking simulation with boids as oriented triangles 2. Implements all three boid algorithms: - **Separation**: Avoid crowding neighbors - **Alignment**: Steer toward average heading - **Cohesion**: Move toward average position 3. Mouse interaction: - Boids flee from cursor with visual indicator - Double-click to toggle mouse influence 4. Boundary avoidance behavior 5. Smooth movement physics using vector mathematics 6. Aesthetic design with gradient background and translucent boids 7. Performance optimized for 150 boids 8. Responsive to screen resizing 9. Informational overlay with boid count and status The simulation is entirely self-contained with no external dependencies - all CSS, JavaScript, and HTML are in one file with no network requests.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.