Cellular Automata: Conway's Game of Life Sandbox

A high-performance, browser-based implementation of Conway's Game of Life. This tool provides an intuitive interface for drawing, simulating, and observing complex cellular patterns without any server-side dependencies.

Core Features

• Interactive Canvas: Click or drag across the grid to toggle cells alive or dead in real-time.
• Simulation Controls:
  • Play/Pause toggle for the simulation.
  • Step-by-step frame advancement.
  • Speed control slider (Frames per Second).
  • Grid Clear and Randomize functions.
• Pattern Library: A dropdown selector to inject common oscillators, gliders, and still lifes (e.g., Pulsar, Gosper Glider Gun).
• Live Metrics: Real-time counter for the current generation and total live cell population.
• Responsive Resizing: The grid recalculates its dimensions based on the container size, ensuring it always fits the viewport.

UI/UX Design

• Aesthetic: Clean, minimalist "SaaS" style. High-contrast light mode with crisp white backgrounds and subtle gray grid lines.
• Palette:
  • Background: #ffffff
  • Grid lines: #f0f0f0
  • Live Cell: #2563eb (Vibrant Blue)
  • UI Elements: #374151 (Dark Slate for text), #e5e7eb (Gray for buttons).
• Animations: Smooth micro-interactions on button hover, transition effects for the play/pause toggles, and gentle fade-ins for UI panels.
• Layout:
  • Top Header: Title and primary controls (Play/Pause, Speed).
  • Center: Large, immersive Canvas area.
  • Bottom Stats Bar: Generation and Population count.

Technical Implementation Constraints

• Single File: The app must be contained within a single .html file. CSS and JS must be embedded within <style> and <script> tags.
• Performance: Use requestAnimationFrame for the rendering loop to ensure fluid simulation speeds without blocking the main UI thread.
• State Management: All data (grid array, generation count) must be managed in-memory using JavaScript variables. DO NOT attempt to write to localStorage or sessionStorage.
• Iframe Compatibility: The app must be fully functional within a sandbox="allow-scripts" iframe. Avoid external assets, tracking scripts, or analytics.
• Dependencies: Only lightweight CDNs for essential icons (e.g., FontAwesome) or CSS resets are permitted.