renderer module

src/App.vue

@@ -16,8 +16,8 @@
   const onResize = () => {
     nextTick(() => {
       windowWidth.value = window.innerWidth;
-      store.canvasWidth = window.innerWidth;
+      // TODO: changing the width will clear the canvas. Find something else
-      store.canvasHeight = window.innerHeight;
+      store.renderer.resize(window.innerWidth, window.innerHeight);
       store.setBoardWidth();
       store.setBoardHeight();
     });

src/components/CanvasBoard.vue

@@ -15,16 +15,9 @@
     create1dInitialState,
     create2dRandomGrid,
   } from "../modules/board.js";
-  import { boardToPic, picToBoard } from "../modules/picture.js";
 
   const store = globalStore();
 
-  // TODO: Do we really need to declare a work canvas in this scope?
-  // Do we really need to declare a canvas here at all?
-  let canvas = null;
-  let workCanvas = null;
-  let workCtx = null;
-  let ctx = null;
   const available2dRules = {
     conway: conwayRules,
     overpopulation: overpopulationRules,
@@ -35,6 +28,7 @@
   };
 
   // used to determine the dimensions of the board
+  // TODO: should be a Board method
   const max = () => {
     return Math.max(store.board.width, store.board.height);
   };
@@ -79,31 +73,28 @@
   );
 
   onMounted(() => {
-    canvas = Object.freeze(document.getElementById("board-canvas"));
+    // TODO : butt ugly.
-    workCanvas = Object.freeze(document.getElementById("work-canvas"));
+    const canvas = document.getElementById("board-canvas");
-    ctx = canvas.getContext("2d", { willReadFrequently: true });
+    store.renderer.width = canvas.parentElement.clientWidth;
-    workCtx = workCanvas.getContext("2d", {
+    store.renderer.height = canvas.parentElement.clientHeight;
+    store.renderer.canvas = canvas;
+    store.renderer.ctx = store.renderer.canvas.getContext("2d", {
+      willReadFrequently: true,
+    });
+    store.renderer.workCanvas = new OffscreenCanvas(
+      canvas.parentElement.clientWidth,
+      canvas.parentElement.clientHeight
+    );
+    store.renderer.workCtx = store.renderer.workCanvas.getContext("2d", {
       willReadFrequently: true,
     });
-    store.canvasWidth = canvas.parentElement.clientWidth;
-    store.canvasHeight = canvas.parentElement.clientHeight;
     store.setBoardWidth();
     store.setBoardHeight();
   });
 
   // draws the board on the canvas
   const drawCanvas = async (board) => {
-    const d = board.cellProperties.size;
+    store.renderer.render(board);
-    // bool to RGBA colors
-    const img = await boardToPic(board);
-    // rescale and draw
-    ctx.save();
-    ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
-    workCtx.putImageData(img, 0, 0);
-    ctx.imageSmoothingEnabled = false;
-    ctx.scale(d, d);
-    ctx.drawImage(workCanvas, 0, 0, store.canvasWidth, store.canvasHeight);
-    ctx.restore();
   };
 
   // draw elementary automaton on the canvas based on selected ruleset
@@ -159,47 +150,18 @@
   // draw 2d automaton from an uploaded picture.
   // use the picture representation as an initial state
   const draw2dPicture = () => {
-    // draw image on canvas
+    store.renderer.renderImage(store.picture);
-    ctx.fillStyle = "black";
+    const newBoard = store.renderer.getResizedImageData(
-    ctx.fillRect(0, 0, store.canvasWidth, store.canvasHeight);
-    ctx.drawImage(
       store.picture,
-      Math.floor((store.canvasWidth - store.picture.width) / 2),
+      store.board
-      Math.floor((store.canvasHeight - store.picture.height) / 2),
-      store.picture.width,
-      store.picture.height
     );
-
+    store.board.grid = Object.freeze(newBoard);
-    // draw the image back on the work canvas with the dimensions of the board
-    workCtx.drawImage(
-      store.picture,
-      0,
-      0,
-      store.board.width,
-      store.board.height
-    );
-
-    // get the resized image data from work canvas
-    const resized = workCtx.getImageData(
-      0,
-      0,
-      store.board.width,
-      store.board.height
-    );
-
-    // convert the image into a 2D board of boolean based on pixel value
-    store.board.grid = Object.freeze(
-      picToBoard(resized.data, store.board.width, store.board.height)
-    );
-
-    store.toggleStop();
   };
 
-  // stop drawing routines and clear the canvas
   const reset = () => {
     store.toggleStop();
     store.board.grid = null;
-    ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
+    store.renderer.reset();
     store.reset = false;
   };
 </script>
@@ -207,14 +169,8 @@
   <canvas
     id="board-canvas"
     ref="board-canvas"
-    :width="store.canvasWidth"
+    :width="store.renderer.width"
-    :height="store.canvasHeight"
+    :height="store.renderer.height"
-  />
-  <canvas
-    id="work-canvas"
-    ref="work-canvas"
-    :width="store.canvasWidth"
-    :height="store.canvasHeight"
   />
 </template>
 <style>

src/components/MenuGeneralOptions.vue

@@ -6,17 +6,17 @@
 
   const updateCanvasHeight = (event) => {
     const elem = event.target;
-    store.canvasHeight = elem.value;
+    store.renderer.resize(elem.value, store.renderer.width);
   };
 
   const updateCanvasWidth = (event) => {
     const elem = event.target;
-    store.canvasWidth = elem.value;
+    store.renderer.resize(elem.value, store.renderer.height);
   };
 
   const updateRefreshRate = (event) => {
     const elem = event.target;
-    store.refreshRate = elem.value;
+    store.renderer.refreshRate = elem.value;
   };
 
   const updateDrawingDirection = (event) => {
@@ -39,7 +39,7 @@
           name="canvasWidth"
           type="number"
           step="10"
-          :value="store.canvasWidth"
+          :value="store.renderer.width"
           @input="updateCanvasWidth"
         />
       </div>
@@ -50,7 +50,7 @@
           name="canvasHeight"
           type="number"
           step="10"
-          :value="store.canvasHeight"
+          :value="store.renderer.height"
           @input="updateCanvasHeight"
         />
       </div>
@@ -64,7 +64,7 @@
           type="number"
           min="100"
           step="100"
-          :value="store.refreshRate"
+          :value="store.renderer.refreshRate"
           @input="updateRefreshRate"
         />
       </div>

src/modules/core.js

@@ -17,7 +17,6 @@ function evolve1d(state, rules) {
     const cells = [getCell(x - 1), getCell(x), getCell(x + 1)];
     return rules[cells.join("")];
   });
-
   return newState.map(Number);
 }
 

src/modules/picture.js

@@ -36,7 +36,7 @@ export function picToBlackAndWhite(pixels, width, height) {
 }
 
 // convert an ImageData into a 2D array of boolean (0, 1) values
-export function picToBoard(pixels, width, height) {
+export function picToBoard(pixels, board) {
   const flat = pixels.reduce((acc, pixel, index) => {
     const i = index * 4;
     const count = pixels[i] + pixels[i + 1] + pixels[i + 2];
@@ -46,7 +46,7 @@ export function picToBoard(pixels, width, height) {
   }, []);
   // TODO: The representation has to be 2D, not the data structure
   // (change to flat)
-  return toMatrix(flat, width, height);
+  return toMatrix(flat, board.width, board.height);
 }
 
 // convert board to ImageData

src/modules/renderer.js

@@ -0,0 +1,72 @@
+import { boardToPic, picToBoard } from "./picture.js";
+
+// draws the board representation on the canvas
+async function render(board) {
+  const d = board.cellProperties.size;
+  // bool to RGBA colors
+  const img = await boardToPic(board);
+  this.ctx.save();
+  // rescale
+  this.ctx.clearRect(0, 0, this.width, this.height);
+  this.workCtx.putImageData(img, 0, 0);
+  this.ctx.imageSmoothingEnabled = false;
+  this.ctx.scale(d, d);
+  // draw from work canvas
+  this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
+  this.ctx.restore();
+}
+
+// draw image on canvas
+function renderImage(image) {
+  this.ctx.fillStyle = "black";
+  this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  this.ctx.drawImage(
+    image,
+    Math.floor((this.canvas.width - image.width) / 2),
+    Math.floor((this.canvas.height - image.height) / 2),
+    image.width,
+    image.height
+  );
+}
+
+// resize image to board dimensions
+function getResizedImageData(image, board) {
+  // draw the image on the work canvas with the dimensions of the board
+  this.workCtx.drawImage(image, 0, 0, board.width, board.height);
+
+  // get the resized image data from work canvas
+  const resized = this.workCtx.getImageData(0, 0, board.width, board.height);
+
+  // convert the image into a 2D board of boolean based on pixel value
+  return picToBoard(resized.data, board);
+}
+
+function resize(width, height) {
+  this.width = width;
+  this.height = height;
+  this.canvas.height = height;
+  this.canvas.width = width;
+  this.workCanvas.height = height;
+  this.workCanvas.width = width;
+}
+
+function reset() {
+  this.ctx.clearRect(0, 0, this.width, this.height);
+}
+
+function Renderer() {
+  this.canvas = null;
+  this.workCanvas = null;
+  this.workCtx = null;
+  this.width = null;
+  this.height = null;
+  this.ctx = null;
+  this.refreshRate = 300;
+  this.render = render;
+  this.getResizedImageData = getResizedImageData;
+  this.renderImage = renderImage;
+  this.reset = reset;
+  this.resize = resize;
+}
+
+export { Renderer };

src/stores/index.js

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { Board } from "../modules/board.js";
+import { Renderer } from "../modules/renderer.js";
 
 export const globalStore = defineStore("globalStore", {
   state: () => {
@@ -22,9 +23,6 @@ export const globalStore = defineStore("globalStore", {
         name: "Conway's Game of Life",
         description: "The most popular 2d automata",
       },
-      canvasWidth: 0,
-      canvasHeight: 0,
-      refreshRate: 300,
       initial1dState: "onecell",
       drawingDirection: "y",
       board: new Board(),
@@ -39,17 +37,18 @@ export const globalStore = defineStore("globalStore", {
       activeSubMenu: "",
       loop: false,
       lastAction: "drawfromlast",
+      renderer: new Renderer(),
     };
   },
   actions: {
     setBoardWidth() {
       this.board.width = Math.floor(
-        this.canvasWidth / this.board.cellProperties.size
+        this.renderer.width / this.board.cellProperties.size
       );
     },
     setBoardHeight() {
       this.board.height = Math.floor(
-        this.canvasHeight / this.board.cellProperties.size
+        this.renderer.height / this.board.cellProperties.size
       );
     },
     setCellProperties(name, value) {