135 lines
3.7 KiB
Vue
135 lines
3.7 KiB
Vue
<template>
|
|
<main id="mainContent">
|
|
<canvas
|
|
id="canvas"
|
|
ref="canvas"
|
|
:width="canvasWidth"
|
|
:height="canvasHeight"
|
|
/>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import { create1dState, create1dStateOneCell, create2dState, createBoard, conwayRules, evolve2d } 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: 'get1dRules',
|
|
drawing: 'isDrawing',
|
|
canvasWidth: 'getCanvasWidth',
|
|
canvasHeight: 'getCanvasHeight',
|
|
refreshRate: 'getRefreshRate',
|
|
initial1dState: 'getInitial1dState',
|
|
drawingDirection: 'getDrawingDirection',
|
|
lastBoard: 'getLastBoard'
|
|
}),
|
|
boardWidth: function() {
|
|
return Math.floor(
|
|
this.canvasWidth /
|
|
this.cellProperties.size)
|
|
},
|
|
boardHeight: function() {
|
|
return Math.floor(
|
|
this.canvasHeight /
|
|
this.cellProperties.size)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.canvas = this.$refs['canvas']
|
|
this.ctx = this.canvas.getContext('2d')
|
|
this.$store.commit('setCanvasWidth', this.canvas.parentElement.clientWidth)
|
|
this.$store.commit('setCanvasHeight', this.canvas.parentElement.clientHeight)
|
|
this.$root.$on('draw1d', () => { this.draw1d() })
|
|
this.$root.$on('draw2dNew', () => { this.draw2dNew() })
|
|
this.$root.$on('draw2dLast', () => { this.draw2dLast() })
|
|
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
|
|
})()
|
|
if (this.drawingDirection === "x")
|
|
this.ctx.fillRect(y * d, x * d, d, d)
|
|
else
|
|
this.ctx.fillRect(x * d, y * d, d, d)
|
|
return cell
|
|
},
|
|
)
|
|
})
|
|
},
|
|
compute1dInitialState() {
|
|
if(this.initial1dState === "onecell")
|
|
return create1dStateOneCell(this.boardWidth)
|
|
return create1dState(this.boardWidth, getRandomInt, [0, 2])
|
|
},
|
|
async draw1d() {
|
|
const initialState = this.compute1dInitialState()
|
|
const board = createBoard(
|
|
initialState,
|
|
this.rules,
|
|
this.boardWidth
|
|
)
|
|
this.$store.commit('setLastBoard', board)
|
|
this.drawCanvas(board)
|
|
},
|
|
async draw2d(board) {
|
|
if (this.drawing === 0) return
|
|
|
|
const draw2dNext = async (b) => {
|
|
if (this.drawing === 0) return
|
|
const newBoard = evolve2d(b, conwayRules)
|
|
this.drawCanvas(b, this.cellProperties)
|
|
await sleep(this.refreshRate)
|
|
draw2dNext(newBoard)
|
|
}
|
|
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)
|
|
},
|
|
reset() {
|
|
this.stop()
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
#mainContent {
|
|
min-width: 70%;
|
|
}
|
|
</style>
|