src/components/CanvasBoard.vue

@@ -1,7 +1,13 @@
 <template>
   <canvas
-    id="canvas-board"
-    ref="canvas-board"
+    id="board-canvas"
+    ref="board-canvas"
+    :width="canvasWidth"
+    :height="canvasHeight"
+  />
+  <canvas
+    id="work-canvas"
+    ref="work-canvas"
     :width="canvasWidth"
     :height="canvasHeight"
   />
@@ -15,16 +21,28 @@
     create2dState,
     createBoard,
     conwayRules,
+    overpopulationRules,
+    lonelinessRules,
+    threebornRules,
     evolve2d,
   } from "../modules/automata.js";
   import { getRandomInt, sleep } from "../modules/common.js";
+  import { picToBoard, picToBlackAndWhite } from "../modules/picture.js";
 
   export default {
     name: "CanvasBoard",
     data() {
       return {
         canvas: null,
+        workCanvas: null,
+        workCtx: null,
         ctx: null,
+        available2dRules: {
+          conway: conwayRules,
+          overpopulation: overpopulationRules,
+          loneliness: lonelinessRules,
+          threeborn: threebornRules,
+        },
       };
     },
     computed: {
@@ -38,8 +56,11 @@
         getDraw1d: "draw1d",
         getDraw2d: "draw2d",
         getDraw2dLast: "draw2dLast",
+        getDraw2dPicture: "draw2dpicture",
         boardWidth: "boardWidth",
         boardHeight: "boardHeight",
+        picture: "picture",
+        selected2dRules: "selected2dRules",
       }),
       ...mapWritableState(globalStore, {
         lastBoard: "lastBoard",
@@ -62,13 +83,20 @@
       getDraw2dLast(value) {
         if (value == true) this.draw2dLast();
       },
+      getDraw2dPicture(value) {
+        if (value == true) this.draw2dPicture();
+      },
       getReset(value) {
         if (value == true) this.reset();
       },
     },
     mounted() {
-      this.canvas = Object.freeze(document.getElementById("canvas-board"));
-      this.ctx = this.canvas.getContext("2d");
+      this.canvas = Object.freeze(document.getElementById("board-canvas"));
+      this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
+      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();
@@ -109,16 +137,20 @@
         const initialState = this.compute1dInitialState();
         const board = createBoard(initialState, this.ruleset.rules, this.max);
         this.lastBoard = Object.freeze(board);
-        this.drawCanvas(board);
+        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) => {
           if (!this.canDraw) return;
-          const newBoard = evolve2d(b, conwayRules);
+          const newBoard = evolve2d(
+            b,
+            this.available2dRules[this.selected2dRules.id]
+          );
           this.drawCanvas(b, this.cellProperties);
+          this.lastBoard = Object.freeze(newBoard);
           await sleep(this.refreshRate);
           draw2dNext(newBoard);
         };
@@ -137,9 +169,60 @@
         this.draw2d(board);
       },
       // draw 2d automaton from the last known generated board
