Add simulation engine, renderer, and utilities

js/renderer.js

@@ -0,0 +1,66 @@
+export class Renderer {
+  constructor(canvas, { cellSize = 12 } = {}) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d", { alpha: false });
+    this.cellSize = cellSize;
+  }
+
+  setCellSize(cellSize) {
+    this.cellSize = cellSize;
+  }
+
+  resizeCanvas(rows, cols) {
+    this.canvas.width = cols * this.cellSize;
+    this.canvas.height = rows * this.cellSize;
+  }
+
+  clear(backgroundColor) {
+    this.ctx.fillStyle = backgroundColor;
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  drawGrid(rows, cols, color) {
+    const { ctx, cellSize } = this;
+    ctx.save();
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.globalAlpha = 0.35;
+    for (let col = 0; col <= cols; col += 1) {
+      const x = col * cellSize + 0.5;
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, this.canvas.height);
+    }
+    for (let row = 0; row <= rows; row += 1) {
+      const y = row * cellSize + 0.5;
+      ctx.moveTo(0, y);
+      ctx.lineTo(this.canvas.width, y);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  drawCells(buffer, rows, cols, fillColor) {
+    const { ctx, cellSize } = this;
+    ctx.fillStyle = fillColor;
+    for (let row = 0; row < rows; row += 1) {
+      const rowOffset = row * cols;
+      for (let col = 0; col < cols; col += 1) {
+        const idx = rowOffset + col;
+        if (buffer[idx] === 1) {
+          const x = col * cellSize;
+          const y = row * cellSize;
+          ctx.fillRect(x, y, cellSize, cellSize);
+        }
+      }
+    }
+  }
+
+  render(engine, { showGrid, colors }) {
+    this.clear(colors.background);
+    this.drawCells(engine.current, engine.rows, engine.cols, colors.cell);
+    if (showGrid) {
+      this.drawGrid(engine.rows, engine.cols, colors.grid);
+    }
+  }
+}