1. Any live cell with fewer than two live neighbors dies, as if by underpopulation.
2. Any live cell with two or three live neighbors lives on to the next generation.
3. Any live cell with more than three live neighbors dies, as if by overpopulation.
4. Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

import * as THREE from 'three';
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 5;
camera.position.y = 5;
camera.position.x = 0;

const controls = new OrbitControls( camera, renderer.domElement );

const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);


var last = 0; // timestamp of the last render() call
function animate(now) {

  controls.update();
  
  if(now - last >= 3*1000) {
    last = now;
  }
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

The result:
 

function generatePositions(n) {
  const positions = [];
  while (positions.length < n) {
    const x = Math.round((Math.random() * 2) - 1);
    const y = Math.round((Math.random() * 2));
    const z = Math.round((Math.random() * 2) - 1);
    positions.push(`${x}_${y}_${z}`);
  }
  return [...new Set(positions)];
}

function createCube(position) {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const color = Math.random() * 0xffffff;
  const material = new THREE.MeshBasicMaterial({ color });
  const cube = new THREE.Mesh(geometry, material);
  cube.position.set(position.x, position.y, position.z);
  scene.add(cube);
}

const alivePositions = generatePositions(6);
for (let livePosition of alivePositions) { 
  const livePositionAsObj = convertStringToObject(livePosition);
  createCube(livePositionAsObj);
}

I created the helper convertStringToObject because I know that I am going to need to index the positions for lookups and uniqueness checks, so converting to and from string will be needed.

The results:

Okay. We're getting somewhere.
Now that I have these initial cubes set to an array, alivePositions, we will need to think about the problem.

What do we care about? At each iteration of the game, what is being considered? The answer to this question will be the crux of our computation.

We care about, 1) alive positions and 2) their neighbors. All of these spaces will be considered for evaluation. An "active" positions is "in play", meaning if the positions is alive, it can stay alive or die, or if the position is dead, it can become alive.

Thus, for each alive cube in the starting space we need to compute their neighbors and add it to an array of "active positions".  The set of alive positions and their neighbors are in play.

ChatGPT was very helpful with this calculation:

A relatively simple calculation, but I'm a lazy human, so ChatGPT to the rescue. 

... 

Despite my laziness, I actually wanted to solve the crux of this problem myself for fun. It's all quite simple.. which is kind of the point of Cellular Automata. The following code was written myself, leveraging ChatGPT or Google to gain insight about specific Javascript syntax. 

function playGame() { 

  const alivePositions = Array.from(cubeMap.keys());
  const allNeighborPositions = getAllNeighborPositions(alivePositions);
  const setOfAllActivePositions = new Set([...alivePositions, ...allNeighborPositions]);

  for (const activePosition of setOfAllActivePositions.values()) {
    const aliveNeighbors = aliveNeighborsFrom(activePosition, alivePositions);
    if (positionIsAlive(activePosition, alivePositions)) { 
      if (aliveNeighbors.length <= 2) { 
        // death - solitude
        removeCube(activePosition);
      } else if (aliveNeighbors.length >= 8) { 
        // death - overpopulation
        removeCube(activePosition);
      }
    } else { 
      if (aliveNeighbors.length == 5) { 
        // birth
        createCube(convertStringToObject(activePosition));
      }
    }
  }
}

var last = 0; // timestamp of the last render() call
function animate(now) {

  controls.update();
  
  if(now - last >= 3*1000) {
    last = now;
    playGame();     // <--------
  }
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

I played around with the rules until I found something interesting. I'm sure there are more interesting combinations of rules... but that will be a follow up project perhaps... these rules are interesting in that some particular starting positions appears to run indefinitely. Here it is:


 

It's really quite amazing.

Most starting positions either die out or lay stable and unchanging... but some configurations last for many iterations, and some possibly run forever. Some really cool symmetries emerge, such as this one:

Or becoming a huge blob:

Maybe if this runs long enough it will recreate the universe...

But, one thing is for certain, my computer definitely can't handle this, let alone run this with Javascript in my web browser. I might need to head back to Blender.


Next up, let's see if we can make these automata evolve.