initial commit

awalias · Jun 13, 2020 · 4aa7e99 · 4aa7e99
commit 4aa7e99
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vercel
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<html>
+
+<head>
+    <title>Conway's Game of Life</title>
+    <script src="./jquery-3.5.1.min.js"></script>
+    <script type="module" src='./index.js'></script>
+    <style>
+        body {
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+                sans-serif;
+            font-size: small;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            background-color: rgb(250, 217, 246);
+        }
+
+        .container {
+            margin: 1em;
+        }
+
+        .section {
+            margin: 1em;
+        }
+
+        canvas {
+            border-color: #9563b5;
+            border-style: solid;
+            border-width: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="containter">
+        <div class="section">
+            <button id='step'>Step</button><button id='run'>Run</button><button id='clear'>Clear</button>
+            <a target='_blank' href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life#Examples_of_patterns'>Pattern Examples</a>
+        </div>
+        <div class="section">
+            <canvas width='1000' height='600' id='mycanvas'></canvas>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,109 @@
+import { initialState } from "./initialState.js";
+
+$(document).ready(function () {
+  let canvas = document.getElementById("mycanvas");
+  var ctx = canvas.getContext("2d");
+
+  const ROWS = Math.floor(canvas.offsetHeight / 10);
+  const COLUMNS = Math.floor(canvas.offsetWidth / 10);
+  let run = false;
+
+  let state = initialState;
+
+  // Any live cell with fewer than two live neighbours dies, as if by underpopulation.
+  // Any live cell with two or three live neighbours lives on to the next generation.
+  // Any live cell with more than three live neighbours dies, as if by overpopulation.
+  // Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
+  const nextState = () => {
+    let newState = Array(ROWS)
+      .fill()
+      .map(() => Array(COLUMNS));
+
+    for (var i = 0; i < state.length; i++) {
+      for (var j = 0; j < state[i].length; j++) {
+        // edges
+        if (!i || !j || i === state.length - 1 || j === state.length - 1) {
+          newState[i][j] = 0;
+        } else {
+          const live = state[i][j];
+          let neighbourCount =
+            state[i - 1][j - 1] +
+            state[i + 1][j + 1] +
+            state[i - 1][j + 1] +
+            state[i + 1][j - 1] +
+            state[i][j + 1] +
+            state[i][j - 1] +
+            state[i - 1][j] +
+            state[i + 1][j];
+
+          newState[i][j] = live
+            ? neighbourCount === 2
+              ? 1
+              : neighbourCount === 3
+              ? 1
+              : 0
+            : Number(neighbourCount === 3);
+        }
+      }
+    }
+
+    state = newState;
+
+    return;
+  };
+
+  const draw = () => {
+    for (var i = 0; i < state.length; i++) {
+      for (var j = 0; j < state[i].length; j++) {
+        ctx.fillStyle = state[i][j] ? "#9563b5" : "#fad9f6";
+        ctx.fillRect(j * 10, i * 10, i * 10 + 10, j * 10 + 10);
+      }
+    }
+
+    if (run) {
+      setTimeout(() => {
+        if (run) {
+          nextState();
+          draw();
+        }
+      }, 500);
+    }
+  };
+
+  $("#step").click(() => {
+    nextState();
+    draw();
+  });
+
+  $("#run").click(() => {
+    run = !run;
+    $("#run").html(run ? "Stop" : "Run");
+    if (run === true) {
+      nextState();
+      draw();
+    }
+  });
+
+  $("#mycanvas").click((e) => {
+    getCursorPosition(canvas, e);
+  });
+
+  $("#clear").click(() => {
+    state = Array(ROWS)
+      .fill()
+      .map(() => Array(COLUMNS).fill(0));
+    draw();
+    run = false;
+    $("#run").html(run ? "Stop" : "Run");
+  });
+
+  function getCursorPosition(canvas, event) {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor((event.clientX - 10 - rect.left) / 10);
+    const y = Math.floor((event.clientY - 10 - rect.top) / 10);
+    state[y][x] = !state[y][x];
+    draw();
+  }
+
+  draw();
+});
diff --git a/initialState.js b/initialState.js
diff --git a/jquery-3.5.1.min.js b/jquery-3.5.1.min.js