JSFiddle - React, Tailwind, and code Playground
HTML
<div id="lifecontrols">
<input type="button" value="start" onclick="startgol()"/>
</div>
<canvas id="board" style="border:1px solid #4488ff;"></canvas>
CSS
* {
padding: 0px; margin:0px;
}
JavaScript
console.log(new Date())
var seed = 1;
var cstep = 0
var STATE = 1;
var NEWSTATE = 2;
var colors = ["#004488", "#eeeeff"]
var width = 160;
var pixelSize = 3
var canvas = document.getElementById('board');
canvas.width = width * pixelSize;
canvas.height = width * pixelSize;
var context = canvas.getContext('2d');
var size = width * width;
var buffer = new ArrayBuffer(size);
var int8View = new Int8Array(buffer);
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function random() {
var x = Math.sin(seed++) * 10000;
return x - Math.floor(x);
}
drawsome = function () {
border = Math.floor(width / 3)
for (x = border; x < width - border; x++) {
for (y = border; y < width - border; y++) {
i = y * width + x
int8View[i] |= (random() > .8) ? STATE + NEWSTATE : 0;
}
}
}
givesun = function () {
xs = Math.floor(random() * (width - 3))
ys = Math.floor(random() * (width - 3))
walkers = shuffleArray([
[1,1,1,1,0,0,0,1,0], //upleft
[0,1,0,1,0,0,1,1,1], //upright
[0,1,1,1,0,1,0,0,1], // downleft
[0,1,0,0,0,1,1,1,1] // downright
])
arr = walkers[Math.floor(random()*4)]
a=0
for (x = xs; x < xs + 3; x++) {
for (y = ys; y < ys + 3; y++) {
i = y * width + x
int8View[i] |= arr[a++];
}
}
console.log("Gave energy")
}
drawcells = function () {
//console.log("Step:" + cstep++)
cs = 0
ns = 0
es = 0
changed = 0
for (x = 0; x < width; x++) {
for (y = 0; y < width; y++) {
me = y * width + x
currentstate = int8View[me] & STATE
cs += currentstate
newstate = (int8View[me] & NEWSTATE) >> 1
ns += newstate
int8View[me] &= ~STATE //reset the bit
...