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

wip picture to board

Browse Source
This commit is contained in:
Ali Gator 2022-12-20 11:59:48 +01:00
parent 75caa2054f
commit 99a54eeb13
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/CanvasBoard.vue
View File

@ -196,7 +196,7 @@
// 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
// draw image on canvas
this.ctx.fillStyle = "black";
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
this.ctx.drawImage(
@ -207,6 +207,7 @@
this.picture.height
);
// get image data from canvas
const imgData = this.ctx.getImageData(
0,
0,
@ -214,10 +215,28 @@
this.canvasHeight
);
// 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
);
// get the resized image data from work canvas
const resized = this.workCtx.getImageData(
0,
0,
this.boardWidth,
this.boardHeight
);
// convert the image into a 2D board of boolean based on pixel value
this.lastBoard = Object.freeze(
picToBoard(imgData.data, this.canvasWidth, this.canvasHeight)
picToBoard(resized.data, this.boardWidth, this.boardHeight)
);
this.toggleStop();
},
// stop drawing routines and clear the canvas

5
src/modules/picture.js
View File

@ -28,11 +28,10 @@ export function picToBlackAndWhite(pixels, 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 i = index * 4;
const count = pixels[i] + pixels[i + 1] + pixels[i + 2];
const value = count >= 255 ? 1 : 0;
acc[index] = value;
}
return acc;
}, []);