Decay
Link to sketch: https://editor.p5js.org/Xiaozao/sketches/SZ2gVL7sW
How to interact: Press the mouse to refill. Press again to decay.
After learning 1D and 2D cellular automata, I decided to create a “3D” one. However, it isn’t the real 3D using webGL, but instead showing the 3D space through a 2D perspective. I created a 3D array with x,y, and z-axis. But the z-axis is shown as “layers” and each layer is translucent, meaning that the state of cells on every layer will be stacked together to affect the overall opacity of the cell.
for (let n = 0; n < layers; n++) { board = create2DArray(columns, rows); for (let i = 1; i < columns - 1; i++) { for (let j = 1; j < rows - 1; j++) { board[i][j] = new Cell(floor(random(2)), i * scale, j * scale, scale); } } // console.log(board) boards.push(board);
The principle of the 3D cellular automata is similar to the 1D and 2D one. Regarding the rules or algorithms, I drew inspiration from this article, which implemented lots of interesting rules in the 3D world. https://softologyblog.wordpress.com/2019/12/28/3d-cellular-automata-3/
I modified the rules a bit. Also, I added a mouse interaction that refills the cells with another rule.
for (let z = 1; z < layers - 1; z++) { for (let x = 1; x < columns - 1; x++) { for (let y = 1; y < rows - 1; y++) { let neighbors = 0; for (let k = -1; k <= 1; k++) { for (let i = -1; i <= 1; i++) { for (let j = -1; j <= 1; j++) { //Use the previous state when counting neighbors neighbors += boards[z + k][x + i][y + j].previous; } } } neighbors -= boards[z][x][y].previous; // desicion if (growing_state == -1) { if (neighbors >= 13 && neighbors <= 22) { boards[z][x][y].state = 1; } else { boards[z][x][y].state = 0; } } else { if (neighbors >= 6 && neighbors <= 7) { boards[z][x][y].state = 1; } else if (boards[z][x][y].state == 1) { boards[z][x][y].state = 1; } else { boards[z][x][y].state = 0; } }