src/components/CanvasBoard.vue

@@ -21,6 +21,7 @@
     create2dState,
     createBoard,
     conwayRules,
+    overpopulationRules,
     evolve2d,
   } from "../modules/automata.js";
   import { getRandomInt, sleep } from "../modules/common.js";
@@ -34,6 +35,10 @@
         workCanvas: null,
         workCtx: null,
         ctx: null,
+        available2dRules: {
+          conway: conwayRules,
+          overpopulation: overpopulationRules,
+        },
       };
     },
     computed: {
@@ -51,6 +56,7 @@
         boardWidth: "boardWidth",
         boardHeight: "boardHeight",
         picture: "picture",
+        selected2dRules: "selected2dRules",
       }),
       ...mapWritableState(globalStore, {
         lastBoard: "lastBoard",
@@ -134,7 +140,10 @@
         if (!this.canDraw) return;
         const draw2dNext = async (b) => {
           if (!this.canDraw) return;
-          const newBoard = evolve2d(b, conwayRules);
+          const newBoard = evolve2d(
+            b,
+            this.available2dRules[this.selected2dRules.id]
+          );
           this.drawCanvas(b, this.cellProperties);
           await sleep(this.refreshRate);
           draw2dNext(newBoard);

src/components/Menu2dCA.vue

@@ -17,14 +17,33 @@
       <label>Start from picture</label><br />
       <input type="file" @change="preparePicture" />
     </div>
+    <div class="form-field">
+      <label>
+        Rules
+        <br />
+        <select
+          name="preset2dRules"
+          :value="selected2dRules.id"
+          @input="update2dRules"
+        >
+          <option
+            v-for="(state, index) in preset2dRules"
+            :key="'initial-state-elementary' + index"
+            :value="state.id"
+          >
+            {{ state.name }}
+          </option>
+        </select>
+      </label>
+    </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions, mapWritableState } from "pinia";
   import MenuRow from "./MenuRow.vue";
+  import { mapActions, mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
-
+  import { preset2dRules } from "../modules/preset.js";
   export default {
     name: "Menu2dCA",
     components: {
@@ -33,10 +52,11 @@
     data() {
       return {
         uploadedFile: "",
+        preset2dRules: preset2dRules,
       };
     },
     computed: {
-      ...mapWritableState(globalStore, ["picture"]),
+      ...mapWritableState(globalStore, ["picture", "selected2dRules"]),
     },
     methods: {
       ...mapActions(globalStore, [
@@ -63,6 +83,14 @@
           reader.readAsDataURL(files[0]);
         }
       },
+      update2dRules(event) {
+        const elem = event.target;
+        const id = elem.value;
+        const newRuleset = this.preset2dRules.find((ruleset) => {
+          return ruleset.id === id;
+        });
+        this.selected2dRules = newRuleset;
+      },
     },
   };
 </script>

src/modules/automata.js

@@ -91,6 +91,17 @@ function conwayRules(cell, neighbors) {
   return cell;
 }
 
+// variation on the game of life's rules,
+// where the overpopulation rule is ignored
+function overpopulationRules(cell, neighbors) {
+  // loneliness rule
+  if (cell === 1 && neighbors < 2) 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
 // Rules : Moore neighborhood
 function evolve2d(board, rulesFn) {
@@ -148,6 +159,7 @@ export {
   createBoard,
   create1dStateOneCell,
   conwayRules,
+  overpopulationRules,
   evolve1d,
   evolve2d,
 };

src/modules/preset.js

@@ -92,4 +92,18 @@ const initialStates = [
   },
 ];
 
-export { presetRuleset, initialStates };
+const preset2dRules = [
+  {
+    id: "conway",
+    name: "Conway's Game of Life",
+    description: "The most popular 2d automata",
+  },
+  {
+    id: "overpopulation",
+    name: "Overpopulation variation",
+    description:
+      "Variation on Conway's Game of Life *without* the overpopulation rule",
+  },
+];
+
+export { presetRuleset, initialStates, preset2dRules };

src/stores/index.js

@@ -16,6 +16,11 @@ export const globalStore = defineStore("globalStore", {
           "000": 1,
         },
       },
+      selected2dRules: {
+        id: "conway",
+        name: "Conway's Game of Life",
+        description: "The most popular 2d automata",
+      },
       cellProperties: {
         size: 3,
         liveColor: "#000000",