Boids flocking · ling-2.6-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.
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.
I'll create a full-screen flocking simulation of boids with separation, alignment, cohesion, and mouse repulsion. The boids will be drawn as oriented triangles and steer smoothly. Here's the complete implementation: ```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; padding: 0; overflow: hidden; background: #0a0a1a; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Resize canvas to full screen function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); // --- Configuration --- const NUM_BOIDS = 250; const MAX_SPEED = 180; // pixels per second const MAX_FORCE = 60; // pixels per second squared const PERCEPTION_RADIUS = 80; const SEPARATION_RADIUS = 25; const ALIGNMENT_RADIUS = 60; const COHESION_RADIUS = 70; const MOUSE_REPEL_RADIUS = 150; const MOUSE_REPEL_FORCE = 400; const WALL_AVOIDANCE_RADIUS = 100; const WALL_AVOID_FORCE = 120; const TRIANGLE_SIZE = 6; // half-size of triangle // --- Boid Class --- class Boid { constructor(x, y) { this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 40; this.vy = (Math.random() - 0.5) * 40; this.angle = 0; } // --- Physics update --- update(dt, mouse) { const acceleration = this.calculateForces(mouse); this.vx += acceleration.x * dt; this.vy += acceleration.y * dt; // Clamp 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; } this.x += this.vx * dt; this.y += this.vy * dt; // Wrap around screen if (this.x < -20) this.x = canvas.width + 20; if (this.x > canvas.width + 20) this.x = -20; if (this.y < -20) this.y = canvas.height + 20; if (this.y > canvas.height + 20) this.y = -20; // Calculate facing angle this.angle = Math.atan2(this.vy, this.vx); } // --- Flocking behaviors --- calculateForces(mouse) { let sepX = 0, sepY = 0; let aliX = 0, aliY = 0; let cohX = 0, cohY = 0; let mouseForceX = 0, mouseForceY = 0; let wallForceX = 0, wallForceY = 0; let alignmentCount = 0, cohesionCount = 0, separationCount = 0; for (const other of boids) { if (other === this) continue; const dx = other.x - this.x; const dy = other.y - this.y; const dist = Math.sqrt(dx * dx + dy * dy); // Separation if (dist < SEPARATION_RADIUS && dist > 0) { const diffX = -dx / dist; // steer away const diffY = -dy / dist; sepX += diffX / dist; // stronger when closer sepY += diffY / dist; separationCount++; } // Alignment if (dist < ALIGNMENT_RADIUS && dist > 0) { aliX += other.vx; aliY += other.vy; alignmentCount++; } // Cohesion if (dist < COHESION_RADIUS && dist > 0) { cohX += other.x; cohY += other.y; cohesionCount++; } } // Apply separation if (separationCount > 0) { sepX /= separationCount; sepY /= separationCount; const len = Math.sqrt(sepX * sepX + sepY * sepY); if (len > 0) { sepX = (sepX / len) * MAX_FORCE; sepY = (sepY / len) * MAX_FORCE; } } // Apply alignment if (alignmentCount > 0) { aliX /= alignmentCount; aliY /= alignmentCount; const len = Math.sqrt(aliX * aliX + aliY * aliY); if (len > 0) { aliX = (aliX / len) * MAX_SPEED; aliY = (aliY / len) * MAX_SPEED; aliX -= this.vx; aliY -= this.vy; // Clamp alignment force const alen = Math.sqrt(aliX * aliX + aliY * aliY); if (alen > MAX_FORCE) { aliX = (aliX / alen) * MAX_FORCE; aliY = (aliY / alen) * MAX_FORCE; } } } // Apply cohesion if (cohesionCount > 0) { cohX /= cohesionCount; cohY /= cohesionCount; // Steer towards the center cohX -= this.x; cohY -= this.y; const len = Math.sqrt(cohX * cohX + cohY * cohY); if (len > 0) { cohX = (cohX / len) * MAX_FORCE; cohY = (cohY / len) * MAX_FORCE; } } // Mouse repulsion const mdx = mouse.x - this.x; const mdy = mouse.y - this.y; const mdist = Math.sqrt(mdx * mdx + mdy * mdy); if (mdist < MOUSE_REPEL_RADIUS && mdist > 0) { const repelStrength = MOUSE_REPEL_FORCE * (1 - mdist / MOUSE_REPEL_RADIUS); mouseForceX += (mdx / mdist) * repelStrength; mouseForceY += (mdy / mdist) * repellStrength; } // Wall avoidance const wallDistLeft = this.x; const wallDistRight = canvas.width - this.x; const wallDistTop = this.y; const wallDistBottom = canvas.height - this.y; if (wallDistLeft < WALL_AVOIDANCE_RADIUS) { wallForceX += WALL_AVOID_FORCE * (1 - wallDistLeft / WALL_AVOIDANCE_RADIUS); } if (wallDistRight < WALL_AVOIDANCE_RADIUS) { wallForceX -= WALL_AVOID_FORCE * (1 - wallDistRight / WALL_AVOIDANCE_RADIUS); } if (wallDistTop < WALL_AVOIDANCE_RADIUS) { wallForceY += WALL_AVOID_FORCE * (1 - wallDistTop / WALL_AVOIDANCE_RADIUS); } if (wallDistBottom < WALL_AVOIDANCE_RADIUS) { wallForceY -= WALL_AVOID_FORCE * (1 - wallDistBottom / WALL_AVOIDANCE_RADIUS); } return { x: sepX + aliX + cohX + mouseForceX + wallForceX, y: sepY + aliY + cohY + mouseForceY + wallForceY }; } // --- Drawing --- draw(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.beginPath(); ctx.moveTo(TRIANGLE_SIZE, 0); ctx.lineTo(-TRIANGLE_SIZE * 0.5, -TRIANGLE_SIZE); ctx.lineTo(-TRIANGLE_SIZE * 0.5, TRIANGLE_SIZE); ctx.closePath(); // Color based on speed const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy); const hue = Math.min(180 + (speed / MAX_SPEED) * 60, 360); const brightness = 60 + (speed / MAX_SPEED) * 40; ctx.fillStyle = `hsla(${hue}, 80%, ${brightness}%, 0.9)`; ctx.fill(); ctx.strokeStyle = `hsla(${hue}, 100%, 80%, 0.6)`; ctx.lineWidth = 0.5; ctx.stroke(); ctx.restore(); } } // --- Initialize boids --- const boids = []; for (let i = 0; i < NUM_BOIDS; i++) { const margin = 50; const x = Math.random() * (canvas.width - margin * 2) + margin; const y = Math.random() * (canvas.height - margin * 2) + margin; boids.push(new Boid(x, y)); } // --- Mouse handling --- const mouse = { x: canvas.width / 2, y: canvas.height / 2, 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) => { e.preventDefault(); const touch = e.touches[0]; mouse.x = touch.clientX; mouse.y = touch.clientY; mouse.active = true; }, { passive: false }); canvas.addEventListener('touchstart', (e) => { const touch = e.touches[0]; mouse.x = touch.clientX; mouse.y = touch.clientY; mouse.active = true; }); canvas.addEventListener('touchend', () => { mouse.active = false; // Keep mouse at center when touch ends }); // --- Main loop --- let lastTime = 0; function loop(timestamp) { const dt = Math.min((timestamp - lastTime) / 1000, 0.05); // delta time in seconds, cap at 50ms lastTime = timestamp; // Clear with fade-to-black trail effect ctx.fillStyle = 'rgba(10, 10, 26, 0.15)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Update and draw boids for (const boid of boids) { boid.update(dt, mouse); boid.draw(ctx); } // Optional: draw mouse repulsion indicator (faint circle) if (mouse.active) { ctx.beginPath(); ctx.arc(mouse.x, mouse.y, MOUSE_REPEL_RADIUS, 0, Math.PI * 2); ctx.strokeStyle = 'rgba(255, 100, 100, 0.05)'; ctx.lineWidth = 1; ctx.stroke(); } requestAnimationFrame(loop); } requestAnimationFrame(loop); </script> </body> </html> ``` **Key features of this simulation:** - **Flocking behaviors**: Separation (avoid crowding neighbors), Alignment (match velocity), and Cohesion (steer toward center of mass) — all with configurable perception/action radii. - **Mouse interaction**: Boids smoothly flee from the cursor (works with both mouse and touch). - **Oriented triangles**: Each boid is drawn as a colored triangle that rotates to match its velocity vector. - **Smooth steering**: Forces are accumulated and clamped with `MAX_FORCE`, velocities with `MAX_SPEED`, creating fluid motion. - **Wrapping boundaries**: Boids reappear on the opposite side when they fly off-screen. - **Visual effects**: Color shifts toward blue as boids slow down, and a subtle fade trail creates beautiful emergent patterns. - **Responsive**: Automatically resizes to fill the screen and handles window resize events.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.