Settings

N-Pendulum Boids

This is an interactive art project simulating "boids" (bird-like objects) where each boid is an n-pendulum. The simulation combines classic flocking behavior with simplified pendulum physics.

How it Works

Each boid follows three simple rules to create complex, emergent flocking patterns:

  • Cohesion: Steer towards the average position of local flockmates.
  • Separation: Steer to avoid crowding local flockmates.
  • Alignment: Steer towards the average heading of local flockmates.

The twist is that each boid is not a single point, but a chain of connected segments (an n-pendulum). The "head" of the boid follows the flocking rules, while the rest of the segments trail behind, influenced by gravity and a "spring-like" force that tries to keep them aligned. The result is a dynamic, flowing, almost life-like motion.

You can configure every aspect of the simulation using the Settings panel, or by setting URL parameters. For example, try adding ?boidCount=200&hue=300&pendulumSegments=7 to the URL.

Changelog

v1.0.1 - 2023-10-27
- FIX: Corrected an error where CSS variables were used in the Canvas 2D context, causing a rendering failure. The canvas API does not resolve CSS `var()` syntax, so color values are now passed directly from the JS config.

v1.0.0 - 2023-10-27
- Initial release.
- Core simulation of n-pendulum boids.
- Full-screen canvas with dark theme.
- All configuration available via URL parameters and UI controls.
- URL state management with `history.pushState`.
- Toggleable overlays for controls, stats, and help.
- Debug mode for verbose logging and full URL state.
- Comprehensive help screen including this changelog and prompt log.
- Mobile-responsive design.

Developer & Agent Context

This file was generated by an AI assistant. It is designed to be self-contained and easily modifiable by future agents. Please adhere to the following guidelines:

  • Maintain the Single-File Structure: All HTML, CSS, and JavaScript should remain in this file. Do not introduce external dependencies.
  • Update This Section: If you make significant changes, please update the Changelog and any relevant parts of this help text.
  • Preserve Configuration System: The URL parameter and UI control system is a core feature. New configurable variables should be added to the `CONFIG_DEFAULTS` object with their metadata.
  • Respect the Code Style: Maintain the existing code structure, naming conventions, and commenting style. The code is organized into logical sections: Configuration, State, Core Classes, Initialization, Update Loop, and UI Management.

Original Prompt Log


        

    

    
    

        
FPS: 0