working vue components for 2D automata
This commit is contained in:
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user