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

WIP proper help and options panel

Browse Source 
Keypresses not working. TweeningFns inputs are not synced.
This commit is contained in:
Tyler Hallada 2017-08-12 18:50:51 -04:00
parent ce38957abe
commit e97a4ee3ec
3 changed files with 378 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/style.css
View File

@ -4,19 +4,52 @@
} }
html { html {
overflow: hidden; background-color: #1e1e1e;
} }
#help { button {
display: flex; background-color: #2e2e2e;
justify-content: center; border-color: #4a4a4a;
background-color: black; color: #fafafa;
padding: 2px;
}
td, th {
padding: 2px 5px;
}
input {
color: white;
background-color: #2e2e2e;
border-color: #4a4a4a;
}
input[type=number] {
padding: 3px;
}
div.panel {
background-color: rgba(0, 0, 0, 0.6);
border: 2px solid #1e1e1e;
color: white; color: white;
position: absolute; position: absolute;
top: 0; top: 26px;
left: 0; left: 0;
z-index: 11;
padding: 5px;
}
#help h2 {
text-align: center;
} }
#help table { #help table {
color: white; color: white;
} }
#options {
position: fixed;
top: 0;
left: 0;
z-index: 10;
}

52
index.html
View File

@ -16,7 +16,11 @@
<body> <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
<script src="js/proximity.js"></script> <script src="js/proximity.js"></script>
<div id="help" style="display: none;"> <div id="options">
<button id="toggle-help">Help</button>
<button id="toggle-controls">Controls</button>
</div>
<div id="help" class="panel" style="display: none;">
<h2>Help</h2> <h2>Help</h2>
<table> <table>
<tr> <tr>
@ -40,67 +44,83 @@
<td>speed up time</td> <td>speed up time</td>
</tr> </tr>
<tr> <tr>
<td>left</td> <td><code>&larr;</code> (left)</td>
<td>hold to restrict points to the left of the screen</td> <td>hold to restrict points to the left of the screen</td>
</tr> </tr>
<tr> <tr>
<td>right</td> <td><code>&rarr;</code> (right)</td>
<td>hold to restrict points to the right of the screen</td> <td>hold to restrict points to the right of the screen</td>
</tr> </tr>
<tr> <tr>
<td>up</td> <td><code>&uarr;</code> (up)</td>
<td>hold to restrict points to the top of the screen</td> <td>hold to restrict points to the top of the screen</td>
</tr> </tr>
<tr> <tr>
<td>down</td> <td><code>&darr;</code> (down)</td>
<td>hold to restrict points to the bottom of the screen</td> <td>hold to restrict points to the bottom of the screen</td>
</tr> </tr>
<tr> <tr>
<td>1</td> <td><code>1</code></td>
<td>makes points move linearly</td> <td>makes points move linearly</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td><code>2</code></td>
<td>makes points meander</td> <td>makes points meander</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td><code>3</code></td>
<td>makes points snappy</td> <td>makes points snappy</td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td><code>4</code></td>
<td>makes points bouncy</td> <td>makes points bouncy</td>
</tr> </tr>
<tr> <tr>
<td>5</td> <td><code>5</code></td>
<td>makes points elastic</td> <td>makes points elastic</td>
</tr> </tr>
<tr> <tr>
<td>6</td> <td><code>6</code></td>
<td>makes points overshoot</td> <td>makes points overshoot</td>
</tr> </tr>
<tr> <tr>
<td>f</td> <td><code>f</code></td>
<td>toggle FPS counter</td> <td>toggle FPS counter</td>
</tr> </tr>
<tr> <tr>
<td>d</td> <td><code>d</code></td>
<td>toggles debug mode (including FPS counter)</td> <td>toggles debug mode (including FPS counter)</td>
</tr> </tr>
<tr> <tr>
<td>n</td> <td><code>n</code></td>
<td>toggles display of nodes</td> <td>toggles display of nodes</td>
</tr> </tr>
<tr> <tr>
<td>l</td> <td><code>l</code></td>
<td>toggles display of lines</td> <td>toggles display of lines</td>
</tr> </tr>
<tr> <tr>
<td>?</td> <td><code>?</code></td>
<td>toggles this help modal</td> <td>toggles this help modal</td>
</tr> </tr>
</table> </table>
</div> </div>
<div id="controls" class="panel" style="display: none;">
<form action="">
<label>Time:
<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><br />
<label>Point tweening:
<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>
</form>
</div>
</body> </body>
<!-- Google Analytics --> <!-- Google Analytics -->

