AI 3D Game of Life - Conway's Automata in Space

This sketch creates a 3D cellular automaton using Conway's Game of Life rules extended to three dimensions. A rotating 10x10x10 cube grid displays living cells as neon green boxes, with each cell's survival determined by counting its 26 neighbors in 3D space. The simulation evolves every 15 frames, creating a mesmerizing rotating pattern of life and death.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

3D GraphicsCellular AutomataConway's Game of Life3D TransformationsNested loopsArray indexingNeighbor countingConditional logicAnimation timing

🔄 Code Flow

Code flow showing idx, setup, randomize, draw, step, mousepressed, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] click setup href "#fn-setup" setup --> webgl-canvas[3D Canvas Creation] click webgl-canvas href "#sub-webgl-canvas" setup --> grid-arrays[Grid Array Allocation] click grid-arrays href "#sub-grid-arrays" setup --> counter-element[Counter Display Setup] click counter-element href "#sub-counter-element" setup --> randomize[randomize] click randomize href "#fn-randomize" randomize --> random-loop[Random Cell Initialization] click random-loop href "#sub-random-loop" random-loop --> setup-drawing[Drawing Setup] click setup-drawing href "#sub-setup-drawing" setup-drawing --> draw[draw loop] draw --> rotation-animation[Rotation Animation] click rotation-animation href "#sub-rotation-animation" draw --> center-translation[Grid Centering] click center-translation href "#sub-center-translation" draw --> render-loop[Cell Rendering Loop] click render-loop href "#sub-render-loop" render-loop --> draw-alive-cells[Draw Living Cells] click draw-alive-cells href "#sub-draw-alive-cells" draw-alive-cells --> step-timing[Generation Update Timing] click step-timing href "#sub-step-timing" step-timing --> counter-update[Display Counter] click counter-update href "#sub-counter-update" step-timing --> step[step] click step href "#fn-step" step --> cell-iteration[Cell Iteration Loop] click cell-iteration href "#sub-cell-iteration" cell-iteration --> neighbor-counting[Neighbor Counting Loop] click neighbor-counting href "#sub-neighbor-counting" neighbor-counting --> center-exclusion[Exclude Center Cell] click center-exclusion href "#sub-center-exclusion" center-exclusion --> boundary-check[Boundary Validation] click boundary-check href "#sub-boundary-check" boundary-check --> survival-rules[Game of Life Rules] click survival-rules href "#sub-survival-rules" survival-rules --> grid-swap[Generation Swap] click grid-swap href "#sub-grid-swap" grid-swap --> draw draw --> mousepressed[mousePressed] click mousepressed href "#fn-mousepressed" mousepressed --> reset-grid[Grid Randomization] click reset-grid href "#sub-reset-grid" reset-grid --> reset-counter[Reset Generation Counter] click reset-counter href "#sub-reset-counter" reset-counter --> draw draw --> windowresized[windowResized] click windowresized href "#fn-windowresized" windowresized --> canvas-resize[Canvas Resize] click canvas-resize href "#sub-canvas-resize" canvas-resize --> draw

📝 Code Breakdown

`idx(x, y, z)`

This is a crucial helper function for this sketch. Since JavaScript arrays are 1D, we need a way to map 3D coordinates to 1D indices. The formula works like converting a 3D address into a single number: think of it as stacking N×N grids on top of each other, then finding the position within that stack.

function idx(x, y, z) { return x + N * (y + N * z); }

🔧 Subcomponents:

calculation 3D to 1D Index Conversion return x + N * (y + N * z);

Converts 3D coordinates (x, y, z) into a single index for the 1D array, enabling storage of 3D data in a flat array

Line by Line:

return x + N * (y + N * z);: Calculates a unique index by treating the 3D grid as layers. Each z-layer contains N×N cells, each row contains N cells. This formula maps any (x,y,z) coordinate to a unique position in a 1D array.

`setup()`

setup() runs once when the sketch starts. It initializes the canvas in WEBGL mode (needed for 3D), creates the two grids we need for the cellular automaton, and sets up the UI element to display generations.

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  grid = new Array(N * N * N); next = new Array(N * N * N);
  randomize();
  counterP = createP(''); counterP.id('counter');
}

🔧 Subcomponents:

initialization 3D Canvas Creation createCanvas(windowWidth, windowHeight, WEBGL);

Creates a full-window 3D canvas using WEBGL renderer for 3D graphics and transformations

