improved readability on small cell sizes

TGianella · Jan 9, 2024 · 7490137 · 7490137
1 parent f64e11d
commit 7490137
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/app/config.js b/app/config.js
@@ -18,15 +18,21 @@ export const logoUrls = {
 }
 
 export const colors = {
-  gridColor: {
-  value: "#CCCCCC",
-},
+  gridColorLarge: {
+    value: "#CCCCCC",
+  },
+  gridColorMedium: {
+    value: "#EEEEEE",
+  },
+  gridColorSmall: {
+    value: "#fcfcfc",
+  },
   aliveColor: {
   value: "#FFFFFF",
       continueCondition: false,
-},
+  },
   deadColor: {
   value: "#000000",
       continueCondition: true,
-}
+  },
 }
diff --git a/app/index.html b/app/index.html
@@ -24,6 +24,7 @@
 
       canvas {
         border: solid black 1px;
+        image-rendering: pixelated;
       }
 
       label {

diff --git a/app/index.js b/app/index.js
@@ -105,7 +105,7 @@ const loopShouldReset = () => {
 
 const nextFrame = () => {
   if (isPaused(animationId)) {
-    drawGrid(ctx, width, cellSize, height);
+    // drawGrid(ctx, width, cellSize, height);
     drawCells(ctx, universe, memory, width, height, cellSize, importUniverse, checkCell);
     universe.tick();
     generationsCount = updateGenerationsCount(generationsCount,1);
@@ -172,6 +172,7 @@ const modifyBoard = (label, value, resize) => {
     generationsCount = resetTimerAndGenerations();
   }
 
+  drawGrid(ctx, width, cellSize, height);
   drawCells(ctx, universe, memory, width, height, cellSize, importUniverse, checkCell);
 }
 
@@ -243,7 +244,7 @@ canvas.addEventListener("click", event => {
     drawPattern(universe, pulsar, row, col);
   }
 
-  drawGrid(ctx, width, cellSize, height);
+  // drawGrid(ctx, width, cellSize, height);
   drawCells(ctx, universe, memory, width, height, cellSize, importUniverse, checkCell);
 });
 
@@ -260,7 +261,6 @@ function renderLoop() {
   fps.render();
   generationsCount = updateGenerationsCount(generationsCount, ticksFrequency);
 
-  drawGrid(ctx, width, cellSize, height);
   drawCells(ctx, universe, memory, width, height, cellSize, importUniverse, checkCell);
 
   for (let i = 0; i < ticksFrequency; i++) {
@@ -274,4 +274,5 @@ function renderLoop() {
   animationId = requestAnimationFrame(renderLoop);
 }
 
+drawGrid(ctx, width, cellSize, height);
 play();
diff --git a/app/utils/draw.utils.js b/app/utils/draw.utils.js
@@ -36,9 +36,19 @@ export const drawCells = (ctx, universe, memory, width, height, cellSize, import
     ctx.stroke();
 }
 
+const setGridColor = (ctx, cellSize) => {
+    if (cellSize > 3) {
+        ctx.strokeStyle = colors.gridColorLarge.value;
+    } else if (cellSize > 1) {
+        ctx.strokeStyle = colors.gridColorMedium.value;
+    } else {
+        ctx.strokeStyle = colors.gridColorSmall.value;
+    }
+}
+
 export const drawGrid = (ctx, width, cellSize, height) => {
     ctx.beginPath();
-    ctx.strokeStyle = colors.gridColor.value;
+    setGridColor(ctx, cellSize);
 
     // Vertical lines.
     for (let i = 0; i <= width; i++) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ @@
           canvas {
             border: solid black 1px;
+            image-rendering: pixelated;
           }
           label {
@@ Expand Down @@