FPS: 0
Boids: 0
Canvas: 0x0
Mouse: 0, 0
Debug: Off
This is an interactive implementation of Craig Reynolds' Boids algorithm, demonstrating emergent flocking behavior through three simple rules: separation, alignment, and cohesion. The simulation creates beautiful, organic movement patterns that mimic natural flocking behavior found in birds, fish, and other creatures.
count - Number of boids (10-500, default: 150)
separation - Separation distance (10-100, default: 25)
alignment - Alignment distance (10-100, default: 50)
cohesion - Cohesion distance (10-100, default: 50)
maxSpeed - Maximum boid speed (0.5-5, default: 2)
maxForce - Maximum steering force (0.01-0.1, default: 0.03)
vision - Vision range (20-150, default: 50)
hue - Color hue (0-360, default: 200)
header - Main header text
subheader - Subheader text (can have multiple)
debug - Enable debug mode (true/false)
Click and drag to attract boids to your cursor. Use the gear icon to toggle controls, chart icon for stats, and question mark for this help screen. All sliders update the simulation in real-time.
Let's write a beautiful, interactive, informative boids simulation as a single file in html, css, and JavaScript. Let's not use any external libraries. Let's use a dark theme, and let's take an optional URL parameter "hue" that we use to generate a color scheme. I want the page to be able to take any number of optional "header" and "subheader" parameters for displaying as text on the canvas. I want the canvas to be the full screen, with all controls and stats behind toggle-able overlays. I want lots of slick animations, and I want the action to begin as soon as the page loads. I also want it to work well on mobile. I want it to display the frame rate. I want all configuration to be available as optional URL parameters. If a configuration value is set in the URL, it should be updated in the URL when it changes on the page. I want the page to log all configuration options and their uses. I want an optional URL parameter "debug". When debug is set, the URL should be updated to show all the configuration values as they change. Debug should also enable additional console logging. Let's have a help screen that includes a description of this project, a running changelog, this entire prompt , specs, and any context that would be useful for other agents modifying this file in the future, and an instruction to future agents to update these things.
IMPORTANT: When modifying this file, please update the changelog, version number, and any relevant specifications. The help screen should always reflect the current state of the application. Maintain the URL parameter system and ensure all new features are configurable via URL parameters when appropriate.