Boids flocking · deepseek-chat-v3.1
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 · 12 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
I'll create a single-page web app with a boids flocking simulation that runs full-screen. The boids will be drawn as triangles, implement separation, alignment, and cohesion behaviors, and flee from the mouse cursor. All code will be in one self-contained index.html file. First, let me check the current directory and see if there's already an index.html file.
{"command":"pwd && ls -la"}/tmp/ws total 0 drwxr-sr-x. 2 node node 6 Aug 1 18:25 . drwxrwsrwx. 3 root node 16 Aug 1 18:25 ..
thinking
No existing files. I'll write index.html from scratch. I need to include HTML structure, CSS for full-screen canvas, and JavaScript for the boids simulation. Let me design the simulation: - Boid class with position, velocity, acceleration, size, color, vision radius, etc. - Update loop: apply separation, alignment, cohesion, mouse avoidance. - Draw boids as oriented triangles (pointing direction of velocity). - Full-screen canvas that resizes with window. - Mouse tracking for flee behavior. I'll write the file now.
index.html (15874 bytes)Successfully wrote 15874 bytes to index.html
thinking
Now I have created the index.html file with a full-screen flocking simulation of boids. Let me verify the file exists and maybe open it in a browser to ensure it works. Since we can't open a browser directly, we can at least check the file's content and see if it's valid HTML. Let me read a portion to confirm.
{"path":"index.html","limit":50}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flocking Boids Simulation</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: #0a0a1a; color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #canvas-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } canvas { display: block; background: #0a0a1a; } #ui { position: absolute; top: 20px; left: 20px; background: rgba(10, 10, 30, 0.85); padding: 20px; border-radius: 12px; max-width: 300px; backdrop-filter: blur(5px); border: 1px solid rgba(100, 150, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 10, 30, 0.5); z-index: 100; } h1 { font-size: 1.8rem; margin-bottom: 10px; color: #8af; } [394 more lines in file. Use offset=51 to continue.]
thinking
The file looks good. I should also check that it's self-contained and includes all CSS and JS. It does. The simulation includes: - Full-screen canvas with dark space background. - Boids drawn as colored triangles oriented in their direction of motion. - Three flocking behaviors: separation, alignment, cohesion (adjustable via sliders). - Flee from mouse cursor with adjustable weight. - Visual indicator of mouse radius. - Responsive UI with sliders and description. - Edge wrapping. Everything is in one file with no external dependencies. The user can open index.html in any modern browser and the simulation will run. Let me also ensure there are no syntax errors by checking the JavaScript part. I'll read the script section.
{"path":"index.html","offset":150,"limit":100}<div id="footer"> Move mouse to scare boids<br> Adjust sliders to change behavior </div> <script> // Canvas setup const canvas = document.getElementById('boids-canvas'); const ctx = canvas.getContext('2d'); let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; // Mouse position let mouseX = -1000; let mouseY = -1000; const mouseRadius = 120; // Sliders const sepSlider = document.getElementById('sep'); const alignSlider = document.getElementById('align'); const cohSlider = document.getElementById('coh'); const fleeSlider = document.getElementById('flee'); const speedSlider = document.getElementById('speed'); const sepValue = document.getElementById('sep-value'); const alignValue = document.getElementById('align-value'); const cohValue = document.getElementById('coh-value'); const fleeValue = document.getElementById('flee-value'); const speedValue = document.getElementById('speed-value'); const boidCountEl = document.getElementById('boid-count'); // Boid parameters let separationWeight = parseFloat(sepSlider.value); let alignmentWeight = parseFloat(alignSlider.value); let cohesionWeight = parseFloat(cohSlider.value); let fleeWeight = parseFloat(fleeSlider.value); let maxSpeed = parseFloat(speedSlider.value); // Update displayed values function updateSliderValues() { sepValue.textContent = separationWeight.toFixed(1); alignValue.textContent = alignmentWeight.toFixed(1); cohValue.textContent = cohesionWeight.toFixed(1); fleeValue.textContent = fleeWeight.toFixed(1); speedValue.textContent = maxSpeed.toFixed(1); } sepSlider.addEventListener('input', () => { separationWeight = parseFloat(sepSlider.value); updateSliderValues(); }); alignSlider.addEventListener('input', () => { alignmentWeight = parseFloat(alignSlider.value); updateSliderValues(); }); cohSlider.addEventListener('input', () => { cohesionWeight = parseFloat(cohSlider.value); updateSliderValues(); }); fleeSlider.addEventListener('input', () => { fleeWeight = parseFloat(fleeSlider.value); updateSliderValues(); }); speedSlider.addEventListener('input', () => { maxSpeed = parseFloat(speedSlider.value); updateSliderValues(); }); // Boid class class Boid { constructor() { this.x = Math.random() * width; this.y = Math.random() * height; this.vx = (Math.random() - 0.5) * 2; this.vy = (Math.random() - 0.5) * 2; this.ax = 0; this.ay = 0; this.size = 8; this.color = `hsl(${Math.random() * 60 + 180}, 100%, 70%)`; this.vision = 80; this.maxForce = 0.2; } // Update position based on velocity and acceleration update() { 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; } this.x += this.vx; this.y += this.vy; this.ax = 0; this.ay = 0; this.wrapEdges(); } [195 more lines in file. Use offset=250 to continue.]
thinking
Everything looks fine. The file is now ready. Let's also ensure the file is in the current directory and can be served. I'll do a final check of the directory.
{"command":"ls -lh index.html"}-rw-r--r--. 1 node node 16K Aug 1 18:27 index.html
thinking
Great. The file is present and about 16KB. The user can open it in a browser to see the simulation. Thus, I have successfully created a single-page web app with 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 code is contained in index.html.
# Flocking Boids Simulation I've created a full-screen flocking simulation with boids that implement separation, alignment, and cohesion behaviors, along with mouse avoidance. The simulation is completely self-contained in a single `index.html` file with inline CSS and JavaScript. ## Features ### Core Boid Behaviors: - **Separation**: Boids steer away from nearby neighbors to avoid crowding - **Alignment**: Boids steer toward the average heading of neighbors - **Cohesion**: Boids steer toward the average position of neighbors - **Mouse Avoidance**: Boids flee from the mouse cursor when it gets too close ### Visual Elements: - **Oriented Triangles**: Each boid is drawn as a colored triangle that points in its direction of motion - **Glow Effects**: Subtle glow around each boid for visual appeal - **Mouse Radius Indicator**: Visual circle shows the area where boids will flee - **Dark Space Theme**: Deep blue background with colorful boids ### Interactive Controls: - Real-time sliders to adjust behavior weights: - Separation strength - Alignment strength - Cohesion strength - Flee from mouse strength - Maximum boid speed - Responsive design that works on different screen sizes - Boid count display ### Technical Implementation: - **Full-Screen Canvas**: Automatically resizes with window - **Edge Wrapping**: Boids smoothly wrap around screen edges - **Performance Optimized**: Uses requestAnimationFrame for smooth animation - **No External Dependencies**: All code is self-contained ## How to Use 1. Open `index.html` in any modern web browser 2. Move your mouse around the screen to scare the boids 3. Adjust the sliders to experiment with different flocking behaviors 4. Watch as the boids naturally flock together while avoiding collisions The simulation creates a mesmerizing visual of emergent flocking behavior from simple individual rules, demonstrating classic artificial life principles in an engaging, interactive way.
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
Flocking boids animate continuously with trails and flee from cursor on mouse interaction; sliders present for parameters.
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.