wip moved canvas routine in store. it's awful

This commit is contained in:
Ali Gator 2022-12-01 12:03:34 +01:00
parent 999f6d1899
commit aace63b1a2
7 changed files with 376 additions and 300 deletions

View File

@ -3,20 +3,20 @@
<h1 id="main-title">Cellular Automata Explorer</h1> <h1 id="main-title">Cellular Automata Explorer</h1>
<div id="container"> <div id="container">
<MainMenu /> <MainMenu />
<Board /> <CanvasBoard />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import MainMenu from "./components/MainMenu.vue"; import MainMenu from "./components/MainMenu.vue";
import Board from "./components/Board.vue"; import CanvasBoard from "./components/CanvasBoard.vue";
export default { export default {
name: "App", name: "App",
components: { components: {
MainMenu, MainMenu,
Board, CanvasBoard,
}, },
}; };
</script> </script>

0
src/assets/main.css Normal file
View File

View File

@ -1,128 +0,0 @@
<template>
<main id="mainContent">
<canvas
id="canvas-board"
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,
};
},
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 = document.getElementById("canvas-board")
this.ctx = this.canvas.getContext("2d");
this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
this.$store.commit(
"setCanvasHeight",
this.canvas.parentElement.clientHeight
);
},
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>

View File

@ -0,0 +1,56 @@
<template>
<main id="mainContent">
<canvas
id="canvas-board"
ref="canvas-board"
:width="canvasWidth"
:height="canvasHeight"
>
</canvas>
</main>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "CanvasBoard",
computed: {
...mapGetters({
canvasWidth: "getCanvasWidth",
canvasHeight: "getCanvasHeight",
}),
},
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.$store.commit(
"setCanvasHeight",
canvas.parentElement.clientHeight
);
this.$store.commit(
"setBoardWidth",
canvas.parentElement.clientWidth
);
this.$store.commit(
"setBoardHeight",
canvas.parentElement.clientHeight
);
},
};
</script>
<style>
#mainContent {
min-width: 70%;
}
</style>

View File