initialization Grid Array Allocation grid = new Array(N * N * N); next = new Array(N * N * N);

Creates two arrays of size 1000 (10×10×10) to store current and next generation states

initialization Counter Display Setup counterP = createP(''); counterP.id('counter');

Creates a paragraph element to display the generation count on screen

Line by Line:

createCanvas(windowWidth, windowHeight, WEBGL);: Creates a canvas that fills the entire window using WEBGL mode, which enables 3D transformations like rotate and translate
grid = new Array(N * N * N);: Creates an array with 1000 elements (10×10×10) to store the current state of all cells. Each element will be true (alive) or false (dead)
next = new Array(N * N * N);: Creates a second array to store the next generation's state. We need two arrays so we can calculate the next state without overwriting the current one
randomize();: Calls the randomize function to fill the grid with random living and dead cells
counterP = createP(''); counterP.id('counter');: Creates a paragraph element and gives it the ID 'counter' so CSS can style it as the generation display

`randomize()`

This function populates the grid with a random initial state. The 0.3 threshold means approximately 30% of cells start alive, which is a good balance for Game of Life to produce interesting patterns without being too sparse or too dense.

function randomize() {
  for (let i = 0; i < grid.length; i++) grid[i] = random() < 0.3;
}

🔧 Subcomponents:

for-loop Random Cell Initialization for (let i = 0; i < grid.length; i++) grid[i] = random() < 0.3;

Loops through every cell in the grid and randomly sets it to alive (true) with 30% probability or dead (false) with 70% probability

Line by Line:

for (let i = 0; i < grid.length; i++): Loops through all 1000 cells in the grid (grid.length = 1000)
grid[i] = random() < 0.3;: Sets each cell to true if random() returns a value less than 0.3 (30% chance), otherwise false. This creates a random starting pattern

`draw()`

draw() runs 60 times per second. It handles all rendering: clearing the canvas, rotating the view, drawing all living cells as green boxes, and updating the generation counter. The step() function is called every 15 frames to evolve the cellular automaton, creating a smooth visual effect while keeping computation manageable.

function draw() {
  background(0); noStroke(); fill(0, 255, 100);
  angle += 0.01; rotateX(angle * 0.7); rotateY(angle);
  translate(-S * (N - 1) / 2, -S * (N - 1) / 2, -S * (N - 1) / 2);
  for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
    if (grid[idx(x, y, z)]) { push(); translate(x * S, y * S, z * S); box(S * 0.8); pop(); }
  }
  if (frameCount % 15 == 0) step();
  counterP.html('Generation: ' + gens);
}

🔧 Subcomponents:

initialization Drawing Setup background(0); noStroke(); fill(0, 255, 100);

Clears canvas to black, removes outlines from shapes, and sets fill color to neon green

calculation Rotation Animation angle += 0.01; rotateX(angle * 0.7); rotateY(angle);

Continuously increments the angle and rotates the entire grid around X and Y axes for 3D visualization

calculation Grid Centering translate(-S * (N - 1) / 2, -S * (N - 1) / 2, -S * (N - 1) / 2);

Moves the grid so it's centered on the canvas instead of starting at the origin

for-loop Cell Rendering Loop for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++)

Triple nested loop that iterates through every cell in the 3D grid

conditional Draw Living Cells if (grid[idx(x, y, z)]) { push(); translate(x * S, y * S, z * S); box(S * 0.8); pop(); }

For each living cell, draws a neon green box at its 3D position

conditional Generation Update Timing if (frameCount % 15 == 0) step();

Updates the cellular automaton every 15 frames (approximately 4 times per second at 60 FPS)

calculation Display Counter counterP.html('Generation: ' + gens);

Updates the on-screen generation counter to show current generation number

Line by Line:

