Merge pull request 'v0.9.1' (#14) from dev into master

Reviewed-on: #14

package.json

@@ -12,10 +12,10 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^3.2.0",
-    "install": "^0.13.0",
-    "pinia": "^2.0.27",
-    "vite": "^3.2.4",
+    "@vitejs/plugin-vue": "3.2.0",
+    "install": "0.13.0",
+    "pinia": "2.0.27",
+    "vite": "^3.2.10",
     "vue": "3.2"
   },
   "devDependencies": {

src/App.vue

@@ -35,103 +35,23 @@
 </script>
 
 <template>
-  <div id="main">
-    <h1 id="main-title">
-      <span id="burger-toggle" @click="toggleMainMenu">
+  <main>
+    <h1
+      v-if="store.mainMenu || windowWidth <= 800"
+      id="main-title"
+      class="main-title"
+    >
+      <span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
         {{ store.mainMenu == true ? "▼" : "☰" }}
       </span>
-      Cellular Automata Explorer
+      <span>Cellular Automata Explorer</span>
     </h1>
-    <div id="container">
-      <MainMenu v-if="store.mainMenu || windowWidth >= 800" />
+    <div id="container" class="container">
+      <MainMenu v-if="store.mainMenu || windowWidth >= 800" class="main-menu" />
       <CanvasBoard />
     </div>
-    <MenuReset row-title="" />
-  </div>
+    <MenuReset :window-width="windowWidth" />
+  </main>
 </template>
 
-<style scope>
-  :root {
-    --dark1: #000000;
-    --dark2: #333333;
-    --dark3: #666666;
-    --light1: #999999;
-    --light2: #cccccc;
-    --light3: #eeeeee;
-  }
-
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    /* color: #2c3e50; */
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
-  body {
-    background: var(--dark1);
-    color: var(--light3);
-    font-family: Courier New;
-  }
-
-  canvas {
-    flex: auto;
-    background: rgb(0, 0, 0);
-    background: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 1) 0%,
-      rgba(131, 131, 131, 1) 52%,
-      rgba(0, 0, 0, 1) 100%
-    );
-  }
-
-  h1,
-  h2 {
-    font-weight: bold;
-  }
-
-  h1 {
-    margin: 10px auto;
-    font-size: larger;
-    text-transform: uppercase;
-  }
-
-  #container {
-    display: flex;
-    height: calc(100vh - 100px);
-    overflow: hidden;
-    flex-direction: column;
-  }
-
-  #burger-toggle {
-    display: none;
-    cursor: pointer;
-    font-size: 1.5em;
-    vertical-align: middle;
-    color: var(--light2);
-  }
-
-  @media screen and (max-width: 800px) {
-    h1 {
-      font-size: medium;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 10px;
-    }
-
-    #burger-toggle {
-      display: inline;
-    }
-
-    #main-menu {
-      background: var(--dark2);
-      margin: 0 auto;
-    }
-  }
-</style>
+<style src="./assets/css/main.css"></style>

src/assets/css/main.css