106
js/proximity.js
View File

@ -248,6 +248,38 @@ function easeInOutCirc (t, b, c, d) {
/* UTILITY FUNCTIONS */ /* UTILITY FUNCTIONS */
function toggleHelp () {
var help, controls;
help = document.getElementById('help');
controls = document.getElementById('controls');
if (help.style.display === 'none') {
help.style.display = 'block';
// hide controls if open (only want one panel open at a time)
if (controls.style.display === 'block') {
controls.style.display = 'none';
}
} else {
help.style.display = 'none';
}
}
function toggleControls () {
var help, controls;
help = document.getElementById('help');
controls = document.getElementById('controls');
if (controls.style.display === 'none') {
controls.style.display = 'block';
// hide help if open (only want one panel open at a time)
if (help.style.display === 'block') {
help.style.display = 'none';
}
} else {
controls.style.display = 'none';
}
}
function randomInt (min, max) { function randomInt (min, max) {
// inclusive of min and max // inclusive of min and max
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
@ -644,6 +676,12 @@ function loop () {
} }
scrollDelta = 0; scrollDelta = 0;
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration); polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
// Update control inputs
var timeRange = document.getElementsByName('timeRange')[0];
var timeInput = document.getElementsByName('timeInput')[0];
timeRange.value = cycleDuration;
timeInput.value = cycleDuration;
} }
// Tell the `renderer` to `render` the `stage` // Tell the `renderer` to `render` the `stage`
@ -694,6 +732,10 @@ function loopStart () {
scrollDelta = 0; scrollDelta = 0;
// Try to fix bug where click initializes to a bogus value
click = null;
hover = null;
window.requestAnimationFrame(loop); window.requestAnimationFrame(loop);
} }
@ -702,37 +744,47 @@ window.PIXI.loader
.add(nodeImg) .add(nodeImg)
.load(loopStart); .load(loopStart);
window.onload = function () {
var tweeningInputs;
tweeningInputs = document.getElementsByName('tweening');
/* MOUSE AND TOUCH EVENTS */ /* MOUSE AND TOUCH EVENTS */
window.addEventListener('mousewheel', function (e) { window.addEventListener('mousewheel', function (e) {
if (e.target.tagName !== 'CANVAS') return;
scrollDelta = scrollDelta + ((e.deltaY / 100) * 3); scrollDelta = scrollDelta + ((e.deltaY / 100) * 3);
}); });
window.addEventListener('touchstart', function (e) { window.addEventListener('touchstart', function (e) {
if (e.target.tagName !== 'CANVAS') return;
click = getMousePos(e.changedTouches[0], resolution); click = getMousePos(e.changedTouches[0], resolution);
clickEnd = false; clickEnd = false;
}); });
window.addEventListener('touchmove', function (e) { window.addEventListener('touchmove', function (e) {
if (e.target.tagName !== 'CANVAS') return;
if (click !== null) { if (click !== null) {
click = getMousePos(e.changedTouches[0], resolution); click = getMousePos(e.changedTouches[0], resolution);
} }
}); });
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
if (e.target.tagName !== 'CANVAS') return;
clickEnd = true; clickEnd = true;
}); });
window.addEventListener('touchcancel', function (e) { window.addEventListener('touchcancel', function (e) {
if (e.target.tagName !== 'CANVAS') return;
clickEnd = true; clickEnd = true;
}); });
window.addEventListener('mousedown', function (e) { window.addEventListener('mousedown', function (e) {
if (e.target.tagName !== 'CANVAS') return;
click = getMousePos(e, resolution); click = getMousePos(e, resolution);
clickEnd = false; clickEnd = false;
}); });
window.addEventListener('mousemove', function (e) { window.addEventListener('mousemove', function (e) {
if (e.target.tagName !== 'CANVAS') return;
var pos = getMousePos(e, resolution); var pos = getMousePos(e, resolution);
if (click !== null) { if (click !== null) {
click = pos; click = pos;
@ -741,18 +793,21 @@ window.addEventListener('mousemove', function (e) {
}); });
window.addEventListener('mouseup', function (e) { window.addEventListener('mouseup', function (e) {
if (e.target.tagName !== 'CANVAS') return;
clickEnd = true; clickEnd = true;
hover = null; hover = null;
lastHover = null; lastHover = null;
}); });
window.addEventListener('mouseleave', function (e) { window.addEventListener('mouseleave', function (e) {
if (e.target.tagName !== 'CANVAS') return;
clickEnd = true; clickEnd = true;
hover = null; hover = null;
lastHover = null; lastHover = null;
}); });
document.addEventListener('mouseleave', function (e) { document.addEventListener('mouseleave', function (e) {
if (e.target.tagName !== 'CANVAS') return;
clickEnd = true; clickEnd = true;
hover = null; hover = null;
lastHover = null; lastHover = null;
@ -761,7 +816,8 @@ document.addEventListener('mouseleave', function (e) {
/* KEYBOARD EVENTS */ /* KEYBOARD EVENTS */
window.addEventListener('keydown', function (e) { window.addEventListener('keydown', function (e) {
var i, help; var i;
if (e.target.tagName !== 'CANVAS' || e.target.tagName !== 'BODY') return;
if (e.keyCode === 37) { // left if (e.keyCode === 37) { // left
pointShiftBiasX = -1; pointShiftBiasX = -1;
} else if (e.keyCode === 38) { // up } else if (e.keyCode === 38) { // up
@ -772,16 +828,22 @@ window.addEventListener('keydown', function (e) {
pointShiftBiasY = 1; pointShiftBiasY = 1;
} else if (e.keyCode === 49) { // 1 } else if (e.keyCode === 49) { // 1
tweeningFns = tweeningSets.linear; tweeningFns = tweeningSets.linear;
tweeningInputs[0].checked = true;
} else if (e.keyCode === 50) { // 2 } else if (e.keyCode === 50) { // 2
tweeningFns = tweeningSets.meandering; tweeningFns = tweeningSets.meandering;
tweeningInputs[1].checked = true;
} else if (e.keyCode === 51) { // 3 } else if (e.keyCode === 51) { // 3
tweeningFns = tweeningSets.snappy; tweeningFns = tweeningSets.snappy;
tweeningInputs[2].checked = true;
} else if (e.keyCode === 52) { // 4 } else if (e.keyCode === 52) { // 4
tweeningFns = tweeningSets.bouncy; tweeningFns = tweeningSets.bouncy;
tweeningInputs[3].checked = true;
} else if (e.keyCode === 53) { // 5 } else if (e.keyCode === 53) { // 5
tweeningFns = tweeningSets.elastic; tweeningFns = tweeningSets.elastic;
tweeningInputs[4].checked = true;
} else if (e.keyCode === 54) { // 6 } else if (e.keyCode === 54) { // 6
tweeningFns = tweeningSets.back; tweeningFns = tweeningSets.back;
tweeningInputs[5].checked = true;
} else if (e.keyCode === 70) { // f } else if (e.keyCode === 70) { // f
// toggle fpsCounter // toggle fpsCounter
if (fpsEnabled) { if (fpsEnabled) {
@ -823,11 +885,41 @@ window.addEventListener('keydown', function (e) {
} else if (e.keyCode === 76) { // l } else if (e.keyCode === 76) { // l
drawLines = !drawLines; drawLines = !drawLines;
} else if (e.keyCode === 191) { // ? } else if (e.keyCode === 191) { // ?
help = document.getElementById('help'); toggleHelp();
if (help.style.display === 'none') {
help.style.display = 'flex';
} else {
help.style.display = 'none';
}
} }
}); });
/* BUTTON EVENTS */
document.getElementById('toggle-help').addEventListener('click', function () {
toggleHelp();
}, false);
document.getElementById('toggle-controls').addEventListener('click', function () {
toggleControls();
}, false);
var timeRange, timeInput;
timeRange = document.getElementsByName('timeRange')[0];
timeRange.value = cycleDuration;
timeRange.addEventListener('input', function (e) {
var oldCycleDuration = cycleDuration;
cycleDuration = parseInt(this.value, 10);
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
});
timeInput = document.getElementsByName('timeInput')[0];
timeInput.value = cycleDuration;
timeInput.addEventListener('input', function (e) {
var oldCycleDuration = cycleDuration;
cycleDuration = parseInt(this.value, 10);
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
});
var i;
for (i = 0; i < tweeningInputs.length; i++) {
tweeningInputs[i].addEventListener('change', function (e) {
tweeningFns = tweeningSets[this.value];
});
}
};