background(0);: Fills the entire canvas with black, clearing the previous frame
noStroke();: Removes outlines from all drawn shapes, so boxes appear as solid filled cubes
fill(0, 255, 100);: Sets the fill color to neon green (RGB: 0 red, 255 green, 100 blue)
angle += 0.01;: Increments the angle by 0.01 radians each frame, creating continuous rotation
rotateX(angle * 0.7);: Rotates the entire scene around the X axis by angle * 0.7 radians (slower rotation on X axis)
rotateY(angle);: Rotates the entire scene around the Y axis by angle radians (faster rotation on Y axis)
translate(-S * (N - 1) / 2, -S * (N - 1) / 2, -S * (N - 1) / 2);: Moves the origin so the grid is centered. Without this, the grid would be off-center and hard to see
for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++): Three nested loops that iterate through all 1000 cells (10×10×10), visiting each x, y, z coordinate
if (grid[idx(x, y, z)]): Checks if the cell at position (x, y, z) is alive (true)
push();: Saves the current transformation state before moving to this cell's position
translate(x * S, y * S, z * S);: Moves to the 3D position where this cell should be drawn (S=30 pixels apart)
box(S * 0.8);: Draws a cube with size 24 pixels (30 * 0.8), slightly smaller than the grid spacing to show gaps
pop();: Restores the transformation state so the next cell isn't affected by this cell's translation
if (frameCount % 15 == 0) step();: Every 15 frames (when frameCount is divisible by 15), calls step() to evolve the automaton
counterP.html('Generation: ' + gens);: Updates the HTML text of the counter element to show the current generation number

`step()`

step() is the heart of the cellular automaton. It applies Conway's Game of Life rules in 3D: for each cell, it counts how many of its 26 neighbors are alive, then determines if the cell should be alive or dead in the next generation. The rules are modified for 3D (different thresholds than 2D) to create interesting patterns. We use two arrays (grid and next) so we can calculate the entire next generation before updating the display.

function step() {
  for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
    let n = 0, i = idx(x, y, z);
    for (let dz = -1; dz <= 1; dz++) for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
      if (dx || dy || dz) {
        let nx = x + dx, ny = y + dy, nz = z + dz;
        if (nx >= 0 && nx < N && ny >= 0 && ny < N && nz >= 0 && nz < N && grid[idx(nx, ny, nz)]) n++;
      }
    }
    next[i] = grid[i] ? (n >= 4 && n <= 6) : (n >= 5 && n <= 6);
  }
  [grid, next] = [next, grid]; gens++;
}

🔧 Subcomponents:

for-loop Cell Iteration Loop for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++)

Iterates through every cell in the 3D grid to calculate its next state

for-loop Neighbor Counting Loop for (let dz = -1; dz <= 1; dz++) for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++)

Checks all 26 neighbors around the current cell (3×3×3 cube minus the center cell)

conditional Exclude Center Cell if (dx || dy || dz)

Skips the center cell (0,0,0 offset) so we only count neighbors, not the cell itself

conditional Boundary Validation if (nx >= 0 && nx < N && ny >= 0 && ny < N && nz >= 0 && nz < N && grid[idx(nx, ny, nz)]) n++;

Checks if neighbor is within grid bounds and alive, then increments neighbor count

conditional Game of Life Rules next[i] = grid[i] ? (n >= 4 && n <= 6) : (n >= 5 && n <= 6);

Applies 3D Game of Life rules: alive cells survive with 4-6 neighbors, dead cells become alive with 5-6 neighbors

calculation Generation Swap [grid, next] = [next, grid]; gens++;

Swaps grid and next arrays so next generation becomes current, and increments generation counter

Line by Line:

for (let z = 0; z < N; z++) for (let y = 0; y < N; y++) for (let x = 0; x < N; x++): Triple nested loop that visits every cell in the 3D grid
let n = 0, i = idx(x, y, z);: Initializes neighbor count to 0 and calculates the 1D array index for the current cell
for (let dz = -1; dz <= 1; dz++) for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++): Triple nested loop that checks all 27 positions in a 3×3×3 cube centered on the current cell
if (dx || dy || dz): Checks if at least one of dx, dy, or dz is non-zero. This excludes the center cell (0,0,0) so we only count neighbors
let nx = x + dx, ny = y + dy, nz = z + dz;: Calculates the neighbor's coordinates by adding the offset to the current cell's position
if (nx >= 0 && nx < N && ny >= 0 && ny < N && nz >= 0 && nz < N && grid[idx(nx, ny, nz)]) n++;: Checks if the neighbor is within grid bounds AND alive. If both conditions are true, increments the neighbor count
next[i] = grid[i] ? (n >= 4 && n <= 6) : (n >= 5 && n <= 6);: Applies the 3D Game of Life rules: if cell is alive, it survives only with 4-6 neighbors; if dead, it becomes alive only with 5-6 neighbors
[grid, next] = [next, grid];: Swaps the grid and next arrays using array destructuring. The next generation becomes the current generation
gens++;: Increments the generation counter to track how many evolution steps have occurred

`mousePressed()`

