Generation Prompt
Page: Flocking Simulation (Boids)
Slogan: "Emergent collective behavior from three simple rules"
Structure:
- Widget before:title -> h1 + p.slogan centered
- Main -> Canvas in .card.full.ratio-16-9 (HD via devicePixelRatio)
- Widget after:algorithm -> Explanation of the 3 rules
- Widget modal:claude -> Documentation
Boids Implementation:
- Each boid is a triangle pointing in movement direction
- Three steering behaviors:
1. Separation: avoid crowding neighbors (short range)
2. Alignment: match velocity with neighbors (medium range)
3. Cohesion: move toward center of mass (medium range)
Parameters:
- Flock size: number of boids (default 100)
- Perception radius: neighbor detection range (default 50px)
- Max speed: velocity limit (default 4)
- Max force: steering force limit (default 0.1)
- Separation weight: importance of separation (default 1.5)
- Alignment weight: importance of alignment (default 1.0)
- Cohesion weight: importance of cohesion (default 1.0)
Optional features:
- Predator mode: click to add predator, boids flee
- Obstacles: static zones boids avoid
- Wrap edges: boids reappear on opposite side
Rendering:
- Triangles oriented in velocity direction
- Color based on velocity or group
- Trail effect (optional)
Animation loop:
1. For each boid, find neighbors within perception
2. Calculate separation, alignment, cohesion forces
3. Apply forces with weights, limit to max force
4. Update velocity, limit to max speed
5. Update position, wrap edges
6. Draw as oriented triangle