Boids flocking · step-3.7-flash
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 · 6 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
The user wants a single-page web app with a full-screen flocking simulation of boids. Need to be self-contained in index.html, no external resources. Let's design this with: - Canvas full screen - Boids as oriented triangles with smooth steering - Separation, alignment, cohesion rules - Flee from mouse cursor - Smooth steering with limited force/max speed - Possibly some visual flair (fading trails maybe, nice colors) I should write index.html in current directory /workspace. Let me create a robust implementation: - Parameters: perceptin radius, separation weight, alignment weight, cohesion weight, max speed, max force - Each boid: position, velocity, acceleration - Boundary wrapping or turning force to keep them on screen - Mouse: if inside canvas, add flee force inversely proportional to distance - Draw oriented triangle pointing in direction of velocity - Fills and strokes maybe gradient based on heading - Smooth trails using semi-transparent overlay instead of clear Need to ensure it's self-contained, no network requests. I'll create a comprehensive simulation with these features and maybe a subtle trail effect. Let's write the file.
/workspace/index.html (10104 bytes)Successfully wrote 10104 bytes to /workspace/index.html
thinking
The file has been written. Let me verify its contents briefly and ensure it looks correct. I'll quickly read it to confirm.
{"path":"/workspace/index.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> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0e17; cursor: none; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> (() => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const FADING_BG = true; canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); const CONFIG = { boidCount: 240, maxSpeed: 4.2, maxForce: 0.06, perceptionRadius: 80, separationRadius: 30, cohesionWeight: 0.6, alignmentWeight: 0.7, separationWeight: 1.1, edgeMargin: 120, mouseRadius: 220, mouseWeight: 6.5, trailAlpha: 0.18, colors: [ ['#7be2ff','#3fa9ff','#0f7bff'], ['#ff5ef2','#ff3ea6','#cc29a3'], ['#5effbc','#3ed9a2','#29a376'] ] }; const mouse = { x: -9999, y: -9999, active: false }; canvas.addEventListener('mousemove', (e) => { mouse.x = e.clientX; mouse.y = e.clientY; mouse.active = true; }); canvas.addEventListener('mouseleave', () => { mouse.active = false; }); canvas.addEventListener('touchmove', (e) => { mouse.x = e.touches[0].clientX; mouse.y = e.touches[0].clientY; mouse.active = true; }, { passive: true }); canvas.addEventListener('touchend', () => { mouse.active = false; }); class Boid { constructor(x, y, colorGroup) { this.position = new Vec2(x, y); const angle = Math.random() * Math.PI * 2; this.velocity = new Vec2(Math.cos(angle) * CONFIG.maxSpeed, Math.sin(angle) * CONFIG.maxSpeed); this.acceleration = new Vec2(0, 0); this.t = Math.random() * 100; this.colorGroup = colorGroup; } edges() { const m = CONFIG.edgeMargin; const w = canvas.width; const h = canvas.height; const turn = 0.3; if (this.position.x < m) this.acceleration.x += turn * (m - this.position.x) * 0.01; if (this.position.x > w - m) this.acceleration.x -= turn * (this.position.x - (w - m)) * 0.01; if (this.position.y < m) this.acceleration.y += turn * (m - this.position.y) * 0.01; if (this.position.y > h - m) this.acceleration.y -= turn * (this.position.y - (h - m)) * 0.01; } flock(boids) { const sep = new Vec2(0, 0); const ali = new Vec2(0, 0); const coh = new Vec2(0, 0); let totalSep = 0, totalAli = 0, totalCoh = 0; for (const other of boids) { if (other === this) continue; const d = this.position.distanceTo(other.position); if (d < CONFIG.perceptionRadius) { if (d < CONFIG.separationRadius && d > 0) { const diff = this.position.clone().sub(other.position).normalize().scale(1 / d); sep.add(diff); totalSep++; } ali.add(other.velocity); totalAli++; coh.add(other.position); totalCoh++; } } if (totalSep > 0) { sep.scale(1 / totalSep).normalize().scale(CONFIG.maxSpeed).sub(this.velocity).clamp(CONFIG.maxForce); sep.scale(CONFIG.separationWeight); this.acceleration.add(sep); } if (totalAli > 0) { ali.scale(1 / totalAli).normalize().scale(CONFIG.maxSpeed).sub(this.velocity).clamp(CONFIG.maxForce); ali.scale(CONFIG.alignmentWeight); this.acceleration.add(ali); } if (totalCoh > 0) { coh.scale(1 / totalCoh).sub(this.position).normalize().scale(CONFIG.maxSpeed).sub(this.velocity).clamp(CONFIG.maxForce); coh.scale(CONFIG.cohesionWeight); this.acceleration.add(coh); } if (mouse.active) { const d = this.position.distanceTo(mouse); if (d < CONFIG.mouseRadius && d > 0) { const away = this.position.clone().sub(mouse).normalize().scale(CONFIG.mouseRadius - d); away.clamp(CONFIG.maxForce * 2); away.scale(CONFIG.mouseWeight); this.acceleration.add(away); } } } update() { this.velocity.add(this.acceleration).clamp(CONFIG.maxSpeed); this.position.add(this.velocity); this.acceleration.set(0, 0); this.t += 0.05; } draw(ctx) { const angle = Math.velocityToAngle(this.velocity); const size = 10 + (this.velocity.mag() / CONFIG.maxSpeed) * 4; ctx.save(); ctx.translate(this.position.x, this.position.y); ctx.rotate(angle); const colors = CONFIG.colors[this.colorGroup]; const grd = ctx.createLinearGradient(-size, 0, size, 0); grd.addColorStop(0, colors[0]); grd.addColorStop(0.5, colors[2]); grd.addColorStop(1, colors[1]); ctx.beginPath(); ctx.moveTo(size, 0); ctx.lineTo(-size * 0.7, -size * 0.55); ctx.lineTo(-size * 0.4, 0); ctx.lineTo(-size * 0.7, size * 0.55); ctx.closePath(); ctx.fillStyle = grd; ctx.fill(); ctx.strokeStyle = colors[1]; ctx.lineWidth = 1; ctx.globalAlpha = 0.6; ctx.stroke(); ctx.restore(); } } class Vec2 { constructor(x = 0, y = 0) { this.x = x; this.y = y; } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } scale(s) { this.x *= s; this.y *= s; return this; } clone() { return new Vec2(this.x, this.y); } distanceTo(v) { return Math.hypot(this.x - v.x, this.y - v.y); } mag() { return Math.hypot(this.x, this.y); } normalize() { const m = this.mag(); if (m > 0) this.scale(1 / m); return this; } clamp(max) { const m = this.mag(); if (m > max) this.scale(max / m); return this; } set(x, y) { this.x = x; this.y = y; return this; } } Vec2.velocityToAngle = (v) => Math.atan2(v.y, v.x); const boids = []; for (let i = 0; i < CONFIG.boidCount; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const colorGroup = i % 3; boids.push(new Boid(x, y, colorGroup)); } function loop() { if (FADING_BG) { ctx.fillStyle = 'rgba(10, 14, 23, ' + CONFIG.trailAlpha + ')'; ctx.fillRect(0, 0, canvas.width, canvas.height); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); } for (const boid of boids) { boid.edges(); boid.flock(boids); } for (const boid of boids) { boid.update(); boid.draw(ctx); } if (mouse.active) { ctx.beginPath(); ctx.arc(mouse.x, mouse.y, 6, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.lineWidth = 2; ctx.stroke(); ctx.beginPath(); ctx.arc(mouse.x, mouse.y, 2, 0, Math.PI * 2); ctx.fillStyle = 'white'; ctx.fill(); } requestAnimationFrame(loop); } ctx.fillStyle = '#0a0e17'; ctx.fillRect(0, 0, canvas.width, canvas.height); loop(); })(); </script> </body> </html>
thinking
The file has been written and looks good. It is a single self-contained index.html file with inline CSS and JS, no external resources. It implements a boids flocking simulation with separation, alignment, cohesion, oriented triangular shapes, smooth steering, and fleeing from the mouse cursor with a trailing effect. I should briefly summarize what was created for the user.
I created a single self-contained `index.html` in `/workspace` with an inline flocking simulation. What's inside: - **240 boids** rendered as oriented, color-graded triangles. - Class separation, alignment, and cohesion with adjustable weights in `CONFIG`. - **Smooth steering**: forces are accumulated, clamped to `maxForce`, and velocity is clamped to `maxSpeed`. - **Mouse/touch flee**: boids sense the cursor within a radius and steer away with strength scaling by proximity. - **Edge avoidance** via subtle turning forces instead of hard wrapping. - **Trail effect**: using a semi-transparent background overlay for motion blur. - A custom `Vec2` class handles vector math (add, sub, scale, normalize, clamp, distance, etc.). Open `/workspace/index.html` in a browser to run it.
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
Blank dark screen throughout; JS error (Math.velocityToAngle not a function) prevents boids from rendering.
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.
- Math.velocityToAngle is not a function