JSFiddle - React, Tailwind, and code Playground

Cellular Automaton 3457/357/5 Ooh, pretty.

by Daniel Cheung

HTML

<canvas id="board"></canvas>
<!--
<div id="controls">
  <button id="nextStep">Step</button>
</div>
-->

CSS

body
{
  overflow: hidden;
  margin: 0;
}

#board
{
  margin: 0;
  padding: 0;
  border: 0;
}

JavaScript

var $board;
var ctx;
var data = [];
var running = false;

var FORCE_ODD_X = false;
var FORCE_ODD_Y = false;
var FORCE_EVEN_X = true;
var FORCE_EVEN_Y = true;

//var CANVAS_SIZE = {x: 600, y: 400};
CANVAS_SIZE = {x: window.innerWidth, y: window.innerHeight};
var PIXEL_SIZE = {x: 10, y: 10};
var ARRAY_DIMENSIONS = {x: Math.floor(CANVAS_SIZE.x / PIXEL_SIZE.x),
                        y: Math.floor(CANVAS_SIZE.y / PIXEL_SIZE.y)};
if (FORCE_ODD_X)
  ARRAY_DIMENSIONS.x = Math.ceil(ARRAY_DIMENSIONS.x / 2) * 2 - 1;
if (FORCE_ODD_Y)
  ARRAY_DIMENSIONS.y = Math.ceil(ARRAY_DIMENSIONS.y / 2) * 2 - 1;
if (FORCE_EVEN_X)
  ARRAY_DIMENSIONS.x = Math.floor(ARRAY_DIMENSIONS.x / 2) * 2;
if (FORCE_EVEN_Y)
  ARRAY_DIMENSIONS.y = Math.floor(ARRAY_DIMENSIONS.y / 2) * 2;
                        
var BACKGROUND_COLOR = "#282828";
var PIXEL_STATES = {0:{color: "#282828", radius: 0},
                    1:{color: "#325115", radius: 1.5},
                    2:{color: "#40651a", radius: 2},
                    3:{color: "#598e25", radius: 3},
                    4:{color: "#7ac132", radius: 4}};
                    
function get2dArrayStr(data)
{
  var returnStr = "";
  for(var y = 0; y < data.length; y++)
  {
    for (var x = 0; x < data[y].length; x++)
    {
      returnStr += data[y][x];
    }
    returnStr += "\n";
  }
  return returnStr;
}

function updateBoardSize(w, h)
{
  var width = w || window.innerWidth;
  var height = h || window.innerHeight;
  $board.css("width", width + "px").css("height", height + "px");
  ctx.canvas.width = width;
  ctx.canvas.height = height;
}

function initializeDataArray()
{
  data = new Array(ARRAY_DIMENSIONS.y);
  for (var y = 0; y < data.length; y++)
  {
    data[y] = new Array(ARRAY_DIMENSIONS.x);
    for (var x = 0; x < data[y].length; x++)
      data[y][x] = 0;
      //data[y][x] = Math.floor(Math.random() * 5);
  } 
}

function drawPixel(x, y, val)
{
  ctx.beginPath();
  ctx.fillStyle = BACKGROUND_COLOR;
  ctx.fillRect(x * PIXEL_SIZE.x, y *...