FPS: --

Simulation Controls

Simulation Statistics

Help & Information

Project Description

This is a highly interactive, fully-configurable multi-species Conway's Game of Life simulation. It's built as a single HTML file using vanilla JavaScript and CSS, focusing on visual appeal, smooth animations, and comprehensive customizability via URL parameters.

New in this version: The simulation now includes "boids" (bird-oid objects) that move around the canvas, each belonging to one of the Game of Life species. As a boid passes over a cell, it "activates" that cell, making it alive with the boid's species. Each boid species has unique movement behaviors, adding another layer of dynamic interaction.

Keyboard Shortcuts

  • C: Toggle Controls Overlay
  • S: Toggle Statistics Overlay
  • H: Toggle Help Overlay
  • Spacebar: Pause/Play Simulation
  • R: Reset Simulation

URL Configuration Parameters

All aspects of the simulation can be controlled via URL parameters. Parameters are automatically updated in the URL when changed via the controls overlay. If a parameter is not set in the URL, its default value is used.

Examples:

  • ?hue=120: Sets the base color scheme to green.
  • ?gridDensity=100&speed=50: Sets a higher cell density (approx. 100 cells on shorter axis) and faster simulation speed.
  • ?header=My%20Life%20Sim&subheader=A%20colorful%20world: Displays custom headers.
  • ?birthMin=3&birthMax=3&survivalMin=2&survivalMax=3: Standard Conway's rules.
  • ?speciesCount=5&initialDensity=30&wrapAround=false: 5 species, 30% density, no wrap.
  • ?boidsEnabled=true&boidCountPerSpecies=20: Enables boids with 20 per species.
  • ?debug=true: Enables debug mode (more verbose console logging, full URL parameter updates).
  • ?pulseAnimation=true: Enables cell pulse on birth.

Configuration Options & Uses (Logged in Console)

On page load, all available configuration options, their default values, and their purpose are logged to the browser's console (F12).

Changelog

  • 2023-10-27: Initial Release. Implemented core simulation, multi-species logic, full configurability via URL, dynamic UI, responsive design, animations, FPS counter, and comprehensive help/debug modes.
  • 2023-10-27: Grid now dynamically scales to fill the entire screen, adapting rows and columns based on aspect ratio. `gridSize` parameter renamed to `gridDensity` to reflect this. Updated help content and changelog.
  • 2023-10-27: Added multi-species Boids simulation. Boids now interact with the Game of Life grid by activating cells they pass over. Each boid species has distinct movement behaviors. New URL parameters for boid control (`boidsEnabled`, `boidCountPerSpecies`) added. Updated all relevant UI, stats, help, and logging.

Prompt Log



                
Technical Specifications & Context

                
    
                    
  • Built With: Pure HTML, CSS, and JavaScript (vanilla, no external libraries).
    • 
                    
  • Rendering: HTML Canvas for high-performance cell and boid rendering. Cells and boids are drawn with floating-point dimensions to perfectly fill the screen without gaps.
    • 
                    
  • Game Logic: Double-buffering for grid updates to ensure consistent state transitions. Neighbor counting is optimized.
    • 
                    
  • Boids Logic: Implements a simplified Boids algorithm (cohesion, separation, alignment, wander) with custom weights per species to create varied movement patterns. Boids directly modify the Game of Life grid.
    • 
                    
  • Color Scheme: Dynamically generated using HSL color model based on a single `hue` parameter, ensuring visual consistency for both cells and boids.
    • 
                    
  • Animations: CSS transitions for UI elements, `requestAnimationFrame` for smooth canvas updates. Subtle cell pulse animation for birth, and fluid boid movement.
    • 
                    
  • Responsiveness: CSS media queries and `vw`/`vh` units for adapting to different screen sizes, touch-friendly controls. Grid dimensions (`rows`/`cols`) dynamically adjust on resize.
    • 
                    
  • URL Management: `URLSearchParams` API for robust parsing and updating of URL parameters.
    • 
                    
  • Goal: To demonstrate a rich, interactive web application entirely self-contained within a single file, prioritizing user experience and deep customization.
    • 
                


                
Instructions to Future Agents

                
To ensure this project remains well-documented and maintainable, please adhere to the following guidelines:

                
    
                    
  1. Update Changelog: Whenever significant changes are made (new features, major bug fixes, performance improvements), add an entry to the "Changelog" section above with the date and a brief description.
    2. 
                    
  2. Update Prompt Log: If the core prompt or requirements for the project evolve significantly, update the "Prompt Log" section to reflect the latest instructions.
    3. 
                    
  3. Update Specs/Context: If new technologies are introduced, or the architectural design changes, update the "Technical Specifications & Context" section accordingly.
    4. 
                    
  4. Refactor Comments: Keep inline comments up-to-date with code changes. Add new comments for complex logic or new features.
    5. 
                    
  5. Maintain Single File Principle: All HTML, CSS, and JavaScript should remain within this single .html file.
    6. 
                    
  6. Test Thoroughly: Before committing changes, ensure all existing functionalities work as expected across different browsers and devices (especially mobile).
    7. 
                    
  7. Consider Performance: When adding new visual effects or complex logic, always be mindful of performance, especially on lower-end devices.
    8.