explorata/src/components/Canvas.vue

<template>
  <main id="main">
    <canvas
      id="canvas"
      ref="canvas"
      width="500"
      height="500"
    />
  </main>
</template>
<script>
import { evolve2d, initialState1d, initialState2d, conwayRules, createBoard } from '../modules/automata.js'
import { getRandomInt, sleep } from '../modules/common.js'
import {mapGetters} from 'vuex'
export default {
  name: 'Canvas',
  data() {
    return {
      canvas: null,
      ctx: null,
    }
  },
  computed: {
    ...mapGetters({
      cellProperties: 'getCellProperties',
      rules: 'getRuleSet1d',
      drawing: 'isDrawing'
    })
  },
  mounted() {
    this.canvas = this.$refs['canvas']
    this.canvas.width = 1280
    this.canvas.height = 720
    this.ctx = this.canvas.getContext('2d')
    this.$root.$on('draw1d', () => { this.draw1d() })
    this.$root.$on('draw2d', () => { this.draw2d() })
    this.$root.$on('reset', () => { this.reset() })
    this.$root.$on('stop', () => { this.stop() })
  },
  methods: {
    drawCanvas(board) {
      const props = this.cellProperties
      board.map((row, y) => {
        const d = props.size
        return row.map(
          (cell, x) => {
            this.ctx.fillStyle = (
              () => {
                if (cell === 1) return props.liveColor
                return props.deadColor
              })()
            this.ctx.fillRect(x * d, y * d, d, d)
            return cell
          },
        )
      })
    },
    async draw1d() {
      const initialState = initialState1d(
        Math.floor(this.canvas.width / this.cellProperties.size),
        getRandomInt,
        [0, 2],
      )
      const board = createBoard(
        initialState,
        this.rules,
        Math.floor(this.canvas.height / this.cellProperties.size)
      )
      this.drawCanvas(board)
    },
    async draw2d() {
      if (this.drawing === 0) return
      const initialState = initialState2d(
        Math.floor(this.canvas.width / this.cellProperties.size),
        Math.floor(this.canvas.height / this.cellProperties.size),
        getRandomInt,
        [0, 2],
      );
      const board = evolve2d(initialState, conwayRules);
      
      const draw2dNext = async (b) => {
        if (this.drawing === 0) return
        const newBoard = evolve2d(b, conwayRules)
        this.drawCanvas(b, this.cellProperties)
        await sleep(300)
        draw2dNext(newBoard)
      }
      return draw2dNext(board)
    },
    stop() {
      this.$root.$store.state.drawing = 0
    },
    reset() {
      this.stop()
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    }
  }
}
</script>