@ -2,17 +2,16 @@
<MenuRow row-title="Elementary Cellular Automata"> <MenuRow row-title="Elementary Cellular Automata">
<form> <form>
<div class="form-field"> <div class="form-field">
<label <label>
>Initial state presets Initial state presets
<br /> <br />
<select <select
name="initial1dStates" name="initialStates"
value="initial1dStates" :value="initialState"
@input="updateInitial1dState" @input="updateInitialState"
> >
<option <option
v-for="state in initial1dStates" v-for="state in initialStates"
:key="'preset1d' + state.id"
:value="state.id" :value="state.id"
> >
{{ state.name }} {{ state.name }}
@ -25,35 +24,37 @@
</div> </div>
<div class="form-field"> <div class="form-field">
<label <label
>Rules presets >Rules presets
<br /> <br />
<select name="rules1d" value="rules" @input="update1dRules"> <select
name="ruleset-elementary"
:value="rules.name"
@input="updateRules"
>
<option <option
v-for="(rule, name) in presetRules" v-for="ruleset in presetRules"
:key="'rule1d' + name" :value="ruleset.name"
:value="name"
> >
{{ name }} {{ ruleset.name }}
</option> </option>
</select> </select>
</label> </label>
</div> </div>
<div class="form-field"> <div class="form-field">
<a style="cursor: pointer" @click="copy1dRules">copy rules</a> <a style="cursor: pointer" @click="copyRules">copy rules</a>
</div> </div>
<div <div
v-for="(rule, name) in rules" v-for="(rule, name) in rules.rules"
:key="'rule1d' + name"
class="form-field" class="form-field"
> >
<label <label
>{{ name }} >{{ name }}
<input <input
:value="rule" :value="rule"
type="checkbox" type="checkbox"
:name="name" :name="name"
:checked="rule" :checked="rule"
@input="update1dSingleRule" @input="updateSingleRule"
/> />
</label> </label>
</div> </div>
@ -72,150 +73,171 @@
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import MenuRow from "./MenuRow.vue"; import MenuRow from "./MenuRow.vue";
export default { export default {
name: "MenuElementaryCA", name: "MenuElementaryCA",
components: { components: {
MenuRow, MenuRow,
}, },
data() { data() {
// TODO: Why not a getter in the store? // TODO: Why not a getter in the store?
return { return {
presetRules: { presetRules: [
"rule 73": { {
100: 0, name: "rule 73",
101: 0, rules: {
110: 1, 100: 0,
111: 0, 101: 0,
"011": 1, 110: 1,
"010": 0, 111: 0,
"001": 0, "011": 1,
"000": 1, "010": 0,
}, "001": 0,
"rule 86": { "000": 1,
100: 1, }
101: 0, },
110: 0, {
111: 1, name: "rule 86",
"011": 0, rules:{
"010": 1, 100: 1,
"001": 0, 101: 0,
"000": 1, 110: 0,
}, 111: 1,
"rule 90": { "011": 0,
100: 1, "010": 1,
101: 0, "001": 0,
110: 1, "000": 1,
111: 0, },
"011": 0, },
"010": 0, {
"001": 1, name: "rule 90",
"000": 0, rules: {
}, 100: 1,
"rule 45?": { 101: 0,
100: 0, 110: 1,
101: 0, 111: 0,
110: 1, "011": 0,
111: 0, "010": 0,
"011": 1, "001": 1,
"010": 0, "000": 0,
"001": 1, },
"000": 1, },
}, {
"rule 54?": { name: "rule 45?",
100: 1, rules: {
101: 0, 100: 0,
110: 1, 101: 0,
111: 1, 110: 1,
"011": 0, 111: 0,
"010": 1, "011": 1,
"001": 1, "010": 0,
"000": 0, "001": 1,
}, "000": 1,
"unknown rule": { },
100: 0, },
101: 0, {
110: 0, name: "rule 54?",
111: 1, rules: {
"011": 0, 100: 1,
"010": 0, 101: 0,
"001": 1, 110: 1,
"000": 1, 111: 1,
}, "011": 0,
"010": 1,
"001": 1,
"000": 0,
},
},
{
name: "unknown rule",
rules: {
100: 0,
101: 0,
110: 0,
111: 1,
"011": 0,
"010": 0,
"001": 1,
"000": 1,
},
}
],
initialStates: [
{
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({
initialState: "getInitial1dState",
rules: "get1dRules",
}),
rules1dFileName() {
return (
Object.keys(this.rules)
.map((index) => {
return this.rules[index];
})
.join("_") + ".json"
);
}, },
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",
rules: "get1dRules",
}),
rules1dFileName() {
return (
Object.keys(this.rules)
.map((index) => {
return this.rules[index];
})
.join("_") + ".json"
);
}, },
}, methods: {
methods: { copyRules() {
copy1dRules() { const rules = JSON.stringify(this.rules);
const rules = JSON.stringify(this.rules); navigator.clipboard.writeText(rules);
navigator.clipboard.writeText(rules); },
}, isCurrentPreset(event) {
isCurrentPreset(event) { const elem = event.target;
const elem = event.target; return this.initialState === elem.value;
return this.initialState === elem.value; },
}, updateSingleRule(event) {
update1dSingleRule(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("update1dSingleRule", data);
},
update1dRules(event) {
const elem = event.target;
const name = elem.value;
const rules = this.presetRules[name];
Object.keys(rules).map((index) => {
const data = { rule: index, value: rules[index] };
this.$store.commit("update1dSingleRule", data); this.$store.commit("update1dSingleRule", data);
}); },
updateRules(event) {
// 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 data = { name: name, rule: value, value: rules.rules[value] };
this.$store.commit("update1dSingleRule", data);
});
},
updateInitialState(event) {
const elem = event.target;
this.$store.commit("setInitial1dState", elem.value);
},
draw1d() {
this.$store.commit("setDrawingStatus", 1);
this.$store.dispatch("draw1d");
},
reset() {
this.$store.dispatch("reset");
},
}, },
updateInitial1dState(event) { };
const elem = event.target;
this.$store.commit("setInitial1dState", elem.value);
},
draw1d() {
this.$root.$store.state.drawing = 1;
this.$root.$emit("draw1d");
},
reset() {
this.$root.$emit("reset");
},
},
};
</script> </script>
<style> <style>
.menu-row a { .menu-row a {
color: white; color: white;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-size: small; font-size: small;
} }
</style> </style>

