3.2 KiB
3.2 KiB
Conway Life Demo Design
Date: 2026-03-17 Status: Approved
Goal
Build a pure HTML/CSS/JS demo page for Conway's Game of Life that opens directly from index.html, balances teaching and interaction, and presents the simulation with a modern visualization aesthetic.
Audience and Use Case
- Learners seeing cellular automata for the first time
- Users who want to experiment by drawing patterns and watching them evolve
- Anyone who wants a polished, shareable standalone demo page
Product Direction
- Topic: Conway's Game of Life
- Page type: balanced demo page
- Delivery: direct-open HTML/CSS/JS page
- Feature scope: enhanced version with preset patterns
- Visual style: modern visualization
- Default state: load a preset pattern and remain paused
Layout
1. Hero
- Full-width first screen with an atmospheric simulation-inspired background
- Title, short explanatory subtitle, and a clear entry action that scrolls to the lab
- Visual treatment based on luminous grid lines, soft glow, and scientific/data-art styling
2. Main Lab
- Large simulation canvas as the primary focus
- Side control panel on desktop; stacked layout on mobile
- Status area showing running/paused state and current speed
3. Rules Section
- Three compact rule cards explaining survival, birth, and death
- Short copy only; no heavy educational text blocks
- Small visual motifs to keep the explanation approachable
4. Preset Pattern Section
- Presets: glider, pulsar, and Gosper glider gun
- Clicking a preset loads it into the simulation and pauses playback
- Section doubles as both a teaching aid and a quick demo launcher
Interaction Design
Controls
- Start/Pause
- Step one generation
- Clear
- Randomize
- Reset to selected preset
- Speed adjustment
Canvas Interaction
- Click a cell to toggle it
- Drag to paint cells continuously
- Keep the simulation paused when loading or editing presets so the user stays in control
Simulation Rules
- Classic Conway rules
- Finite grid with non-wrapping edges
- Default opening preset: pulsar
Visual System
- Deep dark background with cool white text
- Cyan and acid-green highlights for live-state emphasis
- Semi-transparent panels, subtle borders, soft bloom, and layered gradients
- Refined motion: gentle glow, state transitions, and staggered reveal rather than flashy arcade effects
Technical Approach
- Use
canvasfor the simulation surface to keep updates smooth and visually polished - Keep simulation rules in pure functions so they can be tested outside the browser
- Keep page assets local so
index.htmlcan open directly without a build step
Responsiveness
- Desktop: wide lab layout with canvas first and controls beside it
- Mobile: stacked layout with the canvas above controls
- Preset cards become horizontally scrollable on narrower screens
Usability Details
- Disable actions when they should not apply, such as disabling step while running
- Show the active preset and speed tier clearly
- Short helper copy explaining that each cell looks at its eight neighbors
Verification Targets
- Conway rule updates are correct
- Start/pause and single-step work as expected
- Presets load correctly
- Editing cells updates the simulation state correctly
- Layout remains usable after resizing