absolute shitcode interface POC
This commit is contained in:
parent
f27a983b55
commit
81102611ec
77
index.html
77
index.html
@ -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>
|
||||
|
||||
113
main.js
113
main.js
@ -1,77 +1,86 @@
|
||||
'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);
|
||||
max = Math.floor(max);
|
||||
// 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) {
|
||||
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
|
||||
|
||||
while(acc < canvas.width) {
|
||||
draw(new_state, ctx, acc)
|
||||
new_state = evolve(new_state, "")
|
||||
acc++
|
||||
await sleep(100)
|
||||
const initialState = [...Array(canvas.width)].map(
|
||||
(_) => getRandomInt(0, 2).toString(),
|
||||
).join('');
|
||||
|
||||
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
39
style.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user