JSFiddle - React, Tailwind, and code Playground

by carsont

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

JavaScript

var CellularAutomata = function (seed, generations, rules) {
    function applyRule(left, middle, right, rules) {
        var product = $.grep(rules, function (v) {
            return v.l == left && v.m == middle && v.r == right;
        });
        return product.length === 0 ? 0 : product[0].result;
    }

    function nextRow(prev, rules) {
        var newRow = new Array(prev.length);
        for (var i = 0; i < prev.length; i++) {
            var l = prev[i - 1 < 0 ? prev.length - 1 : i - 1];
            var m = prev[i];
            var r = prev[i + 1 >= prev.length ? 0 : i + 1];
            newRow[i] = applyRule(l, m, r, rules);
        }
        return newRow;
    }

    function generate() {
        var result = [];
        for (var i = 0, prev = seed; i < generations; i++, prev = nextRow(prev, rules)) {
            result.push(prev);
        }
        return result;
    }

    return {
        generate: generate,
        nextRow: nextRow
    };
};

var CanvasGrid = function (canvas, array) {
    var $canvas = $(canvas);
    var width = canvas.width = $canvas.width();
    var height = canvas.height = $canvas.height();

    var rows = array.length;
    var cols = array[0].length;
    var cellWidth = width / cols;

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

    function drawSquare(x, y, len) {
        context.fillRect(x, y, len, len);
    }

    function write2DArray() {
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < cols; j++) {
                if (array[i][j] === 1) {
                    drawSquare(j * cellWidth, i * cellWidth, cellWidth);
                }
            }
        }
    }

    $(window).resize(function () {
        width = canvas.width = $canvas.width();
        height = canvas.height = $canvas.height();
        cellWidth = width / cols;
        write2DArray();
    });

    function shiftUp() {
        var imageData = context.getImageData(0, 0, width, height);
        clear();
       ...