Hexagonal Cellular Automata Simulator

Overview

A high-performance, single-file browser application designed to simulate hexagonal cellular automata. The tool provides a clean, professional workspace where users can visualize complex grid-based logic.

Technical Constraints

• Single File: Everything (HTML, CSS, JS) must be contained in one file.
• No Persistence: Do not use localStorage, sessionStorage, or IndexedDB. All simulation state must reside in memory.
• No Alerts/Prompts: Use custom modals for interactions.
• Environment: Must run seamlessly inside a sandboxed iframe.

Feature Set

• Hex Grid Engine: Optimized rendering using HTML5 Canvas with a hexagonal tiling coordinate system (axial/cube coordinates).
• Rule Editor: A customizable panel to define 'Birth' and 'Survival' neighborhood thresholds.
• Playback Controls: Play, Pause, Step-Forward, and Reset buttons.
• Simulation Speed: Slider for adjusting the simulation refresh rate.
• Interactive Grid: Ability to draw/erase cells directly on the canvas using mouse or touch gestures.
• Export: Save the current frame as a PNG image using the toDataURL method.
• Preset Library: A dropdown of classic rule configurations (e.g., 'Life', 'Growth', 'Chaos').

UI/UX Layout

• Header: Contains the application title and a minimal, clean toolbar for global actions (Clear, Export, Randomize).
• Main Display: A centered, fluid canvas container. The background must be a pristine, light-mode white (#ffffff).
• Sidebar/Control Panel: A right-aligned (or bottom on mobile) clean control panel using a semi-transparent blur effect.
  • Input groups for rules, speed, and grid density.
  • Grouping via semantic <section> tags.
• Color Palette:
  • Background: #f8fafc (slate-50)
  • UI Surface: #ffffff
  • Accents/Buttons: #3b82f6 (blue-500)
  • Border/Grid: #e2e8f0 (slate-200)
  • Text: #1e293b (slate-800)

Animation & Interactions

• Canvas Transitions: Use requestAnimationFrame for buttery-smooth grid updates.
• Micro-interactions: Buttons should have subtle scale transformations on click and smooth color transitions on hover.
• Loading: Subtle loading indicator (spinner) if the initial generation takes > 100ms.

Developer Instructions

1. Use Vanilla JavaScript (ES6+). Do not include heavy libraries like React/Vue.
2. You may use Tailwind CSS via CDN for layout and styling, ensuring the light-mode palette is strictly enforced.
3. Ensure the canvas responds to window.resize events by re-calculating the grid dimensions and maintaining the center point.
4. Prioritize performance: ensure the hexagonal grid math is efficient enough to run at 60fps on standard mobile devices.