process of vueification

src/modules/automata.js

@@ -0,0 +1,122 @@
+// handles negative index and index bigger than its array length
+function guard(index, array) {
+  if (index > (array.length - 1)) return 0;
+  if (index < 0) return (array.length - 1);
+  return index;
+}
+
+// get the next evolution of a 1D CA initial state
+function evolve1d(state, rules) {
+  function getCell(index) {
+    const safeIndex = guard(index, state);
+    return state[safeIndex];
+  }
+  const newState = state.map((_, x) => {
+    const cells = [
+      getCell(x - 1),
+      getCell(x),
+      getCell(x + 1)];
+    return rules[cells.join('')];
+  });
+
+  return newState.map(Number);
+}
+
+// create a 2D board from a 1D CA initial state
+function createBoard(state, rules, height) {
+  function createBoardAcc(s, h, acc) {
+    if (h === 0) return acc;
+    const newState = evolve1d(s, rules);
+    const newAcc = acc.concat([s]);
+    return createBoardAcc(newState, h - 1, newAcc);
+  }
+  return createBoardAcc(state, height, []);
+}
+
+// Find the neighbor of a given cell in a 2D CA board
+function getCellNeighbors(board, cellCoordinates) {
+  const [x, y] = cellCoordinates;
+  const rowLength = board[0].length; // caca?
+
+  // handles board edges where the cell is missing neighbors
+  function getCell(xx, yy) {
+    const safeX = guard(xx, board);
+    const safeY = guard(yy, rowLength);
+    return board[safeX][safeY];
+  }
+
+  // the current cell is not included in the result
+  return [
+    getCell(x - 1, y - 1), getCell(x, y - 1),
+    getCell(x + 1, y - 1), getCell(x - 1, y),
+    getCell(x + 1, y), getCell(x - 1, y + 1),
+    getCell(x, y + 1), getCell(x + 1, y - 1),
+  ];
+}
+
+// Sums the value of a cell's neighbors
+function getNeighborsSum(cells) {
+  return cells.reduce((cell, acc) => cell + acc, 0);
+}
+
+// Get the next evolution of a cell according to
+// Conway's game of life rules
+function conwayRules(cell, neighbors) {
+  // loneliness rule
+  if (cell === 1 && neighbors < 2) return 0;
+  // overpopulation rule
+  if (cell === 1 && neighbors > 3) return 0;
+  // born when three live neighbors rule
+  if (cell === 0 && neighbors === 3) return 1;
+  // the cell remains the same if none apply
+  return cell;
+}
+
+// get the next evolution of a 2D CA initial state
+function evolve2d(board, rulesFn) {
+  return board.map((row, x) => row.map((cell, y) => {
+    const neighbors = getCellNeighbors(board, [x, y]);
+    const sum = getNeighborsSum(neighbors);
+    return rulesFn(cell, sum);
+  }));
+}
+
+function getDrawingValues(state, acc, cell) {
+  const d = cell.dimension;
+  return Object.keys(state).map(
+    (key) => {
+      const fillStyle = (() => {
+        if (state[key] === '1') return cell.liveColor;
+        return cell.deadColor;
+      })();
+
+      return {
+        move: [key * d, acc * d],
+        fill: [key * d, acc * d, d, d],
+        fillStyle,
+      };
+    },
+  );
+}
+
+// Populates the first state of a 1D CA with cells returned
+// by initFn
+function initialState1d(width, initFn, args) {
+  return [...Array(width)].map(
+    () => initFn(...args),
+  );
+}
+
+// Populates the first state of a 2D CA with cells returned
+// by initFn
+function initialState2d(width, height, initFn, args) {
+  return [...Array(height)].map(
+    () => [...Array(width)].map(
+      () => initFn(...args),
+    ),
+  );
+}
+
+export {
+  getDrawingValues, initialState1d, initialState2d, evolve1d, evolve2d, conwayRules, createBoard,
+};

src/modules/common.js

@@ -0,0 +1,12 @@
+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));
+}
+
+export { getRandomInt, sleep };

src/modules/main.js

@@ -0,0 +1,166 @@
+import { getRandomInt, sleep } from './common.js';
+import {
+  evolve2d, initialState1d, initialState2d, conwayRules, createBoard,
+} from './automata.js';
+
+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 cellSize = document.querySelector('#cellSize');
+const startBtn = document.querySelector('#start');
+const startBtn2d = document.querySelector('#start2d');
+const canvasRefreshBtn = document.querySelector('#canvasRefresh');
+const resetBtn = document.querySelectorAll('.reset');
+const stopBtn = document.querySelectorAll('.stop');
+// const loop = document.querySelector('#loop');
+const menuRow = document.querySelectorAll('.menu-row');
+const menuRowContent = document.querySelectorAll('.menu-row-content');
+
+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 = {};
+
+  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 getCellProperties() {
+  return {
+    size: cellSize.value,
+    liveColor: live.value,
+    deadColor: dead.value,
+  };
+}
+
+function reset() {
+  drawing = 0;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+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));
+
+  drawCanvas(board, props);
+}
+
+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);
+
+  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
+
+startBtn.addEventListener('click', async () => {
+  reset();
+
+  await sleep(60);
+
+  drawing = 1;
+
+  draw1d();
+});
+
+startBtn2d.addEventListener('click', async () => {
+  reset();
+
+  await sleep(60);
+
+  drawing = 1;
+
+  draw2d();
+});
+
+resetBtn.forEach((elem) => {
+  elem.addEventListener('click', async () => {
+    reset();
+  });
+});
+
+stopBtn.forEach((elem) => {
+  elem.addEventListener('click', async () => {
+    drawing = 0;
+  });
+});
+
+canvasRefreshBtn.addEventListener('click', () => {
+  const width = document.querySelector('#canvasWidth').value;
+  const height = document.querySelector('#canvasWidth').value;
+  canvas.width = width;
+  canvas.height = height;
+});
+
+menuRow.forEach((elem) => {
+  elem.querySelector('h2').addEventListener('click', async (e) => {
+    const parent = e.currentTarget.parentNode;
+    const menuDisplay = parent.querySelector('.menu-row-content').style;
+    if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
+    else menuDisplay.setProperty('display', 'block');
+  });
+});
+
+window.addEventListener('load', () => {
+  resizeCanvas();
+  menuRowContent.forEach((elem) => {
+    elem.style.setProperty('display', 'none');
+  });
+});
+
+window.addEventListener('resize', () => {
+//  resizeCanvas();
+});