From e8d7f8b62c0a6b4e73ea2aca34cdcce8924611cc Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Sun, 13 Aug 2017 15:11:44 -0400
Subject: [PATCH] Dynamically add/remove points as numPoints changes

---
 js/proximity.js | 36 +++++++++++++++++++++++++++++++-----
 notes.md        |  4 ++--
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/js/proximity.js b/js/proximity.js
index 654ae55..7c95bbf 100644
--- a/js/proximity.js
+++ b/js/proximity.js
@@ -461,11 +461,7 @@ function createSprite () {
     );
 }
 
-/* POINT OPERATION FUNCTIONS */
-
-function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
-    var i, x, y, z, color, cycleStart, easingFn, sprite;
-    var points = [];
+function clearSprites () {
     if (sprites.length > 0) {
         // need to clear out old sprites
         for (i = 0; i < sprites.length; i++) {
@@ -473,6 +469,13 @@ function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
         }
         sprites = [];
     }
+}
+
+/* POINT OPERATION FUNCTIONS */
+
+function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
+    var i, x, y, z, color, cycleStart, easingFn, sprite;
+    var points = [];
     for (i = 0; i < numPoints; i++) {
         x = randomInt(0, maxX - 1);
         y = randomInt(0, maxY - 1);
@@ -491,6 +494,26 @@ function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
     return points;
 }
 
+function addOrRemovePoints (numPoints, points) {
+    /* Given new value numPoints, remove or add new random points to match new count. */
+    var deletedSprites, newPoints;
+    if (points.target.length > numPoints) {
+        points.original.splice(numPoints - 1);
+        points.target.splice(numPoints - 1);
+        points.tweened.splice(numPoints - 1);
+        deletedSprites = sprites.splice(numPoints - 1);
+        for (var i = 0; i < deletedSprites.length; i++) {
+            stage.removeChild(deletedSprites[i]);
+        }
+    } else if (points.target.length < numPoints) {
+        newPoints = getRandomPoints(numPoints - points.target.length, screenWidth, screenHeight, zRange, tweeningFns);
+        points.original = points.original.concat(newPoints);
+        points.target = points.target.concat(JSON.parse(JSON.stringify(newPoints)));
+        points.tweened = points.tweened.concat(JSON.parse(JSON.stringify(newPoints)));
+    }
+    return points;
+}
+
 function shiftPoints (points, maxShiftAmt, counter, tweeningFns) {
     var i, shiftX, shiftY, candidateX, candidateY;
     for (i = 0; i < points.original.length; i++) {
@@ -687,6 +710,7 @@ function loop () {
 
     if (reset === true) {
         var newPoints;
+        clearSprites();
         newPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
         polygonPoints = {
             original: newPoints,
@@ -1028,12 +1052,14 @@ window.onload = function () {
     pointsNumRange.value = numPoints;
     pointsNumRange.addEventListener('input', function (e) {
         numPoints = parseInt(this.value, 10);
+        polygonPoints = addOrRemovePoints(numPoints, polygonPoints);
     });
 
     var pointsNumInput = document.getElementsByName('pointsNumInput')[0];
     pointsNumInput.value = numPoints;
     pointsNumInput.addEventListener('input', function (e) {
         numPoints = parseInt(this.value, 10);
+        polygonPoints = addOrRemovePoints(numPoints, polygonPoints);
     });
 
     var maxTravelRange = document.getElementsByName('maxTravelRange')[0];
diff --git a/notes.md b/notes.md
index 7af6200..2683d69 100644
--- a/notes.md
+++ b/notes.md
@@ -13,8 +13,8 @@ larger the polygon) the more dark the color is shaded.
 Add a bunch of dials and switches to the UI to tweak the different configurable
 values.
   * Mostly implemented, need to add dials for click and hover vars
-  * Make point count slider add/remove points dynamically without having to
-    reset.
+  * ~~Make point count slider add/remove points dynamically without having to
+    reset.~~
   * Make increasing cycleDuration auto randomize point cycles?
   * Save config to local storage and add a reset config to defaults button
   * Allow sharing configs