structuring shits up
This commit is contained in:
parent
a2e16a0fde
commit
56566aa802
11
.eslintrc.json
Normal file
11
.eslintrc.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2015": true
|
||||
},
|
||||
"extends": [
|
||||
"airbnb-base"
|
||||
],
|
||||
"rules": {
|
||||
}
|
||||
}
|
||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
package-lock.json
|
||||
node_modules
|
||||
16
package.json
Normal file
16
package.json
Normal 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
109
src/index.html
Normal 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
52
src/js/automata.js
Normal 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
12
src/js/common.js
Normal 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
104
src/js/main.js
Normal 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
61
src/style.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user