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

Lazily implemented help modal

Browse Source
This commit is contained in:
Tyler Hallada 2017-08-11 01:24:18 -04:00
parent 4de755ad6d
commit ce38957abe
4 changed files with 108 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -39,6 +39,7 @@ Scrolling your mouse will speed up or slow down time.
| d | toggles debug mode (including FPS counter) | | d | toggles debug mode (including FPS counter) |
| n | toggles display of nodes | | n | toggles display of nodes |
| l | toggles display of lines | | l | toggles display of lines |
| ? | toggles display of help modal |
### Tweaking ### Tweaking

14
css/style.css
View File

@ -6,3 +6,17 @@
html { html {
overflow: hidden; overflow: hidden;
} }
#help {
display: flex;
justify-content: center;
background-color: black;
color: white;
position: absolute;
top: 0;
left: 0;
}
#help table {
color: white;
}

85
index.html
View File

@ -16,6 +16,91 @@
<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;">
<h2>Help</h2>
<table>
<tr>
<th>Interaction</th>
<th>Action</th>
</tr>
<tr>
<td>mouse hover</td>
<td>push points away from cursor</td>
</tr>
<tr>
<td>mouse/touch click and hold</td>
<td>attract points to cursor, then explode outwards</td>
</tr>
<tr>
<td>mouse wheel scroll down</td>
<td>slow down time</td>
</tr>
<tr>
<td>mouse wheel scroll up</td>
<td>speed up time</td>
</tr>
<tr>
<td>left</td>
<td>hold to restrict points to the left of the screen</td>
</tr>
<tr>
<td>right</td>
<td>hold to restrict points to the right of the screen</td>
</tr>
<tr>
<td>up</td>
<td>hold to restrict points to the top of the screen</td>
</tr>
<tr>
<td>down</td>
<td>hold to restrict points to the bottom of the screen</td>
</tr>
<tr>
<td>1</td>
<td>makes points move linearly</td>
</tr>
<tr>
<td>2</td>
<td>makes points meander</td>
</tr>
<tr>
<td>3</td>
<td>makes points snappy</td>
</tr>
<tr>
<td>4</td>
<td>makes points bouncy</td>
</tr>
<tr>
<td>5</td>
<td>makes points elastic</td>
</tr>
<tr>
<td>6</td>
<td>makes points overshoot</td>
</tr>
<tr>
<td>f</td>
<td>toggle FPS counter</td>
</tr>
<tr>
<td>d</td>
<td>toggles debug mode (including FPS counter)</td>
</tr>
<tr>
<td>n</td>
<td>toggles display of nodes</td>
</tr>
<tr>
<td>l</td>
<td>toggles display of lines</td>
</tr>
<tr>
<td>?</td>
<td>toggles this help modal</td>
</tr>
</table>
</div>
</body> </body>
<!-- Google Analytics --> <!-- Google Analytics -->

9
js/proximity.js
View File

@ -761,7 +761,7 @@ document.addEventListener('mouseleave', function (e) {
/* KEYBOARD EVENTS */ /* KEYBOARD EVENTS */
window.addEventListener('keydown', function (e) { window.addEventListener('keydown', function (e) {
var i; var i, help;
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
@ -822,5 +822,12 @@ 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) { // ?
help = document.getElementById('help');
if (help.style.display === 'none') {
help.style.display = 'flex';
} else {
help.style.display = 'none';
}
} }
}); });