@@ -0,0 +1,228 @@
+:root {
+  --dark1: #000000;
+  --dark2: #333333;
+  --dark3: #666666;
+  --light1: #999999;
+  --light2: #cccccc;
+  --light3: #eeeeee;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--dark1);
+  color: var(--light3);
+  /* font-family: Courier New; */
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+
+canvas {
+  flex: auto;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(131, 131, 131, 1) 52%,
+    rgba(0, 0, 0, 1) 100%
+  );
+}
+
+h1,
+h2,
+.desktop-title {
+  font-weight: bold;
+}
+
+h1,
+.desktop-title {
+  font-size: larger;
+  text-transform: uppercase;
+}
+
+.container {
+  display: flex;
+  height: calc(100vh - 100px);
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.burger-toggle {
+  display: none;
+  cursor: pointer;
+  font-size: 1.5em;
+  vertical-align: middle;
+  color: var(--light2);
+}
+
+a {
+  font-weight: bold;
+  border: 1px solid white;
+  padding: 2px;
+}
+
+h2:hover {
+  cursor: pointer;
+  color: var(--light2);
+}
+
+select {
+  margin-top: 10px;
+  padding: 5px;
+}
+
+input[type="number"] {
+  max-width: 100%;
+  height: 100%;
+}
+
+input[type="button"] {
+  min-width: 40px;
+  min-height: 40px;
+  margin: 0 5px;
+  font-weight: bold;
+  line-height: 1.5em;
+  border-radius: 0;
+  outline: none;
+  border: none;
+  font-size: 1.1em;
+  background: var(--light2);
+}
+
+input[type="button"]:hover {
+  background: var(--light3);
+}
+
+.form-field {
+  display: flex;
+  margin: 10px;
+  justify-content: space-between;
+}
+
+.menu-row {
+  flex: 1;
+  position: relative;
+}
+
+.menu-row h2 {
+  font-size: medium;
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--dark3);
+  border-top: 1px solid var(--dark3);
+}
+
+.menu-row a {
+  color: white;
+  font-weight: bold;
+  text-decoration: none;
+  font-size: small;
+}
+
+.menu-row-content {
+  position: absolute;
+  background: var(--dark1);
+  width: 100%;
+  overflow: scroll;
+}
+
+label,
+.form-field label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+
+.canvas-board {
+  flex: 1;
+  margin: 0 auto;
+}
+
+.main-menu {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex: 1;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.main-menu::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.main-menu {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.reset-menu {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  vertical-align: center;
+}
+
+.next,
+.stop,
+.reset {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.reset-menu .loop {
+  padding: 5px;
+  display: inline-block;
+}
+
+@media screen and (max-width: 800px) {
+  h1 {
+    font-size: medium;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+  }
+
+  .burger-toggle {
+    display: inline;
+  }
+
+  .main-menu {
+    background: var(--dark2);
+    margin: 0 auto;
+    flex-direction: column;
+    position: absolute;
+  }
+
+  .menu-row {
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .menu-row h2,
+  .form-field {
+    margin: 0;
+  }
+
+  .menu-row h2 {
+    border-bottom: 1px solid var(--dark3);
+    border-top: none;
+  }
+
+  .form-field {
+    padding: 10px;
+  }
+
+  .menu-row-content {
+    position: relative;
+    width: 100%;
+  }
+
+  .reset-menu {
+    justify-content: flex-end;
+  }
+}

src/components/CanvasBoard.vue

@@ -2,6 +2,7 @@
   import { onMounted, watch } from "vue";
   import { globalStore } from "../stores/index.js";
   import {
+    createBoard,
     conwayRules,
     overpopulationRules,
     lonelinessRules,
@@ -11,7 +12,6 @@
     evolve2d,
   } from "../modules/core.js";
   import {
-    createBoard,
     create1dInitialState,
     create2dRandomGrid,
   } from "../modules/board.js";
@@ -81,10 +81,19 @@
     store.renderer.ctx = store.renderer.canvas.getContext("2d", {
       willReadFrequently: true,
     });
-    store.renderer.workCanvas = new OffscreenCanvas(
-      canvas.parentElement.clientWidth,
-      canvas.parentElement.clientHeight
-    );
+    if (typeof OffscreenCanvas != "undefined") {
+      store.renderer.workCanvas = new OffscreenCanvas(
+        canvas.parentElement.clientWidth,
+        canvas.parentElement.clientHeight
+      );
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas#Browser_compatibility
+    // Fallback for when offscreenCanvas is unsupported or disabled (Firefox < 44, default for Firefox?)
+    else {
+      store.renderer.workCanvas = document.createElement("canvas");
+      store.renderer.workCanvas.width = canvas.parentElement.clientWidth;
+      store.renderer.workCanvas.height = canvas.parentElement.clientHeight;
+    }
     store.renderer.workCtx = store.renderer.workCanvas.getContext("2d", {
       willReadFrequently: true,
     });
@@ -100,31 +109,30 @@
   // draw elementary automaton on the canvas based on selected ruleset
   const draw1d = () => {
     const initialState = create1dInitialState(
-      store.board.width,
+      store.board,
       store.initial1dState
     );
-    const grid = createBoard(initialState, store.ruleset1d.rules, max());
-    store.board.grid = Object.freeze(grid);
+    const board = createBoard(initialState, store.ruleset1d.rules, max());
+    store.board.grid = Object.freeze(board);
     drawCanvas(store.board);
     store.toggleStop();
   };
 
   // draw 2D automaton on the canvas in a loop
   const draw2d = (board) => {
-    drawCanvas(board);
-    const newGrid = evolve2d(board.grid, board.width, selectedRules());
-    store.board.grid = Object.freeze(newGrid);
+    drawCanvas(store.board);
+    const newBoard = Object.freeze(evolve2d(board.grid, selectedRules()));
+    if (store.board.grid == newBoard) store.toggleStop();
+    store.board.grid = newBoard;
   };
 
   // draw 2d automaton in a loop, starting from passed state
   const draw2dNext = async (board) => {
     setTimeout(() => {
       if (!store.canDraw) return;
-      requestAnimationFrame(() => {
-        draw2d(board);
-        return draw2dNext(store.board);
-      });
-    }, 24);
+      draw2d(board);
+      return draw2dNext(store.board);
+    }, store.renderer.refreshRate);
   };
 
   // draw 2d automaton from a new state
@@ -134,7 +142,7 @@
       store.board.width,
       store.board.height
     );
-    store.board.grid = Object.freeze(initialGrid);
+    store.board.grid = Object.freeze(evolve2d(initialGrid, selectedRules()));
     if (store.loop) return draw2dNext(store.board);
     else draw2d(store.board);
     store.toggleStop();
@@ -143,7 +151,6 @@
   // draw 2d automaton from the last known generated board
   const draw2dLast = async () => {
     if (!store.canDraw) return;
-    if (!store.board.grid) return;
     if (store.loop) return draw2dNext(store.board);
     else draw2d(store.board);
     store.toggleStop();
@@ -164,7 +171,7 @@
       store.board.width,
       store.board.height
     );
-    const newBoard = picToBoard(resized.data);
+    const newBoard = picToBoard(resized.data, store.board);
     store.board.grid = Object.freeze(newBoard);
     store.toggleStop();
   };
@@ -180,13 +187,8 @@
   <canvas
     id="board-canvas"
     ref="board-canvas"
+    class="board-canvas"
     :width="store.renderer.width"
     :height="store.renderer.height"
   />
 </template>
-<style>
-  #canvas-board {
-    flex: 1;
-    margin: 0 auto;
-  }
-</style>

