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

boardToPic

Browse Source
This commit is contained in:
Ali Gator 2022-12-19 22:53:48 +01:00
parent a402739b97
commit e43bd48794
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/CanvasBoard.vue
View File

@ -28,13 +28,14 @@
servietteRules, servietteRules,
evolve2d, evolve2d,
} from "../modules/automata.js"; } from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js"; import { getRandomInt } from "../modules/common.js";
import { picToBoard, picToBlackAndWhite } from "../modules/picture.js"; import { boardToPic, picToBoard } from "../modules/picture.js";
export default { export default {
name: "CanvasBoard", name: "CanvasBoard",
data() { data() {
return { return {
board: null,
canvas: null, canvas: null,
workCanvas: null, workCanvas: null,
workCtx: null, workCtx: null,
@ -65,13 +66,13 @@
boardWidth: "boardWidth", boardWidth: "boardWidth",
boardHeight: "boardHeight", boardHeight: "boardHeight",
selected2dRules: "selected2dRules", selected2dRules: "selected2dRules",
picture: "picture",
}), }),
...mapWritableState(globalStore, { ...mapWritableState(globalStore, {
lastBoard: "lastBoard", lastBoard: "lastBoard",
canvasWidth: "canvasWidth", canvasWidth: "canvasWidth",
canvasHeight: "canvasHeight", canvasHeight: "canvasHeight",
getReset: "reset", getReset: "reset",
picture: "picture",
}), }),
// used to determine the dimensions of the board // used to determine the dimensions of the board
max() { max() {
@ -120,21 +121,13 @@
drawCanvas(board, width, height) { drawCanvas(board, width, height) {
const d = this.cellProperties.size; const d = this.cellProperties.size;
// bool to RGBA colors // bool to RGBA colors
const img = board.flat().reduce((acc, cell, index) => { const img = boardToPic(board, width, height);
const color = cell === 1 ? 0 : 255;
const i = index * 4;
acc.data[i] = color;
acc.data[i + 1] = color;
acc.data[i + 2] = color;
acc.data[i + 3] = 255;
return acc;
}, new ImageData(width, height));
// rescale and draw // rescale and draw
this.ctx.save(); this.ctx.save();
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.workCtx.putImageData(img, 0, 0); this.workCtx.putImageData(img, 0, 0);
this.ctx.imageSmoothingEnabled = false; this.ctx.imageSmoothingEnabled = false;
if (this.getDraw2dPicture != true) this.ctx.scale(d, d); this.ctx.scale(d, d);
this.ctx.drawImage( this.ctx.drawImage(
this.workCanvas, this.workCanvas,
0, 0,
@ -181,7 +174,6 @@
const newBoard = evolve2d(board, this.selectedRules); const newBoard = evolve2d(board, this.selectedRules);
this.draw2d(board); this.draw2d(board);
this.lastBoard = Object.freeze(newBoard); this.lastBoard = Object.freeze(newBoard);
/* await sleep(this.refreshRate) */
return this.draw2dNext(newBoard); return this.draw2dNext(newBoard);
}); });
}, },
@ -189,7 +181,7 @@
async draw2dNew() { async draw2dNew() {
if (!this.canDraw) return; if (!this.canDraw) return;
const initialState = this.randomInitialState(); const initialState = this.randomInitialState();
let board = evolve2d(initialState, conwayRules); let board = evolve2d(initialState, this.selectRules);
if (this.loop) return this.draw2dNext(board); if (this.loop) return this.draw2dNext(board);
else this.draw2d(board); else this.draw2d(board);
this.toggleStop(); this.toggleStop();

16
src/modules/picture.js
View File

@ -35,5 +35,19 @@ export function picToBoard(pixels, width, height) {
} }
return acc; return acc;
}, []); }, []);
return toMatrix(flat, Math.max(width, height));
return toMatrix(flat, width, height);
}
// convert board to ImageData
export function boardToPic(board, width, height) {
return board.flat().reduce((acc, cell, index) => {
const color = cell === 1 ? 0 : 255;
const i = index * 4;
acc.data[i] = color;
acc.data[i + 1] = color;
acc.data[i + 2] = color;
acc.data[i + 3] = 255;
return acc;
}, new ImageData(width, height));
} }