cells CELLS. interlinked

This commit is contained in:
Ali Gator 2023-01-01 22:51:21 +01:00
parent f19f3bb311
commit bb8184f7e4
7 changed files with 94 additions and 127 deletions

View File

@ -2,7 +2,6 @@
import { onMounted, watch } from "vue";
import { globalStore } from "../stores/index.js";
import {
createBoard,
conwayRules,
overpopulationRules,
lonelinessRules,
@ -12,6 +11,7 @@
evolve2d,
} from "../modules/core.js";
import {
createBoard,
create1dInitialState,
create2dRandomGrid,
} from "../modules/board.js";
@ -100,30 +100,31 @@
// draw elementary automaton on the canvas based on selected ruleset
const draw1d = () => {
const initialState = create1dInitialState(
store.board,
store.board.width,
store.initial1dState
);
const board = createBoard(initialState, store.ruleset1d.rules, max());
store.board.grid = Object.freeze(board);
const grid = createBoard(initialState, store.ruleset1d.rules, max());
store.board.grid = Object.freeze(grid);
drawCanvas(store.board);
store.toggleStop();
};
// draw 2D automaton on the canvas in a loop
const draw2d = (board) => {
drawCanvas(store.board);
const newBoard = Object.freeze(evolve2d(board.grid, selectedRules()));
if (store.board.grid == newBoard) store.toggleStop();
store.board.grid = newBoard;
drawCanvas(board);
const newGrid = evolve2d(board.grid, board.width, selectedRules());
store.board.grid = Object.freeze(newGrid);
};
// draw 2d automaton in a loop, starting from passed state
const draw2dNext = async (board) => {
setTimeout(() => {
if (!store.canDraw) return;
draw2d(board);
return draw2dNext(store.board);
}, store.renderer.refreshRate);
requestAnimationFrame(() => {
draw2d(board);
return draw2dNext(store.board);
});
}, 24);
};
// draw 2d automaton from a new state
@ -133,7 +134,7 @@
store.board.width,
store.board.height
);
store.board.grid = Object.freeze(evolve2d(initialGrid, selectedRules()));
store.board.grid = Object.freeze(initialGrid);
if (store.loop) return draw2dNext(store.board);
else draw2d(store.board);
store.toggleStop();
@ -142,6 +143,7 @@
// draw 2d automaton from the last known generated board
const draw2dLast = async () => {
if (!store.canDraw) return;
if (!store.board.grid) return;
if (store.loop) return draw2dNext(store.board);
else draw2d(store.board);
store.toggleStop();
@ -162,7 +164,7 @@
store.board.width,
store.board.height
);
const newBoard = picToBoard(resized.data, store.board);
const newBoard = picToBoard(resized.data);
store.board.grid = Object.freeze(newBoard);
store.toggleStop();
};

View File

@ -22,7 +22,7 @@
name="next"
class="next"
value="Next"
@click="store.toggleNext()"
@click="store.toggleDraw2dLast()"
/>
<input
type="button"

View File

