renderer module

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 };