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>
    <button id="save">SAVE</button>
    <button id="load">LOAD</button>
    <span>
<br>
<textarea id="codearea" cols="60" rows="5"></textarea>
<br>
<canvas id="c" height="720" width="680"></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');

// # patterns (a pattern is ~40px across and 40(1+sqrt(3)) ~= 97px tall
var x = 16;
var y = 12;

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

var xJmp = s * 2;
var yJmp = s * (1 + Math.sqrt(3));

/*
  A   B
  C
      E
  D

a, b squares
c, d triangles
e hexagon
*/


function Pattern() {
    this.a = 0;
    this.b = 0;
    this.c = 0;
    this.d = 0;
    this.e = 0;
}

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

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

    /* Still life
    world[53].a = 1;
    world[53].b = 1;
    world[53].c = 1;
    world[53].e = 1;
    */

    /* Oscillator: Period 2
    world[53].a = 1;
    world[53].b = 1;
    world[54].a = 1;
    */

    // Oscillator: Period 4 - Found by http://codegolf.stackexchange.com/users/8478/martin-b%C3%BCttner
    /*
    world[53].e = 1;
    world[54].e = 1;
    world[54].c = 1;
    world[54].d = 1;
    world[54].e = 1;
    world[71].e = 1;
    world[71].b = 1;
    world[71].c = 1;
    */

    // Oscillator: Period 6 - Found by http://codegolf.stackexchange.com/users/8478/martin-b%C3%BCttner
    /*
    x = 32;
    world[68].e = 1;
    world[100].e = 1;
    world[99].b = 1;
    world[100].a = 1;
    world[99].e = 1;
    world[70].e = 1;
    world[102].e = 1;
    world[103].a = 1;
    world[103].b = 1;
    world[103].e = 1;
    */

    // Oscillator: Period 12 - Found by http://codegolf.stackexchange.com/users/8478/martin-b%C3%BCttner
    /*
    x = 32;
    world[40].d = 1;
    world[71].b = 1;
    world[72].b = 1;
    world[72].d = 1;
    world[74].d = 1;
    world[74].e = 1; 
    world[106].a = 1;
    */


    // Spaceship: Period 20 - Found by...