explorata/main.js

136 lines
3.3 KiB
JavaScript
Raw Normal View History

2021-12-30 19:45:39 +01:00
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');
2021-12-31 11:10:32 +01:00
const stopBtn = document.querySelector('#stop');
const cellSize = document.querySelector('#cellSize');
2021-12-31 10:31:52 +01:00
const loop = document.querySelector('#loop');
2021-12-31 13:17:37 +01:00
const menuRow = document.querySelectorAll('.menu-row');
2021-12-31 11:10:32 +01:00
canvas.width = main.offsetWidth * 0.9;
canvas.height = main.offsetHeight * 0.9;
2021-12-30 19:45:39 +01:00
// TODO: Hide iterator inside
2021-12-30 19:45:39 +01:00
function evolve(state, acc, rules) {
const [x, y, z, ...xs] = state;
if (!xs.length) {
2021-12-30 19:45:39 +01:00
return acc[acc.length - 1] + acc + acc[0];
}
2021-12-30 19:45:39 +01:00
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(
2021-12-30 19:45:39 +01:00
(key) => {
const fillStyle = state[key] === '1' ? live.value : dead.value;
return {
move: [key * cellDim, acc * cellDim],
fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
fillStyle,
};
2021-12-30 19:45:39 +01:00
},
);
}
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);
}
2021-12-30 19:45:39 +01:00
async function sleep(ms) {
await new Promise((resolve) => setTimeout(resolve, ms));
}
2021-12-30 19:45:39 +01:00
async function draw(state, acc) {
if (drawing === 0) {
return;
}
2021-12-30 19:45:39 +01:00
2021-12-31 10:31:52 +01:00
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);
2021-12-30 19:45:39 +01:00
line.map((cell) => {
ctx.moveTo(...cell.move);
ctx.fillRect(...cell.fill);
ctx.fillStyle = cell.fillStyle;
return cell;
});
2021-12-30 19:45:39 +01:00
await sleep(40);
2021-12-30 19:45:39 +01:00
2021-12-31 10:31:52 +01:00
const newAcc = () => {
2021-12-31 11:10:32 +01:00
if (position >= canvas.height && loop.checked) return 0;
2021-12-31 10:31:52 +01:00
return acc;
};
await draw(newState, newAcc() + 1);
}
2021-12-30 19:45:39 +01:00
function reset() {
2021-12-30 19:45:39 +01:00
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();
2021-12-30 19:45:39 +01:00
});
2021-12-31 11:10:32 +01:00
stopBtn.addEventListener('click', async () => {
drawing = 0;
});
2021-12-31 13:17:37 +01:00
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');
});
});