src/components/MainMenu.vue

@@ -13,30 +13,3 @@
   import MenuElementaryCA from "./MenuElementaryCA.vue";
   import Menu2dCA from "./Menu2dCA.vue";
 </script>
-
-<style>
-  #main-menu {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    flex: 1;
-  }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  #main-menu::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  #main-menu {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  @media screen and (max-width: 800px) {
-    #main-menu {
-      flex-direction: column;
-      position: absolute;
-    }
-  }
-</style>

src/components/Menu2dCA.vue

@@ -50,13 +50,13 @@
       <input
         type="button"
         name="start2d"
-        value="start"
+        value="▶"
         @click="store.toggleDraw2d()"
       />
     </div>
     <div class="form-field">
       <label>Start from last result</label>
-      <input type="button" value="start" @click="store.toggleDraw2dLast()" />
+      <input type="button" value="▶" @click="store.toggleDraw2dLast()" />
     </div>
     <div class="form-field">
       <label>Start from picture</label><br />

src/components/MenuCellProperties.vue

@@ -53,14 +53,3 @@
     </form>
   </MenuRow>
 </template>
-
-<style scoped>
-  a {
-    font-weight: bold;
-    border: 1px solid white;
-    padding: 2px;
-  }
-  a:hover {
-    cursor: pointer;
-  }
-</style>

src/components/MenuElementaryCA.vue

@@ -38,7 +38,7 @@
         <input
           type="button"
           name="start"
-          value="start"
+          value="▶"
           @click="store.toggleDraw1d()"
         />
       </div>
@@ -105,12 +105,3 @@
     </form>
   </MenuRow>
 </template>
-
-<style>
-  .menu-row a {
-    color: white;
-    font-weight: bold;
-    text-decoration: none;
-    font-size: small;
-  }
-</style>

src/components/MenuGeneralOptions.vue