View File

@ -2,8 +2,12 @@ import { createApp } from 'vue'
import App from "./App.vue"; import App from "./App.vue";
import { store } from "./store"; import { store } from "./store";
const gobalsProperties = {'canvas': null};
const app = createApp(App) const app = createApp(App)
app.provide('gobalsProperties', gobalsProperties)
app.use(store) app.use(store)
app.mount('#app') app.mount('#app')

View File

@ -1,25 +1,53 @@
/* TODO: terminology is to be changed for :
canvas/board :
currently, the canvas object is named board,
while the structure used to store automata current state is named "board" as well. This is confusing
drawing board could be enough to lift any ambiguity
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 { createStore } from 'vuex'
import {
create1dState,
create1dStateOneCell,
create2dState,
createBoard,
conwayRules,
evolve2d,
} from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js";
export const store = createStore({ export const store = createStore({
strict: process.env.NODE_ENV !== 'production',
state: { state: {
drawing: 0, drawing: 0,
rules1d: { rules1d: {
111: 0, name: "rule 73",
110: 1, rules:
101: 0, {
100: 0, 111: 0,
"011": 1, 110: 1,
"010": 0, 101: 0,
"001": 0, 100: 0,
"000": 1, "011": 1,
"010": 0,
"001": 0,
"000": 1,
}
}, },
cellProperties: { cellProperties: {
size: 3, size: 3,
liveColor: "#000000", liveColor: "#000000",
deadColor: "#F5F5F5", deadColor: "#F5F5F5",
}, },
canvas: null,
ctx: null,
canvasWidth: 0, canvasWidth: 0,
canvasHeight: 0, canvasHeight: 0,
boardWidth: 0,
boardHeight: 0,
refreshRate: 300, refreshRate: 300,
initial1dState: "onecell", initial1dState: "onecell",
activeMenu: "", activeMenu: "",
@ -28,7 +56,8 @@ export const store = createStore({
}, },
mutations: { mutations: {
update1dSingleRule(state, data) { update1dSingleRule(state, data) {
state.rules1d[data.rule] = data.value; state.rules1d.name = data.name
state.rules1d.rules[data.rule] = data.value;
}, },
update1dRules(state, data) { update1dRules(state, data) {
state.rules1d = data; state.rules1d = data;
@ -60,6 +89,20 @@ export const store = createStore({
setLastBoard(state, data) { setLastBoard(state, data) {
state.lastBoard = data; state.lastBoard = data;
}, },
setCanvas(state, data) {
state.canvas = data
},
setContext(state, 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
},
}, },
getters: { getters: {
getCellProperties(state) { getCellProperties(state) {
@ -69,7 +112,8 @@ export const store = createStore({
return state.rules1d; return state.rules1d;
}, },
getRule1d(state) { getRule1d(state) {
return (rule) => state.rules1d[rule]; // getter with side-effect. no work
return state.rules1d;
}, },
isDrawing(state) { isDrawing(state) {
return state.drawing; return state.drawing;
@ -96,6 +140,84 @@ export const store = createStore({
return state.lastBoard; return state.lastBoard;
}, },
}, },
actions: {}, 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);
},
stop({ commit }) {
/** stop currently running drawing routine */
commit("setDrawingStatus", 0);
},
reset({state, dispatch}) {
/** stop currently running drawing routine and clear the board */
dispatch("stop");
state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
}
},
modules: {}, modules: {},
}); });