thallada/proximity-structures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toggle FPS and debug controls

Browse Source
This commit is contained in:
Tyler Hallada 2017-08-12 23:15:24 -04:00
parent 329b211d1c
commit 9189522af7
3 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@ -24,7 +24,12 @@ td, th {
}
form input, form button {
margin: 5px;
margin-bottom: 5px;
margin-top: 10px;
}
form label, form label strong {
margin-right: 10px;
}
input {

12
index.html
View File

@ -18,7 +18,7 @@
<script src="js/proximity.js"></script>
<div id="options">
<button id="toggle-help">Help</button>
<button id="toggle-controls">Controls</button>
<button id="toggle-controls">Settings</button>
</div>
<div id="help" class="panel" style="display: none;">
<h2>Help</h2>
@ -107,19 +107,23 @@
</div>
<div id="controls" class="panel" style="display: none;">
<form action="">
<label>Cycle Duration:
<label><strong>Cycle Duration:</strong>
<input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" />
<input type="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" />
</label>
<button type="button" id="randomize-cycles">Randomize Point Cycles</button><br />
<label>Point tweening:
<label><strong>Point tweening:</strong>
<label><input type="radio" name="tweening" value="linear" /> Linear</label>
<label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label>
<label><input type="radio" name="tweening" value="snappy" /> Snappy</label>
<label><input type="radio" name="tweening" value="bouncy" /> Bouncy</label>
<label><input type="radio" name="tweening" value="elastic" /> Elastic</label>
<label><input type="radio" name="tweening" value="back" /> Overshoot</label>
</label>
</label><br />
<label><strong>Debugging:</strong>
<label><input type="checkbox" name="debug"> Debug</label>
<label><input type="checkbox" name="fpsCounter"> FPS Counter</label>
<label>
</form>
</div>
</body>

72
js/proximity.js
View File

@ -280,6 +280,40 @@ function toggleControls () {
}
}
function toggleFPS () {
var fpsCheckbox = document.getElementsByName('fpsCounter')[0];
if (fpsEnabled) {
stage.removeChild(fpsGraphic);
fpsEnabled = false;
} else {
stage.addChild(fpsGraphic);
fpsEnabled = true;
lastLoop = new Date();
}
fpsCheckbox.checked = fpsEnabled;
}
function toggleDebug () {
var fpsCheckbox = document.getElementsByName('fpsCounter')[0];
var debugCheckbox = document.getElementsByName('debug')[0];
if (debug) {
if (fpsEnabled) {
stage.removeChild(fpsGraphic);
}
debug = false;
fpsEnabled = debug;
} else {
if (!fpsEnabled) {
stage.addChild(fpsGraphic);
}
debug = true;
fpsEnabled = debug;
lastLoop = new Date();
}
fpsCheckbox.checked = fpsEnabled;
debugCheckbox.checked = debug;
}
function randomInt (min, max) {
// inclusive of min and max
return Math.floor(Math.random() * (max - min + 1)) + min;
@ -754,8 +788,10 @@ window.PIXI.loader
.load(loopStart);
window.onload = function () {
var tweeningInputs;
var tweeningInputs, debug, fpsCheckbox;
tweeningInputs = document.getElementsByName('tweening');
debugCheckbox = document.getElementsByName('debug')[0];
fpsCheckbox = document.getElementsByName('fpsCounter')[0];
/* MOUSE AND TOUCH EVENTS */
window.addEventListener('mousewheel', function (e) {
@ -854,31 +890,9 @@ window.onload = function () {
tweeningFns = tweeningSets.back;
tweeningInputs[5].checked = true;
} else if (e.keyCode === 70) { // f
// toggle fpsCounter
if (fpsEnabled) {
stage.removeChild(fpsGraphic);
fpsEnabled = false;
} else {
stage.addChild(fpsGraphic);
fpsEnabled = true;
lastLoop = new Date();
}
toggleFPS();
} else if (e.keyCode === 68) { // d
// toggle debug
if (debug) {
if (fpsEnabled) {
stage.removeChild(fpsGraphic);
}
debug = false;
fpsEnabled = debug;
} else {
if (!fpsEnabled) {
stage.addChild(fpsGraphic);
}
debug = true;
fpsEnabled = debug;
lastLoop = new Date();
}
toggleDebug();
} else if (e.keyCode === 78) { // n
if (drawNodes) {
for (i = 0; i < sprites.length; i++) {
@ -937,4 +951,12 @@ window.onload = function () {
tweeningFns = tweeningSets[this.value];
});
}
debugCheckbox.addEventListener('change', function (e) {
toggleDebug();
});
fpsCheckbox.addEventListener('change', function (e) {
toggleFPS();
});
};