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

structuring shits up

Browse Source
This commit is contained in:
Ali Gator 2022-01-01 14:07:34 +01:00
parent a2e16a0fde
commit 56566aa802
8 changed files with 367 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintrc.json Normal file
View File

@ -0,0 +1,11 @@
{
"env": {
"browser": true,
"es2015": true
},
"extends": [
"airbnb-base"
],
"rules": {
}
}

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
package-lock.json
node_modules

16
package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "exploraton",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "python3 -m http.server 8001 --directory src"
},
"author": "gator",
"license": "MIT",
"devDependencies": {
"eslint": "^8.5.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.3"
}
}

109
src/index.html Normal file
View File

@ -0,0 +1,109 @@
<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">
<form>
<div class="form-field">
<input type="button" name="start2d" id="start2d" value="start"/>
</div>
<div class="form-field">
<input type="button" name="stop2d" id="stop2d" value="stop"/>
</div>
<div class="form-field">
<input type="button" name="reset2d" id="reset2d" value="reset"/>
</div>
</form>
</div>
</div>
</sidebar>
<main id="main">
<canvas width="500" height="500" id="canvas"></canvas>
</main>
<script type="module" src="./js/main.js"></script>
</body>
</html>

52
src/js/automata.js Normal file
View File

@ -0,0 +1,52 @@
// 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];
}
const rule = x + y + z;
const newAcc = acc.concat(rules[rule]);
return evolve(y + z + xs.join(''), newAcc, rules);
}
function conwayRules(cell, neighbors) {
// loneliness rule
if (cell === 1 && neighbors < 2) return 0;
// overpopulation rule
if (cell === 1 && neighbors > 3) return 0;
// born when three live neighbors rule
if (cell === 0 && neighbors === 3) return 1;
// the cell remains the same if none apply
return cell;
}
function getDrawingValues(state, acc, cell) {
const d = cell.dimension;
return Object.keys(state).map(
(key) => {
const fillStyle = state[key] === '1' ? cell.liveColor : cell.deadColor;
return {
move: [key * d, acc * d],
fill: [key * d, acc * d, d, d],
fillStyle,
};
},
);
}
function initialState1D(width, initFn, args) {
return [...Array(width)].map(
() => initFn(...args).toString(),
).join('');
}
function initialState2D(width, height, initFn, args) {
return [...Array(height)].map(
() => [...Array(width)].map(() => initFn(...args)),
);
}
export {
evolve, getDrawingValues, initialState1D, initialState2D,
};

12
src/js/common.js Normal file
View File

@ -0,0 +1,12 @@
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));
}
export { getRandomInt, sleep };

104
src/js/main.js Normal file
View File

@ -0,0 +1,104 @@
import { getRandomInt, sleep } from './common.js';
import { evolve, getDrawingValues, initialState1D } from './automata.js';
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;
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 reset() {
drawing = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
async function draw(state, acc) {
if (drawing === 0) {
return;
}
const cell = {
dimension: cellSize.value,
liveColor: live.value,
deadColor: dead.value,
};
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);
line.map((c) => {
ctx.moveTo(...c.move);
ctx.fillRect(...c.fill);
ctx.fillStyle = c.fillStyle;
return c;
});
await sleep(40);
const newAcc = () => {
if (position >= canvas.height && loop.checked) return 0;
return acc;
};
await draw(newState, newAcc() + 1);
}
startBtn.addEventListener('click', async () => {
reset();
await sleep(60);
drawing = 1;
const initialState = initialState1D(canvas.width, getRandomInt, [0, 2]);
draw(initialState, 1);
});
resetBtn.addEventListener('click', async () => {
reset();
});
stopBtn.addEventListener('click', async () => {
drawing = 0;
});
menuRow.forEach((elem) => {
elem.querySelector('h2').addEventListener('click', async (e) => {
const parent = e.currentTarget.parentNode;
const menuDisplay = parent.querySelector('.menu-row-content').style;
if (menuDisplay.display !== 'none') menuDisplay.setProperty('display', 'none');
else menuDisplay.setProperty('display', 'block');
});
});

61
src/style.css Normal file
View File

@ -0,0 +1,61 @@
* {
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;
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: 10px 0;
}
label, .form-field label {
margin-right: 10px;
font-weight: bold;
}
#main {
flex: 4;
}