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

working 2D CA functions + canvas draws in one go

Browse Source
This commit is contained in:
Ali Gator 2022-01-02 14:47:27 +01:00
parent 09afd29624
commit 1a14e2d028
4 changed files with 197 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/index.html
View File

@ -4,106 +4,108 @@
<link rel="stylesheet" href="./style.css" > <link rel="stylesheet" href="./style.css" >
</head> </head>
<body> <body>
<sidebar> <h1>Cellular Automata Explorer</h1>
<h1>Cellular Automaton Explorer</h1> <div id="container">
<div class="menu-row"> <sidebar>
<h2>Elementary Cellular Automata</h2> <div class="menu-row">
<div class="menu-row-content"> <h2>Elementary Cellular Automata</h2>
<form name="rules"> <div class="menu-row-content">
<div class="form-field"> <form name="rules">
<label>Rules</label> <div class="form-field">
</div> <label>Rules</label>
<div class="form-field"> </div>
<label>111 <div class="form-field">
<input type="checkbox" name="111" checked> <label>111
</label> <input type="checkbox" name="111" checked>
</div> </label>
<div class="form-field"> </div>
<label>110 <div class="form-field">
<input type="checkbox" name="110"> <label>110
</label> <input type="checkbox" name="110">
</div> </label>
<div class="form-field"> </div>
<label>101 <div class="form-field">
<input type="checkbox" name="101" checked> <label>101
</label> <input type="checkbox" name="101" checked>
</div> </label>
<div class="form-field"> </div>
<label>100 <div class="form-field">
<input type="checkbox" name="100"> <label>100
</label> <input type="checkbox" name="100">
</div> </label>
<div class="form-field"> </div>
<label>011 <div class="form-field">
<input type="checkbox" name="011" checked> <label>011
</label> <input type="checkbox" name="011" checked>
</div> </label>
<div class="form-field"> </div>
<label>010 <div class="form-field">
<input type="checkbox" name="010"> <label>010
</label> <input type="checkbox" name="010">
</div> </label>
<div class="form-field"> </div>
<label>001 <div class="form-field">
<input type="checkbox" name="001"> <label>001
</label> <input type="checkbox" name="001">
</div> </label>
<div class="form-field"> </div>
<label>000 <div class="form-field">
<input type="checkbox" name="000" checked> <label>000
</label> <input type="checkbox" name="000" checked>
</div> </label>
<div class="form-field"> </div>
<input type="button" name="start" id="start" value="start"/> <div class="form-field">
</div> <input type="button" name="start" id="start" value="start"/>
<div class="form-field"> </div>
<input type="button" name="stop" id="stop" value="stop"/> <div class="form-field">
</div> <input type="button" name="stop" id="stop" value="stop"/>
<div class="form-field"> </div>
<input type="button" name="reset" id="reset" value="reset"/> <div class="form-field">
</div> <input type="button" name="reset" id="reset" value="reset"/>
</form> </div>
<form> </form>
<div class="form-field"> <form>
<label for="live">Living cell color</label> <div class="form-field">
<input name="live" type="color" id="live" value="#000000"/> <label for="live">Living cell color</label>
</div> <input name="live" type="color" id="live" value="#000000"/>
<div class="form-field"> </div>
<label for="dead">Dead cell color</label> <div class="form-field">
<input name="dead" type="color" id="dead" value="#99FF00"/> <label for="dead">Dead cell color</label>
</div> <input name="dead" type="color" id="dead" value="#AA78E8"/>
<div class="form-field"> </div>
<label>Cell size</label> <div class="form-field">
<input name="cellSize" type="number" id="cellSize" value="5"/> <label>Cell size</label>
</div> <input name="cellSize" type="number" id="cellSize" value="5"/>
<div class="form-field"> </div>
<label>Loop <div class="form-field">
<input name="loop" type="checkbox" id="loop"/> <label>Loop
</label> <input name="loop" type="checkbox" id="loop"/>
</div> </label>
</form> </div>
</form>
</div>
</div> </div>
</div> <div class="menu-row">
<div class="menu-row"> <h2>2D Cellular Automata</h2>
<h2>2D Cellular Automata</h2> <div class="menu-row-content">
<div class="menu-row-content"> <form>
<form> <div class="form-field">
<div class="form-field"> <input type="button" name="start2d" id="start2d" value="start"/>
<input type="button" name="start2d" id="start2d" value="start"/> </div>
</div> <div class="form-field">
<div class="form-field"> <input type="button" name="stop2d" id="stop2d" value="stop"/>
<input type="button" name="stop2d" id="stop2d" value="stop"/> </div>
</div> <div class="form-field">
<div class="form-field"> <input type="button" name="reset2d" id="reset2d" value="reset"/>
<input type="button" name="reset2d" id="reset2d" value="reset"/> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </sidebar>
</sidebar> <main id="main">
<main id="main"> <canvas width="500" height="500" id="canvas"></canvas>
<canvas width="500" height="500" id="canvas"></canvas> </main>
</main> </div>
<script type="module" src="./js/main.js"></script> <script type="module" src="./js/main.js"></script>
</body> </body>
</html> </html>

