// 3D Game of Life // After the Nature of Code chapter 7 sketch (Daniel Shiffman), which runs a // 30x30x30 WEBGL lattice. Here it is a 16^3 lattice framed for a 405x720 // phone. All four of the original's cell colours are drawn: the three live // states are rebaked each generation into one geometry apiece, and the dead // cells are a single static lattice baked once at startup. const N = 16; // cells per axis const SIZE = N * N * N; // Survive with 4-7 live neighbours, born with exactly 6 -- a widened form of // Carter Bays' 5766 rule. The book's sketch reuses the flat B3/S23 rule, but // against 26 neighbours instead of 8 that extinguishes a random soup in a // generation or two. This one settles into a slow, permanent boil. const SURVIVE = [4, 5, 6, 7]; const BORN = [6]; const STEP_FRAMES = 7; // frames between generations const AUTO_SPIN = 0.0022; // idle rotation, radians per frame const SPIN_RESUME_MS = 2400; // idle time before auto spin picks back up // The four cell colours of the original sketch. Dead cells are the one the // book draws as fill(255, 80); at that weight sixteen stacked layers of them // fog the lattice into a solid white block on a small screen, so here they // are lighter and smaller -- a faint scaffold rather than a wall. Raise // GHOST_ALPHA toward 80 and GHOST_SCALE toward 0.86 for the book's density. const GHOST_ALPHA = 14; const GHOST_SCALE = 0.4; // dead cell size, against 0.86 for live cells const PALETTE = { born: [0, 70, 255, 170], alive: [35, 35, 45, 30], dying: [255, 40, 40, 120], dead: [255, 255, 255, GHOST_ALPHA], }; let state, previous, next; let cw; // cell width in pixels let generation = 0; let population = 0; let quietSteps = 0; // generations with nothing changing let spin = 0; let lastTouchMs = -Infinity; let pointerDown = null; let hud, hint; let baked = { born: null, alive: null, dying: null }; let ghost = null; // static lattice of dead cells let canBake = false; function setup() { const c = createCanvas(windowWidth, windowHeight, WEBGL); state = new Uint8Array(SIZE); previous = new Uint8Array(SIZE); next = new Uint8Array(SIZE); hud = document.getElementById("hud"); hint = document.getElementById("hint"); canBake = typeof buildGeometry === "function" && typeof freeGeometry === "function"; noStroke(); layout(); buildGhost(); seed(); bindPointer(c.elt); } function layout() { // Fit the cube's diagonal inside the short edge of the viewport. cw = (0.78 * min(width, height)) / (N * Math.sqrt(3)); } function windowResized() { resizeCanvas(windowWidth, windowHeight); layout(); buildGhost(); rebuild(); } function index(x, y, z) { return (x * N + y) * N + z; } // A dense blob in the middle: the rule needs a solid core to catch, and a // centred seed leaves the lattice room to grow outward. function seed() { state.fill(0); const c = (N - 1) / 2; const r = N * 0.35; for (let x = 1; x < N - 1; x++) { for (let y = 1; y < N - 1; y++) { for (let z = 1; z < N - 1; z++) { if (dist(x, y, z, c, c, c) < r && random() < 0.45) state[index(x, y, z)] = 1; } } } previous.set(state); generation = 0; quietSteps = 0; countPopulation(); rebuild(); } function countPopulation() { let n = 0; for (let i = 0; i < SIZE; i++) n += state[i]; population = n; } function step() { previous.set(state); next.set(state); let changed = 0; // Skip the outer shell so neighbour lookups stay in bounds. for (let x = 1; x < N - 1; x++) { for (let y = 1; y < N - 1; y++) { for (let z = 1; z < N - 1; z++) { let sum = 0; for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { for (let k = -1; k <= 1; k++) { sum += previous[index(x + i, y + j, z + k)]; } } } const here = previous[index(x, y, z)]; sum -= here; let now = here; if (here === 1) { now = SURVIVE.includes(sum) ? 1 : 0; } else if (BORN.includes(sum)) { now = 1; } if (now !== here) changed++; next[index(x, y, z)] = now; } } } state.set(next); generation++; countPopulation(); // Safety net: restart if the lattice ever dies out or freezes solid. quietSteps = changed === 0 ? quietSteps + 1 : 0; if (population < 6 || quietSteps > 24) { seed(); } else { rebuild(); } } function setFill(key) { const c = PALETTE[key]; fill(c[0], c[1], c[2], c[3]); } const MATCH = { born: (p, s) => p === 0 && s === 1, alive: (p, s) => p === 1 && s === 1, dying: (p, s) => p === 1 && s === 0, }; // The dead cells never move, only their membership changes -- so instead of // rebaking 4096 boxes every generation, the whole lattice is baked once and // drawn as one mesh. A dead cell sitting under a live one is hidden anyway: // at GHOST_SCALE it fits entirely inside the live cell's larger box, whose // nearer faces win the depth test. function buildGhost() { if (!canBake) return; // per-cell fallback cannot afford 4096 more boxes if (ghost) { freeGeometry(ghost); ghost = null; } const side = cw * GHOST_SCALE; const off = ((N - 1) / 2) * cw; setFill("dead"); try { const g = buildGeometry(() => { for (let x = 0; x < N; x++) { for (let y = 0; y < N; y++) { for (let z = 0; z < N; z++) { const px = x * cw - off; const py = y * cw - off; const pz = z * cw - off; translate(px, py, pz); box(side); translate(-px, -py, -pz); } } } }); ghost = g && g.vertices && g.vertices.length ? g : null; } catch (e) { ghost = null; } } // Bake one generation into three static meshes, one per colour. Rebuilding // costs a little every seventh frame and buys three draw calls per frame // instead of one per cell. // // The fill has to be set *before* buildGeometry: p5 copies the current fill // into the mesh as vertex colours, and a mesh carrying vertex colours ignores // whatever fill is active when it is later drawn. Baking all three under one // fill is what flattened every cell to a single colour. function rebuild() { if (!canBake) return; for (const key of Object.keys(baked)) { if (baked[key]) { freeGeometry(baked[key]); baked[key] = null; } try { setFill(key); const g = buildGeometry(() => emit(MATCH[key])); baked[key] = g && g.vertices && g.vertices.length ? g : null; } catch (e) { // No baking on this renderer -- fall back to drawing cell by cell. canBake = false; baked = { born: null, alive: null, dying: null }; return; } } } function emit(match) { const side = cw * 0.86; const off = ((N - 1) / 2) * cw; for (let x = 0; x < N; x++) { for (let y = 0; y < N; y++) { for (let z = 0; z < N; z++) { const i = index(x, y, z); if (!match(previous[i], state[i])) continue; const px = x * cw - off; const py = y * cw - off; const pz = z * cw - off; translate(px, py, pz); box(side); translate(-px, -py, -pz); } } } } function draw() { background(255); // Before step(), so nothing baked this frame collects stroke edges. noStroke(); if (frameCount % STEP_FRAMES === 0) step(); orbitControl(1.4, 1.4, 0.15); if (!pointerDown && millis() - lastTouchMs > SPIN_RESUME_MS) spin += AUTO_SPIN; rotateX(-0.35); rotateY(spin); // A baked mesh carries its own colour as vertex colours, but the fill is // still what switches GL blending on for that alpha -- so set it either way. for (const key of ["alive", "born", "dying"]) { setFill(key); if (canBake) { if (baked[key]) model(baked[key]); } else { emit(MATCH[key]); } } // Dead cells last: translucent geometry still writes depth, so drawing the // full lattice first would depth-reject every live cell behind it. if (ghost) { setFill("dead"); model(ghost); } if (frameCount % 6 === 0) { hud.textContent = `gen ${nf(generation, 3)} · pop ${nf(population, 3)}`; } } // Tap to reseed, drag to orbit. Pointer events keep the two apart without // fighting orbitControl, which reads p5's own mouse and touch state. function bindPointer(el) { el.addEventListener("pointerdown", (e) => { pointerDown = { x: e.clientX, y: e.clientY, t: performance.now() }; lastTouchMs = millis(); if (hint) hint.style.opacity = "0"; }); el.addEventListener("pointerup", (e) => { lastTouchMs = millis(); if (!pointerDown) return; const moved = Math.hypot(e.clientX - pointerDown.x, e.clientY - pointerDown.y); const held = performance.now() - pointerDown.t; pointerDown = null; if (moved < 12 && held < 400) seed(); }); el.addEventListener("pointercancel", () => { pointerDown = null; }); }