thallada
/
proximity-structures


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<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">
    <meta charset="utf-8" />
    <!-- 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>
    <div id="options">
      <button id="toggle-help">Help</button>
      <button id="toggle-controls">Settings</button>
    </div>
    <div id="help" class="panel" style="display: none;">
      <button type="button" id="close-help">x</button>
      <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>&larr;</code> (left)</td>
          <td>hold to restrict points to the left of the screen</td>
        </tr>
        <tr>
          <td><code>&rarr;</code> (right)</td>
          <td>hold to restrict points to the right of the screen</td>
        </tr>
        <tr>
          <td><code>&uarr;</code> (up)</td>
          <td>hold to restrict points to the top of the screen</td>
        </tr>
        <tr>
          <td><code>&darr;</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>
      <a href="https://github.com/thallada/proximity-structures">Fork on Github</a>
    </div>
    <div id="controls" class="panel" style="display: none;">
      <button type="button" id="close-controls">x</button>
      <h2>Settings</h2>
      <p class="warning">WARNING: Certain combinations of settings can crash your browser or tab.</p>
			<form action="">
        <label><strong>Points Count:</strong>
          <input type="range" name="pointsNumRange" min="0" max="5000" value="0" oninput="this.form.pointsNumInput.value=this.value" />
          <input type="number" name="pointsNumInput" min="0" max="5000" value="0" oninput="this.form.pointsNumRange.value=this.value" />
          <button type="button" id="reset">Reset Points</button>
        </label><br />
        <label><strong>Connection Distance:</strong>
          <input type="range" name="connectDistRange" min="0" max="1000" value="0" oninput="this.form.connectDistInput.value=this.value" />
          <input type="number" name="connectDistInput" min="0" max="1000" value="0" oninput="this.form.connectDistRange.value=this.value" />
        </label><br />
        <label><strong>Connection Limit:</strong>
          <input type="range" name="connectLimitRange" min="0" max="100" value="10" oninput="this.form.connectLimitInput.value=this.value" />
          <input type="number" name="connectLimitInput" min="0" max="100" value="10" oninput="this.form.connectLimitRange.value=this.value" />
        </label><br />
        <label><strong>Max Travel Distance:</strong>
          <input type="range" name="maxTravelRange" min="0" max="1000" value="0" oninput="this.form.maxTravelInput.value=this.value" />
          <input type="number" name="maxTravelInput" min="0" max="1000" value="0" oninput="this.form.maxTravelRange.value=this.value" />
        </label><br />
        <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="synchronize-cycles">Synchronize Point Cycles</button>
          <button type="button" id="randomize-cycles">Randomize Point Cycles</button>
        </label><br />
        <label><strong>Point Size:</strong>
          <input type="range" name="pointSizeRange" min="0" max="50" value="3" oninput="this.form.pointSizeInput.value=this.value" />
          <input type="number" name="pointSizeInput" min="0" max="50" value="3" 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>Color Shift:</strong>
          <input type="range" name="colorShiftRange" min="0" max="85" value="10" oninput="this.form.colorShiftInput.value=this.value" />
          <input type="number" name="colorShiftInput" min="0" max="85" value="10" oninput="this.form.colorShiftRange.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" /> 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" checked /> 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>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
    <script type="text/javascript" src="js/proximity.js"></script>
  </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>