refresh rate, some attempts at optimizing

src/components/CanvasBoard.vue

@@ -89,8 +89,8 @@
       getDraw2d(value) {
         if (value == true) this.draw2dNew();
       },
-      getDraw2dLast(value) {
-        if (value == true) this.draw2dLast();
+      async getDraw2dLast(value) {
+        if (value == true) await this.draw2dLast();
       },
       getDraw2dPicture(value) {
         if (value == true) this.draw2dPicture();
@@ -118,10 +118,10 @@
         "setBoardHeight",
       ]),
       // draws the board on the canvas
-      drawCanvas(board, width, height) {
+      async drawCanvas(board, width, height) {
         const d = this.cellProperties.size;
         // bool to RGBA colors
-        const img = boardToPic(board, width, height, this.cellProperties);
+        const img = await boardToPic(board, width, height, this.cellProperties);
         // rescale and draw
         this.ctx.save();
         this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
@@ -168,14 +168,14 @@
         this.lastBoard = Object.freeze(newBoard);
       },
       // draw 2d automaton in a loop, starting from passed state
-      async draw2dNext(board) {
-        requestAnimationFrame(() => {
-          if (!this.canDraw) return;
-          const newBoard = evolve2d(board, this.selectedRules);
-          this.draw2d(board);
-          this.lastBoard = Object.freeze(newBoard);
-          return this.draw2dNext(newBoard);
-        });
+      async draw2dNext(board, time) {
+        setTimeout(() => {
+          requestAnimationFrame(() => {
+            if (!this.canDraw) return;
+            this.draw2d(board);
+            return this.draw2dNext(this.lastBoard);
+          });
+        }, this.refreshRate);
       },
       // draw 2d automaton from a new state
       async draw2dNew() {

src/modules/automata.js

@@ -1,14 +1,14 @@
 // 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;
+function guard(index, arrayLength) {
+  if (index > arrayLength - 1) return 0;
+  if (index < 0) return arrayLength - 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);
+    const safeIndex = guard(index, state.length);
     return state[safeIndex];
   }
   const newState = state.map((_, x) => {
@@ -55,8 +55,8 @@ function getCellNeighbors(board, cellCoordinates) {
 
   // handles board edges where the cell is missing neighbors
   function getCell(xx, yy) {
-    const safeX = guard(xx, board);
-    const safeY = guard(yy, rowLength);
+    const safeX = guard(xx, board.length);
+    const safeY = guard(yy, rowLength.length);
     return board[safeX][safeY];
   }
 

src/modules/picture.js

@@ -54,13 +54,16 @@ export function picToBoard(pixels, width, height) {
 export function boardToPic(board, width, height, cellProperties) {
   const live = cellProperties.liveColor;
   const dead = cellProperties.deadColor;
-  return board.flat().reduce((acc, cell, index) => {
-    const color = cell === 1 ? hexToRGB(live) : hexToRGB(dead);
+  const img = new ImageData(width, height);
+  const colors = [hexToRGB(live), hexToRGB(dead)];
+  board.flat().reduce((acc, cell, index) => {
+    const color = colors[cell];
     const i = index * 4;
-    acc.data[i] = color[0];
-    acc.data[i + 1] = color[1];
-    acc.data[i + 2] = color[2];
-    acc.data[i + 3] = 255;
+    acc[i] = color[0];
+    acc[i + 1] = color[1];
+    acc[i + 2] = color[2];
+    acc[i + 3] = 255;
     return acc;
-  }, new ImageData(width, height));
+  }, img.data);
+  return img;
 }