@@ -6,7 +6,7 @@
 
   const updateCanvasHeight = (event) => {
     const elem = event.target;
-    store.renderer.resize(elem.value, store.renderer.width);
+    store.renderer.resize(store.renderer.width, elem.value);
   };
 
   const updateCanvasWidth = (event) => {
@@ -56,8 +56,6 @@
       </div>
       <div class="form-field">
         <label>Refresh Rate (ms)</label>
-      </div>
-      <div class="form-field">
         <input
           id="refreshRate"
           name="refreshRate"

src/components/MenuReset.vue

@@ -1,50 +1,56 @@
 <script setup>
   import { globalStore } from "../stores/index.js";
+  import { defineProps } from "vue";
 
+  const props = defineProps(
+    {
+      windowWidth: {
+        type: Number,
+        default: 800
+      }
+    }
+  );
   const store = globalStore();
 </script>
 
 <template>
-  <div class="form-field">
-    <div class="form-field">
-      <label>
-        Loop
-        <input
-          :value="store.loop"
-          type="checkbox"
-          :checked="store.loop"
-          @input="store.toggleLoop()"
-        />
-      </label>
+  <div class="reset-menu">
+    <div v-if="props.windowWidth >= 800" class="desktop-title">
+      Cellular Automata Explorer
+    </div>
+    <div class="reset-input">
+      <div class="loop">
+        <label>
+          loop
+          <input
+            :value="store.loop"
+            type="checkbox"
+            :checked="store.loop"
+            @input="store.toggleLoop()"
+          />
+        </label>
+      </div>
+      <input
+        type="button"
+        name="next"
+        class="next"
+        value="⇨"
+        @click="store.toggleNext()"
+      />
+      <input
+        type="button"
+        name="stop"
+        class="stop"
+        value="⏹"
+        @click="store.toggleStop()"
+      />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="⌫"
+        @click="store.toggleReset()"
+      />
     </div>
-    <input
-      type="button"
-      name="next"
-      class="next"
-      value="Next"
-      @click="store.toggleDraw2dLast()"
-    />
-    <input
-      type="button"
-      name="stop"
-      class="stop"
-      value="stop"
-      @click="store.toggleStop()"
-    />
-    <input
-      type="button"
-      name="reset"
-      class="reset"
-      value="reset"
-      @click="store.toggleReset()"
-    />
   </div>
 </template>
-
-<style scoped>
-  .form-field {
-    display: flex;
-    margin: 5px;
-    justify-content: flex-end;
-  }
-</style>

src/components/MenuRow.vue

@@ -49,81 +49,3 @@
     </div>
   </div>
 </template>
-
-<style>
-  .menu-row h2 {
-    font-size: medium;
-    padding: 10px;
-    cursor: pointer;
-    border-bottom: 1px solid var(--dark3);
-    border-top: 1px solid var(--dark3);
-    margin: 0 0 10px 0;
-  }
-
-  select {
-    margin-top: 10px;
-    padding: 5px;
-  }
-
-  input[type="button"] {
-    min-width: 60px;
-    padding: 5px;
-    font-weight: bold;
-    margin-right: 10px;
-  }
-
-  .form-field {
-    display: flex;
-    margin: 10px;
-    justify-content: space-between;
-  }
-
-  .menu-row {
-    flex: 1;
-    position: relative;
-  }
-
-  .menu-row-content {
-    position: absolute;
-    background: var(--dark1);
-    width: 100%;
-  }
-
-  label,
-  .form-field label {
-    margin-right: 10px;
-    font-weight: bold;
-  }
-
-  @media screen and (max-width: 800px) {
-    .menu-row {
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    .menu-row h2,
-    .form-field {
-      margin: 0;
-    }
-
-    .menu-row h2 {
-      border-bottom: 1px solid var(--dark3);
-      border-top: none;
-    }
-
-    .form-field {
-      padding: 10px;
-    }
-
-    /* .menu-row:active .menu-row-content {
-       display: flex;
-       flex-direction: column;
-       height: 100%;
-       } */
-
-    .menu-row-content {
-      position: relative;
-      width: 100%;
-    }
-  }
-</style>

src/components/preset.js

@@ -1,95 +0,0 @@
-const presetRuleset = [
-  {
-    name: "rule 73",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 86",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "010": 1,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 90",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 0,
-      "010": 0,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "rule 45?",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 54?",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 1,
-      "011": 0,
-      "010": 1,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "unknown rule",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-];
-
-const initialStates = [
-  {
-    id: "onecell",
-    name: "One cell at center",
-    description: "State with a single cell in the middle",
-  },
-  {
-    id: "random",
-    name: "Random cell",
-    description: "State populated with random cells",
-  },
-];
-
-export { presetRuleset, initialStates };

src/modules/board.js

@@ -1,65 +1,28 @@
-import {
-  evolve1d,
-  create2dState,
-  create1dStateOneCell,
-  create1dState,
-} from "./core.js";
+import { create2dState, create1dStateOneCell, create1dState } from "./core.js";
 
 import { getRandomInt } from "./common.js";
 
-import { Cell } from "./cell.js";
-
-export class Board {
-  constructor(width, height) {
-    this.width = width;
-    this.height = height;
-    this.grid;
-    this.cellProperties = {
-      size: 3,
-      liveColor: "#000000",
-      deadColor: "#F5F5F5",
-    };
-  }
-}
-
-// create a 2D board from a 1D CA initial state
-// function createBoard(state, rules, height) {
-//   function createBoardAcc(s, h, acc) {
-//     if (h === 0) return acc;
-//     const newState = evolve1d(s, rules);
-//     const newAcc = acc.concat([s]);
-//     return createBoardAcc(newState, h - 1, newAcc);
-//   }
-//   return createBoardAcc(state, height, []);
-// }
-
-// performance "choke point" in full imperative
-export function createBoard(state, rules, max) {
-  var board = [];
-  let prevState = [];
-  for (let i = 0; i < max; i++) {
-    let nextState = [];
-    // use the passed initial step during first iteration
-    if (i == 0) {
-      nextState = evolve1d(state, rules);
-    } else {
-      nextState = evolve1d(prevState, rules);
-    }
-    // flat array
-    board = board.concat(nextState.map((s) => new Cell(s)));
-    prevState = nextState;
-  }
-  return board;
+function Board(width, height, grid = []) {
+  this.width = width;
+  this.height = height;
+  (this.cellProperties = {
+    size: 3,
+    liveColor: "#000000",
+    deadColor: "#F5F5F5",
+  }),
+    (this.grid = grid);
 }
 
 // create a first state, either a single living cell
 // at the center or random ones
-export const create1dInitialState = (width, type = "onecell") => {
-  if (type === "onecell") return create1dStateOneCell(width);
-  return create1dState(width, getRandomInt, [0, 2]);
+const create1dInitialState = (board, type = "onecell") => {
+  if (type === "onecell") return create1dStateOneCell(board.width);
+  return create1dState(board.width, getRandomInt, [0, 2]);
 };
 
 // initialize 2d board with random cells
-export const create2dRandomGrid = (width, height) => {
+const create2dRandomGrid = (width, height) => {
   return create2dState(width, height, getRandomInt, [0, 2]);
 };
+
+export { Board, create1dInitialState, create2dRandomGrid };

src/modules/cell.js

@@ -1,6 +0,0 @@
-export class Cell {
-  constructor(state = 0) {
-    this.state = state;
-    this.prevState = null;
-  }
-}

src/modules/core.js

@@ -1,7 +1,5 @@
 // core functions to generate initial states and evolve them
 
-import { Cell } from "./cell.js";
-
 // get the next evolution of a 1D CA initial state
 // buggy BUT produces interesting results
 // function evolve1d(state, rules) {
@@ -25,6 +23,40 @@ function evolve1d(state, rules) {
   return [rules[edge1], ...center, rules[edge2]];
 }
 
+// create a 2D board from a 1D CA initial state
+// function createBoard(state, rules, height) {
+//   function createBoardAcc(s, h, acc) {
+//     if (h === 0) return acc;
+//     const newState = evolve1d(s, rules);
+//     const newAcc = acc.concat([s]);
+//     return createBoardAcc(newState, h - 1, newAcc);
+//   }
+//   return createBoardAcc(state, height, []);
+// }
+
+// performance "choke point" in full imperative
+function createBoard(state, rules, max) {
+  var board = [];
+  let prevState = [];
+  for (let i = 0; i < max; i++) {
+    let nextState = [];
+    // use the passed initial step during first iteration
+    if (i == 0) {
+      nextState = evolve1d(state, rules);
+    } else {
+      nextState = evolve1d(prevState, rules);
+    }
+    board = board.concat([nextState]);
+    prevState = nextState;
+  }
+  return board;
+}
+
+// Sums the value of a cell's neighbors
+function getNeighborsSum(cells) {
+  return cells.reduce((cell, acc) => cell + acc, 0);
+}
+
 // Get the next evolution of a cell according to
 // Conway's game of life rules
 function conwayRules(cell, neighbors) {
@@ -97,23 +129,48 @@ function overpopulationRules(cell, neighbors) {
 
 // get the next evolution of a 2D CA initial state
 // Rules : Moore neighborhood
-function evolve2d(grid, width, rulesFn) {
-  const bh = grid.length - 1;
-  const bw = width;
-  return grid.reduce((acc, cell, y) => {
-    const sum =
-      grid[Math.abs((y - 1) % bh)].state +
-      grid[Math.abs((y + 1) % bh)].state +
-      grid[Math.abs((y - bw - 1) % bh)].state +
-      grid[Math.abs((y - bw) % bh)].state +
-      grid[Math.abs((y - bw + 1) % bh)].state +
-      grid[Math.abs((y + bw - 1) % bh)].state +
-      grid[Math.abs((y + bw) % bh)].state +
-      grid[Math.abs((y + bw + 1) % bh)].state;
-    acc[y] = new Cell(rulesFn(cell.state, sum));
-    acc[y].prevState = cell.state;
-    return acc;
-  }, []);
+function evolve2d(board, rulesFn) {
+  const bh = board.length - 1;
+  const bw = board[0].length - 1;
+  return board.map((row, y) => {
+    // handle edges
+    const prow = y - 1 < 0 ? board[bh] : board[y - 1];
+    const nrow = y + 1 > bh ? board[0] : board[y + 1];
+    return row.map((cell, x) => {
+      // handle edges too
+      const pcell = x - 1 < 0 ? bw : x - 1;
+      const ncell = x + 1 > bw ? 0 : x + 1;
+      // the current cell is not included in the result
+      const neighbors = [
+        prow[pcell],
+        prow[x],
+        prow[ncell],
+        row[pcell],
+        row[ncell],
+        nrow[pcell],
+        nrow[x],
+        nrow[ncell],
+      ];
+      const sum = getNeighborsSum(neighbors);
+      return rulesFn(cell, sum);
+    });
+  });
+}
+
+function getDrawingValues(state, acc, cell) {
+  const d = cell.dimension;
+  return Object.keys(state).map((key) => {
+    const fillStyle = (() => {
+      if (state[key] === "1") return cell.liveColor;
+      return cell.deadColor;
+    })();
+
+    return {
+      move: [key * d, acc * d],
+      fill: [key * d, acc * d, d, d],
+      fillStyle,
+    };
+  });
 }
 
 // Populates the first state with a single living cell in the center
@@ -133,12 +190,16 @@ function create1dState(width, initFn, args) {
 // Populates the first state of a 2D CA with cells returned
 // by initFn
 function create2dState(width, height, initFn, args) {
-  return [...Array(height * width)].map(() => new Cell(initFn(...args)));
+  return [...Array(height)].map(() =>
+    [...Array(width)].map(() => initFn(...args))
+  );
 }
 
 export {
+  getDrawingValues,
   create1dState,
   create2dState,
+  createBoard,
   create1dStateOneCell,
   conwayRules,
   overpopulationRules,

src/modules/picture.js

@@ -1,4 +1,3 @@
-import { Cell } from "./cell.js";
 // https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
 // [
 function hexToRGB(hex) {
@@ -37,27 +36,29 @@ export function picToBlackAndWhite(pixels, width, height) {
 }
 
 // convert an ImageData into a 2D array of boolean (0, 1) values
-export function picToBoard(pixels) {
-  return pixels.reduce((acc, pixel, index) => {
+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];
     const value = (count >= 255) & 1;
-    acc[index] = new Cell(value);
+    acc[index] = value;
     return acc;
   }, []);
+  // TODO: The representation has to be 2D, not the data structure
+  // (change to flat)
+  return toMatrix(flat, board.width, board.height);
 }
 
 // convert board to ImageData
 // TODO : different cell to color functions
 // (binary, intermediate states, camaieux, etc)
-export function boardToPic(board, frame) {
+export function boardToPic(board) {
   const live = board.cellProperties.liveColor;
   const dead = board.cellProperties.deadColor;
-  const img = frame || new ImageData(board.width, board.height);
+  const img = new ImageData(board.width, board.height);
   const colors = [hexToRGB(live), hexToRGB(dead)];
-  board.grid.reduce((acc, cell, index) => {
-    if (cell.state === cell.prevState) return acc;
-    const color = colors[(cell.state === 1) & 1];
+  board.grid.flat().reduce((acc, cell, index) => {
+    const color = colors[(cell === 1) & 1];
     const i = index * 4;
     acc[i] = color[0];
     acc[i + 1] = color[1];

src/modules/renderer.js

@@ -1,61 +1,5 @@
 import { boardToPic, scaleToTargetSize } from "./picture.js";
 
-class Renderer {
-  constructor() {
-    this.canvas = null;
-    this.workCanvas = null;
-    this.workCtx = null;
-    this.width = null;
-    this.height = null;
-    this.ctx = null;
-    this.refreshRate = 300;
-    this.prevFrame = null;
-  }
-
-  // draws the board representation on the canvas
-  render(board) {
-    const d = board.cellProperties.size;
-    // bool to RGBA colors
-    const img = boardToPic(board, this.prevFrame);
-    this.ctx.clearRect(0, 0, this.width, this.height);
-    scaleAndApply(this.ctx, d, () => {
-      this.workCtx.putImageData(img, 0, 0);
-      this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
-    });
-    this.prevFrame = this.workCtx.getImageData(0, 0, board.width, board.height);
-  }
-
-  // draw image on canvas
-  renderImage(image, ctx, tw, th) {
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, tw, th);
-    const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
-    ctx.drawImage(
-      image,
-      Math.floor((tw - dimensions[0]) / 2),
-      Math.floor((th - dimensions[1]) / 2),
-      dimensions[0],
-      dimensions[1]
-    );
-    return ctx.getImageData(0, 0, tw, th);
-  }
-
-  // resize canvas and workcavas
-  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;
-  }
-
-  // clear any drawing from canvas
-  reset() {
-    this.ctx.clearRect(0, 0, this.width, this.height);
-  }
-}
-
 function scaleAndApply(context, ratio, callback) {
   context.save();
   // rescale
@@ -66,4 +10,58 @@ function scaleAndApply(context, ratio, callback) {
   context.restore();
 }
 
+// draws the board representation on the canvas
+function render(board) {
+  const d = board.cellProperties.size;
+  // bool to RGBA colors
+  const img = boardToPic(board);
+  this.ctx.clearRect(0, 0, this.width, this.height);
+  scaleAndApply(this.ctx, d, () => {
+    this.workCtx.putImageData(img, 0, 0);
+    this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
+  });
+}
+
+// draw image on canvas
+function renderImage(image, ctx, tw, th) {
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, tw, th);
+  const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
+  ctx.drawImage(
+    image,
+    Math.floor((tw - dimensions[0]) / 2),
+    Math.floor((th - dimensions[1]) / 2),
+    dimensions[0],
+    dimensions[1]
+  );
+  return ctx.getImageData(0, 0, tw, th);
+}
+
+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.renderImage = renderImage;
+  this.reset = reset;
+  this.resize = resize;
+}
+
 export { Renderer };

src/stores/index.js

@@ -35,7 +35,7 @@ export const globalStore = defineStore("globalStore", {
       picture: new Image(),
       mainMenu: false,
       activeSubMenu: "",
-      loop: false,
+      loop: true,
       lastAction: "drawfromlast",
       renderer: new Renderer(),
     };
@@ -103,6 +103,18 @@ export const globalStore = defineStore("globalStore", {
     toggleLoop() {
       this.loop = !this.loop;
     },
+    toggleNext() {
+      switch (this.lastAction) {
+        case "drawfromlast":
+          this.toggleDraw2dLast();
+          break;
+        case "draw2d":
+          this.toggleDraw2d();
+          break;
+        default:
+          return;
+      }
+    },
     setActiveSubMenu(data) {
       if (this.activeSubMenu == data) this.activeSubMenu = "";
       else this.activeSubMenu = data;