JSFiddle - React, Tailwind, and code Playground

by Dr. Ninjimonimous

HTML

<center>
  <h1>No Title Yet </h1><small>By Dr. Ninjimonimous</small></center>
<center>
  <canvas id="myCanvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
</center>

CSS

body {
  background: #000;
  color: #aaa;
}

canvas {
-webkit-box-shadow: -1px 0px 24px 3px rgba(29,79,122,1);
-moz-box-shadow: -1px 0px 24px 3px rgba(29,79,122,1);
box-shadow: -1px 0px 24px 3px rgba(29,79,122,1);
border-radius: 15px;
}

textarea {
  background: #00141e;
  color: #003c79;
  font-family: "Courier New", Courier, monospace;
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var dimensions = (c.width + c.height) / 2; //Dimension of the canvas, in pixels.
var ced = 13; //Dimension of a grid square
var ls = Math.ceil(dimensions / ced); //How many squares per row / column
var squares = Math.pow(Math.ceil(dimensions / ced), 2); //How many squares in the entire canvas
var cells = new Array(squares); // Array of cells
var simulating = false; //Is the simulation running?
var times = 100; //Time interval between updates (in ms)
var showgrid = true; // Show the grid?
var usecolors = true;

var ccr = 0x0;
var ccg = 0x4c;
var ccb = 0x99;

/* Function that converts decimal numbers into an hex string with padding */
function decimalToHex(d, padding) {
  var hex = Number(d).toString(16);
  padding = typeof(padding) === "undefined" || padding === null ? padding = 2 : padding;

  while (hex.length < padding) {
    hex = "0" + hex;
  }

  return hex;
}

/* Function that creates an array */
function createArray(length) {
  var arr = new Array(length || 0),
    i = length;

  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while (i--) arr[length - 1 - i] = createArray.apply(this, args);
  }

  return arr;
}

/* Function to draw the background */
function drawbackground() {
  //Background color

  if (usecolors) {
    var grd = ctx.createLinearGradient(0, 0, 0, dimensions);
    grd.addColorStop(0, "black");
    grd.addColorStop(1, "#00141e");

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, dimensions, dimensions);
  } else {
    //ctx.fillStyle = "#00343e";
    ctx.fillStyle = "#00141e";
    ctx.fillRect(0, 0, dimensions, dimensions);
  }

  //Grid
  ctx.strokeStyle = "#003c79";
  if (showgrid)
    for (var i = 1; i < ls; i++) {
      ctx.beginPath();
      ctx.moveTo(ced * i, 0);
      ctx.lineTo(ced * i, dimensions);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(0, ced * i);
      ctx.lineTo(dimensions, ced * i);
     ...