clickable labels, colors, precision, purer func

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

View File

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

133
main.js
View File

@ -1,25 +1,19 @@
let drawing = 1; let drawing = 1;
const form = Array.from(document.forms.rules.elements); const form = Array.from(document.forms.rules.elements);
const canvas = document.getElementById('canvas'); const canvas = document.querySelector('#canvas');
const main = document.getElementById('main'); 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.width = main.offsetWidth;
canvas.height = main.offsetHeight; canvas.height = main.offsetHeight;
const dead = document.getElementById('dead'); // TODO: Hide iterator inside
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));
}
function evolve(state, acc, rules) { function evolve(state, acc, rules) {
const [x, y, z, ...xs] = state; const [x, y, z, ...xs] = state;
if (!xs.length) { if (!xs.length) {
@ -31,56 +25,89 @@ function evolve(state, acc, rules) {
return evolve(y + z + xs.join(''), newAcc, rules); return evolve(y + z + xs.join(''), newAcc, rules);
} }
function draw(state, context, acc) { function getRules() {
const cellDim = 5; 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) => { (key) => {
context.moveTo(key * cellDim, acc * cellDim); const fillStyle = state[key] === '1' ? live.value : dead.value;
context.fillRect(key * cellDim, acc * cellDim, cellDim, cellDim); return {
if (state[key] === '1') context.fillStyle = live.value; move: [key * cellDim, acc * cellDim],
else context.fillStyle = dead.value; fill: [key * cellDim, acc * cellDim, cellDim, cellDim],
fillStyle,
};
}, },
); );
} }
const start = document.getElementById('start'); 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);
}
start.addEventListener('click', async () => { async function sleep(ms) {
drawing = 1; await new Promise((resolve) => setTimeout(resolve, ms));
const rules = form.reduce((a, i) => { }
if (i !== undefined
&& i.type === 'checkbox') { async function draw(state, acc) {
if (i.checked) a[i.name] = '1'; if (drawing === 0) {
else a[i.name] = '0'; return;
} }
return a;
}, {});
const ctx = canvas.getContext('2d'); 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( const initialState = [...Array(canvas.width)].map(
(_) => getRandomInt(0, 2).toString(), () => getRandomInt(0, 2).toString(),
).join(''); ).join('');
let newState = evolve(initialState, '', rules); draw(initialState, 1);
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'); resetBtn.addEventListener('click', async () => {
reset();
reset.addEventListener('click', async () => {
drawing = 0;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
}); });