gator/explorata
gator/explorata
1
0
Fork 0
Code Pull Requests Projects Releases 1 Activity

Compare commits

base: gator:ae9275647f7ae55eed79aec95f4a0986142b3a73
Branches Tags
gator:master
gator:dev
gator:cells-and-colors
gator:load-picture
gator:mobile-friendly
gator:pinia-migration
gator:v0.9.1
gator:0.9.0
..
compare: gator:db5a38e04bfe9ffb2cd36ee5ac9398d1e8903ff5
Branches Tags
gator:master
gator:dev
gator:cells-and-colors
gator:load-picture
gator:mobile-friendly
gator:pinia-migration
gator:v0.9.1
gator:0.9.0

No commits in common. "ae9275647f7ae55eed79aec95f4a0986142b3a73" and "db5a38e04bfe9ffb2cd36ee5ac9398d1e8903ff5" have entirely different histories.
ae9275647f ... db5a38e04b

8 changed files with 18 additions and 296 deletions
Show Stats Expand all files Collapse all files

99
src/components/CanvasBoard.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<canvas <canvas
id="board-canvas" id="canvas-board"
ref="board-canvas" ref="canvas-board"
:width="canvasWidth"
:height="canvasHeight"
/>
<canvas
id="work-canvas"
ref="work-canvas"
:width="canvasWidth" :width="canvasWidth"
:height="canvasHeight" :height="canvasHeight"
/> />
@ -21,28 +15,16 @@
create2dState, create2dState,
createBoard, createBoard,
conwayRules, conwayRules,
overpopulationRules,
lonelinessRules,
threebornRules,
evolve2d, evolve2d,
} from "../modules/automata.js"; } from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js"; import { getRandomInt, sleep } from "../modules/common.js";
import { picToBoard, picToBlackAndWhite } from "../modules/picture.js";
export default { export default {
name: "CanvasBoard", name: "CanvasBoard",
data() { data() {
return { return {
canvas: null, canvas: null,
workCanvas: null,
workCtx: null,
ctx: null, ctx: null,
available2dRules: {
conway: conwayRules,
overpopulation: overpopulationRules,
loneliness: lonelinessRules,
threeborn: threebornRules,
},
}; };
}, },
computed: { computed: {
@ -56,11 +38,8 @@
getDraw1d: "draw1d", getDraw1d: "draw1d",
getDraw2d: "draw2d", getDraw2d: "draw2d",
getDraw2dLast: "draw2dLast", getDraw2dLast: "draw2dLast",
getDraw2dPicture: "draw2dpicture",
boardWidth: "boardWidth", boardWidth: "boardWidth",
boardHeight: "boardHeight", boardHeight: "boardHeight",
picture: "picture",
selected2dRules: "selected2dRules",
}), }),
...mapWritableState(globalStore, { ...mapWritableState(globalStore, {
lastBoard: "lastBoard", lastBoard: "lastBoard",
@ -83,20 +62,13 @@
getDraw2dLast(value) { getDraw2dLast(value) {
if (value == true) this.draw2dLast(); if (value == true) this.draw2dLast();
}, },
getDraw2dPicture(value) {
if (value == true) this.draw2dPicture();
},
getReset(value) { getReset(value) {
if (value == true) this.reset(); if (value == true) this.reset();
}, },
}, },
mounted() { mounted() {
this.canvas = Object.freeze(document.getElementById("board-canvas")); this.canvas = Object.freeze(document.getElementById("canvas-board"));
this.workCanvas = Object.freeze(document.getElementById("work-canvas")); this.ctx = this.canvas.getContext("2d");
this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
this.workCtx = this.workCanvas.getContext("2d", {
willReadFrequently: true,
});
this.canvasWidth = this.canvas.parentElement.clientWidth; this.canvasWidth = this.canvas.parentElement.clientWidth;
this.canvasHeight = this.canvas.parentElement.clientHeight; this.canvasHeight = this.canvas.parentElement.clientHeight;
this.setBoardWidth(); this.setBoardWidth();
@ -137,20 +109,16 @@
const initialState = this.compute1dInitialState(); const initialState = this.compute1dInitialState();
const board = createBoard(initialState, this.ruleset.rules, this.max); const board = createBoard(initialState, this.ruleset.rules, this.max);
this.lastBoard = Object.freeze(board); this.lastBoard = Object.freeze(board);
this.drawCanvas(this.lastBoard); this.drawCanvas(board);
this.toggleStop(); this.toggleStop();
}, },
// draw 2D automaton on the canvas in a loop // draw 2D automaton on the canvas (currently only the game of life)
draw2d(board) { draw2d(board) {
if (!this.canDraw) return; if (!this.canDraw) return;
const draw2dNext = async (b) => { const draw2dNext = async (b) => {
if (!this.canDraw) return; if (!this.canDraw) return;
const newBoard = evolve2d( const newBoard = evolve2d(b, conwayRules);
b,
this.available2dRules[this.selected2dRules.id]
);
this.drawCanvas(b, this.cellProperties); this.drawCanvas(b, this.cellProperties);
this.lastBoard = Object.freeze(newBoard);
await sleep(this.refreshRate); await sleep(this.refreshRate);
draw2dNext(newBoard); draw2dNext(newBoard);
}; };
@ -169,60 +137,9 @@
this.draw2d(board); this.draw2d(board);
}, },
// draw 2d automaton from the last known generated board // draw 2d automaton from the last known generated board
draw2dLast() { async draw2dLast() {
if (this.lastBoard != undefined) this.draw2d(this.lastBoard); if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
}, },
// draw 2d automaton from an uploaded picture.
// use the picture representation as an initial state
draw2dPicture() {
// get image data by drawing it on a work canvas
this.workCtx.drawImage(
this.picture,
0,
0,
this.canvasWidth,
this.canvasHeight
);
const imgData = this.workCtx.getImageData(
0,
0,
this.canvasWidth,
this.canvasHeight
);
// convert the image to black and white
const black = picToBlackAndWhite(
imgData.data,
this.canvasWidth,
this.canvasHeight
);
// draw it back on the canvas
this.ctx.putImageData(black, 0, 0);
// draw the image back on the work canvas with the dimensions of the board
this.workCtx.drawImage(
this.picture,
0,
0,
this.boardWidth,
this.boardHeight
);
const resized = this.workCtx.getImageData(
0,
0,
this.boardWidth,
this.boardHeight
);
// convert the resized image into a 2D board of boolean based on pixel value
this.lastBoard = Object.freeze(
picToBoard(resized.data, this.boardWidth, this.boardHeight)
);
this.toggleStop();
},
// stop drawing routines and clear the canvas // stop drawing routines and clear the canvas
reset() { reset() {
this.toggleStop(); this.toggleStop();

70
src/components/Menu2dCA.vue
View File

@ -13,83 +13,23 @@
<label>Start from last result</label> <label>Start from last result</label>
<input type="button" value="start" @click="toggleDraw2dLast()" /> <input type="button" value="start" @click="toggleDraw2dLast()" />
</div> </div>
<div class="form-field">
<label>Start from picture</label><br />
<input type="file" @change="preparePicture" />
</div>
<div class="form-field">
<label>
Rules
<br />
<select
name="preset2dRules"
:value="selected2dRules.id"
@input="update2dRules"
>
<option
v-for="(state, index) in preset2dRules"
:key="'initial-state-elementary' + index"
:value="state.id"
>
{{ state.name }}
</option>
</select>
</label>
</div>
</MenuRow> </MenuRow>
</template> </template>
<script> <script>
import { mapActions } from "pinia";
import MenuRow from "./MenuRow.vue"; import MenuRow from "./MenuRow.vue";
import { mapActions, mapWritableState } from "pinia";
import { globalStore } from "../stores/index.js"; import { globalStore } from "../stores/index.js";
import { preset2dRules } from "../modules/preset.js";
export default { export default {
name: "Menu2dCA", name: "Menu2dCA",
components: { components: {
MenuRow, MenuRow,
}, },
data() {
return {
uploadedFile: "",
preset2dRules: preset2dRules,
};
},
computed: {
...mapWritableState(globalStore, ["picture", "selected2dRules"]),
},
methods: { methods: {
...mapActions(globalStore, [ ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
"toggleDraw2dLast", previewFile(event) {
"toggleDraw2d", console.log(event.target.files);
"toggle2dDrawFromPicture",
]),
preparePicture(event) {
const files = event.target.files;
this.picture = new Image();
this.picture.width = this.canvasWidth;
if (FileReader && files && files.length) {
const reader = new FileReader();
reader.onload = () => {
this.picture.src = Object.freeze(reader.result);
this.toggle2dDrawFromPicture();
};
reader.onerror = () => {
console.log(reader.error);
};
reader.readAsDataURL(files[0]);
}
},
update2dRules(event) {
const elem = event.target;
const id = elem.value;
const newRuleset = this.preset2dRules.find((ruleset) => {
return ruleset.id === id;
});
this.selected2dRules = newRuleset;
}, },
}, },
}; };

23
src/components/MenuCellProperties.vue
View File

@ -6,7 +6,7 @@
<input <input
name="liveColor" name="liveColor"
type="color" type="color"
:value="cellProperties.liveColor" @value="cellProperties.liveColor"
@input="updateCellProperties" @input="updateCellProperties"
/> />
</div> </div>
@ -19,9 +19,6 @@
@input="updateCellProperties" @input="updateCellProperties"
/> />
</div> </div>
<div class="form-field">
<a name="switchColor" @click="switchColor">Switch Colors</a>
</div>
<div class="form-field"> <div class="form-field">
<label>Cell size</label> <label>Cell size</label>
<input <input
@ -29,7 +26,7 @@
type="number" type="number"
min="1" min="1"
:value="cellProperties.size" :value="cellProperties.size"
@click="updateCellProperties" @input="updateCellProperties"
/> />
</div> </div>
</form> </form>
@ -37,7 +34,7 @@
</template> </template>
<script> <script>
import { mapActions, mapWritableState } from "pinia"; import { mapWritableState } from "pinia";
import { globalStore } from "../stores/index.js"; import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue"; import MenuRow from "./MenuRow.vue";
export default { export default {
@ -49,7 +46,6 @@
...mapWritableState(globalStore, ["cellProperties"]), ...mapWritableState(globalStore, ["cellProperties"]),
}, },
methods: { methods: {
...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
getCellProperties(event) { getCellProperties(event) {
const elem = event.target; const elem = event.target;
const prop = this.cellProperties; const prop = this.cellProperties;
@ -58,20 +54,7 @@
updateCellProperties(event) { updateCellProperties(event) {
const elem = event.target; const elem = event.target;
this.cellProperties[elem.name] = elem.value; this.cellProperties[elem.name] = elem.value;
this.setBoardWidth();
this.setBoardHeight();
},
switchColor() {
[this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
this.cellProperties["deadColor"],
this.cellProperties["liveColor"],
];
}, },
}, },
}; };
</script> </script>
<style scoped>
a:hover {
cursor: pointer;
}
</style>

6
src/components/MenuRow.vue
View File

@ -30,11 +30,7 @@
window.removeEventListener("click", this.onWindowClick); window.removeEventListener("click", this.onWindowClick);
}, },
methods: { methods: {
...mapActions(globalStore, [ ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
"setActiveSubMenu",
"toggleMainMenu",
"setMainMenu",
]),
onKeyDown: function (event) { onKeyDown: function (event) {
// escape // escape
if (event.keyCode == 27) { if (event.keyCode == 27) {

36
src/modules/automata.js
View File

@ -91,39 +91,6 @@ function conwayRules(cell, neighbors) {
return cell; return cell;
} }
// variation on the game of life's rules,
// where the "three live neighbors" rule is ignored
function threebornRules(cell, neighbors) {
// loneliness rule
if (cell === 1 && neighbors < 2) return 0;
// overpopulation rule
if (cell === 1 && neighbors > 3) return 0;
// born when three live neighbors rule
return cell;
}
// variation on the game of life's rules,
// where the loneliness rule is ignored
function lonelinessRules(cell, neighbors) {
// overpopulation rule
if (cell === 1 && neighbors > 3) return 0;
// born when three live neighbors rule
if (cell === 0 && neighbors === 3) return 1;
// the cell remains the same if none apply
return cell;
}
// variation on the game of life's rules,
// where the overpopulation rule is ignored
function overpopulationRules(cell, neighbors) {
// loneliness rule
if (cell === 1 && neighbors < 2) return 0;
// born when three live neighbors rule
if (cell === 0 && neighbors === 3) return 1;
// the cell remains the same if none apply
return cell;
}
// get the next evolution of a 2D CA initial state // get the next evolution of a 2D CA initial state
// Rules : Moore neighborhood // Rules : Moore neighborhood
function evolve2d(board, rulesFn) { function evolve2d(board, rulesFn) {
@ -181,9 +148,6 @@ export {
createBoard, createBoard,
create1dStateOneCell, create1dStateOneCell,
conwayRules, conwayRules,
overpopulationRules,
lonelinessRules,
threebornRules,
evolve1d, evolve1d,
evolve2d, evolve2d,
}; };

39
src/modules/picture.js
View File

@ -1,39 +0,0 @@
// https://stackoverflow.com/questions/4492385/convert-simple-array-into-two-dimensional-array-matrix
// convert a 1D array into a 2D matrix
export function toMatrix(array, width) {
return array.reduce(
(rows, key, index) =>
(index % width == 0
? rows.push([key])
: rows[rows.length - 1].push(key)) && rows,
[]
);
}
// convert an image into a black and white image
export function picToBlackAndWhite(pixels, width, height) {
return pixels.reduce((acc, pixel, index) => {
if (index % 4 == 0) {
const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
const colour = count >= 255 ? 255 : 1;
acc.data[index] = colour;
acc.data[index + 1] = colour;
acc.data[index + 2] = colour;
acc.data[index + 3] = 255;
}
return acc;
}, new ImageData(width, height));
}
// convert an ImageData into a 2D array of boolean (0, 1) values
export function picToBoard(pixels, width, height) {
const flat = pixels.reduce((acc, pixel, index) => {
if (index % 4 == 0) {
const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
const value = count >= 255 ? 1 : 0;
acc.push(value);
}
return acc;
}, []);
return toMatrix(flat, Math.max(width, height));
}

28
src/modules/preset.js
View File

@ -92,30 +92,4 @@ const initialStates = [
}, },
]; ];
const preset2dRules = [ export { presetRuleset, initialStates };
{
id: "conway",
name: "Conway's Game of Life",
description: "The most popular 2d automata",
},
{
id: "overpopulation",
name: "Overpopulation variation",
description:
"Variation on Conway's Game of Life *without* the overpopulation rule",
},
{
id: "loneliness",
name: "Loneliness variation",
description:
"Variation on Conway's Game of Life *without* the loneliness rule",
},
{
id: "threeborn",
name: "Three lives variation",
description:
"Variation on Conway's Game of Life *without* the 'three live neighbors' rule",
},
];
export { presetRuleset, initialStates, preset2dRules };

13
src/stores/index.js
View File

@ -16,11 +16,6 @@ export const globalStore = defineStore("globalStore", {
"000": 1, "000": 1,
}, },
}, },
selected2dRules: {
id: "conway",
name: "Conway's Game of Life",
description: "The most popular 2d automata",
},
cellProperties: { cellProperties: {
size: 3, size: 3,
liveColor: "#000000", liveColor: "#000000",
@ -37,10 +32,8 @@ export const globalStore = defineStore("globalStore", {
draw1d: false, draw1d: false,
draw2d: false, draw2d: false,
draw2dLast: false, draw2dLast: false,
draw2dpicture: false,
reset: false, reset: false,
canDraw: true, canDraw: true,
picture: null,
mainMenu: false, mainMenu: false,
activeSubMenu: "", activeSubMenu: "",
}; };
@ -73,11 +66,6 @@ export const globalStore = defineStore("globalStore", {
this.canDraw = true; this.canDraw = true;
this.draw2dLast = true; this.draw2dLast = true;
}, },
toggle2dDrawFromPicture() {
this.toggleStop();
this.canDraw = true;
this.draw2dpicture = true;
},
toggleReset() { toggleReset() {
this.toggleStop(); this.toggleStop();
this.reset = true; this.reset = true;
@ -86,7 +74,6 @@ export const globalStore = defineStore("globalStore", {
this.draw1d = false; this.draw1d = false;
this.draw2d = false; this.draw2d = false;
this.draw2dLast = false; this.draw2dLast = false;
this.draw2dpicture = false;
this.canDraw = false; this.canDraw = false;
}, },
setActiveSubMenu(data) { setActiveSubMenu(data) {