68
src/js/automata.js
View File

@ -1,43 +1,45 @@
// get the next evolution of a 1D CA // handles negative index and index bigger than its array length
function evolve(state, rules) { function guard(index, array) {
function evolveAcc(s, acc) { if (index > (array.length - 1)) return 0;
const [x, y, z, ...xs] = s; if (index < 0) return (array.length - 1);
if (!xs.length) { return index;
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 // get the next evolution of a 1D CA initial state
function evolve(state, rules) {
function getCell(index) {
const safeIndex = guard(index, state);
return state[safeIndex];
}
const newState = state.map((_, x) => {
const cells = [
getCell(x - 1),
getCell(x),
getCell(x + 1)];
return rules[cells.join('')];
});
return newState.map(Number);
}
// create a 2D board from a 1D CA initial state
function createBoard(state, rules, height) { function createBoard(state, rules, height) {
function createBoardAcc(s, h, acc) { function createBoardAcc(s, h, acc) {
if (h === 0) return acc; if (h === 0) return acc;
const newState = evolve(state, rules); const newState = evolve(s, rules);
const newAcc = acc.concat(state); const newAcc = acc.concat([s]);
return createBoardAcc(newState, h - 1, newAcc); return createBoardAcc(newState, h - 1, newAcc);
} }
return createBoardAcc(state, height, []).map( return createBoardAcc(state, height, []);
(row) => row.split(''))
} }
// Find the neighbor of a given cell in a 2D CA board
function getCellNeighbors(board, cellCoordinates) { function getCellNeighbors(board, cellCoordinates) {
const [x, y] = cellCoordinates; const [x, y] = cellCoordinates;
const rowLength = board[0].length; // caca? const rowLength = board[0].length; // caca?
// handles board edges where the cell is missing neighbors // handles board edges where the cell is missing neighbors
function getCell(xx, yy) { 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 safeX = guard(xx, board);
const safeY = guard(yy, rowLength); const safeY = guard(yy, rowLength);
return board[safeX][safeY]; return board[safeX][safeY];
@ -52,10 +54,13 @@ function getCellNeighbors(board, cellCoordinates) {
]; ];
} }
// Sums the value of a cell's neighbors
function getNeighborsSum(cells) { function getNeighborsSum(cells) {
return cells.reduce((cell, acc) => cell + acc, 0); 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) { function conwayRules(cell, neighbors) {
// loneliness rule // loneliness rule
if (cell === 1 && neighbors < 2) return 0; if (cell === 1 && neighbors < 2) return 0;
@ -67,6 +72,7 @@ function conwayRules(cell, neighbors) {
return cell; return cell;
} }
// get the next evolution of a 2D CA initial state
function evolve2d(board, rulesFn) { function evolve2d(board, rulesFn) {
return board.map((row, x) => row.map((cell, y) => { return board.map((row, x) => row.map((cell, y) => {
const neighbors = getCellNeighbors(board, [x, y]); const neighbors = getCellNeighbors(board, [x, y]);
@ -93,15 +99,21 @@ function getDrawingValues(state, acc, cell) {
); );
} }
// Populates the first state of a 1D CA with cells returned
// by initFn
function initialState1d(width, initFn, args) { function initialState1d(width, initFn, args) {
return [...Array(width)].map( return [...Array(width)].map(
() => initFn(...args).toString(), () => initFn(...args),
).join(''); );
} }
// Populates the first state of a 2D CA with cells returned
// by initFn
function initialState2d(width, height, initFn, args) { function initialState2d(width, height, initFn, args) {
return [...Array(height)].map( return [...Array(height)].map(
() => [...Array(width)].map(() => initFn(...args)), () => [...Array(width)].map(
() => initFn(...args),
),
); );
} }

98
src/js/main.js
View File

@ -1,6 +1,7 @@
import { getRandomInt, sleep, hexToRgb } from './common.js'; // TODO : Change board resolution according to the set cell dimensions
import { getRandomInt, sleep } from './common.js';
import { import {
evolve, evolve2d, getDrawingValues, initialState1d, conwayRules, createBoard, evolve, evolve2d, getDrawingValues, initialState1d, initialState2d, conwayRules, createBoard,
} from './automata.js'; } from './automata.js';
let drawing = 1; let drawing = 1;
@ -42,70 +43,59 @@ function reset() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
} }
// TODO: Hide accumulator inside maybe? async function draw(dimension) {
async function draw(state, acc) {
if (drawing === 0) { if (drawing === 0) {
return; return;
} }
const rules = getRules();
const cellProperties = { const cellProperties = {
dimensions: cellSize.value, dimensions: cellSize.value,
liveColor: live.value, liveColor: live.value,
deadColor: dead.value, deadColor: dead.value,
}; };
// const position = acc * cell.dimension; const initialState = (
// if (position >= canvas.height && !loop.checked) return; () => {
if (dimension === '1d') {
return initialState1d(
Math.floor(canvas.width / cellProperties.dimensions),
getRandomInt,
[0, 2],
);
}
return evolve2d(initialState2d(
Math.floor(canvas.width / cellProperties.dimensions),
Math.floor(canvas.height / cellProperties.dimensions),
getRandomInt,
[0, 2]), conwayRules);
})();
const rules = getRules(); const board = (
const board = createBoard(state, rules, canvas.height); () => {
// const newState = evolve(state, rules); if (dimension === '1d') return createBoard(initialState, rules, Math.floor(canvas.height / cellProperties.dimensions));
// const line = getDrawingValues(newState, acc, cell); return initialState;
})();
board.reduce((row, prevRow, x) => { board.map((row, y) => {
const d = cellProperties.dimensions; const d = cellProperties.dimensions;
row.reduce((cell) => { return row.map(
ctx.moveTo(x * d, y * d); (cell, x) => {
ctx.fillRect(x * d, x * d, d, d); ctx.fillStyle = (
ctx.fillStyle = (() => { () => {
if (cell === '1') return cellProperties.liveColor; if (cell === 1) return cellProperties.liveColor;
return cellProperties.deadColor; return cellProperties.deadColor;
})(); })();
}) ctx.fillRect(x * d, y * d, d, d);
return cell;
},
);
}); });
// await sleep(40);
// const newAcc = (() => {
// if (position >= canvas.height && loop.checked) return 0;
// return acc;
// })();
// await draw(newState, newAcc + 1);
}
async function draw2d(board, acc) {
if (drawing === 0) {
}
} }
// Listeners // 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 () => { startBtn.addEventListener('click', async () => {
reset(); reset();
@ -113,9 +103,17 @@ startBtn.addEventListener('click', async () => {
drawing = 1; drawing = 1;
const initialState = initialState1d(canvas.width, getRandomInt, [0, 2]); draw('1d');
});
draw(initialState, 0); startBtn2d.addEventListener('click', async () => {
reset();
await sleep(60);
drawing = 1;
draw('2d');
}); });
resetBtn.addEventListener('click', async () => { resetBtn.addEventListener('click', async () => {

14
src/style.css
View File

@ -6,13 +6,11 @@
body { body {
background: black; background: black;
color: white; color: white;
display: flex;
font-family: Courier New; font-family: Courier New;
} }
canvas { canvas {
background: #110812; background: #110812;
margin: 20px 0 0 0;
} }
h1, h2 { h1, h2 {
@ -20,7 +18,9 @@ h1, h2 {
} }
h1 { h1 {
font-size: large; margin : 10px auto;
font-size: larger;
text-align: center;
} }
.menu-row h2 { .menu-row h2 {
@ -28,11 +28,12 @@ h1 {
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
border: 2px solid darkgrey; border: 2px solid darkgrey;
margin: 0 0 10px 0;
} }
sidebar { sidebar {
flex: auto; flex: auto;
padding: 10px; padding: 0 10px;
} }
input[type="button"] { input[type="button"] {
@ -48,7 +49,6 @@ input[type="button"] {
.menu-row { .menu-row {
flex: 1; flex: 1;
margin: 10px 0;
} }
label, .form-field label { label, .form-field label {
@ -59,3 +59,7 @@ label, .form-field label {
#main { #main {
flex: 4; flex: 4;
} }
#container {
display: flex;
}