2D CA from uploaded picture

Reviewed-on: #5

src/App.vue

@@ -18,7 +18,7 @@
   import MainMenu from "./components/MainMenu.vue";
   import CanvasBoard from "./components/CanvasBoard.vue";
   import MenuReset from "./components/MenuReset.vue";
-  import { mapWritableState, mapActions } from "pinia";
+  import { mapState, mapWritableState, mapActions } from "pinia";
   import { globalStore } from "./stores/index.js";
 
   export default {
@@ -30,15 +30,12 @@
     },
     data() {
       return {
-        mainMenu: false,
         windowWidth: window.innerWidth,
       };
     },
     computed: {
-      ...mapWritableState(globalStore, {
-        canvasWidth: "canvasWidth",
-        canvasHeight: "canvasHeight",
-      }),
+      ...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
+      ...mapWritableState(globalStore, ["canvasWidth", "canvasHeight"]),
     },
     mounted() {
       this.$nextTick(() => {
@@ -49,9 +46,13 @@
       window.removeEventListener("resize", this.onResize);
     },
     methods: {
-      ...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
+      ...mapActions(globalStore, [
+        "setBoardWidth",
+        "setBoardHeight",
+        "setMainMenu",
+      ]),
       toggleMainMenu() {
-        this.mainMenu = !this.mainMenu;
+        this.setMainMenu(!this.mainMenu);
       },
       onResize() {
         this.$nextTick(() => {

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"
   />
@@ -18,12 +24,15 @@
     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,
       };
     },
@@ -72,8 +81,11 @@
       },
     },
     mounted() {
-      this.canvas = Object.freeze(document.getElementById("canvas-board"));
+      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.canvasWidth = this.canvas.parentElement.clientWidth;
       this.canvasHeight = this.canvas.parentElement.clientHeight;
       this.setBoardWidth();
@@ -114,7 +126,7 @@
         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)
@@ -145,17 +157,55 @@
       draw2dLast() {
         if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
       },
-      // draw 2d automaton from an uploaded picture
-      draw2dPicture(e) {
-        this.picture.width = this.canvas.width;
-        this.picture.height = this.canvas.height;
-        this.ctx.drawImage(
+      // 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.canvas.width,
-          this.canvas.height
+          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

src/components/MainMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="main-menu">
-    <MenuGeneralOptions :active="active" @update-active="updateActive" />
-    <MenuCellProperties :active="active" @update-active="updateActive" />
-    <MenuElementaryCA :active="active" @update-active="updateActive" />
-    <Menu2dCA :active="active" @update-active="updateActive" />
+    <MenuGeneralOptions />
+    <MenuCellProperties />
+    <MenuElementaryCA />
+    <Menu2dCA />
   </div>
 </template>
 
@@ -20,21 +20,6 @@
       MenuElementaryCA,
       Menu2dCA,
     },
-    data() {
-      return {
-        active: "",
-      };
-    },
-    methods: {
-      // set the opened submenu. If already active, reset it so it can close
-      updateActive(menu) {
-        if (menu === this.active) {
-          this.active = "";
-        } else {
-          this.active = menu;
-        }
-      },
-    },
   };
 </script>
 
@@ -43,7 +28,6 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-
     flex: 1;
   }
 

src/components/MenuCellProperties.vue

@@ -34,11 +34,11 @@
 </template>
 
 <script>
-  import { mapWritableState } from "pinia";
+  import { mapActions, mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
-    name: "MainMenu",
+    name: "MenuCellProperties",
     components: {
       MenuRow,
     },
@@ -46,6 +46,7 @@
       ...mapWritableState(globalStore, ["cellProperties"]),
     },
     methods: {
+      ...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
       getCellProperties(event) {
         const elem = event.target;
         const prop = this.cellProperties;
@@ -54,6 +55,8 @@
       updateCellProperties(event) {
         const elem = event.target;
         this.cellProperties[elem.name] = elem.value;
+        this.setBoardWidth();
+        this.setBoardHeight();
       },
     },
   };

src/components/MenuRow.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="menu-row">
-    <h2 :id="rowTitle" @click="$emit('update-active', rowTitle)">
+    <h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
       {{ rowTitle }}
     </h2>
-    <div
-      v-if="isActive"
-      class="menu-row-content"
-      @mouseleave="$emit('update-active', '')"
-    >
+    <div v-if="isActive" ref="content" class="menu-row-content">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
+  import { mapActions, mapState } from "pinia";
+  import { globalStore } from "../stores/index.js";
   export default {
     name: "MenuRow",
     props: {
@@ -21,15 +19,38 @@
         type: String,
         default: "",
       },
-      active: {
-        type: String,
-        default: "",
+    },
+    computed: {
+      ...mapState(globalStore, ["activeSubMenu"]),
+      isActive() {
+        return this.rowTitle == this.activeSubMenu;
       },
     },
-    emits: ["update-active"],
-    computed: {
-      isActive() {
-        return this.rowTitle == this.active;
+    beforeUnmount() {
+      window.removeEventListener("click", this.onWindowClick);
+    },
+    methods: {
+      ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
+      onKeyDown: function (event) {
+        // escape
+        if (event.keyCode == 27) {
+          this.setActiveSubMenu("");
+        }
+      },
+      storeActiveSubMenu() {
+        window.addEventListener("click", this.onWindowClick);
+        this.setActiveSubMenu(this.rowTitle);
+      },
+      // hides submenu when click is detected outside from it
+      onWindowClick(event) {
+        const form = this.$refs.content;
+        if (form != null) {
+          if (!form.contains(event.target)) {
+            this.setActiveSubMenu("");
+            this.setMainMenu(false);
+          }
+          return;
+        }
       },
     },
   };

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/stores/index.js

@@ -36,6 +36,8 @@ export const globalStore = defineStore("globalStore", {
       reset: false,
       canDraw: true,
       picture: null,
+      mainMenu: false,
+      activeSubMenu: "",
     };
   },
   actions: {
@@ -48,20 +50,25 @@ export const globalStore = defineStore("globalStore", {
       );
     },
     toggleDraw1d() {
+      this.setActiveSubMenu("");
+      this.setMainMenu(false);
       this.draw1d = true;
     },
     toggleDraw2d() {
+      this.setActiveSubMenu("");
+      this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
       this.draw2d = true;
     },
     toggleDraw2dLast() {
+      this.setActiveSubMenu("");
+      this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
       this.draw2dLast = true;
     },
     toggle2dDrawFromPicture() {
-      console.log("toggleDraw2dFromPicture");
       this.toggleStop();
       this.canDraw = true;
       this.draw2dpicture = true;
@@ -77,5 +84,12 @@ export const globalStore = defineStore("globalStore", {
       this.draw2dpicture = false;
       this.canDraw = false;
     },
+    setActiveSubMenu(data) {
+      if (this.activeSubMenu == data) this.activeSubMenu = "";
+      else this.activeSubMenu = data;
+    },
+    setMainMenu(data) {
+      this.mainMenu = data;
+    },
   },
 });