Design Atlas
한국어
∿ Generative art

Conway's Game of Life

라이프 게임

A cellular automaton where patterns move and reproduce on their own, from nothing but a live/dead state and a neighbour-count rule. Devised by mathematician John Conway in 1970.

Also known as: Conway’s Game of LifeCellular automaton
···
js
const c = document.createElement('canvas');
document.body.appendChild(c);
c.style.width = '100%'; c.style.height = '100%';
const ctx = c.getContext('2d');
const cs = getComputedStyle(document.documentElement);
const ACCENT = cs.getPropertyValue('--accent').trim() || '#5b5bf7';
let w, h, cols, rows, cell = 9, grid;
function seed() {
  grid = new Uint8Array(cols * rows);
  for (let i = 0; i < grid.length; i++) grid[i] = Math.random() < 0.28 ? 1 : 0;
}
function resize() {
  const dpr = Math.min(devicePixelRatio || 1, 2);
  w = innerWidth; h = innerHeight;
  c.width = w * dpr; c.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  cols = Math.floor(w / cell); rows = Math.floor(h / cell);
  seed();
}
addEventListener('resize', resize);
resize();

function at(x, y) { return grid[((y + rows) % rows) * cols + ((x + cols) % cols)]; }
function step() {
  const next = new Uint8Array(cols * rows);
  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 || dy) n += at(x + dx, y + dy); }
    const alive = at(x, y);
    next[y * cols + x] = alive ? (n === 2 || n === 3 ? 1 : 0) : (n === 3 ? 1 : 0);
  }
  grid = next;
}
function draw() {
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = ACCENT;
  for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) if (grid[y * cols + x]) ctx.fillRect(x * cell, y * cell, cell - 1.5, cell - 1.5);
}
draw();
let last = 0, gens = 0;
(function loop(t) {
  if (t - last > 110) {
    step(); draw(); last = t; gens++;
    if (gens > 90) { seed(); gens = 0; } // 패턴이 안정되면 다시 무작위로
  }
  requestAnimationFrame(loop);
})(0);

Every cell in a grid is either alive or dead, and its next state depends solely on how many of its 8 neighbours are alive. A live cell survives with 2 or 3 live neighbours; a dead cell is born with exactly 3; everything else dies (from overcrowding or isolation). That's the entire rule set, yet it alone produces still shapes, patterns that blink on a fixed period, and even "gliders" that travel across the grid forever.

Introduced in Scientific American in 1970, it caused a stir for showing that something as complex as "life-like" behaviour could emerge from such a tiny rule — and it became the piece that introduced cellular automata and the concept of emergence to a wide audience. It was later proven Turing complete: given enough grid, the rule alone can compute anything a computer can.

Designers use it for rule-driven, ever-changing background textures, decorative loading-screen animation, and "living grid" interaction concepts.

When to use

Use it for a rule-driven, ever-shifting background or loading-screen decoration. Seed a known pattern (a glider gun, say) instead of randomness to guarantee specific motion.