working vue components for 2D automata

This commit is contained in:
Gator
2022-01-10 13:50:02 +01:00
parent 59d821d084
commit 74a1b311b7
4 changed files with 47 additions and 4 deletions

View File

@ -9,8 +9,8 @@
</main>
</template>
<script>
import { initialState1d, createBoard } from '../modules/automata.js'
import { getRandomInt } from '../modules/common.js'
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',
@ -24,6 +24,7 @@ export default {
...mapGetters({
cellProperties: 'getCellProperties',
rules: 'getRuleSet1d',
drawing: 'isDrawing'
})
},
mounted() {
@ -32,7 +33,9 @@ export default {
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) {
@ -65,8 +68,30 @@ export default {
)
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.$root.$store.state.drawing = 0;
this.stop()
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
}
}