136 lines
3.3 KiB
JavaScript
136 lines
3.3 KiB
JavaScript
let drawing = 1;
|
|
|
|
const form = Array.from(document.forms.rules.elements);
|
|
const canvas = document.querySelector('#canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const main = document.querySelector('#main');
|
|
const dead = document.querySelector('#dead');
|
|
const live = document.querySelector('#live');
|
|
const startBtn = document.querySelector('#start');
|
|
const resetBtn = document.querySelector('#reset');
|
|
const stopBtn = document.querySelector('#stop');
|
|
const cellSize = document.querySelector('#cellSize');
|
|
const loop = document.querySelector('#loop');
|
|
const menuRow = document.querySelectorAll('.menu-row');
|
|
|
|
canvas.width = main.offsetWidth * 0.9;
|
|
canvas.height = main.offsetHeight * 0.9;
|
|
|
|
// TODO: Hide iterator inside
|
|
function evolve(state, acc, rules) {
|
|
const [x, y, z, ...xs] = state;
|
|
if (!xs.length) {
|
|
return acc[acc.length - 1] + acc + acc[0];
|
|
}
|
|
|
|
const rule = x + y + z;
|
|
const newAcc = acc.concat(rules[rule]);
|
|
return evolve(y + z + xs.join(''), newAcc, rules);
|
|
}
|
|
|
|
function getRules() {
|
|
const rules = {};
|
|
|
|
form.reduce((_, i) => {
|
|
if (i !== undefined
|
|
&& i.type === 'checkbox') {
|
|
if (i.checked) rules[i.name] = '1';
|
|
else rules[i.name] = '0';
|
|
}
|
|
return rules;
|
|
}, rules);
|
|
|
|
return rules;
|
|
}
|
|
|
|
function getDrawingValues(state, acc) {
|
|
const cellDim = cellSize.value;
|
|
|
|
return Object.keys(state).map(
|
|
(key) => {
|
|
const fillStyle = state[key] === '1' ? live.value : dead.value;
|
|
return {
|
|
move: [key * cellDim, acc * cellDim],
|
|
fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
|
|
fillStyle,
|
|
};
|
|
},
|
|
);
|
|
}
|
|
|
|
function getRandomInt(min, max) {
|
|
const minVal = Math.ceil(min);
|
|
const maxVal = Math.floor(max);
|
|
// The maximum is exclusive and the minimum is inclusive
|
|
return Math.floor(Math.random() * (maxVal - minVal) + minVal);
|
|
}
|
|
|
|
async function sleep(ms) {
|
|
await new Promise((resolve) => setTimeout(resolve, ms));
|
|
}
|
|
|
|
async function draw(state, acc) {
|
|
if (drawing === 0) {
|
|
return;
|
|
}
|
|
|
|
const position = acc * cellSize.value;
|
|
if (position >= canvas.height && !loop.checked) return;
|
|
|
|
const rules = getRules();
|
|
const newState = evolve(state, '', rules);
|
|
const line = getDrawingValues(newState, acc);
|
|
|
|
line.map((cell) => {
|
|
ctx.moveTo(...cell.move);
|
|
ctx.fillRect(...cell.fill);
|
|
ctx.fillStyle = cell.fillStyle;
|
|
return cell;
|
|
});
|
|
|
|
await sleep(40);
|
|
|
|
const newAcc = () => {
|
|
if (position >= canvas.height && loop.checked) return 0;
|
|
return acc;
|
|
};
|
|
|
|
await draw(newState, newAcc() + 1);
|
|
}
|
|
|
|
function reset() {
|
|
drawing = 0;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
startBtn.addEventListener('click', async () => {
|
|
reset();
|
|
|
|
await sleep(60);
|
|
|
|
drawing = 1;
|
|
|
|
const initialState = [...Array(canvas.width)].map(
|
|
() => getRandomInt(0, 2).toString(),
|
|
).join('');
|
|
|
|
draw(initialState, 1);
|
|
});
|
|
|
|
resetBtn.addEventListener('click', async () => {
|
|
reset();
|
|
});
|
|
|
|
stopBtn.addEventListener('click', async () => {
|
|
drawing = 0;
|
|
});
|
|
|
|
menuRow.forEach((elem) => {
|
|
elem.querySelector('h2').addEventListener('click', async (e) => {
|
|
// ugly
|
|
const menuDisplay = e.currentTarget.parentNode.querySelector('.menu-row-content').style;
|
|
if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
|
|
else menuDisplay.setProperty('display', 'block');
|
|
});
|
|
});
|