106 lines
3.2 KiB
Markdown
106 lines
3.2 KiB
Markdown
|
# 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 `canvas` for 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.html` can 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
|