preset for 1D CA initial state

This commit is contained in:
Ali Gator 2022-01-11 13:16:42 +01:00
parent 266840aa0b
commit 93f9426f56
4 changed files with 93 additions and 21 deletions

View File

@ -9,7 +9,7 @@
</main> </main>
</template> </template>
<script> <script>
import { evolve2d, initialState1d, initialState2d, conwayRules, createBoard } from '../modules/automata.js' import { create1dState, create1dStateOneCell, create2dState, createBoard, conwayRules, evolve2d } from '../modules/automata.js'
import { getRandomInt, sleep } from '../modules/common.js' import { getRandomInt, sleep } from '../modules/common.js'
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
export default { export default {
@ -27,8 +27,19 @@ export default {
drawing: 'isDrawing', drawing: 'isDrawing',
canvasWidth: 'getCanvasWidth', canvasWidth: 'getCanvasWidth',
canvasHeight: 'getCanvasHeight', canvasHeight: 'getCanvasHeight',
refreshRate: 'getRefreshRate' refreshRate: 'getRefreshRate',
}) initial1dState: 'getInitial1dState'
}),
boardWidth: function() {
return Math.floor(
this.canvas.width /
this.cellProperties.size)
},
boardHeight: function() {
return Math.floor(
this.canvas.height /
this.cellProperties.size)
}
}, },
mounted() { mounted() {
this.canvas = this.$refs['canvas'] this.canvas = this.$refs['canvas']
@ -56,24 +67,25 @@ export default {
) )
}) })
}, },
compute1dInitialState() {
if(this.initial1dState === "onecell")
return create1dStateOneCell(this.boardWidth)
return create1dState(this.boardWidth, getRandomInt, [0, 2])
},
async draw1d() { async draw1d() {
const initialState = initialState1d( const initialState = this.compute1dInitialState()
Math.floor(this.canvas.width / this.cellProperties.size),
getRandomInt,
[0, 2],
)
const board = createBoard( const board = createBoard(
initialState, initialState,
this.rules, this.rules,
Math.floor(this.canvas.height / this.cellProperties.size) this.boardHeight
) )
this.drawCanvas(board) this.drawCanvas(board)
}, },
async draw2d() { async draw2d() {
if (this.drawing === 0) return if (this.drawing === 0) return
const initialState = initialState2d( const initialState = create2dState(
Math.floor(this.canvas.width / this.cellProperties.size), this.boardWidth,
Math.floor(this.canvas.height / this.cellProperties.size), this.boardHeight,
getRandomInt, getRandomInt,
[0, 2], [0, 2],
); );

View File

@ -1,9 +1,26 @@
<template> <template>
<MenuRow row-title="Elementary Cellular Automata"> <MenuRow row-title="Elementary Cellular Automata">
<div class="form-field">
<label>Rules</label>
</div>
<form> <form>
<div class="form-field">
<label>Initial state presets
<br>
<select
name="initial1dStates"
value="initial1dStates"
@input="updateInitial1dState"
>
<option
v-for="state in initial1dStates"
:key="state.id"
:value="state.id"
>{{ state.name }}
</option>
</select>
</label>
</div>
<div class="form-field">
<label>Rules</label>
</div>
<div <div
v-for="rule in rules" v-for="rule in rules"
:key="rule" :key="rule"
@ -45,6 +62,7 @@
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'
import MenuRow from './MenuRow.vue' import MenuRow from './MenuRow.vue'
export default { export default {
name: 'MenuElementaryCA', name: 'MenuElementaryCA',
@ -52,17 +70,43 @@ export default {
MenuRow MenuRow
}, },
data() { data() {
// TODO: Why not a getter in the store?
return { return {
rules: ["111", "110", "101", "100", "011", "010", "001", "000"] rules: ["111", "110", "101", "100", "011", "010", "001", "000"],
initial1dStates: [
{ id : "onecell",
name : "One cell at center",
description : "State with a single cell in the middle",
},
{
id : "random",
name : "Random cell",
description : "State populated with random cells",
}
]
} }
}, },
computed: {
...mapGetters({
initial1dState: 'getInitial1dState'
})
},
methods: { methods: {
isCurrentPreset(event) {
console.log(elem.value)
const elem = event.target
return this.initialState === elem.value
},
update1dRules(event) { update1dRules(event) {
const elem = event.target const elem = event.target
const value = elem.checked ? 1 : 0 const value = elem.checked ? 1 : 0
const data = { 'rule' : elem.name, 'value' : value} const data = { 'rule' : elem.name, 'value' : value}
this.$store.commit('update1dRules', data) this.$store.commit('update1dRules', data)
}, },
updateInitial1dState(event) {
const elem = event.target
this.$store.commit('setInitial1dState', elem.value)
},
draw1d() { draw1d() {
this.$root.$store.state.drawing = 1 this.$root.$store.state.drawing = 1
this.$root.$emit('draw1d') this.$root.$emit('draw1d')

View File

@ -99,17 +99,26 @@ function getDrawingValues(state, acc, cell) {
); );
} }
// Populates the first state with a single living cell in the center
function create1dStateOneCell(width) {
return [...Array(width)].map(
(cell, index) => {
if (index === width / 2 || index === width + 1 / 2) return 1
return 0
})
}
// Populates the first state of a 1D CA with cells returned // Populates the first state of a 1D CA with cells returned
// by initFn // by initFn
function initialState1d(width, initFn, args) { function create1dState(width, initFn, args) {
return [...Array(width)].map( return [...Array(width)].map(
() => initFn(...args), () => initFn(...args)
); );
} }
// Populates the first state of a 2D CA with cells returned // Populates the first state of a 2D CA with cells returned
// by initFn // by initFn
function initialState2d(width, height, initFn, args) { function create2dState(width, height, initFn, args) {
return [...Array(height)].map( return [...Array(height)].map(
() => [...Array(width)].map( () => [...Array(width)].map(
() => initFn(...args), () => initFn(...args),
@ -118,5 +127,5 @@ function initialState2d(width, height, initFn, args) {
} }
export { export {
getDrawingValues, initialState1d, initialState2d, evolve1d, evolve2d, conwayRules, createBoard, getDrawingValues, create1dState, create2dState, createBoard, create1dStateOneCell, conwayRules, evolve1d, evolve2d
}; };

View File

@ -23,7 +23,8 @@ export default new Vuex.Store({
}, },
canvasWidth: 1280, canvasWidth: 1280,
canvasHeight: 720, canvasHeight: 720,
refreshRate: 300 refreshRate: 300,
initial1dState: "onecell"
}, },
mutations: { mutations: {
update1dRules(state, data) { update1dRules(state, data) {
@ -43,6 +44,9 @@ export default new Vuex.Store({
}, },
setRefreshRate(state, data) { setRefreshRate(state, data) {
state.refreshRate = data; state.refreshRate = data;
},
setInitial1dState(state, data) {
state.initial1dState = data
} }
}, },
getters: { getters: {
@ -66,6 +70,9 @@ export default new Vuex.Store({
}, },
getRefreshRate(state) { getRefreshRate(state) {
return state.refreshRate return state.refreshRate
},
getInitial1dState(state) {
return state.initial1dState
} }
}, },
actions: { actions: {