JSFiddle - React, Tailwind, and code Playground

by Therm

HTML

<span>
    <button id="start">START</button>
    <button id="stop">STOP</button>
    <button id="step">STEP</button>
    <span>
<br>
<canvas id="c" height="720" width="720"></canvas>

JavaScript

// An animation similar to Conway's Game of Life, using house-tessellations.
// B2/S23

var world;
var worldnp1;
var intervalTime = 500;

var liveColor = "#00CCFF";
var deadColor = "#3300FF";

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

// # a pattern is a hex surrounded by 6square/6triangle, full size is 2s + s*sqrt(3) in height and width)
var x = 12;
var y = 12;

// Side length
var s = 20;
var s3 = s / 2 * Math.sqrt(3);

// neighbors is array of elements, starting at the top triangle and going CW
function Pattern(x, y) {
    this.neighbors = new Array(12);
}

function initWorld() {
    world = new Array(x * y);

    for (var i = 0; i < x * y; i++) {
        world[i] = new Pattern();
    }

   
    for (var i = 0; i < x * y; i++) {
        THROW ERROR LEL // Todo:
    }

    drawGrid();
}

animateWorld = function () {
    computeNP1();
    drawGrid();
};

function computeNP1() {
    worldnp1 = new Array(x * y);
    var pat;
    for (var i = 0; i < x * y; i++) {
        worldnp1[i] = new Pattern();
        var temp = getNeighborArray(i);

        // if you have 3 neighbors, you are automatically alive
        if (temp.a == 3) {
            worldnp1[i].a = 1;
        }
        // if you have 2 neighbors, your condition is old
        else if (temp.a == 2) {
            worldnp1[i].a = world[i].a;
        }
        //else you are dead
        else {
            worldnp1[i].a = 0;
        }


    }
    world = worldnp1.slice(0);
}

function toggleState(e) {
    var xWhole = Math.floor(e.offsetX / xJmp);
    var yWhole = Math.floor(e.offsetY / yJmp);

    var i = yWhole * x + xWhole;
    // Left side, either a,c,d,e,e-

    // x,y coord relative to the upper LH of this pattern
    var xoff = e.offsetX - xWhole * xJmp;
    var yoff = e.offsetY - yWhole * yJmp;
    
}

function drawGrid() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < y; i++) {
        for (var j = 0; j < x; j++) {
           ...