[wip] game of life, 1D to 2d
This commit is contained in:
parent
56566aa802
commit
09afd29624
98
index.html
98
index.html
@ -1,98 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Cellular Automaton Explorer</title>
|
|
||||||
<link rel="stylesheet" href="./style.css" >
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<sidebar>
|
|
||||||
<h1>Cellular Automaton Explorer</h1>
|
|
||||||
<div class="menu-row">
|
|
||||||
<h2>Elementary Cellular Automata</h2>
|
|
||||||
<div class="menu-row-content">
|
|
||||||
<form name="rules">
|
|
||||||
<div class="form-field">
|
|
||||||
<label>Rules</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>111
|
|
||||||
<input type="checkbox" name="111" checked>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>110
|
|
||||||
<input type="checkbox" name="110">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>101
|
|
||||||
<input type="checkbox" name="101" checked>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>100
|
|
||||||
<input type="checkbox" name="100">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>011
|
|
||||||
<input type="checkbox" name="011" checked>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>010
|
|
||||||
<input type="checkbox" name="010">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>001
|
|
||||||
<input type="checkbox" name="001">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>000
|
|
||||||
<input type="checkbox" name="000" checked>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="button" name="start" id="start" value="start"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="button" name="stop" id="stop" value="stop"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<input type="button" name="reset" id="reset" value="reset"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<form>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="live">Living cell color</label>
|
|
||||||
<input name="live" type="color" id="live" value="#000000"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="dead">Dead cell color</label>
|
|
||||||
<input name="dead" type="color" id="dead" value="#99FF00"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>Cell size</label>
|
|
||||||
<input name="cellSize" type="number" id="cellSize" value="5"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label>Loop
|
|
||||||
<input name="loop" type="checkbox" id="loop"/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="menu-row"> -->
|
|
||||||
<!-- <h2>2D Cellular Automata</h2> -->
|
|
||||||
<!-- <div class="menu-row-content"> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
</sidebar>
|
|
||||||
<main id="main">
|
|
||||||
<canvas width="500" height="500" id="canvas"></canvas>
|
|
||||||
</main>
|
|
||||||
<script src="main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
135
main.js
135
main.js
@ -1,135 +0,0 @@
|
|||||||
let drawing = 1;
|
|
||||||
|
|
||||||
const form = Array.from(document.forms.rules.elements);
|
|
||||||
const canvas = document.querySelector('#canvas');
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
const main = document.querySelector('#main');
|
|
||||||
const dead = document.querySelector('#dead');
|
|
||||||
const live = document.querySelector('#live');
|
|
||||||
const startBtn = document.querySelector('#start');
|
|
||||||
const resetBtn = document.querySelector('#reset');
|
|
||||||
const stopBtn = document.querySelector('#stop');
|
|
||||||
const cellSize = document.querySelector('#cellSize');
|
|
||||||
const loop = document.querySelector('#loop');
|
|
||||||
const menuRow = document.querySelectorAll('.menu-row');
|
|
||||||
|
|
||||||
canvas.width = main.offsetWidth * 0.9;
|
|
||||||
canvas.height = main.offsetHeight * 0.9;
|
|
||||||
|
|
||||||
// TODO: Hide iterator inside
|
|
||||||
function evolve(state, acc, rules) {
|
|
||||||
const [x, y, z, ...xs] = state;
|
|
||||||
if (!xs.length) {
|
|
||||||
return acc[acc.length - 1] + acc + acc[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
const rule = x + y + z;
|
|
||||||
const newAcc = acc.concat(rules[rule]);
|
|
||||||
return evolve(y + z + xs.join(''), newAcc, rules);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRules() {
|
|
||||||
const rules = {};
|
|
||||||
|
|
||||||
form.reduce((_, i) => {
|
|
||||||
if (i !== undefined
|
|
||||||
&& i.type === 'checkbox') {
|
|
||||||
if (i.checked) rules[i.name] = '1';
|
|
||||||
else rules[i.name] = '0';
|
|
||||||
}
|
|
||||||
return rules;
|
|
||||||
}, rules);
|
|
||||||
|
|
||||||
return rules;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDrawingValues(state, acc) {
|
|
||||||
const cellDim = cellSize.value;
|
|
||||||
|
|
||||||
return Object.keys(state).map(
|
|
||||||
(key) => {
|
|
||||||
const fillStyle = state[key] === '1' ? live.value : dead.value;
|
|
||||||
return {
|
|
||||||
move: [key * cellDim, acc * cellDim],
|
|
||||||
fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
|
|
||||||
fillStyle,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRandomInt(min, max) {
|
|
||||||
const minVal = Math.ceil(min);
|
|
||||||
const maxVal = Math.floor(max);
|
|
||||||
// The maximum is exclusive and the minimum is inclusive
|
|
||||||
return Math.floor(Math.random() * (maxVal - minVal) + minVal);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function sleep(ms) {
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, ms));
|
|
||||||
}
|
|
||||||
|
|
||||||
async function draw(state, acc) {
|
|
||||||
if (drawing === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const position = acc * cellSize.value;
|
|
||||||
if (position >= canvas.height && !loop.checked) return;
|
|
||||||
|
|
||||||
const rules = getRules();
|
|
||||||
const newState = evolve(state, '', rules);
|
|
||||||
const line = getDrawingValues(newState, acc);
|
|
||||||
|
|
||||||
line.map((cell) => {
|
|
||||||
ctx.moveTo(...cell.move);
|
|
||||||
ctx.fillRect(...cell.fill);
|
|
||||||
ctx.fillStyle = cell.fillStyle;
|
|
||||||
return cell;
|
|
||||||
});
|
|
||||||
|
|
||||||
await sleep(40);
|
|
||||||
|
|
||||||
const newAcc = () => {
|
|
||||||
if (position >= canvas.height && loop.checked) return 0;
|
|
||||||
return acc;
|
|
||||||
};
|
|
||||||
|
|
||||||
await draw(newState, newAcc() + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
drawing = 0;
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
startBtn.addEventListener('click', async () => {
|
|
||||||
reset();
|
|
||||||
|
|
||||||
await sleep(60);
|
|
||||||
|
|
||||||
drawing = 1;
|
|
||||||
|
|
||||||
const initialState = [...Array(canvas.width)].map(
|
|
||||||
() => getRandomInt(0, 2).toString(),
|
|
||||||
).join('');
|
|
||||||
|
|
||||||
draw(initialState, 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
resetBtn.addEventListener('click', async () => {
|
|
||||||
reset();
|
|
||||||
});
|
|
||||||
|
|
||||||
stopBtn.addEventListener('click', async () => {
|
|
||||||
drawing = 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
menuRow.forEach((elem) => {
|
|
||||||
elem.querySelector('h2').addEventListener('click', async (e) => {
|
|
||||||
// ugly
|
|
||||||
const menuDisplay = e.currentTarget.parentNode.querySelector('.menu-row-content').style;
|
|
||||||
if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
|
|
||||||
else menuDisplay.setProperty('display', 'block');
|
|
||||||
});
|
|
||||||
});
|
|
@ -1,13 +1,59 @@
|
|||||||
// TODO: Hide accumulator inside
|
// get the next evolution of a 1D CA
|
||||||
function evolve(state, acc, rules) {
|
function evolve(state, rules) {
|
||||||
const [x, y, z, ...xs] = state;
|
function evolveAcc(s, acc) {
|
||||||
if (!xs.length) {
|
const [x, y, z, ...xs] = s;
|
||||||
return acc[acc.length - 1] + acc + acc[0];
|
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;
|
// the current cell is not included in the result
|
||||||
const newAcc = acc.concat(rules[rule]);
|
return [
|
||||||
return evolve(y + z + xs.join(''), newAcc, rules);
|
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) {
|
function conwayRules(cell, neighbors) {
|
||||||
@ -21,11 +67,23 @@ function conwayRules(cell, neighbors) {
|
|||||||
return cell;
|
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) {
|
function getDrawingValues(state, acc, cell) {
|
||||||
const d = cell.dimension;
|
const d = cell.dimension;
|
||||||
return Object.keys(state).map(
|
return Object.keys(state).map(
|
||||||
(key) => {
|
(key) => {
|
||||||
const fillStyle = state[key] === '1' ? cell.liveColor : cell.deadColor;
|
const fillStyle = (() => {
|
||||||
|
if (state[key] === '1') return cell.liveColor;
|
||||||
|
return cell.deadColor;
|
||||||
|
})();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
move: [key * d, acc * d],
|
move: [key * d, acc * d],
|
||||||
fill: [key * d, acc * d, d, 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(
|
return [...Array(width)].map(
|
||||||
() => initFn(...args).toString(),
|
() => initFn(...args).toString(),
|
||||||
).join('');
|
).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
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)),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
evolve, getDrawingValues, initialState1D, initialState2D,
|
getDrawingValues, initialState1d, initialState2d, evolve, evolve2d, conwayRules, createBoard,
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import { getRandomInt, sleep } from './common.js';
|
import { getRandomInt, sleep, hexToRgb } from './common.js';
|
||||||
import { evolve, getDrawingValues, initialState1D } from './automata.js';
|
import {
|
||||||
|
evolve, evolve2d, getDrawingValues, initialState1d, conwayRules, createBoard,
|
||||||
|
} from './automata.js';
|
||||||
|
|
||||||
let drawing = 1;
|
let drawing = 1;
|
||||||
|
|
||||||
@ -10,6 +12,7 @@ const main = document.querySelector('#main');
|
|||||||
const dead = document.querySelector('#dead');
|
const dead = document.querySelector('#dead');
|
||||||
const live = document.querySelector('#live');
|
const live = document.querySelector('#live');
|
||||||
const startBtn = document.querySelector('#start');
|
const startBtn = document.querySelector('#start');
|
||||||
|
const startBtn2d = document.querySelector('#start2d');
|
||||||
const resetBtn = document.querySelector('#reset');
|
const resetBtn = document.querySelector('#reset');
|
||||||
const stopBtn = document.querySelector('#stop');
|
const stopBtn = document.querySelector('#stop');
|
||||||
const cellSize = document.querySelector('#cellSize');
|
const cellSize = document.querySelector('#cellSize');
|
||||||
@ -39,41 +42,70 @@ 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(state, acc) {
|
async function draw(state, acc) {
|
||||||
if (drawing === 0) {
|
if (drawing === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const cell = {
|
const cellProperties = {
|
||||||
dimension: cellSize.value,
|
dimensions: cellSize.value,
|
||||||
liveColor: live.value,
|
liveColor: live.value,
|
||||||
deadColor: dead.value,
|
deadColor: dead.value,
|
||||||
};
|
};
|
||||||
|
|
||||||
const position = acc * cell.dimension;
|
// const position = acc * cell.dimension;
|
||||||
if (position >= canvas.height && !loop.checked) return;
|
// if (position >= canvas.height && !loop.checked) return;
|
||||||
|
|
||||||
const rules = getRules();
|
const rules = getRules();
|
||||||
const newState = evolve(state, '', rules);
|
const board = createBoard(state, rules, canvas.height);
|
||||||
const line = getDrawingValues(newState, acc, cell);
|
// const newState = evolve(state, rules);
|
||||||
|
// const line = getDrawingValues(newState, acc, cell);
|
||||||
|
|
||||||
line.map((c) => {
|
board.reduce((row, prevRow, x) => {
|
||||||
ctx.moveTo(...c.move);
|
const d = cellProperties.dimensions;
|
||||||
ctx.fillRect(...c.fill);
|
row.reduce((cell) => {
|
||||||
ctx.fillStyle = c.fillStyle;
|
ctx.moveTo(x * d, y * d);
|
||||||
return c;
|
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 = () => {
|
// const newAcc = (() => {
|
||||||
if (position >= canvas.height && loop.checked) return 0;
|
// if (position >= canvas.height && loop.checked) return 0;
|
||||||
return acc;
|
// 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 () => {
|
startBtn.addEventListener('click', async () => {
|
||||||
reset();
|
reset();
|
||||||
|
|
||||||
@ -81,9 +113,9 @@ startBtn.addEventListener('click', async () => {
|
|||||||
|
|
||||||
drawing = 1;
|
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 () => {
|
resetBtn.addEventListener('click', async () => {
|
||||||
|
62
style.css
62
style.css
@ -1,62 +0,0 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: black;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
font-family: Courier New;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
background: #110812;
|
|
||||||
margin: 20px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2 {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-row h2 {
|
|
||||||
font-size: medium;
|
|
||||||
margin-left: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
sidebar {
|
|
||||||
flex: auto;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="button"] {
|
|
||||||
min-width: 60px;
|
|
||||||
padding: 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-field {
|
|
||||||
display: flex;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-row {
|
|
||||||
flex: 1;
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
label, .form-field label {
|
|
||||||
margin-right: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main {
|
|
||||||
flex: 4;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user