Game of Life Texturing

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, as shown in the showcase Game of Life. It leverages key methods for managing quadrilles, applying game rules, and rendering dynamic textures onto 3D shapes by using the WEBGL mode p5.js. 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).

(drag the mouse to rotate the camera; use number keys [1..7] to switch shapes)

// Set the size of each quadrille cell
Quadrille.cellLength = 20;
// Declare variables for the game and pattern quadrilles, cell color, and buffer
let game, pattern;
let life;
let buffer;
// Variable to track the current shape mode (for 3D rendering)
let mode = 1;
// Define an object containing functions to draw various 3D shapes
const shapes = {
  1: () => plane(width, height),           // Draw a flat plane
  2: () => sphere(100),                    // Draw a sphere
  3: () => torus(100, 50),                 // Draw a torus
  4: () => box(200),                       // Draw a cube
  5: () => cylinder(100, 200, 24, 1, false, false), // Draw a cylinder
  6: () => cone(100, 200, 24, 1, false),   // Draw a cone
  7: () => ellipsoid(100, 180)             // Draw an ellipsoid
};

function setup() {
  // Initialize the main game quadrille (20x20 quadrille)
  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);
  // Place the pattern on the quadrille at (6, 8)
  game = Quadrille.or(game, pattern, 6, 8);
  // Set up the canvas to match the quadrille size and enable 3D rendering
  createCanvas(game.width * Quadrille.cellLength,
               game.height * Quadrille.cellLength,
               WEBGL);
  // Create a framebuffer for rendering the game as a texture
  buffer = createFramebuffer({ format: FLOAT });
  // Perform the initial game state update
  update();
}

function draw() {
  // Set the background color and enable 3D camera controls
  background('yellow');
  orbitControl();
  // Update the game state every 20 frames
  frameCount % 20 === 0 && update();
  // Disable outlines and render the current 3D shape
  noStroke();
  // Default to the plane if mode is invalid
  shapes[mode] ? shapes[mode]() : shapes[1]();
}

function update() {
  // Clone the current game state to prepare for the next iteration
  const next = game.clone();
  // Apply Conway's Game of Life rules to each cell
  visitQuadrille(game, (row, col) => {
    // Count the number of live neighbors
    const order = game.ring(row, col).order;
    game.isFilled(row, col) ?
      // Overcrowding or underpopulation
      (order < 3 || order > 4) && next.clear(row, col) :
      // Reproduction
      order === 3 && next.fill(row, col, life);          
  });
  // Update the game state
  game = next;
  // Render the updated game quadrille to the framebuffer
  buffer.begin();
  background('blue');
  drawQuadrille(game, { outline: 'magenta', origin: 'corner' });
  buffer.end();
  // Apply the framebuffer as a texture for the 3D rendering
  texture(buffer);
}

function keyPressed() {
  // Update the shape mode based on numeric key input
  mode = +key;  
  // Clear the game quadrille and reset it with the seed pattern
  game.clear();
  game = Quadrille.or(game, pattern, 6, 8);
}

Rendering to Texture

To render the game as a texture, a p5.Framebuffer object is initialized with buffer = createFramebuffer() which is then rendered onto using:

  buffer.begin();
  background('blue');
  drawQuadrille(game, { outline: 'magenta', origin: 'corner' });
  buffer.end();

and it is subsequently applied as a texture using texture(buffer).

Shapes

The shapes object maps numeric keys to functions that draw various 3D shapes using p5.js primitives. Each key corresponds to a shape, and its function defines how the shape is rendered. Here’s the syntax breakdown:

// Define an object containing functions to draw various 3D shapes
const shapes = {
  1: () => plane(width, height),           // Draw a flat plane
  2: () => sphere(100),                    // Draw a sphere
  3: () => torus(100, 50),                 // Draw a torus
  4: () => box(200),                       // Draw a cube
  5: () => cylinder(100, 200, 24, 1, false, false), // Draw a cylinder
  6: () => cone(100, 200, 24, 1, false),   // Draw a cone
  7: () => ellipsoid(100, 180)             // Draw an ellipsoid
};

Patterns

The initial seed is defined using a BigInt encoding a quadrille filling pattern, i.e., pattern = createQuadrille(3, 16252911n, life) which is equivalent to:

pattern = createQuadrille([[life, life, life],
                           [life, null, life],
                           [life, life, life],
                           [life, life, life],
                           [life, life, life],
                           [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).

Rules

The game of life rules are applied to each cell by:

// Clone the current game state to prepare for the next iteration
  const next = game.clone();
  // Apply Conway's Game of Life rules to each cell
  visitQuadrille(game, (row, col) => {
    // Count the number of live neighbors
    const order = game.ring(row, col).order;
    game.isFilled(row, col) ?
      // Overcrowding or underpopulation
      (order < 3 || order > 4) && next.clear(row, col) :
      // Reproduction
      order === 3 && next.fill(row, col, life);          
  });
  // Update the game state
  game = next;

The (arrow) anonymous function first compute the order of the game ring (of dimension 1) centered at (row, col): const order = game.ring(row, col).order, and then use it to apply the game of life rules to the next quadrille:

1. Any live cell (game.isFilled(row, col)) with less than two or more than three live neighbors dies: (order < 3 || order > 4) && next.clear(row, col).
2. Any dead cell with three live neighbors becomes a live cell: order === 3 && next.fill(row, col, life) }).

Further Exploration

The Game of Life provides endless opportunities to experiment and innovate. Below are ways to deepen your exploration:

• Try New Patterns: Experiment with different initial patterns to observe their evolution. Use well-known configurations like gliders, pulsars, or spaceships with createQuadrille() using BigInt encodings, or manually define custom patterns.

• Tweak the Rules: Modify the Game of Life rules in the update() function to see how changes impact dynamics. Adjust thresholds for survival or reproduction to create unique Life-like cellular automata with emergent behaviors.

• Enhance Visualization: Push visual boundaries by experimenting with advanced shapes or custom geometries beyond the demo, such as a toroidal trefoil knot or other complex forms using p5.Geometry.

• Add Interactivity: Enable real-time interaction by allowing users to toggle cells, edit patterns, or modify the quadrille dynamically. Use mouse and keyboard inputs combined with the fill() and clear() methods for maximum flexibility.

• Explore Variants: Dive into exciting variations like HighLife, Langton’s Ant, Seeds, or Day & Night. These can often be implemented with small changes to the update() logic.

• Learn from the Community: Explore the Game of Life’s rich ecosystem by delving into John Conway’s original work, research papers, or interactive simulations. Studying or contributing to community projects is a great way to gain new ideas and inspiration.

By exploring these avenues, you’ll uncover the incredible depth and complexity of cellular automata.

References

Quadrille API

• Quadrille.cellLength.
• Quadrille.or.
• createQuadrille(width, height).
• createQuadrille(width, bigint, value).
• visitQuadrille(quadrille, fx).
• drawQuadrille(quadrille, params).
• isFilled(row, col).
• clone().
• clear().
• fill().
• ring().
• order.

p5 API

• createCanvas — Creates a drawing canvas on which all the 2D and 3D visuals are rendered in p5.js.
• createFramebuffer — Creates a WebGL framebuffer object, which can be used for offscreen rendering or rendering to a texture.
• background — Sets the color used for the background of the canvas.
• orbitControl — Allows the camera to be rotated, zoomed, and panned with mouse controls.
• keyPressed — A function that is called whenever a key is pressed.

Further Reading

• Game of life wikipedia article.
• LifeWiki.
• p5 game of life example.