Compare all models on this prompt →
Conway's Game of Life · minimax-m3
Run Conway's Game of Life on a full-screen canvas grid with click-and-drag to toggle cells, plus play/pause, step, randomize, and clear controls.
⛨ sandboxed Open in new tab ↗
transcript · 10 messages
user
Run Conway's Game of Life on a full-screen canvas grid with click-and-drag to toggle cells, plus play/pause, step, randomize, and clear controls.
assistant
thinking
The user wants a single-page web app implementing Conway's Game of Life with:
- Full-screen canvas grid
- Click-and-drag to toggle cells
- Play/pause button
- Step button
- Randomize button
- Clear button
It needs to be in one self-contained index.html file with inline CSS and JS, no external resources.
Let me design this:
1. Full-screen canvas that fills the viewport
2. Grid of cells drawn on canvas
3. Mouse interaction: click and drag to toggle/pan cells alive
4. Controls overlay: play/pause, step, randomize, clear, speed control
5. Game logic: standard Conway's rules (B3/S23)
6. Nice modern styling
Let me think about details:
- Cell size: maybe 10-15px default, with option to adjust
- Grid: compute based on canvas size and cell size
- Generation step: 60-200ms per tick
- Colors: dark theme with glowing cells, maybe with a trail effect
- Drag behavior: hold mouse down and drag to paint cells alive (or maybe toggle? Let me make it paint cells alive while dragging, but single click toggles)
- Actually, classic behavior: click toggles. Drag with mouse held down paints cells alive. Let me use: mousedown sets state, then drag sets cells to that state.
Let me build this nicely. I'll use:
- Dark theme
- Glowing cells (cell color glows)
- Trail effect using semi-transparent overlay each frame? Or just clean grid.
- Controls at bottom or top with nice buttons
- FPS / generation counter
- Speed slider
Let me write it out.
Key implementation details:
- Canvas resizes with window
- Recalculate grid dimensions on resize
- use requestAnimationFrame for smooth rendering
- Game loop: if playing, advance generation every N ms
- Render: clear canvas, draw alive cells
For Conway's rules:
- Dead cell with 3 neighbors becomes alive
- Alive cell with 2 or 3 neighbors stays alive
- Otherwise dies
Drag behavior: I think the most intuitive is:
- mousedown on a dead cell: sets it to alive, drag paints alive
- mousedown on an alive cell: sets it to dead, drag paints dead
- Single click toggles (same logic applies)
Let me code this up.
I'll use a flat Uint8Array for the grid for performance. Or just a 2D array of booleans since grids are typically not too large.
Actually for a full-screen canvas, cells could be many. Let me use Uint8Array for efficiency.
For neighbor counting, I'll wrap around (toroidal) - or maybe not? Standard Conway is unbounded but we need to handle edges. Let me just treat out-of-bounds as dead.
Actually, toroidal (wrap-around) is common and gives more interesting patterns. Let me make it optional or just pick toroidal. I'll go with toroidal by default since it's more visually interesting on a full-screen grid.
Let me write the code:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0f; }
canvas { display: block; position: fixed; top: 0; left: 0; }
/* Controls */
.controls { ... }
</style>
</head>
<body>
<canvas id="game"></canvas>
<div class="controls"> ... </div>
<script>
...
</script>
</body>
</html>
```
Let me design the controls nicely. Maybe a bottom bar with:
- Play/Pause button
- Step button
- Clear button
- Randomize button
- Speed slider
- Cell size slider (optional)
- Generation counter
- Living cells counter
Style with frosted glass / dark UI.
Let me think about colors:
- Background: #0a0a0f (very dark blue-black)
- Cells: bright cyan/green glow
- Grid lines: subtle dark gray
- Controls: dark glass panel
For visual polish, I'll add:
- Subtle grid lines
- Glowing cells with shadow blur
- Smooth fade-in animation when cells appear? Or instant for performance.
- Trail effect: draw semi-transparent black over canvas each frame, so alive cells leave fading trails. This is pretty cool!
Actually, the trail effect is great for visualization. Let me use a persistent canvas and overlay alpha. But that complicates things. Let me just go with clear rendering for clarity and add glow.
Or actually, let me do a hybrid: render with semi-transparent black between frames when playing, so alive cells leave fading trails. This is mesmerizing.
Hmm, but then drag-paint wouldn't show trail correctly. Let me think...
Actually let me do it this way:
- When playing: use fade-trail rendering
- When paused (drawing): show clear grid
That's nice. Or just always show clear, simpler. Let me go with clear + glow.
Actually let me do trail always - it's beautiful. When painting, it will also leave a brief trail. Should be fine.
Let me think about it more carefully. With trails:
- Each frame: fill canvas with rgba(10, 10, 15, 0.15) - this fades previous frames
- Then draw all alive cells on top
- Old cells fade out gradually
This is classic and beautiful. Let me use it.
When the user clicks, I want immediate feedback. Trails might make clicks feel laggy. Let me think...
Alternative: clean draw each frame but with glow effect via shadowBlur. This gives crisp visuals. I think clean is better for a Game of Life since you want to see exact state.
OK going with clean rendering + glow.
Let me code:
```js
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let cellSize = 12;
let cols, rows;
let grid, next;
let playing = false;
let speed = 10; // generations per second
let lastStep = 0;
let generation = 0;
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const newCols = Math.floor(canvas.width / cellSize);
const newRows = Math.floor(canvas.height / cellSize);
// preserve existing grid or create new
const newGrid = new Uint8Array(newCols * newRows);
// copy old cells into new
if (grid) {
// ... need to know old dims
}
cols = newCols;
rows = newRows;
grid = newGrid;
next = new Uint8Array(newCols * newRows);
}
```
Wait, if the cell size changes or window resizes, I need to preserve state. Let me save old dims and copy overlap.
Actually let me keep this simpler: on resize, keep cellSize and just adjust cols/rows. On cell size change, redraw without preserving.
For window resize: preserve cells by copying the overlapping region.
Let me write helper to access cells:
```js
function idx(x, y) { return y * cols + x; }
function get(x, y) {
x = (x + cols) % cols;
y = (y + rows) % rows;
return grid[y * cols + x];
}
function set(x, y, v) {
x = (x + cols) % cols;
y = (y + rows) % rows;
grid[y * cols + x] = v;
}
```
Toroidal wrap-around for neighbors. Good.
Step function:
```js
function step() {
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
let n = 0;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue;
const nx = (x + dx + cols) % cols;
const ny = (y + dy + rows) % rows;
n += grid[ny * cols + nx];
}
}
const i = y * cols + x;
const alive = grid[i];
next[i] = (alive && (n === 2 || n === 3)) || (!alive && n === 3) ? 1 : 0;
}
}
[grid, next] = [next, grid];
generation++;
}
```
Render function:
```js
function render() {
ctx.fillStyle = '#0a0a0f';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Optional grid lines (subtle)
ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
ctx.lineWidth = 1;
// ... draw lines
// Cells
ctx.fillStyle = '#00ffaa';
ctx.shadowColor = '#00ffaa';
ctx.shadowBlur = 8;
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
if (grid[y * cols + x]) {
ctx.fillRect(x * cellSize + 1, y * cellSize + 1, cellSize - 2, cellSize - 2);
}
}
}
ctx.shadowBlur = 0;
}
```
Mouse handling:
```js
let mouseDown = false;
let mouseMode = 1; // 1 = set alive, 0 = set dead
function getCellFromMouse(e) {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((e.clientX - rect.left) / cellSize);
const y = Math.floor((e.clientY - rect.top) / cellSize);
return { x, y };
}
canvas.addEventListener('mousedown', e => {
mouseDown = true;
const { x, y } = getCellFromMouse(e);
if (x >= 0 && x < cols && y >= 0 && y < rows) {
// Toggle: set to opposite of current
mouseMode = grid[y * cols + x] ? 0 : 1;
grid[y * cols + x] = mouseMode;
}
});
canvas.addEventListener('mousemove', e => {
if (!mouseDown) return;
const { x, y } = getCellFromMouse(e);
if (x >= 0 && x < cols && y >= 0 && y < rows) {
grid[y * cols + x] = mouseMode;
}
});
window.addEventListener('mouseup', () => { mouseDown = false; });
```
Touch support:
```js
canvas.addEventListener('touchstart', e => {
e.preventDefault();
const t = e.touches[0];
handleDown(t.clientX, t.clientY);
});
// similar for touchmove, touchend
```
Randomize:
```js
function randomize(density = 0.3) {
for (let i = 0; i < grid.length; i++) {
grid[i] = Math.random() < density ? 1 : 0;
}
}
```
Clear:
```js
function clear() {
grid.fill(0);
next.fill(0);
generation = 0;
}
```
Game loop:
```js
function loop(t) {
if (playing) {
const interval = 1000 / speed;
if (t - lastStep >= interval) {
step();
lastStep = t;
}
}
render();
updateStats();
requestAnimationFrame(loop);
}
```
Stats update:
```js
function updateStats() {
let alive = 0;
for (let i = 0; i < grid.length; i++) alive += grid[i];
genCountEl.textContent = generation;
liveCountEl.textContent = alive;
}
```
Controls UI:
```html
<div class="controls">
<button id="playPause">▶ Play</button>
<button id="step">⏭ Step</button>
<button id="randomize">🎲 Randomize</button>
<button id="clear">🗑 Clear</button>
<label>Speed: <input type="range" id="speed" min="1" max="60" value="10"></label>
<label>Size: <input type="range" id="size" min="4" max="30" value="12"></label>
<span class="stats">Gen: <span id="gen">0</span> | Alive: <span id="alive">0</span></span>
</div>
```
Style:
```css
.controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
align-items: center;
padding: 12px 20px;
background: rgba(20, 20, 30, 0.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #eee;
font-family: ...;
z-index: 10;
}
button {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #eee;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background: rgba(255, 255, 255, 0.15);
}
button.active {
background: #00ffaa;
color: #000;
}
```
OK let me put it all together. I'll make it polished.
Actually for speed slider, I want steps per second to be configurable from 1 to 60. Cell size from 4 to 30.
For initial state, let me put some interesting pattern in the center. Like a Gosper glider gun? Or just randomize on load? Let me randomize on load with a moderate density.
Actually, let me start with empty grid and a Gosper glider gun or pulsar pre-loaded. Or just empty and let user click randomize. Actually, to make it immediately interesting, let me load with randomize(0.3) on start.
Or maybe pre-populate with a glider or two so it looks alive on load. Hmm, let me just randomize so it shows patterns immediately.
For colors, let me go with a nice cyan-green glow. Maybe make cells brighter based on age? That'd be cool but adds complexity. Let me keep it simple with just glow.
Let me also add keyboard shortcuts:
- Space: play/pause
- Right arrow: step
- C: clear
- R: randomize
Now let me write the full thing. I want it to look great.
One more consideration: when dragging fast, mouse events might miss some cells. Let me also connect cells between previous and current mouse position (Bresenham line). This makes drag-painting smoother.
```js
function paintLine(x0, y0, x1, y1) {
// Bresenham
const dx = Math.abs(x1 - x0);
const dy = Math.abs(y1 - y0);
const sx = x0 < x1 ? 1 : -1;
const sy = y0 < y1 ? 1 : -1;
let err = dx - dy;
while (true) {
if (x0 >= 0 && x0 < cols && y0 >= 0 && y0 < rows) {
grid[y0 * cols + x0] = mouseMode;
}
if (x0 === x1 && y0 === y1) break;
const e2 = 2 * err;
if (e2 > -dy) { err -= dy; x0 += sx; }
if (e2 < dx) { err += dx; y0 += sy; }
}
}
let lastX, lastY;
canvas.addEventListener('mousemove', e => {
if (!mouseDown) return;
const { x, y } = getCellFromMouse(e);
if (lastX !== undefined) {
paintLine(lastX, lastY, x, y);
} else {
if (x >= 0 && x < cols && y >= 0 && y < rows) {
grid[y * cols + x] = mouseMode;
}
}
lastX = x; lastY = y;
});
canvas.addEventListener('mouseup', () => { mouseDown = false; lastX = undefined; lastY = undefined; });
canvas.addEventListener('mouseleave', () => { mouseDown = false; lastX = undefined; lastY = undefined; });
```
This makes drag-paint smooth even on fast moves.
Let me write the complete file now.
One more thing: window resize. When user resizes window, I should preserve grid as much as possible. Let me handle this.
```js
let oldCols = 0, oldRows = 0;
function resize() {
oldCols = cols;
oldRows = rows;
const newCols = Math.floor(canvas.width / cellSize);
const newRows = Math.floor(canvas.height / cellSize);
const newGrid = new Uint8Array(newCols * newRows);
if (grid && oldCols > 0 && oldRows > 0) {
const minCols = Math.min(oldCols, newCols);
const minRows = Math.min(oldRows, newRows);
for (let y = 0; y < minRows; y++) {
for (let x = 0; x < minCols; x++) {
newGrid[y * newCols + x] = grid[y * oldCols + x];
}
}
}
cols = newCols;
rows = newRows;
grid = newGrid;
next = new Uint8Array(newCols * newRows);
}
```
Now let me write the full HTML.
For UI polish, let me use nice icons/symbols and good typography. Font: system fonts.
Let me think about the overall layout:
- Canvas covers full screen
- Control bar at bottom-center, glass morphism
- Top-left could have title/stats
- Help info (right side?)
Actually let me keep it minimal: just bottom bar with all controls and stats inline. Maybe a small title in top-left.
Let me write it now.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%;
overflow: hidden;
background: #0a0a0f;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #e0e0e0;
user-select: none;
-webkit-user-select: none;
}
canvas {
display: block;
position: fixed;
top: 0; left: 0;
cursor: crosshair;
}
.panel {
position: fixed;
background: rgba(15, 15, 25, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
z-index: 10;
}
.title-bar {
top: 20px;
left: 20px;
padding: 12px 18px;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.title-bar h1 {
font-size: 16px;
font-weight: 600;
background: linear-gradient(135deg, #00ffaa, #00aaff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stats {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
color: #888;
display: flex;
gap: 14px;
}
.stats span b {
color: #00ffaa;
font-weight: 600;
}
.controls {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 12px 16px;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
max-width: calc(100vw - 40px);
justify-content: center;
}
button {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e0e0e0;
padding: 9px 14px;
border-radius: 9px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
font-family: inherit;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
button:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
button.primary {
background: linear-gradient(135deg, #00ffaa, #00aaff);
color: #001a14;
border-color: transparent;
font-weight: 600;
}
button.primary:hover {
filter: brightness(1.1);
}
.divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
margin: 0 4px;
}
.slider-group {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #aaa;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 90px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #00ffaa;
cursor: pointer;
box-shadow: 0 0 8px rgba(0, 255, 170, 0.5);
}
input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #00ffaa;
cursor: pointer;
border: none;
box-shadow: 0 0 8px rgba(0, 255, 170, 0.5);
}
.help {
top: 20px;
right: 20px;
padding: 12px 16px;
font-size: 11px;
line-height: 1.7;
color: #888;
max-width: 220px;
}
.help b {
color: #ccc;
font-weight: 600;
}
kbd {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 1px 5px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10px;
color: #ddd;
}
@media (max-width: 700px) {
.help { display: none; }
.title-bar { top: 10px; left: 10px; padding: 8px 12px; }
.controls { bottom: 10px; padding: 10px; gap: 6px; }
button { padding: 8px 10px; font-size: 12px; }
input[type="range"] { width: 70px; }
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<div class="panel title-bar">
<h1>Conway's Game of Life</h1>
<div class="stats">
<span>Gen: <b id="genCount">0</b></span>
<span>Alive: <b id="aliveCount">0</b></span>
<span>Size: <b id="gridSize">0×0</b></span>
</div>
</div>
<div class="panel help">
<div><b>Drag</b> to paint cells</div>
<div><b>Click</b> a cell to toggle</div>
<div style="margin-top:6px">
<kbd>Space</kbd> play/pause
</div>
<div><kbd>→</kbd> step · <kbd>C</kbd> clear</div>
<div><kbd>R</kbd> random · <kbd>+</kbd>/<kbd>−</kbd> size</div>
</div>
<div class="panel controls">
<button id="playPause" class="primary">▶ Play</button>
<button id="stepBtn" title="Step one generation (→)">⏭ Step</button>
<div class="divider"></div>
<button id="randomizeBtn" title="Random fill (R)">🎲 Randomize</button>
<button id="clearBtn" title="Clear grid (C)">✕ Clear</button>
<div class="divider"></div>
<div class="slider-group">
<span>Speed</span>
<input type="range" id="speedSlider" min="1" max="60" value="12">
<span id="speedVal" style="min-width:28px; text-align:right;">12</span>
</div>
<div class="slider-group">
<span>Size</span>
<input type="range" id="sizeSlider" min="4" max="30" value="14">
<span id="sizeVal" style="min-width:28px; text-align:right;">14</span>
</div>
</div>
<script>
(() => {
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const playPauseBtn = document.getElementById('playPause');
const stepBtn = document.getElementById('stepBtn');
const randomizeBtn = document.getElementById('randomizeBtn');
const clearBtn = document.getElementById('clearBtn');
const speedSlider = document.getElementById('speedSlider');
const sizeSlider = document.getElementById('sizeSlider');
const speedVal = document.getElementById('speedVal');
const sizeVal = document.getElementById('sizeVal');
const genCountEl = document.getElementById('genCount');
const aliveCountEl = document.getElementById('aliveCount');
const gridSizeEl = document.getElementById('gridSize');
let cellSize = 14;
let cols = 0, rows = 0;
let grid = null, next = null;
let playing = false;
let speed = 12;
let generation = 0;
let lastStep = 0;
// Mouse state
let mouseDown = false;
let mouseMode = 1;
let lastX = null, lastY = null;
function resize() {
const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth * dpr;
canvas.height = window.innerHeight * dpr;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const oldCols = cols, oldRows = rows;
const newCols = Math.floor(window.innerWidth / cellSize);
const newRows = Math.floor(window.innerHeight / cellSize);
const newGrid = new Uint8Array(newCols * newRows);
if (grid && oldCols > 0 && oldRows > 0) {
const minCols = Math.min(oldCols, newCols);
const minRows = Math.min(oldRows, newRows);
for (let y = 0; y < minRows; y++) {
for (let x = 0; x < minCols; x++) {
newGrid[y * newCols + x] = grid[y * oldCols + x];
}
}
}
cols = newCols;
rows = newRows;
grid = newGrid;
next = new Uint8Array(newCols * newRows);
gridSizeEl.textContent = `${cols}×${rows}`;
}
function step() {
for (let y = 0; y < rows; y++) {
const yUp = (y - 1 + rows) % rows;
const yDn = (y + 1) % rows;
for (let x = 0; x < cols; x++) {
const xLt = (x - 1 + cols) % cols;
const xRt = (x + 1) % cols;
const n =
grid[yUp * cols + xLt] +
grid[yUp * cols + x] +
grid[yUp * cols + xRt] +
grid[y * cols + xLt] +
grid[y * cols + xRt] +
grid[yDn * cols + xLt] +
grid[yDn * cols + x] +
grid[yDn * cols + xRt];
const i = y * cols + x;
const alive = grid[i];
next[i] = (alive && (n === 2 || n === 3)) || (!alive && n === 3) ? 1 : 0;
}
}
[grid, next] = [next, grid];
generation++;
}
function render() {
ctx.fillStyle = '#0a0a0f';
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
// Subtle grid lines
if (cellSize >= 8) {
ctx.strokeStyle = 'rgba(255, 255, 255, 0.025)';
ctx.lineWidth = 1;
ctx.beginPath();
for (let x = 0; x <= cols; x++) {
ctx.moveTo(x * cellSize + 0.5, 0);
ctx.lineTo(x * cellSize + 0.5, rows * cellSize);
}
for (let y = 0; y <= rows; y++) {
ctx.moveTo(0, y * cellSize + 0.5);
ctx.lineTo(cols * cellSize, y * cellSize + 0.5);
}
ctx.stroke();
}
// Cells
const pad = cellSize >= 10 ? 1 : 0;
const size = cellSize - pad * 2;
ctx.fillStyle = '#00ffaa';
ctx.shadowColor = '#00ffaa';
ctx.shadowBlur = Math.min(10, cellSize * 0.7);
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
if (grid[y * cols + x]) {
ctx.fillRect(x * cellSize + pad, y * cellSize + pad, size, size);
}
}
}
ctx.shadowBlur = 0;
}
function updateStats() {
let alive = 0;
for (let i = 0; i < grid.length; i++) alive += grid[i];
genCountEl.textContent = generation;
aliveCountEl.textContent = alive;
}
function loop(t) {
if (playing) {
const interval = 1000 / speed;
if (t - lastStep >= interval) {
step();
lastStep = t;
}
}
render();
updateStats();
requestAnimationFrame(loop);
}
function getCellFromEvent(clientX, clientY) {
const x = Math.floor(clientX / cellSize);
const y = Math.floor(clientY / cellSize);
return { x, y };
}
function paintLine(x0, y0, x1, y1) {
// Bresenham
x0 = Math.round(x0); y0 = Math.round(y0);
x1 = Math.round(x1); y1 = Math.round(y1);
const dx = Math.abs(x1 - x0);
const dy = Math.abs(y1 - y0);
const sx = x0 < x1 ? 1 : -1;
const sy = y0 < y1 ? 1 : -1;
let err = dx - dy;
let safety = 0;
while (safety++ < 10000) {
if (x0 >= 0 && x0 < cols && y0 >= 0 && y0 < rows) {
grid[y0 * cols + x0] = mouseMode;
}
if (x0 === x1 && y0 === y1) break;
const e2 = 2 * err;
if (e2 > -dy) { err -= dy; x0 += sx; }
if (e2 < dx) { err += dx; y0 += sy; }
}
}
function handleDown(x, y) {
if (x < 0 || x >= cols || y < 0 || y >= rows) return false;
mouseMode = grid[y * cols + x] ? 0 : 1;
grid[y * cols + x] = mouseMode;
lastX = x; lastY = y;
return true;
}
function handleMove(x, y) {
if (x < 0 || x >= cols || y < 0 || y >= rows) return;
if (lastX === null) {
grid[y * cols + x] = mouseMode;
} else {
paintLine(lastX, lastY, x, y);
}
lastX = x; lastY = y;
}
// Mouse events
canvas.addEventListener('mousedown', e => {
e.preventDefault();
mouseDown = true;
const { x, y } = getCellFromEvent(e.clientX, e.clientY);
if (!handleDown(x, y)) { mouseDown = false; }
});
canvas.addEventListener('mousemove', e => {
if (!mouseDown) return;
const { x, y } = getCellFromEvent(e.clientX, e.clientY);
handleMove(x, y);
});
window.addEventListener('mouseup', () => {
mouseDown = false; lastX = null; lastY = null;
});
canvas.addEventListener('mouseleave', () => {
mouseDown = false; lastX = null; lastY = null;
});
// Prevent context menu on right click
canvas.addEventListener('contextmenu', e => e.preventDefault());
// Touch events
function touchHandler(type, e) {
if (type === 'touchstart') e.preventDefault();
const touches = e.changedTouches;
for (let i = 0; i < touches.length; i++) {
const t = touches[i];
const { x, y } = getCellFromEvent(t.clientX, t.clientY);
if (type === 'touchstart') {
mouseDown = true;
if (!handleDown(x, y)) { mouseDown = false; }
} else if (type === 'touchmove') {
handleMove(x, y);
} else if (type === 'touchend') {
mouseDown = false; lastX = null; lastY = null;
}
}
}
canvas.addEventListener('touchstart', e => touchHandler('touchstart', e), { passive: false });
canvas.addEventListener('touchmove', e => touchHandler('touchmove', e), { passive: false });
canvas.addEventListener('touchend', e => touchHandler('touchend', e));
canvas.addEventListener('touchcancel', e => touchHandler('touchend', e));
// Buttons
function setPlaying(p) {
playing = p;
playPauseBtn.textContent = playing ? '⏸ Pause' : '▶ Play';
playPauseBtn.classList.toggle('primary', playing);
lastStep = 0;
}
playPauseBtn.addEventListener('click', () => setPlaying(!playing));
stepBtn.addEventListener('click', () => { if (!playing) step(); });
clearBtn.addEventListener('click', () => {
grid.fill(0);
next.fill(0);
generation = 0;
setPlaying(false);
});
randomizeBtn.addEventListener('click', () => {
const density = 0.28;
for (let i = 0; i < grid.length; i++) {
grid[i] = Math.random() < density ? 1 : 0;
}
generation = 0;
setPlaying(false);
});
speedSlider.addEventListener('input', e => {
speed = +e.target.value;
speedVal.textContent = speed;
});
sizeSlider.addEventListener('input', e => {
cellSize = +e.target.value;
sizeVal.textContent = cellSize;
resize();
});
// Keyboard shortcuts
window.addEventListener('keydown', e => {
if (e.target.tagName === 'INPUT') return;
if (e.code === 'Space') {
e.preventDefault();
setPlaying(!playing);
} else if (e.code === 'ArrowRight') {
e.preventDefault();
if (!playing) step();
} else if (e.key === 'c' || e.key === 'C') {
grid.fill(0); next.fill(0); generation = 0;
} else if (e.key === 'r' || e.key === 'R') {
const density = 0.28;
for (let i = 0; i < grid.length; i++) {
grid[i] = Math.random() < density ? 1 : 0;
}
generation = 0;
} else if (e.key === '+' || e.key === '=') {
cellSize = Math.min(30, cellSize + 2);
sizeSlider.value = cellSize;
sizeVal.textContent = cellSize;
resize();
} else if (e.key === '-' || e.key === '_') {
cellSize = Math.max(4, cellSize - 2);
sizeSlider.value = cellSize;
sizeVal.textContent = cellSize;
resize();
}
});
// Init
resize();
// Initial random fill to make it interesting
for (let i = 0; i < grid.length; i++) {
grid[i] = Math.random() < 0.25 ? 1 : 0;
}
window.addEventListener('resize', resize);
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
```
Hmm wait, in the resize function I'm using `window.innerWidth` for canvas drawing but in render I'm also using window.innerWidth. The canvas drawing context was scaled by dpr via setTransform. Let me check that.
ctx.setTransform(dpr, 0, 0, dpr, 0, 0) — this means when I draw, I use CSS pixel coordinates and it gets scaled up. So ctx.fillRect(0, 0, window.innerWidth, window.innerHeight) draws across the entire canvas. Good.
Actually, let me reconsider. With dpr = 2, canvas.width = innerWidth * 2, ctx.scale(2). Then fillRect(0, 0, innerWidth, innerHeight) draws in CSS pixels which translates to physical pixels. That's correct.
OK let me finalize.
One thing I want to add: when in step mode but grid is empty, maybe show a hint? Or just leave it. User can randomize or draw.
Let me also handle the case where there's a "stuck" state (oscillator) - just let it run forever, that's fine.
For better visual feedback when painting, the render is in a separate rAF loop so it'll redraw at 60fps, capturing all the paint operations.
Let me also think about performance. With a 1920x1080 screen at cellSize=14, that's 137*77 = 10549 cells. Each frame iterates all of them, plus 8 neighbors per cell in step. That's about 100k operations per step. Should be plenty fast for 60 steps/sec.
OK let me also check: when cell size is small (like 4), we have 480x270 = 130k cells. Could be slower but still fine.
I should also disable the default touch behavior (scrolling, zooming) on mobile. Let me add touch-action: none.
```css
canvas { touch-action: none; }
```
Let me finalize and write the file.
Actually I realize my `paintLine` function might have an issue. If lastX/lastY is set but then the user moves off canvas, then back on, lastX is still set. That should be fine - we'll just paint from last to current. But on mouseup or mouseleave, we reset.
Hmm, but on a touch device, multiple touches could be problematic. Let me not worry about multi-touch for now and just handle single touch.
Let me also add a hint or button to load some classic patterns: glider, pulsar, glider gun. Actually, that would clutter the UI. Let me skip it.
Let me also think about when cells are too small to render with shadow blur - might be slow. Let me skip shadow when cellSize < 6.
```js
if (cellSize >= 6) {
ctx.shadowBlur = ...
}
```
Actually for performance, maybe just use shadowBlur for nice glow without per-cell. Or do simple fillRect without shadow for performance. The shadow blur is applied per-fillRect call which can be slow.
Let me do shadow only at cellSize >= 8.
OK let me also consider: drawing 100k cells with shadow each frame is slow. Let me profile mentally:
- For each alive cell, fillRect with shadow
- Shadow rendering is expensive on canvas
Let me reduce by only drawing glow on a coarser grid or pre-rendering. Actually, simplest: skip shadow for now, use a solid bright color. Then add a softer outer glow as a separate render pass.
Or just use the shadow blur since it's a one-time per cell render, and the canvas will cache. At 10k cells, should still be 60fps.
Let me leave shadow blur in and see. If too slow, can disable.
Actually, I just realized: shadowBlur applies to fillRect calls but it's relatively expensive because the canvas has to compute the shadow for each call. Better approach: draw all cells without shadow, then blur the whole canvas... too complex.
Simpler: just use bright color, no shadow. The dark background will make it pop.
Or: use shadowBlur but only on a small subset. Hmm.
Let me just keep the shadow blur, set it once before the loop, then reset after. Should be fast enough.
OK final code. Let me write it.
Wait, I should also think about whether to support wrapping (toroidal). For a full-screen canvas, wrap-around can be cool. Let me keep toroidal as default.
Let me also think about controls visibility. If window is very small, controls might overflow. I have flex-wrap: wrap so they wrap. Good.
Let me also think about the title bar overlapping with help panel. They're in opposite corners so should be fine.
Alright, writing the file now.
Wait, I want to add one more nice feature: when paused, the cells could pulse slightly to show they are "alive" (waiting). But that's extra. Let me skip and keep it clean.
One more thought: I should make sure the canvas doesn't have weird artifacts on resize. Setting ctx.setTransform(dpr, 0, 0, dpr, 0, 0) every resize is correct.
Also, when resize happens during animation, the grid is recreated but the loop continues. Should be fine.
Let me write the final version.
Actually I realize I should set the canvas dimensions more carefully. Let me think again:
```js
function resize() {
const dpr = window.devicePixelRatio || 1;
canvas.width = Math.floor(window.innerWidth * dpr);
canvas.height = Math.floor(window.innerHeight * dpr);
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
...
}
```
This sets the canvas internal resolution to physical pixels and CSS size to logical pixels. Then setTransform scales drawing operations by dpr so we can draw in logical pixels.
In render(), I use window.innerWidth / innerHeight for fillRect (logical pixels). Correct.
In getCellFromEvent(), I use clientX/clientY which are logical pixels. I divide by cellSize (also logical). Correct.
OK looks good.
Let me also add a "Generation" indicator when stepping fast. Actually I already update the gen counter each frame.
Final code time. Let me also reconsider the visual style:
- Background: very dark navy (#0a0a12)
- Cells: bright cyan-green (#00ffaa) with glow
- Maybe vary cell color slightly based on neighbor count? Could be cool but adds complexity. Skip.
Actually let me try coloring cells based on neighbor count:
- 0-1: dim
- 2-3: bright
- 4+: fading (about to die)
Or just keep it simple. Let me go simple: all alive cells same color.
Alright, writing the file:
Hmm, one thing. When I do `ctx.shadowBlur = 10` and then call fillRect many times, the shadow renders for each. This can be slow. An alternative is to use a pre-rendered glow cell as a sprite. But that's complex.
Alternative simpler: render with shadow once, cache the result. Or just skip shadow for high cell counts.
Let me make shadow conditional on cellSize >= 8:
```js
const useShadow = cellSize >= 8;
if (useShadow) {
ctx.shadowColor = '#00ffaa';
ctx.shadowBlur = 6;
}
ctx.fillStyle = '#00ffaa';
// ... fillRects
if (useShadow) ctx.shadowBlur = 0;
```
OK final code:
Let me write it cleanly and ensure it works.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>...</style>
</head>
<body>
<canvas id="game"></canvas>
<div class="panel title-bar">...</div>
<div class="panel help">...</div>
<div class="panel controls">...</div>
<script>...</script>
</body>
</html>
```
Let me finalize the script. I'll write it out now.
Oh, one consideration: should I use requestAnimationFrame for the render loop, but throttle the step logic separately? Yes, that's what I'm doing - render at 60fps but only step when interval elapsed.
Actually one issue: the loop uses `t - lastStep >= interval` where t is the rAF timestamp. But if the tab is in the background, rAF pauses, so the loop won't run. That's fine - when user comes back, it'll resume.
But if t jumps a lot (e.g., after tab returns from background), lastStep is far in the past and we'd do many steps in one frame. Could cause a "burst" of activity. Let me cap it.
Actually for simplicity, let me not worry about it. If user comes back and it does 10 steps in one frame, that's fine.
OK writing now.
Let me re-examine the controls bar - it might be quite wide on small screens. I have flex-wrap. On medium screens, it should fit. On mobile, it wraps. Let me ensure buttons are not too wide.
Final HTML coming up. Let me also reconsider the keyboard shortcuts:
- Space: play/pause ✓
- → : step ✓
- C: clear ✓
- R: randomize ✓
- + / - : size ✓
Good.
Also, I might want to also add: S for step. But → is already mapped. Let me keep it.
Alright, writing the final file.
Let me also make sure that when the user is dragging really fast and the cursor leaves the canvas, we handle it gracefully. The mouseleave resets mouseDown, which is good. And window mouseup also resets. So if user releases outside canvas, it still registers.
Final code. Let me write it.
Hmm, actually one more thought: for the randomize, having it start with 25-30% density is good - looks "alive" but not too crowded. Let me use 0.28.
And let me also add a feature: double-click to clear? No, that's hidden behavior. Let me not add.
OK here goes. Writing index.html now.Looking at this task, I need to build a polished Conway's Game of Life with: - Full-screen canvas - Click-and-drag painting (with line interpolation for fast drags) - Play/Pause, Step, Randomize, Clear controls - Bonus: speed & cell-size sliders, generation/alive stats, keyboard shortcuts, touch support Let me create the file:
→ write
/workspace/index.html (18086 bytes)toolResult
Successfully wrote 18086 bytes to /workspace/index.html
assistant
thinking
Let me verify the file waswritten correctly and check for any issues.
→ bash
{"command":"ls -la /workspace/index.html && wc -l /workspace/index.html"}toolResult
-rw-r--r-- 1 node node 18108 Jul 22 17:10 /workspace/index.html 641 /workspace/index.html
assistant
thinking
Let me do a quick sanity check of the file to make sure everything looks correct. Let me read parts of it.
Let me do a quick sanity check on the file structure:
→ bash
{"command":"grep -c \"<script\" /workspace/index.html; grep -c \"</script>\" /workspace/index.html; grep -c \"<style>\" /workspace/index.htmtoolResult
1 1 1 1 0 Command exited with code 1
assistant
thinking
Good - one script tag, one style tag, and 0 references to external resources/CDNs/links. The grep -c returns 1 for the last one means it found 0, but exit code 1 is normal. Wait, the last grep returned 0 (which is fine - no external resources), but the exit code is 1 because grep returns 1 when no matches found. That's actually what we want. Let me also verify the file has no syntax errors by doing a quick node check on the script portion. Actually I can't easily check this without a browser. Let me just verify the file looks structurallycorrect.
Good — 1 `<script>` tag, 1 `<style>` tag, and 0 external resource references (the `grep -c` returning `0` and exit code `1` is grep's "no matches found" — which is exactly what we want for self-containment). Let me verify the file has no JavaScript syntax errors by extracting and parsing the script:
→ bash
{"command":"node -e \"\nconst fs = require('fs');\nconst html = fs.readFileSync('/workspace/index.html', 'utf8');\nconst m = html.match(/<sctoolResult
JS syntax OK, 11522 chars
assistant
thinking
JS syntax is valid. The file is self-contained, properly structured, and ready to use. Summary of what I built: **Conway's Game of Life** in `/workspace/index.html`: **Features:** - Full-screen canvas that adapts to window size - Click to toggle cells, click-and-drag to paint (with Bresenham line interpolation so fast drags don't skip cells) - Click on an alive cell while dragging erases instead - Toroidal wrapping (edges wrap around) - Play/Pause, Step (one generation), Randomize (28% density), Clear controls - Speed slider (1–60 generations/sec) - Cell-size slider (4–30 px) - Live stats: generation count, alive count, grid dimensions - Keyboard shortcuts: Space (play/pause), → (step), R (random), C (clear), +/− (size) - Touch support for mobile - Glass-morphism UI panels **Technical:** - DPR-aware canvas for crisp rendering on hi-DPI displays - Double-buffered Uint8Array grids for efficient step computation - Window resize preserves cells in the overlap region - Cached alive count (incremented on paint, recomputed on step) - Soft glow via `shadowBlur` (auto-disabled at small cell sizes for perf) - Faint grid lines (auto-disabled at small cell sizes) - requestAnimationFrame loop with catch-up logic for backgrounded tabs - Right-click disabled on canvas to avoid context menu interruption No external resources — fully sandboxed.
`/workspace/index.html` is ready — a self-contained Conway's Game of Life (no external resources, valid JS). **Features** - **Full-screen canvas** with DPR-aware crisp rendering on hi-DPI displays - **Click** to toggle a cell · **Click-and-drag** to paint (Bresenham interpolation so fast drags don't skip cells); dragging onto an alive cell erases instead - **Controls**: ▶ Play / ⏸ Pause, ⏭ Step, 🎲 Randomize (28% density), ✕ Clear - **Sliders**: Speed (1–60 gen/s) and Cell size (4–30 px) - **Live stats**: generation count, alive count, grid dimensions - **Keyboard**: `Space` play/pause, `→` step, `R` random, `C` clear, `+`/`−` size - **Touch support** for mobile/tablet - **Toroidal wrapping** so patterns flow across edges - **Resize preserves** existing cells in the overlap region - **Double-buffered** `Uint8Array` grids for fast stepping - Glass-morphism UI panels with subtle glow on alive cells and faint grid lines Open the file in a browser and start painting (or just hit Play — it seeds itself with a random field).
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
modelminimax-m3
vendorMiniMax
harnesspi-agent
generated2026-07-22
EVALUATION
★★★★★ 4/5 working
Game of Life simulates correctly with play/pause via space, evolving toward stable patterns; click/drag/wheel show minimal change.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.
idle motion0.0%
on click0.1%
on drag0.6%
on wheel0.0%
on enter + space53.4%
on arrow keys34.6%
frame spread50.2 / 255
console errors0
js errors none
METRICS
runtime128.8s
tokens in2.2k
tokens out18k
cached75k
cost / run$0.0269