<html lang="en"> <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> <button id="toggle-controls">Settings</button> </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=""> <label><strong>Cycle Duration:</strong> <input type="range" name="timeRange" min="1" max="360" value="60" oninput="this.form.timeInput.value=this.value" /> <input type="number" name="timeInput" min="1" max="360" value="60" oninput="this.form.timeRange.value=this.value" /> <button type="button" id="randomize-cycles">Randomize Point Cycle Starts</button> </label><br /> <label><strong>Point Size:</strong> <input type="range" name="pointSizeRange" min="0" max="50" value="0" oninput="this.form.pointSizeInput.value=this.value" /> <input type="number" name="pointSizeInput" min="0" max="50" value="0" oninput="this.form.pointSizeRange.value=this.value" /> </label><br /> <label><strong>Line Size:</strong> <input type="range" name="lineSizeRange" min="1" max="50" value="1" oninput="this.form.lineSizeInput.value=this.value" /> <input type="number" name="lineSizeInput" min="1" max="50" value="1" oninput="this.form.lineSizeRange.value=this.value" /> </label><br /> <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><br /> <label><strong>Drawing:</strong> <label><input type="checkbox" name="debugToggle"> Debugging</label> <label><input type="checkbox" name="fpsCounterToggle"> FPS Counter</label> <label><input type="checkbox" name="nodesToggle" checked> Points</label> <label><input type="checkbox" name="linesToggle" checked> Lines</label> <label> </form> </div> </body> <!-- 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 --> </html>