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

absolute shitcode interface POC

Browse Source
This commit is contained in:
Ali Gator 2021-12-30 19:45:39 +01:00
parent f27a983b55
commit 81102611ec
3 changed files with 165 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
index.html
View File

@ -1,19 +1,72 @@
<html> <html>
<head> <head>
<title>Cellular automata</title> <title>Cellular Automaton Explorer</title>
<style> <link rel="stylesheet" href="./style.css" >
* {
margin: 0;
padding: 0;
}
canvas {
border: solid black 5px;
}
</style>
</head> </head>
<body> <body>
<canvas width="500" height="500" id="canvas"></canvas> <sidebar>
<h1>Cellular Automaton Explorer</h1>
<div class="menu-row">
<form name="rules">
<div class="form-field">
<label>Rules</label>
</div>
<div class="form-field">
<label>111</label>
<input type="checkbox" name="111">
</div>
<div class="form-field">
<label>110</label>
<input type="checkbox" name="110">
</div>
<div class="form-field">
<label>101</label>
<input type="checkbox" name="101">
</div>
<div class="form-field">
<label>100</label>
<input type="checkbox" name="100">
</div>
<div class="form-field">
<label>011</label>
<input type="checkbox" name="011">
</div>
<div class="form-field">
<label>010</label>
<input type="checkbox" name="010">
</div>
<div class="form-field">
<label>001</label>
<input type="checkbox" name="001">
</div>
<div class="form-field">
<label>000</label>
<input type="checkbox" name="000">
</div>
<div class="form-field">
<input type="button" name="start" id="start" value="start"/>
</div>
<div class="form-field">
<input type="button" name="reset" id="reset" value="reset"/>
</div>
</form>
</div>
<div class="menu-row">
<form method="">
<div class="form-field">
<label>Living cell color</label>
<input name="live" type="color" id="live" value="#000000"/>
</div>
<div class="form-field">
<label>Dead cell color</label>
<input name="dead" type="color" id="dead" value="#99FF00"/>
</div>
</form>
</div>
</sidebar>
<main id="main">
<canvas width="500" height="500" id="canvas"></canvas>
</main>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

113
main.js
View File

@ -1,77 +1,86 @@
'use strict'; let drawing = 1;
const rules = { const form = Array.from(document.forms.rules.elements);
"111": "0", const canvas = document.getElementById('canvas');
"110": "1", const main = document.getElementById('main');
"101": "0", canvas.width = main.offsetWidth;
"100": "1", canvas.height = main.offsetHeight;
"011": "1",
"010": "0", const dead = document.getElementById('dead');
"001": "1", const live = document.getElementById('live');
"000": "0"
}
function getRandomInt(min, max) { function getRandomInt(min, max) {
min = Math.ceil(min); min = Math.ceil(min);
max = Math.floor(max); max = Math.floor(max);
// The maximum is exclusive and the minimum is inclusive // The maximum is exclusive and the minimum is inclusive
return Math.floor(Math.random() * (max - min) + min); return Math.floor(Math.random() * (max - min) + min);
} }
function sleep(ms) { function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise((resolve) => setTimeout(resolve, ms));
} }
function evolve(state, acc) { function evolve(state, acc, rules) {
const [x, y, z, ...xs] = state; const [x, y, z, ...xs] = state;
if (!xs.length) { if (!xs.length) {
return acc[0] + acc + acc[acc.length - 1] return acc[acc.length - 1] + acc + acc[0];
}
else {
const rule = x + y + z;
const new_acc = acc.concat(rules[rule]);
return evolve(y + z + xs.join(""), new_acc)
} }
const rule = x + y + z;
const newAcc = acc.concat(rules[rule]);
return evolve(y + z + xs.join(''), newAcc, rules);
} }
function draw(state, context, acc) { function draw(state, context, acc) {
const cell_dim = 2 const cellDim = 5;
Object.keys(state).forEach( Object.keys(state).forEach(
function (key) { (key) => {
context.moveTo(key * cell_dim, acc * cell_dim) context.moveTo(key * cellDim, acc * cellDim);
context.fillRect(key * cell_dim, acc * cell_dim, cell_dim, cell_dim) context.fillRect(key * cellDim, acc * cellDim, cellDim, cellDim);
if(state[key] == "1") { if (state[key] === '1') context.fillStyle = live.value;
context.fillStyle="black"; else context.fillStyle = dead.value;
}else { },
if (acc % 2) { );
context.fillStyle="white";
}else {
context.fillStyle="white";
}
}
})
} }
window.addEventListener("load", async function() { const start = document.getElementById('start');
const canvas = document.getElementById("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext("2d")
const initial_state = [...Array(canvas.width)].map( start.addEventListener('click', async () => {
_=> getRandomInt(0, 2).toString() drawing = 1;
).join("") const rules = form.reduce((a, i) => {
if (i !== undefined
&& i.type === 'checkbox') {
if (i.checked) a[i.name] = '1';
else a[i.name] = '0';
}
return a;
}, {});
console.log("initial state length : ", initial_state.length) const ctx = canvas.getContext('2d');
var new_state = evolve(initial_state, "") const initialState = [...Array(canvas.width)].map(
var acc = 0 (_) => getRandomInt(0, 2).toString(),
).join('');
while(acc < canvas.width) {
draw(new_state, ctx, acc) let newState = evolve(initialState, '', rules);
new_state = evolve(new_state, "") let acc = 0;
acc++
await sleep(100) while (acc < canvas.width) {
if (drawing === 0) {
break;
}
draw(newState, ctx, acc);
newState = evolve(newState, '', rules);
acc += 1;
await sleep(60);
} }
}) });
const reset = document.getElementById('reset');
reset.addEventListener('click', async () => {
drawing = 0;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
});

39
style.css Normal file
View File

@ -0,0 +1,39 @@
* {
margin: 0;
padding: 0;
}
body {
background: black;
color: white;
display: flex;
font-family: Courier New;
}
h1 {
font-size: large;
font-weight: bold;
}
sidebar {
flex: auto;
padding: 10px;
}
.form-field {
display: flex;
margin: 10px;
}
.menu-row {
flex: 1;
}
label, .form-field label {
margin-right: 10px;
font-weight: bold;
}
#main {
flex: 4;
}