src/components/CanvasBoard.vue

@@ -47,6 +47,10 @@
         canvasHeight: "canvasHeight",
         getReset: "reset",
       }),
+      // used to determine the dimensions of the board
+      max() {
+        return Math.max(this.boardWidth, this.boardHeight);
+      },
     },
     watch: {
       getDraw1d(value) {
@@ -76,6 +80,7 @@
         "setBoardWidth",
         "setBoardHeight",
       ]),
+      // draws the board on the canvas
       drawCanvas(board) {
         const props = this.cellProperties;
         board.map((row, y) => {
@@ -92,22 +97,22 @@
           });
         });
       },
+      // create a first state, either a single living cell
+      // at the center or random ones
       compute1dInitialState() {
         if (this.initial1dState === "onecell")
           return create1dStateOneCell(this.boardWidth);
         return create1dState(this.boardWidth, getRandomInt, [0, 2]);
       },
+      // draw elementary automaton on the canvas based on selected ruleset
       draw1d() {
         const initialState = this.compute1dInitialState();
-        const board = createBoard(
-          initialState,
-          this.ruleset.rules,
-          this.boardWidth
-        );
+        const board = createBoard(initialState, this.ruleset.rules, this.max);
         this.lastBoard = Object.freeze(board);
         this.drawCanvas(board);
         this.toggleStop();
       },
+      // draw 2D automaton on the canvas (currently only the game of life)
       draw2d(board) {
         if (!this.canDraw) return;
         const draw2dNext = async (b) => {
@@ -119,6 +124,7 @@
         };
         return draw2dNext(board);
       },
+      // draw 2d automaton from a new state
       draw2dNew() {
         const initialState = create2dState(
           this.boardWidth,
@@ -130,9 +136,11 @@
         this.lastBoard = Object.freeze(board);
         this.draw2d(board);
       },
+      // draw 2d automaton from the last known generated board
       async draw2dLast() {
         if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
       },
+      // stop drawing routines and clear the canvas
       reset() {
         this.toggleStop();
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

src/components/MenuRow.vue

@@ -25,7 +25,6 @@
     emits: ["update-active"],
     computed: {
       isActive() {
-        console.log(this.rowTitle, "vs", this.active);
         return this.rowTitle == this.active;
       },
     },

src/modules/automata.js

@@ -31,11 +31,12 @@ function evolve1d(state, rules) {
 // }
 
 // performance "choke point" in full imperative
-function createBoard(state, rules, height) {
+function createBoard(state, rules, max) {
   var board = [];
   let prevState = [];
-  for (let i = 0; i < height; i++) {
+  for (let i = 0; i < max; i++) {
     let nextState = [];
+    // use the passed initial step during first iteration
     if (i == 0) {
       nextState = evolve1d(state, rules);
     } else {
@@ -121,7 +122,7 @@ function getDrawingValues(state, acc, cell) {
 // Populates the first state with a single living cell in the center
 function create1dStateOneCell(width) {
   return [...Array(width)].map((cell, index) => {
-    if (index === width / 2 || index === width + 1 / 2) return 1;
+    if (index === Math.floor(width / 2)) return 1;
     return 0;
   });
 }