diff --git a/package.json b/package.json index 0788df7..5d11dcf 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "vite build", "serve": "vite preview", "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue index f0a9129..f7ce42f 100644 --- a/src/components/CanvasBoard.vue +++ b/src/components/CanvasBoard.vue @@ -47,6 +47,10 @@ canvasHeight: "canvasHeight", getReset: "reset", }), + // used to determine the dimensions of the board + max() { + return Math.max(this.boardWidth, this.boardHeight); + }, }, watch: { getDraw1d(value) { @@ -76,6 +80,7 @@ "setBoardWidth", "setBoardHeight", ]), + // draws the board on the canvas drawCanvas(board) { const props = this.cellProperties; board.map((row, y) => { @@ -92,22 +97,22 @@ }); }); }, + // create a first state, either a single living cell + // at the center or random ones compute1dInitialState() { if (this.initial1dState === "onecell") return create1dStateOneCell(this.boardWidth); return create1dState(this.boardWidth, getRandomInt, [0, 2]); }, + // draw elementary automaton on the canvas based on selected ruleset draw1d() { const initialState = this.compute1dInitialState(); - const board = createBoard( - initialState, - this.ruleset.rules, - this.boardWidth - ); + const board = createBoard(initialState, this.ruleset.rules, this.max); this.lastBoard = Object.freeze(board); this.drawCanvas(board); this.toggleStop(); }, + // draw 2D automaton on the canvas (currently only the game of life) draw2d(board) { if (!this.canDraw) return; const draw2dNext = async (b) => { @@ -119,6 +124,7 @@ }; return draw2dNext(board); }, + // draw 2d automaton from a new state draw2dNew() { const initialState = create2dState( this.boardWidth, @@ -130,9 +136,11 @@ this.lastBoard = Object.freeze(board); this.draw2d(board); }, + // draw 2d automaton from the last known generated board async draw2dLast() { if (this.lastBoard != undefined) this.draw2d(this.lastBoard); }, + // stop drawing routines and clear the canvas reset() { this.toggleStop(); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue index ef7c801..4db98db 100644 --- a/src/components/MenuRow.vue +++ b/src/components/MenuRow.vue @@ -25,7 +25,6 @@ emits: ["update-active"], computed: { isActive() { - console.log(this.rowTitle, "vs", this.active); return this.rowTitle == this.active; }, }, diff --git a/src/modules/automata.js b/src/modules/automata.js index e8ee506..8ed51a5 100644 --- a/src/modules/automata.js +++ b/src/modules/automata.js @@ -31,11 +31,12 @@ function evolve1d(state, rules) { // } // performance "choke point" in full imperative -function createBoard(state, rules, height) { +function createBoard(state, rules, max) { var board = []; let prevState = []; - for (let i = 0; i < height; i++) { + for (let i = 0; i < max; i++) { let nextState = []; + // use the passed initial step during first iteration if (i == 0) { nextState = evolve1d(state, rules); } else { @@ -121,7 +122,7 @@ 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; + if (index === Math.floor(width / 2)) return 1; return 0; }); }