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

clickable labels, colors, precision, purer func

Browse Source
This commit is contained in:
Ali Gator 2021-12-31 00:03:55 +01:00
parent 81102611ec
commit 5558b867d5
2 changed files with 111 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@ -12,36 +12,44 @@
<label>Rules</label>
</div>
<div class="form-field">
<label>111</label>
<input type="checkbox" name="111">
<label>111
<input type="checkbox" name="111" checked>
</label>
</div>
<div class="form-field">
<label>110</label>
<label>110
<input type="checkbox" name="110">
</label>
</div>
<div class="form-field">
<label>101</label>
<input type="checkbox" name="101">
<label>101
<input type="checkbox" name="101" checked>
</label>
</div>
<div class="form-field">
<label>100</label>
<label>100
<input type="checkbox" name="100">
</label>
</div>
<div class="form-field">
<label>011</label>
<input type="checkbox" name="011">
<label>011
<input type="checkbox" name="011" checked>
</label>
</div>
<div class="form-field">
<label>010</label>
<label>010
<input type="checkbox" name="010">
</label>
</div>
<div class="form-field">
<label>001</label>
<label>001
<input type="checkbox" name="001">
</label>
</div>
<div class="form-field">
<label>000</label>
<input type="checkbox" name="000">
<label>000
<input type="checkbox" name="000" checked>
</label>
</div>
<div class="form-field">
<input type="button" name="start" id="start" value="start"/>
@ -54,13 +62,17 @@
<div class="menu-row">
<form method="">
<div class="form-field">
<label>Living cell color</label>
<label for="live">Living cell color</label>
<input name="live" type="color" id="live" value="#000000"/>
</div>
<div class="form-field">
<label>Dead cell color</label>
<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>
</form>
</div>
</sidebar>

135
main.js
View File

@ -1,25 +1,19 @@
let drawing = 1;
const form = Array.from(document.forms.rules.elements);
const canvas = document.getElementById('canvas');
const main = document.getElementById('main');
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 cellSize = document.querySelector('#cellSize');
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);
}
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
// TODO: Hide iterator inside
function evolve(state, acc, rules) {
const [x, y, z, ...xs] = state;
if (!xs.length) {
@ -31,56 +25,89 @@ function evolve(state, acc, rules) {
return evolve(y + z + xs.join(''), newAcc, rules);
}
function draw(state, context, acc) {
const cellDim = 5;
function getRules() {
const rules = {};
Object.keys(state).forEach(
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 getDrawingValues(state, acc) {
const cellDim = cellSize.value;
return Object.keys(state).map(
(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;
const fillStyle = state[key] === '1' ? live.value : dead.value;
return {
move: [key * cellDim, acc * cellDim],
fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
fillStyle,
};
},
);
}
const start = document.getElementById('start');
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';
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);
}
return a;
}, {});
const ctx = canvas.getContext('2d');
async function sleep(ms) {
await new Promise((resolve) => setTimeout(resolve, ms));
}
async function draw(state, acc) {
if (drawing === 0) {
return;
}
const rules = getRules();
const newState = evolve(state, '', rules);
const line = getDrawingValues(newState, acc);
line.map((cell) => {
ctx.moveTo(...cell.move);
ctx.fillRect(...cell.fill);
ctx.fillStyle = cell.fillStyle;
return cell;
});
await sleep(40);
// TODO: makes it redraw on top of canvas once bottom is reached
const newAcc = acc < canvas.height ? acc + 1 : 1;
await draw(newState, newAcc);
}
function reset() {
drawing = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
startBtn.addEventListener('click', async () => {
reset();
await sleep(60);
drawing = 1;
const initialState = [...Array(canvas.width)].map(
(_) => getRandomInt(0, 2).toString(),
() => 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);
}
draw(initialState, 1);
});
const reset = document.getElementById('reset');
reset.addEventListener('click', async () => {
drawing = 0;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
resetBtn.addEventListener('click', async () => {
reset();
});