option : last generated 2d board as initial state

src/components/Canvas.vue

@@ -29,7 +29,8 @@ export default {
       canvasHeight: 'getCanvasHeight',
       refreshRate: 'getRefreshRate',
       initial1dState: 'getInitial1dState',
-      drawingDirection: 'getDrawingDirection'
+      drawingDirection: 'getDrawingDirection',
+      lastBoard: 'getLastBoard'
     }),
     boardWidth: function() {
       return Math.floor(
@@ -46,7 +47,8 @@ export default {
     this.canvas = this.$refs['canvas']
     this.ctx = this.canvas.getContext('2d')
     this.$root.$on('draw1d', () => { this.draw1d() })
-    this.$root.$on('draw2d', () => { this.draw2d() })
+     this.$root.$on('draw2dNew', () => { this.draw2dNew() })
+    this.$root.$on('draw2dLast', () => { this.draw2dLast() })
     this.$root.$on('reset', () => { this.reset() })
     this.$root.$on('stop', () => { this.stop() })
   },
@@ -83,17 +85,11 @@ export default {
         this.rules,
         this.boardWidth
       )
+      this.$store.commit('setLastBoard', board)
       this.drawCanvas(board)
     },
-    async draw2d() {
+    async draw2d(board) {
       if (this.drawing === 0) return
-      const initialState = create2dState(
-        this.boardWidth,
-        this.boardHeight,
-        getRandomInt,
-        [0, 2],
-      );
-      const board = evolve2d(initialState, conwayRules);
       
       const draw2dNext = async (b) => {
         if (this.drawing === 0) return
@@ -104,6 +100,21 @@ export default {
       }
       return draw2dNext(board)
     },
+    async draw2dNew() {
+      const initialState = create2dState(
+        this.boardWidth,
+        this.boardHeight,
+        getRandomInt,
+        [0, 2],
+      );
+      const board = evolve2d(initialState, conwayRules);
+      this.$store.commit('setLastBoard', board)
+      this.draw2d(board)
+    },
+    async draw2dLast() {
+      console.log(this.lastBoard)
+      this.draw2d(this.lastBoard)
+    },
     stop() {
       this.$store.commit('setDrawingStatus', 0)
     },

src/components/Menu2dCA.vue

@@ -1,5 +1,13 @@
 <template>
   <MenuRow row-title="2D Cellular Automata">
+    <div class="form-field">
+      <label>Start from last result</label>
+      <input
+        type="button"
+        value="start"
+        @click="startFromLast"
+      >
+    </div>
     <div class="form-field">
       <input
         type="button"
@@ -27,15 +35,22 @@
 
 <script>
 import MenuRow from './MenuRow.vue'
+import {mapGetters} from 'vuex'
+
 export default {
   name: 'Menu2dCA',
   components: {
     MenuRow
   },
+  computed: {
+    ...mapGetters({
+      lastBoard: 'getLastBoard',
+    })
+  },
   methods: {
     draw2d() {
       this.$root.$store.state.drawing = 1
-      this.$root.$emit('draw2d')
+      this.$root.$emit('draw2dNew')
     },
     reset() {
       this.$root.$emit('reset')
@@ -43,6 +58,9 @@ export default {
     stop() {
       this.$root.$emit('stop')
     },
+    startFromLast() {
+      this.$root.$emit('draw2dLast')
+    }
   }
 }
 </script>

src/store/index.js

@@ -26,7 +26,8 @@ export default new Vuex.Store({
     refreshRate: 300,
     initial1dState: "onecell",
     activeMenu: "Elementary Cellular Automata",
-    drawingDirection: "y"
+    drawingDirection: "y",
+    lastBoard: {}
   },
   mutations: {
     update1dSingleRule(state, data) {
@@ -59,6 +60,9 @@ export default new Vuex.Store({
     setDrawingDirection(state, data) {
       state.drawingDirection = data
     },
+    setLastBoard(state, data) {
+      state.lastBoard = data
+    },
   },
   getters: {
     getCellProperties(state) {
@@ -90,6 +94,9 @@ export default new Vuex.Store({
     },
     getDrawingDirection(state) {
       return state.drawingDirection
+    },
+    getLastBoard(state) {
+      return state.lastBoard
     }
   },
   actions: {