mousePressed() is a built-in p5.js function that runs whenever the user clicks the mouse. This sketch uses it to let users restart the simulation with a new random pattern by clicking anywhere on the canvas.

function mousePressed() { randomize(); gens = 0; }

🔧 Subcomponents:

function-call Grid Randomization randomize();

Calls randomize() to fill the grid with a new random pattern

calculation Reset Generation Counter gens = 0;

Resets the generation counter to 0 when a new pattern starts

Line by Line:

randomize();: Calls the randomize function to create a new random initial state
gens = 0;: Resets the generation counter to 0, so the new pattern starts counting from generation 0

`windowResized()`

windowResized() is a built-in p5.js function that automatically runs whenever the browser window is resized. This sketch uses it to keep the canvas filling the entire window at all times.

function windowResized() { resizeCanvas(windowWidth, windowHeight); }

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight);

Resizes the canvas to match the new window dimensions when the user resizes their browser

Line by Line:

resizeCanvas(windowWidth, windowHeight);: Resizes the canvas to match the current window width and height, ensuring the sketch fills the entire window even after resizing

📦 Key Variables

N number

Defines the grid dimensions (10×10×10 cube). Controls how many cells exist in each dimension

let N = 10;

grid array

Stores the current generation state. Array of 1000 boolean values (true=alive, false=dead). Indexed using idx(x,y,z)

let grid = new Array(N * N * N);

next array

Stores the next generation state while calculating. Prevents overwriting current state during evolution. Swapped with grid each step

let next = new Array(N * N * N);

gens number

Counts how many generations (evolution steps) have occurred. Displayed on screen and reset when user clicks

let gens = 0;

angle number

Tracks the current rotation angle in radians. Incremented each frame to create continuous 3D rotation

let angle = 0;

S number

Spacing constant (30 pixels). Controls the distance between cell centers in the 3D grid and box sizes

const S = 30;

counterP object

Stores reference to the HTML paragraph element that displays the generation counter on screen

let counterP = createP('');

🧪 Try This!

Experiment with the code by making these changes:

Change the initial alive probability from 0.3 to 0.5 in the randomize() function (line: grid[i] = random() < 0.5;) to start with 50% of cells alive instead of 30%
Modify the rotation speeds by changing the multipliers in draw() - try rotateX(angle * 0.3) and rotateY(angle * 1.5) to see different rotation patterns
Experiment with the 3D Game of Life rules in step() - change (n >= 4 && n <= 6) to (n >= 3 && n <= 5) to see how different survival thresholds affect the patterns
Change the neon green color from fill(0, 255, 100) to fill(255, 0, 255) for magenta or fill(0, 255, 255) for cyan
Increase the box size from box(S * 0.8) to box(S * 0.95) to make cells appear larger with less gap between them
Modify the step timing from if (frameCount % 15 == 0) to if (frameCount % 30 == 0) to make evolution happen slower (every 30 frames instead of 15)

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() - render loop

The triple nested loop in draw() iterates through all 1000 cells every frame, but only ~300 are typically alive. This wastes computation on empty cells

💡 Maintain a separate array of alive cell indices and only iterate through those. This would reduce draw() time from O(N³) to O(alive cells)

BUG step() - survival rules

The 3D Game of Life rules (4-6 neighbors for alive, 5-6 for dead) are non-standard and may cause patterns to die out or explode unpredictably

💡 Consider using more balanced rules like (2-4 neighbors for alive, 4-5 for dead) or research established 3D cellular automaton rules like 'Clouds' or '4555' notation

STYLE sketch.js - variable naming

Single-letter variable names (N, S, n) and abbreviated names (idx, dz, dy, dx) reduce code readability

💡 Use descriptive names like GRID_SIZE, CELL_SPACING, neighborCount, deltaZ, deltaY, deltaX to make the code more self-documenting

FEATURE index.html and CSS

No instructions are displayed to users about how to interact with the sketch (click to randomize)

💡 Add instructions text in CSS like 'Click to randomize' displayed near the generation counter, or add a help overlay

BUG draw() - push/pop

If an error occurs during box drawing, the push/pop might become unbalanced, corrupting the transformation stack for subsequent cells

💡 Add error handling or ensure box() cannot fail. Alternatively, use try-catch blocks around the drawing code

Preview

Code flow diagram showing the structure of AI 3D Game of Life - Conway's Automata in Space - Code flow showing idx, setup, randomize, draw, step, mousepressed, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview