color switching button

src/components/CanvasBoard.vue

@@ -22,6 +22,8 @@
     createBoard,
     conwayRules,
     overpopulationRules,
+    lonelinessRules,
+    threebornRules,
     evolve2d,
   } from "../modules/automata.js";
   import { getRandomInt, sleep } from "../modules/common.js";
@@ -38,6 +40,8 @@
         available2dRules: {
           conway: conwayRules,
           overpopulation: overpopulationRules,
+          loneliness: lonelinessRules,
+          threeborn: threebornRules,
         },
       };
     },
@@ -89,9 +93,10 @@
     mounted() {
       this.canvas = Object.freeze(document.getElementById("board-canvas"));
       this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
-      this.ctx = this.canvas.getContext("2d");
-      this.workCtx = this.workCanvas.getContext("2d");
-      this.workCanvas.setAttribute("willReadFrequently", true);
+      this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+      this.workCtx = this.workCanvas.getContext("2d", {
+        willReadFrequently: true,
+      });
       this.canvasWidth = this.canvas.parentElement.clientWidth;
       this.canvasHeight = this.canvas.parentElement.clientHeight;
       this.setBoardWidth();
@@ -135,7 +140,7 @@
         this.drawCanvas(this.lastBoard);
         this.toggleStop();
       },
-      // draw 2D automaton on the canvas (currently only the game of life)
+      // draw 2D automaton on the canvas in a loop
       draw2d(board) {
         if (!this.canDraw) return;
         const draw2dNext = async (b) => {
@@ -145,6 +150,7 @@
             this.available2dRules[this.selected2dRules.id]
           );
           this.drawCanvas(b, this.cellProperties);
+          this.lastBoard = Object.freeze(newBoard);
           await sleep(this.refreshRate);
           draw2dNext(newBoard);
         };

src/components/MenuCellProperties.vue

@@ -6,7 +6,7 @@
         <input
           name="liveColor"
           type="color"
-          @value="cellProperties.liveColor"
+          :value="cellProperties.liveColor"
           @input="updateCellProperties"
         />
       </div>
@@ -19,6 +19,9 @@
           @input="updateCellProperties"
         />
       </div>
+      <div class="form-field">
+        <a name="switchColor" @click="switchColor">Switch Colors</a>
+      </div>
       <div class="form-field">
         <label>Cell size</label>
         <input
@@ -26,7 +29,7 @@
           type="number"
           min="1"
           :value="cellProperties.size"
-          @input="updateCellProperties"
+          @click="updateCellProperties"
         />
       </div>
     </form>
@@ -58,6 +61,17 @@
         this.setBoardWidth();
         this.setBoardHeight();
       },
+      switchColor() {
+        [this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
+          this.cellProperties["deadColor"],
+          this.cellProperties["liveColor"],
+        ];
+      },
     },
   };
 </script>
+<style scoped>
+  a:hover {
+    cursor: pointer;
+  }
+</style>

src/modules/automata.js

@@ -91,6 +91,28 @@ function conwayRules(cell, neighbors) {
   return cell;
 }
 
+// variation on the game of life's rules,
+// where the "three live neighbors" rule is ignored
+function threebornRules(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
+  return cell;
+}
+
+// variation on the game of life's rules,
+// where the loneliness rule is ignored
+function lonelinessRules(cell, neighbors) {
+  // 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;
+}
+
 // variation on the game of life's rules,
 // where the overpopulation rule is ignored
 function overpopulationRules(cell, neighbors) {
@@ -160,6 +182,8 @@ export {
   create1dStateOneCell,
   conwayRules,
   overpopulationRules,
+  lonelinessRules,
+  threebornRules,
   evolve1d,
   evolve2d,
 };

src/modules/preset.js

@@ -104,6 +104,18 @@ const preset2dRules = [
     description:
       "Variation on Conway's Game of Life *without* the overpopulation rule",
   },
+  {
+    id: "loneliness",
+    name: "Loneliness variation",
+    description:
+      "Variation on Conway's Game of Life *without* the loneliness rule",
+  },
+  {
+    id: "threeborn",
+    name: "Three lives variation",
+    description:
+      "Variation on Conway's Game of Life *without* the 'three live neighbors' rule",
+  },
 ];
 
 export { presetRuleset, initialStates, preset2dRules };