diff --git a/src/index.html b/src/index.html
index 1e762e8..2760650 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,25 @@
Cellular Automata Explorer
diff --git a/src/js/automata.js b/src/js/automata.js
index a142b64..8cff405 100644
--- a/src/js/automata.js
+++ b/src/js/automata.js
@@ -6,7 +6,7 @@ function guard(index, array) {
}
// get the next evolution of a 1D CA initial state
-function evolve(state, rules) {
+function evolve1d(state, rules) {
function getCell(index) {
const safeIndex = guard(index, state);
return state[safeIndex];
@@ -26,7 +26,7 @@ function evolve(state, rules) {
function createBoard(state, rules, height) {
function createBoardAcc(s, h, acc) {
if (h === 0) return acc;
- const newState = evolve(s, rules);
+ const newState = evolve1d(s, rules);
const newAcc = acc.concat([s]);
return createBoardAcc(newState, h - 1, newAcc);
}
@@ -118,5 +118,5 @@ function initialState2d(width, height, initFn, args) {
}
export {
- getDrawingValues, initialState1d, initialState2d, evolve, evolve2d, conwayRules, createBoard,
+ getDrawingValues, initialState1d, initialState2d, evolve1d, evolve2d, conwayRules, createBoard,
};
diff --git a/src/js/main.js b/src/js/main.js
index 0cb5785..7a32556 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,7 +1,6 @@
-// TODO : Change board resolution according to the set cell dimensions
import { getRandomInt, sleep } from './common.js';
import {
- evolve, evolve2d, getDrawingValues, initialState1d, initialState2d, conwayRules, createBoard,
+ evolve2d, initialState1d, initialState2d, conwayRules, createBoard,
} from './automata.js';
let drawing = 1;
@@ -12,16 +11,30 @@ const ctx = canvas.getContext('2d');
const main = document.querySelector('#main');
const dead = document.querySelector('#dead');
const live = document.querySelector('#live');
+const cellSize = document.querySelector('#cellSize');
const startBtn = document.querySelector('#start');
const startBtn2d = document.querySelector('#start2d');
-const resetBtn = document.querySelector('#reset');
-const stopBtn = document.querySelector('#stop');
-const cellSize = document.querySelector('#cellSize');
-const loop = document.querySelector('#loop');
+const resetBtn = document.querySelectorAll('.reset');
+const stopBtn = document.querySelectorAll('.stop');
+// const loop = document.querySelector('#loop');
const menuRow = document.querySelectorAll('.menu-row');
-canvas.width = main.offsetWidth * 0.9;
-canvas.height = main.offsetHeight * 0.9;
+function drawCanvas(board, props) {
+ board.map((row, y) => {
+ const d = props.size;
+ return row.map(
+ (cell, x) => {
+ ctx.fillStyle = (
+ () => {
+ if (cell === 1) return props.liveColor;
+ return props.deadColor;
+ })();
+ ctx.fillRect(x * d, y * d, d, d);
+ return cell;
+ },
+ );
+ });
+}
function getRules() {
const rules = {};
@@ -38,60 +51,55 @@ function getRules() {
return rules;
}
+function getCellProperties() {
+ return {
+ size: cellSize.value,
+ liveColor: live.value,
+ deadColor: dead.value,
+ };
+}
+
function reset() {
drawing = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
-async function draw(dimension) {
- if (drawing === 0) {
- return;
- }
+function resizeCanvas() {
+ canvas.width = main.offsetWidth * 0.9;
+ canvas.height = main.offsetHeight * 0.9;
+}
+async function draw1d() {
const rules = getRules();
+ const props = getCellProperties();
+ const initialState = initialState1d(
+ Math.floor(canvas.width / props.size),
+ getRandomInt,
+ [0, 2],
+ );
+ const board = createBoard(initialState, rules, Math.floor(canvas.height / props.size));
- const cellProperties = {
- dimensions: cellSize.value,
- liveColor: live.value,
- deadColor: dead.value,
- };
+ drawCanvas(board, props);
+}
- const initialState = (
- () => {
- if (dimension === '1d') {
- return initialState1d(
- Math.floor(canvas.width / cellProperties.dimensions),
- getRandomInt,
- [0, 2],
- );
- }
- return evolve2d(initialState2d(
- Math.floor(canvas.width / cellProperties.dimensions),
- Math.floor(canvas.height / cellProperties.dimensions),
- getRandomInt,
- [0, 2]), conwayRules);
- })();
+async function draw2d() {
+ const props = getCellProperties();
+ const initialState = initialState2d(
+ Math.floor(canvas.width / props.size),
+ Math.floor(canvas.height / props.size),
+ getRandomInt,
+ [0, 2],
+ );
+ const board = evolve2d(initialState, conwayRules);
- const board = (
- () => {
- if (dimension === '1d') return createBoard(initialState, rules, Math.floor(canvas.height / cellProperties.dimensions));
- return initialState;
- })();
-
- board.map((row, y) => {
- const d = cellProperties.dimensions;
- return row.map(
- (cell, x) => {
- ctx.fillStyle = (
- () => {
- if (cell === 1) return cellProperties.liveColor;
- return cellProperties.deadColor;
- })();
- ctx.fillRect(x * d, y * d, d, d);
- return cell;
- },
- );
- });
+ async function draw2dNext(b) {
+ if (drawing === 0) return;
+ const newBoard = evolve2d(b, conwayRules);
+ drawCanvas(b, props);
+ await sleep(300);
+ draw2dNext(newBoard);
+ }
+ return draw2dNext(board);
}
// Listeners
@@ -103,7 +111,7 @@ startBtn.addEventListener('click', async () => {
drawing = 1;
- draw('1d');
+ draw1d();
});
startBtn2d.addEventListener('click', async () => {
@@ -113,15 +121,19 @@ startBtn2d.addEventListener('click', async () => {
drawing = 1;
- draw('2d');
+ draw2d();
});
-resetBtn.addEventListener('click', async () => {
- reset();
+resetBtn.forEach((elem) => {
+ elem.addEventListener('click', async () => {
+ reset();
+ });
});
-stopBtn.addEventListener('click', async () => {
- drawing = 0;
+stopBtn.forEach((elem) => {
+ elem.addEventListener('click', async () => {
+ drawing = 0;
+ });
});
menuRow.forEach((elem) => {
@@ -132,3 +144,11 @@ menuRow.forEach((elem) => {
else menuDisplay.setProperty('display', 'block');
});
});
+
+window.addEventListener('load', () => {
+ resizeCanvas();
+});
+
+window.addEventListener('resize', () => {
+ resizeCanvas();
+});
diff --git a/src/style.css b/src/style.css
index 339658d..6f99e1f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -40,6 +40,7 @@ input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
+ margin-right: 10px;
}
.form-field {