adminoo/explorata
1
0
Fork 0
Code Releases Activity

[wip] game of life, 1D to 2d

Browse Source
This commit is contained in:
adminoo
2022-01-01 23:11:38 +01:00
parent 980a39bbde
commit 1b86688f9e
5 changed files with 123 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/js/automata.js
View File

@ -1,13 +1,59 @@
// TODO: Hide accumulator inside
function evolve(state, acc, rules) {
const [x, y, z, ...xs] = state;
if (!xs.length) {
return acc[acc.length - 1] + acc + acc[0];
// get the next evolution of a 1D CA
function evolve(state, rules) {
function evolveAcc(s, acc) {
const [x, y, z, ...xs] = s;
if (!xs.length) {
return acc[acc.length - 1] + acc + acc[0];
}
const rule = x + y + z;
const newAcc = acc.concat(rules[rule]);
return evolveAcc(y + z + xs.join(''), newAcc);
}
return evolveAcc(state, '');
}
// create a 2D board from a 1D initial state
function createBoard(state, rules, height) {
function createBoardAcc(s, h, acc) {
if (h === 0) return acc;
const newState = evolve(state, rules);
const newAcc = acc.concat(state);
return createBoardAcc(newState, h - 1, newAcc);
}
return createBoardAcc(state, height, []).map(
(row) => row.split(''))
}
function getCellNeighbors(board, cellCoordinates) {
const [x, y] = cellCoordinates;
const rowLength = board[0].length; // caca?
// handles board edges where the cell is missing neighbors
function getCell(xx, yy) {
// handles negative index and index bigger than its array length
function guard(index, array) {
if (index > array.length - 1) return 0;
if (index < 0) return array.length - 1;
return index;
}
const safeX = guard(xx, board);
const safeY = guard(yy, rowLength);
return board[safeX][safeY];
}
const rule = x + y + z;
const newAcc = acc.concat(rules[rule]);
return evolve(y + z + xs.join(''), newAcc, rules);
// the current cell is not included in the result
return [
getCell(x - 1, y - 1), getCell(x, y - 1),
getCell(x + 1, y - 1), getCell(x - 1, y),
getCell(x + 1, y), getCell(x - 1, y + 1),
getCell(x, y + 1), getCell(x + 1, y - 1),
];
}
function getNeighborsSum(cells) {
return cells.reduce((cell, acc) => cell + acc, 0);
}
function conwayRules(cell, neighbors) {
@ -21,11 +67,23 @@ function conwayRules(cell, neighbors) {
return cell;
}
function evolve2d(board, rulesFn) {
return board.map((row, x) => row.map((cell, y) => {
const neighbors = getCellNeighbors(board, [x, y]);
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 = state[key] === '1' ? cell.liveColor : cell.deadColor;
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],
@ -35,18 +93,18 @@ function getDrawingValues(state, acc, cell) {
);
}
function initialState1D(width, initFn, args) {
function initialState1d(width, initFn, args) {
return [...Array(width)].map(
() => initFn(...args).toString(),
).join('');
}
function initialState2D(width, height, initFn, args) {
function initialState2d(width, height, initFn, args) {
return [...Array(height)].map(
() => [...Array(width)].map(() => initFn(...args)),
);
}
export {
evolve, getDrawingValues, initialState1D, initialState2D,
getDrawingValues, initialState1d, initialState2d, evolve, evolve2d, conwayRules, createBoard,
};

74
src/js/main.js
View File

@ -1,5 +1,7 @@
import { getRandomInt, sleep } from './common.js';
import { evolve, getDrawingValues, initialState1D } from './automata.js';
import { getRandomInt, sleep, hexToRgb } from './common.js';
import {
evolve, evolve2d, getDrawingValues, initialState1d, conwayRules, createBoard,
} from './automata.js';
let drawing = 1;
@ -10,6 +12,7 @@ const main = document.querySelector('#main');
const dead = document.querySelector('#dead');
const live = document.querySelector('#live');
const startBtn = document.querySelector('#start');
const startBtn2d = document.querySelector('#start2d');
const resetBtn = document.querySelector('#reset');
const stopBtn = document.querySelector('#stop');
const cellSize = document.querySelector('#cellSize');
@ -39,41 +42,70 @@ function reset() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// TODO: Hide accumulator inside maybe?
async function draw(state, acc) {
if (drawing === 0) {
return;
}
const cell = {
dimension: cellSize.value,
const cellProperties = {
dimensions: cellSize.value,
liveColor: live.value,
deadColor: dead.value,
};
const position = acc * cell.dimension;
if (position >= canvas.height && !loop.checked) return;
// const position = acc * cell.dimension;
// if (position >= canvas.height && !loop.checked) return;
const rules = getRules();
const newState = evolve(state, '', rules);
const line = getDrawingValues(newState, acc, cell);
const board = createBoard(state, rules, canvas.height);
// const newState = evolve(state, rules);
// const line = getDrawingValues(newState, acc, cell);
line.map((c) => {
ctx.moveTo(...c.move);
ctx.fillRect(...c.fill);
ctx.fillStyle = c.fillStyle;
return c;
board.reduce((row, prevRow, x) => {
const d = cellProperties.dimensions;
row.reduce((cell) => {
ctx.moveTo(x * d, y * d);
ctx.fillRect(x * d, x * d, d, d);
ctx.fillStyle = (() => {
if (cell === '1') return cellProperties.liveColor;
return cellProperties.deadColor;
})();
})
});
await sleep(40);
// await sleep(40);
const newAcc = () => {
if (position >= canvas.height && loop.checked) return 0;
return acc;
};
// const newAcc = (() => {
// if (position >= canvas.height && loop.checked) return 0;
// return acc;
// })();
await draw(newState, newAcc() + 1);
// await draw(newState, newAcc + 1);
}
async function draw2d(board, acc) {
if (drawing === 0) {
}
}
// Listeners
startBtn2d.addEventListener('click', async () => {
reset();
await sleep(60);
drawing = 1;
const initialState = initialState2d(canvas.width, canvas.height, getRandomInt, [0, 2]);
const nextState = evolve2d(initialState, conwayRules);
draw2d(initialState, 0);
});
startBtn.addEventListener('click', async () => {
reset();
@ -81,9 +113,9 @@ startBtn.addEventListener('click', async () => {
drawing = 1;
const initialState = initialState1D(canvas.width, getRandomInt, [0, 2]);
const initialState = initialState1d(canvas.width, getRandomInt, [0, 2]);
draw(initialState, 1);
draw(initialState, 0);
});
resetBtn.addEventListener('click', async () => {