@ -1,30 +1,65 @@
import { create2dState, create1dStateOneCell, create1dState } from "./core.js";
import {
evolve1d,
create2dState,
create1dStateOneCell,
create1dState,
} from "./core.js";
import { getRandomInt } from "./common.js";
class Board {
constructor(width, height, grid = []) {
import { Cell } from "./cell.js";
export class Board {
constructor(width, height) {
this.width = width;
this.height = height;
(this.cellProperties = {
this.grid;
this.cellProperties = {
size: 3,
liveColor: "#000000",
deadColor: "#F5F5F5",
}),
(this.grid = grid);
};
}
}
// create a 2D board from a 1D CA initial state
// function createBoard(state, rules, height) {
// function createBoardAcc(s, h, acc) {
// if (h === 0) return acc;
// const newState = evolve1d(s, rules);
// const newAcc = acc.concat([s]);
// return createBoardAcc(newState, h - 1, newAcc);
// }
// return createBoardAcc(state, height, []);
// }
// performance "choke point" in full imperative
export function createBoard(state, rules, max) {
var board = [];
let prevState = [];
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 {
nextState = evolve1d(prevState, rules);
}
// flat array
board = board.concat(nextState.map((s) => new Cell(s)));
prevState = nextState;
}
return board;
}
// create a first state, either a single living cell
// at the center or random ones
const create1dInitialState = (board, type = "onecell") => {
if (type === "onecell") return create1dStateOneCell(board.width);
return create1dState(board.width, getRandomInt, [0, 2]);
export const create1dInitialState = (width, type = "onecell") => {
if (type === "onecell") return create1dStateOneCell(width);
return create1dState(width, getRandomInt, [0, 2]);
};
// initialize 2d board with random cells
const create2dRandomGrid = (width, height) => {
export const create2dRandomGrid = (width, height) => {
return create2dState(width, height, getRandomInt, [0, 2]);
};
export { Board, create1dInitialState, create2dRandomGrid };

6
src/modules/cell.js Normal file
View File

@ -0,0 +1,6 @@
export class Cell {
constructor(state = 0) {
this.state = state;
this.prevState = null;
}
}

View File

@ -1,5 +1,7 @@
// core functions to generate initial states and evolve them
import { Cell } from "./cell.js";
// get the next evolution of a 1D CA initial state
// buggy BUT produces interesting results
// function evolve1d(state, rules) {
@ -23,41 +25,6 @@ function evolve1d(state, rules) {
return [rules[edge1], ...center, rules[edge2]];
}
// create a 2D board from a 1D CA initial state
// function createBoard(state, rules, height) {
// function createBoardAcc(s, h, acc) {
// if (h === 0) return acc;
// const newState = evolve1d(s, rules);
// const newAcc = acc.concat([s]);
// return createBoardAcc(newState, h - 1, newAcc);
// }
// return createBoardAcc(state, height, []);
// }
// performance "choke point" in full imperative
function createBoard(state, rules, max) {
var board = [];
let prevState = [];
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 {
nextState = evolve1d(prevState, rules);
}
// flat array
board.push(...nextState);
prevState = nextState;
}
return board;
}
// Sums the value of a cell's neighbors
function getNeighborsSum(cells) {
return cells.reduce((cell, acc) => cell + acc, 0);
}
// Get the next evolution of a cell according to
// Conway's game of life rules
function conwayRules(cell, neighbors) {
@ -130,48 +97,23 @@ function overpopulationRules(cell, neighbors) {
// get the next evolution of a 2D CA initial state
// Rules : Moore neighborhood
function evolve2d(board, rulesFn) {
const bh = board.length - 1;
const bw = board[0].length - 1;
return board.map((row, y) => {
// handle edges
const prow = y - 1 < 0 ? board[bh] : board[y - 1];
const nrow = y + 1 > bh ? board[0] : board[y + 1];
return row.map((cell, x) => {
// handle edges too
const pcell = x - 1 < 0 ? bw : x - 1;
const ncell = x + 1 > bw ? 0 : x + 1;
// the current cell is not included in the result
const neighbors = [
prow[pcell],
prow[x],
prow[ncell],
row[pcell],
row[ncell],
nrow[pcell],
nrow[x],
nrow[ncell],
];
const sum = getNeighborsSum(neighbors);
return rulesFn(cell, sum);
});
});
}
function getDrawingValues(state, acc, cell) {
const d = cell.dimension;
return Object.keys(state).map((key) => {
const fillStyle = (() => {
if (state[key] === "1") return cell.liveColor;
return cell.deadColor;
})();
return {
move: [key * d, acc * d],
fill: [key * d, acc * d, d, d],
fillStyle,
};
});
function evolve2d(grid, width, rulesFn) {
const bh = grid.length - 1;
const bw = width;
return grid.reduce((acc, cell, y) => {
const sum =
grid[Math.abs((y - 1) % bh)].state +
grid[Math.abs((y + 1) % bh)].state +
grid[Math.abs((y - bw - 1) % bh)].state +
grid[Math.abs((y - bw) % bh)].state +
grid[Math.abs((y - bw + 1) % bh)].state +
grid[Math.abs((y + bw - 1) % bh)].state +
grid[Math.abs((y + bw) % bh)].state +
grid[Math.abs((y + bw + 1) % bh)].state;
acc[y] = new Cell(rulesFn(cell.state, sum));
acc[y].prevState = cell.state;
return acc;
}, []);
}
// Populates the first state with a single living cell in the center
@ -191,16 +133,12 @@ function create1dState(width, initFn, args) {
// Populates the first state of a 2D CA with cells returned
// by initFn
function create2dState(width, height, initFn, args) {
return [...Array(height)].map(() =>
[...Array(width)].map(() => initFn(...args))
);
return [...Array(height * width)].map(() => new Cell(initFn(...args)));
}
export {
getDrawingValues,
create1dState,
create2dState,
createBoard,
create1dStateOneCell,
conwayRules,
overpopulationRules,

View File

@ -1,3 +1,4 @@
import { Cell } from "./cell.js";
// https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
// [
function hexToRGB(hex) {
@ -36,17 +37,14 @@ export function picToBlackAndWhite(pixels, width, height) {
}
// convert an ImageData into a 2D array of boolean (0, 1) values
export function picToBoard(pixels, board) {
const flat = pixels.reduce((acc, pixel, index) => {
export function picToBoard(pixels) {
return pixels.reduce((acc, pixel, index) => {
const i = index * 4;
const count = pixels[i] + pixels[i + 1] + pixels[i + 2];
const value = (count >= 255) & 1;
acc[index] = value;
acc[index] = new Cell(value);
return acc;
}, []);
// TODO: The representation has to be 2D, not the data structure
// (change to flat)
return toMatrix(flat, board.width, board.height);
}
// convert board to ImageData
@ -58,7 +56,7 @@ export function boardToPic(board) {
const img = new ImageData(board.width, board.height);
const colors = [hexToRGB(live), hexToRGB(dead)];
board.grid.reduce((acc, cell, index) => {
const color = colors[(cell === 1) & 1];
const color = colors[(cell.state === 1) & 1];
const i = index * 4;
acc[i] = color[0];
acc[i + 1] = color[1];

View File

@ -103,18 +103,6 @@ export const globalStore = defineStore("globalStore", {
toggleLoop() {
this.loop = !this.loop;
},
toggleNext() {
switch (this.lastAction) {
case "drawfromlast":
this.toggleDraw2dLast();
break;
case "draw2d":
this.toggleDraw2d();
break;
default:
return;
}
},
setActiveSubMenu(data) {
if (this.activeSubMenu == data) this.activeSubMenu = "";
else this.activeSubMenu = data;