Color shift slider, close buttons, fix mouse end

css/style.css

@@ -26,7 +26,7 @@ td, th {
 
 form input, form button {
   margin-bottom: 5px;
-  margin-top: 10px;
+  margin-top: 5px;
 }
 
 form label, form label strong {
@@ -42,8 +42,8 @@ form label strong {
 
 input {
   color: white;
-  background-color: #2e2e2e;
+  background-color: rgba(46, 46, 46, 0.2);
-  border-color: #4a4a4a;
+  border-color: #222222;
 }
 
 input[type=number] {
@@ -75,3 +75,10 @@ div.panel {
   left: 0;
   z-index: 10;
 }
+
+#close-controls, #close-help {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 3px 6px;
+}

index.html

@@ -21,6 +21,7 @@
       <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>
@@ -106,11 +107,14 @@
       </table>
     </div>
     <div id="controls" class="panel" style="display: none;">
+      <button type="button" id="close-controls">x</button>
 			<form action="">
+        <button type="button" id="reset">Reset</button><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="randomize-cycles">Randomize Point Cycle Starts</button>
+          <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="0" oninput="this.form.pointSizeInput.value=this.value" />
@@ -120,6 +124,10 @@
           <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" checked /> Meandering</label>

js/proximity.js

@@ -248,7 +248,7 @@ function easeInOutCirc (t, b, c, d) {
 }
 /* eslint-enable no-unused-vars */
 
-/* UTILITY FUNCTIONS */
+/* TOGGLE FUNCTIONS */
 
 function toggleHelp () {
     var help, controls;
@@ -338,6 +338,8 @@ function toggleLines () {
     linesCheckbox.checked = drawLines;
 }
 
+/* UTILITY FUNCTIONS */
+
 function randomInt (min, max) {
     // inclusive of min and max
     return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -579,6 +581,14 @@ function randomizeCycles (points, cycleDuration) {
     return points;
 }
 
+function synchronizeCycles (points, cycleDuration) {
+    /* Assigns every point the same cycle start (0) */
+    for (var i = 0; i < points.original.length; i++) {
+        points.target[i][3] = 0;
+    }
+    return points;
+}
+
 /* DRAW FUNCTIONS */
 
 function drawPolygon (polygon, points, counter, tweeningFns) {
@@ -849,12 +859,10 @@ window.onload = function () {
     });
 
     window.addEventListener('touchend', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
     });
 
     window.addEventListener('touchcancel', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
     });
 
@@ -875,21 +883,18 @@ window.onload = function () {
     });
 
     window.addEventListener('mouseup', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
         hover = null;
         lastHover = null;
     });
 
     window.addEventListener('mouseleave', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
         hover = null;
         lastHover = null;
     });
 
     document.addEventListener('mouseleave', function (e) {
-        if (e.target.tagName !== 'CANVAS') return;
         clickEnd = true;
         hover = null;
         lastHover = null;
@@ -949,6 +954,19 @@ window.onload = function () {
         toggleControls();
     }, false);
 
+    document.getElementById('close-help').addEventListener('click', function () {
+        toggleHelp();
+    }, false);
+
+    document.getElementById('close-controls').addEventListener('click', function () {
+        toggleControls();
+    }, false);
+
+    document.getElementById('synchronize-cycles').addEventListener('click', function () {
+        synchronizeCycles(polygonPoints, cycleDuration);
+        return false;
+    }, false);
+
     document.getElementById('randomize-cycles').addEventListener('click', function () {
         randomizeCycles(polygonPoints, cycleDuration);
         return false;
@@ -1005,6 +1023,19 @@ window.onload = function () {
         lineSize = parseInt(this.value, 10);
     });
 
+    var colorShiftRange, colorShiftInput;
+    colorShiftRange = document.getElementsByName('colorShiftRange')[0];
+    colorShiftRange.value = disconnectedColorShiftAmt;
+    colorShiftRange.addEventListener('input', function (e) {
+        disconnectedColorShiftAmt = parseInt(this.value, 10);
+    });
+
+    colorShiftRange = document.getElementsByName('colorShiftRange')[0];
+    colorShiftRange.value = disconnectedColorShiftAmt;
+    colorShiftRange.addEventListener('input', function (e) {
+        disconnectedColorShiftAmt = parseInt(this.value, 10);
+    });
+
 
     debugCheckbox.addEventListener('change', function (e) {
         toggleDebug();