drawing logic back into component
This commit is contained in:
parent
d0802d850b
commit
9b39bba6e7
15
.eslintrc.js
15
.eslintrc.js
@ -14,13 +14,12 @@ module.exports = {
|
||||
rules: {
|
||||
// override/add rules settings here, such as:
|
||||
// 'vue/no-unused-vars': 'error'
|
||||
'vue/match-component-import-name': 'warn',
|
||||
'vue/no-ref-object-destructure': 'warn',
|
||||
'vue/no-required-prop-with-default': 'warn',
|
||||
'vue/no-restricted-class': 'warn',
|
||||
'vue/no-template-target-blank' : 'warn',
|
||||
'vue/no-this-in-before-route-enter' : 'warn',
|
||||
'vue/prefer-prop-type-boolean-first' : 'warn',
|
||||
|
||||
"vue/match-component-import-name": "warn",
|
||||
"vue/no-ref-object-destructure": "warn",
|
||||
"vue/no-required-prop-with-default": "warn",
|
||||
"vue/no-restricted-class": "warn",
|
||||
"vue/no-template-target-blank": "warn",
|
||||
"vue/no-this-in-before-route-enter": "warn",
|
||||
"vue/prefer-prop-type-boolean-first": "warn",
|
||||
},
|
||||
};
|
||||
|
||||
@ -5,47 +5,130 @@
|
||||
ref="canvas-board"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
>
|
||||
</canvas>
|
||||
/>
|
||||
</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: "CanvasBoard",
|
||||
data() {
|
||||
return {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
drawing: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
cellProperties: "getCellProperties",
|
||||
rules: "get1dRules",
|
||||
canvasWidth: "getCanvasWidth",
|
||||
canvasHeight: "getCanvasHeight",
|
||||
refreshRate: "getRefreshRate",
|
||||
initial1dState: "getInitial1dState",
|
||||
drawingDirection: "getDrawingDirection",
|
||||
lastBoard: "getLastBoard",
|
||||
isDrawing1d: "getIsDrawing1d",
|
||||
}),
|
||||
boardWidth: function () {
|
||||
return Math.floor(this.canvasWidth / this.cellProperties.size);
|
||||
},
|
||||
boardHeight: function () {
|
||||
return Math.floor(this.canvasHeight / this.cellProperties.size);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isDrawing1d(value) {
|
||||
if (value == true) {
|
||||
this.draw1d();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const canvas = document.getElementById("canvas-board")
|
||||
const ctx = canvas.getContext("2d");
|
||||
this.$store.commit(
|
||||
"setCanvas",
|
||||
canvas
|
||||
)
|
||||
this.$store.commit(
|
||||
"setContext",
|
||||
ctx
|
||||
)
|
||||
this.$store.commit(
|
||||
"setCanvasWidth",
|
||||
canvas.parentElement.clientWidth
|
||||
);
|
||||
this.canvas = Object.freeze(document.getElementById("canvas-board"));
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
|
||||
this.$store.commit(
|
||||
"setCanvasHeight",
|
||||
canvas.parentElement.clientHeight
|
||||
this.canvas.parentElement.clientHeight
|
||||
);
|
||||
this.$store.commit(
|
||||
"setBoardWidth",
|
||||
canvas.parentElement.clientWidth
|
||||
},
|
||||
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.rules,
|
||||
this.boardWidth
|
||||
);
|
||||
this.$store.commit(
|
||||
"setBoardHeight",
|
||||
canvas.parentElement.clientHeight
|
||||
this.$store.commit("setLastBoard", Object.freeze(board));
|
||||
this.drawCanvas(board);
|
||||
this.$store.dispatch("stop");
|
||||
},
|
||||
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() {
|
||||
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>
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
@input="updateInitialState"
|
||||
>
|
||||
<option
|
||||
v-for="state in initialStates"
|
||||
v-for="(state, index) in initialStates"
|
||||
:key="'initial-state-elementary' + index"
|
||||
:value="state.id"
|
||||
>
|
||||
{{ state.name }}
|
||||
@ -32,7 +33,8 @@
|
||||
@input="updateRules"
|
||||
>
|
||||
<option
|
||||
v-for="ruleset in presetRules"
|
||||
v-for="(ruleset, index) in presetRules"
|
||||
:key="'ruleset-preset-elementary-' + index"
|
||||
:value="ruleset.name"
|
||||
>
|
||||
{{ ruleset.name }}
|
||||
@ -44,7 +46,8 @@
|
||||
<a style="cursor: pointer" @click="copyRules">copy rules</a>
|
||||
</div>
|
||||
<div
|
||||
v-for="(rule, name) in rules.rules"
|
||||
v-for="(rule, name, index) in rules.rules"
|
||||
:key="'rule-' + index"
|
||||
class="form-field"
|
||||
>
|
||||
<label
|
||||
@ -95,7 +98,7 @@
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 86",
|
||||
@ -161,7 +164,7 @@
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
initialStates: [
|
||||
{
|
||||
@ -211,10 +214,10 @@
|
||||
// TODO : change this, awfully confusing
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const rules = this.presetRules.find(
|
||||
(ruleset) => { return ruleset.name === name }
|
||||
)
|
||||
Object.keys(rules.rules).map((value, index) => {
|
||||
const rules = this.presetRules.find((ruleset) => {
|
||||
return ruleset.name === name;
|
||||
});
|
||||
Object.keys(rules.rules).map((value) => {
|
||||
const data = { name: name, rule: value, value: rules.rules[value] };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
});
|
||||
@ -224,7 +227,7 @@
|
||||
this.$store.commit("setInitial1dState", elem.value);
|
||||
},
|
||||
draw1d() {
|
||||
this.$store.commit("setDrawingStatus", 1);
|
||||
/* this.$store.commit("setDrawingStatus", 1); */
|
||||
this.$store.dispatch("draw1d");
|
||||
},
|
||||
reset() {
|
||||
|
||||
12
src/main.js
12
src/main.js
@ -1,13 +1,9 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import { store } from "./store";
|
||||
|
||||
const gobalsProperties = {'canvas': null};
|
||||
const app = createApp(App);
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(store);
|
||||
|
||||
app.provide('gobalsProperties', gobalsProperties)
|
||||
|
||||
app.use(store)
|
||||
|
||||
app.mount('#app')
|
||||
app.mount("#app");
|
||||
|
||||
@ -8,25 +8,14 @@ rules:
|
||||
confusion bewteen ruleset and rules.
|
||||
it's never clear if we refers to a rule or the whole (named) set
|
||||
*/
|
||||
import { createStore } from 'vuex'
|
||||
import {
|
||||
create1dState,
|
||||
create1dStateOneCell,
|
||||
create2dState,
|
||||
createBoard,
|
||||
conwayRules,
|
||||
evolve2d,
|
||||
} from "../modules/automata.js";
|
||||
import { getRandomInt, sleep } from "../modules/common.js";
|
||||
import { createStore } from "vuex";
|
||||
|
||||
export const store = createStore({
|
||||
strict: process.env.NODE_ENV !== 'production',
|
||||
strict: process.env.NODE_ENV !== "production",
|
||||
state: {
|
||||
drawing: 0,
|
||||
rules1d: {
|
||||
name: "rule 73",
|
||||
rules:
|
||||
{
|
||||
rules: {
|
||||
111: 0,
|
||||
110: 1,
|
||||
101: 0,
|
||||
@ -35,15 +24,13 @@ export const store = createStore({
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
}
|
||||
},
|
||||
},
|
||||
cellProperties: {
|
||||
size: 3,
|
||||
liveColor: "#000000",
|
||||
deadColor: "#F5F5F5",
|
||||
},
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
boardWidth: 0,
|
||||
@ -53,10 +40,11 @@ export const store = createStore({
|
||||
activeMenu: "",
|
||||
drawingDirection: "y",
|
||||
lastBoard: {},
|
||||
isDrawing1d: false,
|
||||
},
|
||||
mutations: {
|
||||
update1dSingleRule(state, data) {
|
||||
state.rules1d.name = data.name
|
||||
state.rules1d.name = data.name;
|
||||
state.rules1d.rules[data.rule] = data.value;
|
||||
},
|
||||
update1dRules(state, data) {
|
||||
@ -65,9 +53,6 @@ export const store = createStore({
|
||||
setCellProperties(state, data) {
|
||||
state.cellProperties[data.name] = data.value;
|
||||
},
|
||||
setDrawingStatus(state, data) {
|
||||
state.drawing = data;
|
||||
},
|
||||
setCanvasWidth(state, data) {
|
||||
state.canvasWidth = data;
|
||||
},
|
||||
@ -90,18 +75,13 @@ export const store = createStore({
|
||||
state.lastBoard = data;
|
||||
},
|
||||
setCanvas(state, data) {
|
||||
state.canvas = data
|
||||
state.canvas = data;
|
||||
},
|
||||
setContext(state, data) {
|
||||
state.ctx = data
|
||||
state.ctx = data;
|
||||
},
|
||||
setBoardWidth(state) {
|
||||
const width = Math.floor(state.canvasWidth / state.cellProperties.size);
|
||||
state.boardWidth = width
|
||||
},
|
||||
setBoardHeight(state) {
|
||||
const height = Math.floor(state.canvasHeight / state.cellProperties.size);
|
||||
state.boardHeight = height
|
||||
setIsDrawing1d(state, data) {
|
||||
state.isDrawing1d = data;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
@ -115,9 +95,6 @@ export const store = createStore({
|
||||
// getter with side-effect. no work
|
||||
return state.rules1d;
|
||||
},
|
||||
isDrawing(state) {
|
||||
return state.drawing;
|
||||
},
|
||||
getCanvasWidth(state) {
|
||||
return state.canvasWidth;
|
||||
},
|
||||
@ -139,85 +116,18 @@ export const store = createStore({
|
||||
getLastBoard(state) {
|
||||
return state.lastBoard;
|
||||
},
|
||||
getIsDrawing1d(state) {
|
||||
return state.isDrawing1d;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async drawCanvas({state}, board) {
|
||||
/** Draw the board on the canvas according to the
|
||||
cells' properties and drawing direction */
|
||||
const props = state.cellProperties
|
||||
board.map((row, y) => {
|
||||
const d = props.size;
|
||||
return row.map((cell, x) => {
|
||||
state.ctx.fillStyle = (() => {
|
||||
if (cell === 1) return props.liveColor;
|
||||
return props.deadColor;
|
||||
})();
|
||||
if (state.drawingDirection === "x")
|
||||
state.ctx.fillRect(y * d, x * d, d, d);
|
||||
else state.ctx.fillRect(x * d, y * d, d, d);
|
||||
return cell;
|
||||
});
|
||||
});
|
||||
},
|
||||
async compute1dInitialState({state}) {
|
||||
/**
|
||||
create the initial state for an elementary automaton based :
|
||||
- on the selected board dimensions
|
||||
- if we want to start from a single cell or several random ones
|
||||
*/
|
||||
if (state.initial1dState === "onecell")
|
||||
return create1dStateOneCell(state.canvasWidth);
|
||||
return create1dState(state.canvasWidth, getRandomInt, [0, 2]);
|
||||
},
|
||||
async draw1d({state, commit, dispatch}) {
|
||||
/** draw an elementary cellular automaton from an initial state and
|
||||
a set of rules */
|
||||
const initialState = await dispatch("compute1dInitialState")
|
||||
const board = createBoard(initialState, state.rules1d.rules, state.boardWidth);
|
||||
commit("setLastBoard", board);
|
||||
await dispatch("drawCanvas", board);
|
||||
},
|
||||
async draw2d({state, dispatch}, board) {
|
||||
/** draw a 2D cellular automaton from an initial state and
|
||||
a set of rules */
|
||||
if (this.drawing === 0) return;
|
||||
|
||||
const draw2dNext = async (b) => {
|
||||
if (state.drawing === 0) return;
|
||||
const newBoard = evolve2d(b, conwayRules);
|
||||
dispatch("drawCanvas", b, this.cellProperties);
|
||||
await sleep(this.refreshRate);
|
||||
draw2dNext(newBoard);
|
||||
};
|
||||
return draw2dNext(board);
|
||||
},
|
||||
async draw2dNew({state, commit, dispatch}) {
|
||||
/** draw a 2d cellular automaton from a random initial state
|
||||
and a set of rules */
|
||||
const initialState = create2dState(
|
||||
state.boardWidth,
|
||||
state.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
commit("setLastBoard", board);
|
||||
await dispatch("draw2d", board);
|
||||
},
|
||||
async draw2dLast({state, dispatch}) {
|
||||
/** draw a 2d cellular automaton from the latest known state
|
||||
of the board and a set of rules */
|
||||
await dispatch("draw2d", state.lastBoard);
|
||||
draw1d({ commit }) {
|
||||
commit("setIsDrawing1d", 1);
|
||||
},
|
||||
stop({ commit }) {
|
||||
/** stop currently running drawing routine */
|
||||
commit("setDrawingStatus", 0);
|
||||
commit("setIsDrawing1d");
|
||||
// commit("setIsDrawing2d")
|
||||
},
|
||||
reset({state, dispatch}) {
|
||||
/** stop currently running drawing routine and clear the board */
|
||||
dispatch("stop");
|
||||
state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
|
||||
}
|
||||
},
|
||||
modules: {},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user