2D CA from uploaded picture

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/MenuCellProperties.vue

@@ -34,7 +34,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 +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/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

@@ -69,7 +69,6 @@ export const globalStore = defineStore("globalStore", {
       this.draw2dLast = true;
     },
     toggle2dDrawFromPicture() {
-      console.log("toggleDraw2dFromPicture");
       this.toggleStop();
       this.canDraw = true;
       this.draw2dpicture = true;