Connection limit and distance, warning

css/style.css

@@ -61,7 +61,7 @@ div.panel {
   padding: 5px;
 }
 
-#help h2 {
+.panel h2 {
   text-align: center;
 }
 
@@ -81,4 +81,12 @@ div.panel {
   top: 0;
   right: 0;
   padding: 3px 6px;
+  font-family: monospace;
 }
+
+#controls p.warning {
+  color: darksalmon;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+

index.html

@@ -108,8 +108,22 @@
     </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="">
-        <button type="button" id="reset">Reset</button><br />
+        <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="5000" value="0" oninput="this.form.connectDistInput.value=this.value" />
+          <input type="number" name="connectDistInput" min="0" max="5000" 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>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" />

js/proximity.js

@@ -21,6 +21,7 @@ var fpsGraphic;
 var scrollDelta;
 var pointShiftBiasX;
 var pointShiftBiasY;
+var numPoints;
 
 // global non-configurable vars (modifying these might break stuff)
 var click = null;
@@ -465,6 +466,13 @@ function createSprite () {
 function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
     var i, x, y, z, color, cycleStart, easingFn, sprite;
     var points = [];
+    if (sprites.length > 0) {
+        // need to clear out old sprites
+        for (i = 0; i < sprites.length; i++) {
+            stage.removeChild(sprites[i]);
+        }
+        sprites = [];
+    }
     for (i = 0; i < numPoints; i++) {
         x = randomInt(0, maxX - 1);
         y = randomInt(0, maxY - 1);
@@ -473,12 +481,10 @@ function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
         cycleStart = randomInt(0, cycleDuration - 1);
         color = randomColor();
         easingFn = tweeningFns[Math.floor(Math.random() * tweeningFns.length)];
-        if (sprites.length <= i) {
         // save PIXI Sprite for each point in array
         sprite = createSprite();
         sprites.push(sprite);
         stage.addChild(sprite);
-        }
         points[i] = [x, y, z, cycleStart, color, easingFn];
     }
     return points;
@@ -530,7 +536,8 @@ function pullPoints (points, clickPos, pullRate, inertia, maxDist, counter, rese
         targetYDiff = clickPos.y - points.target[i][1];
         originXDiff = clickPos.x - points.original[i][0];
         originYDiff = clickPos.y - points.original[i][1];
-        if (Math.abs(targetXDiff) <= maxDist && Math.abs(targetYDiff) <= maxDist) { // point is within effect radius
+        if (Math.sqrt((targetXDiff * targetXDiff) + (targetYDiff * targetYDiff)) <= maxDist) {
+            // point is within effect radius
             if (resetPoints) {
                 // Good for changing directions, reset the points original positions to their current positions
                 points.original[i][0] = points.tweened[i][0];
@@ -561,6 +568,12 @@ function pullPoints (points, clickPos, pullRate, inertia, maxDist, counter, rese
     }
 }
 
+function clearAffectedPoints (points) {
+    for (var i = 0; i < points.target.length; i++) {
+        points.target[i][6] = false;
+    }
+}
+
 function redistributeCycles (points, oldCycleDuration, cycleDuration) {
     /* Given old and new cycleDuration, re-assign points' cycle starts that expand/compress to fit the new range in a
      * way that ensures the current progress of the point in its cycle is around the same percentage (so that the point
@@ -673,8 +686,7 @@ function loop () {
 
     if (reset === true) {
         var newPoints;
-        newPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, zRange,
+        newPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
-                                    tweeningFns);
         polygonPoints = {
             original: newPoints,
             target: JSON.parse(JSON.stringify(newPoints)),
@@ -721,12 +733,7 @@ function loop () {
             clickPullRate = clickPullRateStart;
             clickInertia = clickInertiaStart;
             clickTweeningFn = clickTweeningFnStart;
-
+            clearAffectedPoints(polygonPoints);
-            // clear affected status for all points
-            var i;
-            for (i = 0; i < polygonPoints.target.length; i++) {
-                polygonPoints.target[i][6] = false;
-            }
         }
     } else if (hover !== null) {
         if (lastHover !== null) {
@@ -810,7 +817,8 @@ function loopStart () {
     hoverMaxDistStart = Math.min(Math.round(totalScreenPixels / 16), hoverMaxDistStart);
     polygon = new window.PIXI.Graphics();
     stage.addChild(polygon);
-    startPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, zRange, tweeningFns);
+    numPoints = Math.round(totalScreenPixels / 6);
+    startPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
     polygonPoints = {
         original: startPoints,
         target: JSON.parse(JSON.stringify(startPoints)),
@@ -907,12 +915,14 @@ window.onload = function () {
         clickEnd = true;
         hover = null;
         lastHover = null;
+        clearAffectedPoints(polygonPoints);
     });
 
     document.addEventListener('mouseleave', function (e) {
         clickEnd = true;
         hover = null;
         lastHover = null;
+        clearAffectedPoints(polygonPoints);
     });
 
     /* KEYBOARD EVENTS */
@@ -989,8 +999,43 @@ window.onload = function () {
         reset = true;
     }, false);
 
-    var timeRange, timeInput;
+    var connectDistRange = document.getElementsByName('connectDistRange')[0];
-    timeRange = document.getElementsByName('timeRange')[0];
+    connectDistRange.value = connectionDistance;
+    connectDistRange.addEventListener('input', function (e) {
+        connectionDistance = parseInt(this.value, 10);
+    });
+
+    var connectDistInput = document.getElementsByName('connectDistInput')[0];
+    connectDistInput.value = connectionDistance;
+    connectDistInput.addEventListener('input', function (e) {
+        connectionDistance = parseInt(this.value, 10);
+    });
+
+    var connectLimitRange = document.getElementsByName('connectLimitRange')[0];
+    connectLimitRange.value = connectionLimit;
+    connectLimitRange.addEventListener('input', function (e) {
+        connectionLimit = parseInt(this.value, 10);
+    });
+
+    var connectLimitInput = document.getElementsByName('connectLimitInput')[0];
+    connectLimitInput.value = connectionLimit;
+    connectLimitInput.addEventListener('input', function (e) {
+        connectionLimit = parseInt(this.value, 10);
+    });
+
+    var pointsNumRange = document.getElementsByName('pointsNumRange')[0];
+    pointsNumRange.value = numPoints;
+    pointsNumRange.addEventListener('input', function (e) {
+        numPoints = parseInt(this.value, 10);
+    });
+
+    var pointsNumInput = document.getElementsByName('pointsNumInput')[0];
+    pointsNumInput.value = numPoints;
+    pointsNumInput.addEventListener('input', function (e) {
+        numPoints = parseInt(this.value, 10);
+    });
+
+    var timeRange = document.getElementsByName('timeRange')[0];
     timeRange.value = cycleDuration;
     timeRange.addEventListener('input', function (e) {
         var oldCycleDuration = cycleDuration;
@@ -998,7 +1043,7 @@ window.onload = function () {
         polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
     });
 
-    timeInput = document.getElementsByName('timeInput')[0];
+    var timeInput = document.getElementsByName('timeInput')[0];
     timeInput.value = cycleDuration;
     timeInput.addEventListener('input', function (e) {
         var oldCycleDuration = cycleDuration;
@@ -1014,40 +1059,37 @@ window.onload = function () {
         });
     }
 
-    var pointSizeRange, pointSizeInput;
+    var pointSizeRange = document.getElementsByName('pointSizeRange')[0];
-    pointSizeRange = document.getElementsByName('pointSizeRange')[0];
     pointSizeRange.value = nodeSize;
     pointSizeRange.addEventListener('input', function (e) {
         nodeSize = parseInt(this.value, 10);
     });
 
-    pointSizeInput = document.getElementsByName('pointSizeInput')[0];
+    var pointSizeInput = document.getElementsByName('pointSizeInput')[0];
     pointSizeInput.value = nodeSize;
     pointSizeInput.addEventListener('input', function (e) {
         nodeSize = parseInt(this.value, 10);
     });
 
-    var lineSizeRange, lineSizeInput;
+    var lineSizeRange = document.getElementsByName('lineSizeRange')[0];
-    lineSizeRange = document.getElementsByName('lineSizeRange')[0];
     lineSizeRange.value = lineSize;
     lineSizeRange.addEventListener('input', function (e) {
         lineSize = parseInt(this.value, 10);
     });
 
-    lineSizeRange = document.getElementsByName('lineSizeRange')[0];
+    var lineSizeRange = document.getElementsByName('lineSizeRange')[0];
     lineSizeRange.value = lineSize;
     lineSizeRange.addEventListener('input', function (e) {
         lineSize = parseInt(this.value, 10);
     });
 
-    var colorShiftRange, colorShiftInput;
+    var colorShiftRange = document.getElementsByName('colorShiftRange')[0];
-    colorShiftRange = document.getElementsByName('colorShiftRange')[0];
     colorShiftRange.value = disconnectedColorShiftAmt;
     colorShiftRange.addEventListener('input', function (e) {
         disconnectedColorShiftAmt = parseInt(this.value, 10);
     });
 
-    colorShiftRange = document.getElementsByName('colorShiftRange')[0];
+    var colorShiftRange = document.getElementsByName('colorShiftRange')[0];
     colorShiftRange.value = disconnectedColorShiftAmt;
     colorShiftRange.addEventListener('input', function (e) {
         disconnectedColorShiftAmt = parseInt(this.value, 10);