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>
<head>
<title>Cellular automata</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: solid black 5px;
}
</style>
<title>Cellular Automaton Explorer</title>
<link rel="stylesheet" href="./style.css" >
</head>
<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>
</body>
</html>

109
main.js
View File

@ -1,15 +1,13 @@
'use strict';
let drawing = 1;
const rules = {
"111": "0",
"110": "1",
"101": "0",
"100": "1",
"011": "1",
"010": "0",
"001": "1",
"000": "0"
}
const form = Array.from(document.forms.rules.elements);
const canvas = document.getElementById('canvas');
const main = document.getElementById('main');
canvas.width = main.offsetWidth;
canvas.height = main.offsetHeight;
const dead = document.getElementById('dead');
const live = document.getElementById('live');
function getRandomInt(min, max) {
min = Math.ceil(min);
@ -19,59 +17,70 @@ function getRandomInt(min, max) {
}
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;
if (!xs.length) {
return acc[0] + acc + acc[acc.length - 1]
}
else {
const rule = x + y + z;
const new_acc = acc.concat(rules[rule]);
return evolve(y + z + xs.join(""), new_acc)
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 draw(state, context, acc) {
const cell_dim = 2
const cellDim = 5;
Object.keys(state).forEach(
function (key) {
context.moveTo(key * cell_dim, acc * cell_dim)
context.fillRect(key * cell_dim, acc * cell_dim, cell_dim, cell_dim)
if(state[key] == "1") {
context.fillStyle="black";
}else {
if (acc % 2) {
context.fillStyle="white";
}else {
context.fillStyle="white";
}
}
})
(key) => {
context.moveTo(key * cellDim, acc * cellDim);
context.fillRect(key * cellDim, acc * cellDim, cellDim, cellDim);
if (state[key] === '1') context.fillStyle = live.value;
else context.fillStyle = dead.value;
},
);
}
window.addEventListener("load", async function() {
const canvas = document.getElementById("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext("2d")
const start = document.getElementById('start');
const initial_state = [...Array(canvas.width)].map(
_=> getRandomInt(0, 2).toString()
).join("")
start.addEventListener('click', async () => {
drawing = 1;
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, "")
var acc = 0
const initialState = [...Array(canvas.width)].map(
(_) => getRandomInt(0, 2).toString(),
).join('');
while(acc < canvas.width) {
draw(new_state, ctx, acc)
new_state = evolve(new_state, "")
acc++
await sleep(100)
let newState = evolve(initialState, '', rules);
let acc = 0;
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;
}