Game of Life

Before diving into development, thoroughly reading the Quadrille API documentation is key to efficient coding, preventing mistakes, and ensuring optimal performance. By acquainting yourself with the API’s nuances, you set the stage for informed decision-making, seamless collaboration, and a smoother development journey.

The demo below showcases how the Quadrille API can be used to implement Conway’s Game of Life, with a Pentadecathlon pattern as the initial seed. It leverages key methods for managing quadrilles, applying game rules, and rendering dynamic patterns. The implementation uses three quadrille instances: game, next, and pattern. The game quadrille visualizes the current state, the next quadrille computes the next iteration, and the pattern quadrille establishes the game’s initial seed. Cells filled with the life value represent living cells (fill resurrects a dead cell), while empty cells denote dead cells (clear kills a living cell).

Learn how to render textures with WebGL in Game of Life texturing.

code

// Set the size of each quadrille cell
Quadrille.cellLength = 20;

// Declare variables for the game state, the next state, and the pattern seed
let game, next, pattern;
let life;

// Setup the game
function setup() {
  // Create a 20x20 quadrille for the game
  game = createQuadrille(20, 20);
  // Define the color for "alive" cells
  life = color('lime');
  // Create a seed pattern using a BigInt encoding and overlay it on the game
  pattern = createQuadrille(3, 16252911n, life);
  game = Quadrille.or(game, pattern, 6, 8);
  // Set up the canvas to match the quadrille size
  createCanvas(game.width  * Quadrille.cellLength,
               game.height * Quadrille.cellLength);
  // Set the frame rate to control the speed of the game
  frameRate(2);
}

// Draw the game state
function draw() {
  // Set the background color
  background('blue');
  // Clone the current game state for the next iteration
  next = game.clone();
  // Apply the Game of Life rules to each cell
  visitQuadrille(game, updateCell);
  // Update the game state
  game = next;
  // Draw the quadrille
  drawQuadrille(game, { outline: color('magenta') });
}

// Update each cell according to the Game of Life rules
function updateCell(row, col) {
  const order = game.ring(row, col).order;
  if (game.isFilled(row, col)) {
    // If a cell is alive but has less than 2 or more than 3 neighbors, it dies
    if (order - 1 < 2 || order - 1 > 3) {
      next.clear(row, col);
    }
  } else {
    // If a cell is dead but has exactly 3 neighbors, it becomes alive
    if (order === 3) {
      next.fill(row, col, life);
    }
  }
}

Rules

The Game of Life rules determine cell survival or death based on neighbors. These rules are implemented in the updateCell function:

function updateCell(row, col) {
  const order = game.ring(row, col).order;

  if (game.isFilled(row, col)) {
    // Alive cells die if they have fewer than 2 or more than 3 neighbors
    if (order - 1 < 2 || order - 1 > 3) {
      next.clear(row, col);
    }
  } else {
    // Dead cells become alive if they have exactly 3 neighbors
    if (order === 3) {
      next.fill(row, col, life);
    }
  }
}

ℹ️

Neighbor Count: The number of live neighbors (order) is calculated using the ring method.
Apply Rules:
- Over/Underpopulation: Live cells with fewer than 2 or more than 3 neighbors are cleared: next.clear(row, col).
- Reproduction: Dead cells with exactly 3 neighbors are filled: next.fill(row, col, life). These simple rules generate complex and fascinating patterns over time.

Patterns

The initial seed is defined using a BigInt encoding:
pattern = createQuadrille(3, 16252911n, life). This is equivalent to:

pattern = createQuadrille([
  [life, life, life],
  [life, null, life],
  [life, life, life],
]);
pattern.toBigInt(); // 16252911n

The pattern is then added to the game quadrille at position (6, 8) using Quadrille.or: game = Quadrille.or(game, pattern, 6, 8).

Further Exploration

The Game of Life offers endless opportunities for experimentation. Here are some ideas:

Try New Patterns: Experiment with initial patterns like gliders, pulsars, or spaceships. Use createQuadrille() with BigInt encodings or define custom patterns manually.
Tweak the Rules: Modify the Game of Life rules in the updateCell() function to create unique Life-like cellular automata with different dynamics.
Add Interactivity: Allow users to toggle cells or edit patterns dynamically using the fill() and clear() methods.
Explore Variants: Try variations like HighLife, Langton’s Ant, Seeds, or Day & Night by tweaking the rules.
Learn from the Community: Explore John Conway’s work, research papers, or interactive simulations for inspiration and new ideas.

References

Quadrille API

p5 API

createCanvas — Creates a drawing canvas on which all the 2D and 3D visuals are rendered in p5.js.
background — Sets the color used for the background of the canvas.