optional looping option
This commit is contained in:
parent
5558b867d5
commit
e62fafb55d
@ -73,6 +73,11 @@
|
|||||||
<label>Cell size</label>
|
<label>Cell size</label>
|
||||||
<input name="cellSize" type="number" id="cellSize" value="5"/>
|
<input name="cellSize" type="number" id="cellSize" value="5"/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
|
<label>Loop
|
||||||
|
<input name="loop" type="checkbox" id="loop"/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</sidebar>
|
</sidebar>
|
||||||
|
13
main.js
13
main.js
@ -9,6 +9,7 @@ const live = document.querySelector('#live');
|
|||||||
const startBtn = document.querySelector('#start');
|
const startBtn = document.querySelector('#start');
|
||||||
const resetBtn = document.querySelector('#reset');
|
const resetBtn = document.querySelector('#reset');
|
||||||
const cellSize = document.querySelector('#cellSize');
|
const cellSize = document.querySelector('#cellSize');
|
||||||
|
const loop = document.querySelector('#loop');
|
||||||
|
|
||||||
canvas.width = main.offsetWidth;
|
canvas.width = main.offsetWidth;
|
||||||
canvas.height = main.offsetHeight;
|
canvas.height = main.offsetHeight;
|
||||||
@ -71,6 +72,9 @@ async function draw(state, acc) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const position = acc * cellSize.value;
|
||||||
|
if (position >= canvas.height && !loop.checked) return;
|
||||||
|
|
||||||
const rules = getRules();
|
const rules = getRules();
|
||||||
const newState = evolve(state, '', rules);
|
const newState = evolve(state, '', rules);
|
||||||
const line = getDrawingValues(newState, acc);
|
const line = getDrawingValues(newState, acc);
|
||||||
@ -84,9 +88,12 @@ async function draw(state, acc) {
|
|||||||
|
|
||||||
await sleep(40);
|
await sleep(40);
|
||||||
|
|
||||||
// TODO: makes it redraw on top of canvas once bottom is reached
|
const newAcc = () => {
|
||||||
const newAcc = acc < canvas.height ? acc + 1 : 1;
|
if (position >= canvas.height && loop.checked) return 1;
|
||||||
await draw(newState, newAcc);
|
return acc;
|
||||||
|
};
|
||||||
|
|
||||||
|
await draw(newState, newAcc() + 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
|
Loading…
Reference in New Issue
Block a user