Hexagonal Cellular Automata Simulator

Overview

A high-performance, single-file browser application that allows users to visualize cellular automata on a hexagonal grid. Designed for researchers, students, and enthusiasts, this tool provides a robust environment to tweak neighborhood rules and observe complex system behaviors.

Core Features

• Responsive Hexagonal Canvas: A high-performance HTML5 Canvas implementation of a tessellated hexagonal grid.
• Interactive Cell Toggle: Click/tap cells to manually modify the initial state.
• Custom Rule Engine: Define 'Birth' and 'Survival' requirements based on the number of active neighbors (0-6).
• Simulation Controls: Play, pause, single-step, and reset functionality.
• Simulation Speed: Adjust the frame rate to observe rapid evolution or slow, precise transformations.
• Pattern Export/Import: JSON-based state saving to bypass the lack of persistent browser storage.
• Statistics Dashboard: Real-time counter of live cells and current generation number.

User Interface (UI) Specification

• Header: Contains the app title, a brief utility description, and the current simulation status (e.g., 'Running', 'Paused').
• Sidebar (Left/Right):
  • Controls: Play/Pause button, Step button, Clear button, Randomize button.
  • Configuration: Numeric inputs for 'Birth' and 'Survival' rules.
  • Stats: Live cell count, generation counter.
• Main Display: Full-width responsive canvas area. The grid should center automatically and scale based on container size.

Design & Aesthetic (Light Mode)

• Palette:
  • Background: #f8fafc (Slate 50)
  • Grid Lines: #e2e8f0 (Slate 200)
  • Alive Cells: #3b82f6 (Blue 500) with a subtle shadow.
  • Dead Cells: #ffffff (White).
  • Text: #1e293b (Slate 800).
• Animations:
  • Smooth fading transitions when cells toggle state.
  • Subtle hover effects on UI buttons using CSS transition: all 0.2s ease.

Technical Constraints & Requirements

• Single File: All HTML, CSS, and JS must be in one .html file. CSS/JS from CDN is permitted.
• No Persistent Storage: No localStorage, sessionStorage, IndexedDB, or cookies. State must be handled entirely in memory.
• Sandbox Safety: Use no popups (alert/prompt). Use HTML modal overlays for input/notifications.
• Performance: Use requestAnimationFrame for the simulation loop to ensure smooth performance without blocking the UI thread.
• Responsiveness: Use CSS Flexbox/Grid for layout, and recalculate grid dimensions on window.resize events to ensure the hex grid remains proportional.