-      async draw2dLast() {
+      draw2dLast() {
         if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
       },
+      // draw 2d automaton from an uploaded picture.
+      // use the picture representation as an initial state
+      draw2dPicture() {
+        // get image data by drawing it on a work canvas
+        this.workCtx.drawImage(
+          this.picture,
+          0,
+          0,
+          this.canvasWidth,
+          this.canvasHeight
+        );
+        const imgData = this.workCtx.getImageData(
+          0,
+          0,
+          this.canvasWidth,
+          this.canvasHeight
+        );
+
+        // convert the image to black and white
+        const black = picToBlackAndWhite(
+          imgData.data,
+          this.canvasWidth,
+          this.canvasHeight
+        );
+
+        // draw it back on the canvas
+        this.ctx.putImageData(black, 0, 0);
+
+        // draw the image back on the work canvas with the dimensions of the board
+        this.workCtx.drawImage(
+          this.picture,
+          0,
+          0,
+          this.boardWidth,
+          this.boardHeight
+        );
+
+        const resized = this.workCtx.getImageData(
+          0,
+          0,
+          this.boardWidth,
+          this.boardHeight
+        );
+
+        // convert the resized image into a 2D board of boolean based on pixel value
+        this.lastBoard = Object.freeze(
+          picToBoard(resized.data, this.boardWidth, this.boardHeight)
+        );
+
+        this.toggleStop();
+      },
       // stop drawing routines and clear the canvas
       reset() {
         this.toggleStop();

src/components/Menu2dCA.vue

@@ -15,26 +15,81 @@
     </div>
     <div class="form-field">
       <label>Start from picture</label><br />
-      <input type="file" @change="previewFile" />
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
+      <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 } 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: {
       MenuRow,
     },
+    data() {
+      return {
+        uploadedFile: "",
+        preset2dRules: preset2dRules,
+      };
+    },
+    computed: {
+      ...mapWritableState(globalStore, ["picture", "selected2dRules"]),
+    },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
-      previewFile(event) {
-        console.log(event.target.files);
+      ...mapActions(globalStore, [
+        "toggleDraw2dLast",
+        "toggleDraw2d",
+        "toggle2dDrawFromPicture",
+      ]),
+      preparePicture(event) {
+        const files = event.target.files;
+        this.picture = new Image();
+        this.picture.width = this.canvasWidth;
+        if (FileReader && files && files.length) {
+          const reader = new FileReader();
+
+          reader.onload = () => {
+            this.picture.src = Object.freeze(reader.result);
+            this.toggle2dDrawFromPicture();
+          };
+
+          reader.onerror = () => {
+            console.log(reader.error);
+          };
+
+          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;
       },
     },
   };

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>
@@ -34,7 +37,7 @@
 </template>
 
 <script>
-  import { mapWritableState } from "pinia";
+  import { mapActions, mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
@@ -46,6 +49,7 @@
       ...mapWritableState(globalStore, ["cellProperties"]),
     },
     methods: {
+      ...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
       getCellProperties(event) {
         const elem = event.target;
         const prop = this.cellProperties;
@@ -54,7 +58,25 @@
       updateCellProperties(event) {
         const elem = event.target;
         this.cellProperties[elem.name] = elem.value;
+        this.setBoardWidth();
+        this.setBoardHeight();
+      },
+      switchColor() {
+        [this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
+          this.cellProperties["deadColor"],
+          this.cellProperties["liveColor"],
+        ];
       },
     },
   };
 </script>
+<style scoped>
+  a {
+    font-weight: bold;
+    border: 1px solid white;
+    padding: 2px;
+  }
+  a:hover {
+    cursor: pointer;
+  }
+</style>

src/components/MenuRow.vue

@@ -30,7 +30,11 @@
       window.removeEventListener("click", this.onWindowClick);
     },
     methods: {
-      ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
+      ...mapActions(globalStore, [
+        "setActiveSubMenu",
+        "toggleMainMenu",
+        "setMainMenu",
+      ]),
       onKeyDown: function (event) {
         // escape
         if (event.keyCode == 27) {

src/modules/automata.js

@@ -91,6 +91,39 @@ 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) {
+  // 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 +181,9 @@ export {
   createBoard,
   create1dStateOneCell,
   conwayRules,
+  overpopulationRules,
+  lonelinessRules,
+  threebornRules,
   evolve1d,
   evolve2d,
 };

src/modules/picture.js

@@ -0,0 +1,39 @@
+// https://stackoverflow.com/questions/4492385/convert-simple-array-into-two-dimensional-array-matrix
+// convert a 1D array into a 2D matrix
+export function toMatrix(array, width) {
+  return array.reduce(
+    (rows, key, index) =>
+      (index % width == 0
+        ? rows.push([key])
+        : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+}
+
+// convert an image into a black and white image
+export function picToBlackAndWhite(pixels, width, height) {
+  return pixels.reduce((acc, pixel, index) => {
+    if (index % 4 == 0) {
+      const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
+      const colour = count >= 255 ? 255 : 1;
+      acc.data[index] = colour;
+      acc.data[index + 1] = colour;
+      acc.data[index + 2] = colour;
+      acc.data[index + 3] = 255;
+    }
+    return acc;
+  }, new ImageData(width, height));
+}
+
+// convert an ImageData into a 2D array of boolean (0, 1) values
+export function picToBoard(pixels, width, height) {
+  const flat = pixels.reduce((acc, pixel, index) => {
+    if (index % 4 == 0) {
+      const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
+      const value = count >= 255 ? 1 : 0;
+      acc.push(value);
+    }
+    return acc;
+  }, []);
+  return toMatrix(flat, Math.max(width, height));
+}

src/modules/preset.js

@@ -92,4 +92,30 @@ 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",
+  },
+  {
+    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 };

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",
@@ -32,8 +37,10 @@ export const globalStore = defineStore("globalStore", {
       draw1d: false,
       draw2d: false,
       draw2dLast: false,
+      draw2dpicture: false,
       reset: false,
       canDraw: true,
+      picture: null,
       mainMenu: false,
       activeSubMenu: "",
     };
@@ -66,6 +73,11 @@ export const globalStore = defineStore("globalStore", {
       this.canDraw = true;
       this.draw2dLast = true;
     },
+    toggle2dDrawFromPicture() {
+      this.toggleStop();
+      this.canDraw = true;
+      this.draw2dpicture = true;
+    },
     toggleReset() {
       this.toggleStop();
       this.reset = true;
@@ -74,6 +86,7 @@ export const globalStore = defineStore("globalStore", {
       this.draw1d = false;
       this.draw2d = false;
       this.draw2dLast = false;
+      this.draw2dpicture = false;
       this.canDraw = false;
     },
     setActiveSubMenu(data) {