78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
'use strict';
|
|
|
|
const rules = {
|
|
"111": "0",
|
|
"110": "1",
|
|
"101": "0",
|
|
"100": "1",
|
|
"011": "1",
|
|
"010": "0",
|
|
"001": "1",
|
|
"000": "0"
|
|
}
|
|
|
|
function getRandomInt(min, max) {
|
|
min = Math.ceil(min);
|
|
max = Math.floor(max);
|
|
// The maximum is exclusive and the minimum is inclusive
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
function evolve(state, acc) {
|
|
const [x, y, z, ...xs] = state;
|
|
if (!xs.length) {
|
|
return acc[0] + acc + acc[acc.length - 1]
|
|
}
|
|
else {
|
|
const rule = x + y + z;
|
|
const new_acc = acc.concat(rules[rule]);
|
|
return evolve(y + z + xs.join(""), new_acc)
|
|
}
|
|
}
|
|
|
|
function draw(state, context, acc) {
|
|
const cell_dim = 2
|
|
|
|
Object.keys(state).forEach(
|
|
function (key) {
|
|
context.moveTo(key * cell_dim, acc * cell_dim)
|
|
context.fillRect(key * cell_dim, acc * cell_dim, cell_dim, cell_dim)
|
|
if(state[key] == "1") {
|
|
context.fillStyle="black";
|
|
}else {
|
|
if (acc % 2) {
|
|
context.fillStyle="white";
|
|
}else {
|
|
context.fillStyle="white";
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
window.addEventListener("load", async function() {
|
|
const canvas = document.getElementById("canvas")
|
|
canvas.width = window.innerWidth
|
|
canvas.height = window.innerHeight
|
|
const ctx = canvas.getContext("2d")
|
|
|
|
const initial_state = [...Array(canvas.width)].map(
|
|
_=> getRandomInt(0, 2).toString()
|
|
).join("")
|
|
|
|
console.log("initial state length : ", initial_state.length)
|
|
|
|
var new_state = evolve(initial_state, "")
|
|
var acc = 0
|
|
|
|
while(acc < canvas.width) {
|
|
draw(new_state, ctx, acc)
|
|
new_state = evolve(new_state, "")
|
|
acc++
|
|
await sleep(100)
|
|
}
|
|
})
|