2017-02-19 06:52:53 +00:00
|
|
|
<html lang="en">
|
2017-08-12 22:50:51 +00:00
|
|
|
<head>
|
|
|
|
|
<title>Proximity Structures</title>
|
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<!-- open graph tags -->
|
|
|
|
|
<meta property="og:title" content="Proximity Structures" />
|
|
|
|
|
<meta property="og:url" content="http://proximity.hallada.net/" />
|
|
|
|
|
<meta property="og:image" content="http://proximity.hallada.net/img/proximity-300-zoomed.png" />
|
|
|
|
|
<meta property="og:image:type" content="image/png" />
|
|
|
|
|
<meta property="og:image:width" content="300" />
|
|
|
|
|
<meta property="og:image:height" content="300" />
|
|
|
|
|
<meta property="og:image:alt" content="Screenshot of the animation in action" />
|
|
|
|
|
<meta property="og:description" content="A procedurally generated and interactive animation created with PixiJS" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
|
|
|
|
|
<script src="js/proximity.js"></script>
|
|
|
|
|
<div id="options">
|
|
|
|
|
<button id="toggle-help">Help</button>
|
2017-08-13 03:15:24 +00:00
|
|
|
<button id="toggle-controls">Settings</button>
|
2017-08-12 22:50:51 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="help" class="panel" 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><code>←</code> (left)</td>
|
|
|
|
|
<td>hold to restrict points to the left of the screen</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>→</code> (right)</td>
|
|
|
|
|
<td>hold to restrict points to the right of the screen</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>↑</code> (up)</td>
|
|
|
|
|
<td>hold to restrict points to the top of the screen</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>↓</code> (down)</td>
|
|
|
|
|
<td>hold to restrict points to the bottom of the screen</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>1</code></td>
|
|
|
|
|
<td>makes points move linearly</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>2</code></td>
|
|
|
|
|
<td>makes points meander</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>3</code></td>
|
|
|
|
|
<td>makes points snappy</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>4</code></td>
|
|
|
|
|
<td>makes points bouncy</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>5</code></td>
|
|
|
|
|
<td>makes points elastic</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>6</code></td>
|
|
|
|
|
<td>makes points overshoot</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>f</code></td>
|
|
|
|
|
<td>toggle FPS counter</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>d</code></td>
|
|
|
|
|
<td>toggles debug mode (including FPS counter)</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>n</code></td>
|
|
|
|
|
<td>toggles display of nodes</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>l</code></td>
|
|
|
|
|
<td>toggles display of lines</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><code>?</code></td>
|
|
|
|
|
<td>toggles this help modal</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="controls" class="panel" style="display: none;">
|
|
|
|
|
<form action="">
|
2017-08-13 03:15:24 +00:00
|
|
|
<label><strong>Cycle Duration:</strong>
|
2017-08-12 22:50:51 +00:00
|
|
|
<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" />
|
2017-08-13 02:41:13 +00:00
|
|
|
</label>
|
|
|
|
|
<button type="button" id="randomize-cycles">Randomize Point Cycles</button><br />
|
2017-08-13 03:15:24 +00:00
|
|
|
<label><strong>Point tweening:</strong>
|
2017-08-12 22:50:51 +00:00
|
|
|
<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>
|
2017-08-13 03:15:24 +00:00
|
|
|
</label><br />
|
|
|
|
|
<label><strong>Debugging:</strong>
|
|
|
|
|
<label><input type="checkbox" name="debug"> Debug</label>
|
|
|
|
|
<label><input type="checkbox" name="fpsCounter"> FPS Counter</label>
|
|
|
|
|
<label>
|
2017-08-12 22:50:51 +00:00
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
2017-08-08 02:46:10 +00:00
|
|
|
|
2017-08-12 22:50:51 +00:00
|
|
|
<!-- Google Analytics -->
|
|
|
|
|
<script>
|
|
|
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
|
|
|
ga('create', 'UA-39880341-1', 'auto');
|
|
|
|
|
ga('send', 'pageview');
|
|
|
|
|
</script>
|
|
|
|
|
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
|
|
|
|
<!-- End Google Analytics -->
|
2017-02-19 06:52:53 +00:00
|
|
|
</html>
|
