From 329b211d1cfd54f96905c5d04c90aef776119d86 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Sat, 12 Aug 2017 22:41:13 -0400
Subject: [PATCH] Reposition fps graphic, randomize cycles button

---
 css/style.css   |  9 +++++++++
 index.html      |  6 +++---
 js/proximity.js | 16 +++++++++++++++-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index ccd8346..15895df 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,6 +7,11 @@ html {
   background-color: #1e1e1e;
 }
 
+html, button {
+  font-family: "Arial", sans-serif;
+  font-size: 10pt;
+}
+
 button {
   background-color: #2e2e2e;
   border-color: #4a4a4a;
@@ -18,6 +23,10 @@ td, th {
   padding: 2px 5px;
 }
 
+form input, form button {
+  margin: 5px;
+}
+
 input {
   color: white;
   background-color: #2e2e2e;
diff --git a/index.html b/index.html
index 1431ba9..edd9c58 100644
--- a/index.html
+++ b/index.html
@@ -107,11 +107,11 @@
     </div>
     <div id="controls" class="panel" style="display: none;">
 			<form action="">
-        <label>Time:
+        <label>Cycle Duration:
           <input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" />
           <input type="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" />
-        </label><br />
-        <button name="randomizeCyclesButton">Randomize Point Cycles</button><br />
+        </label>
+        <button type="button" id="randomize-cycles">Randomize Point Cycles</button><br />
         <label>Point tweening:
           <label><input type="radio" name="tweening" value="linear" /> Linear</label>
           <label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label>
diff --git a/js/proximity.js b/js/proximity.js
index 5cc4016..1d76edd 100644
--- a/js/proximity.js
+++ b/js/proximity.js
@@ -513,6 +513,14 @@ function redistributeCycles (points, oldCycleDuration, cycleDuration) {
     return points;
 }
 
+function randomizeCycles (points, cycleDuration) {
+    /* Assigns every point a new random cycle start */
+    for (var i = 0; i < points.original.length; i++) {
+        points.target[i][3] = randomInt(0, cycleDuration - 1);
+    }
+    return points;
+}
+
 /* DRAW FUNCTIONS */
 
 function drawPolygon (polygon, points, counter, tweeningFns) {
@@ -721,7 +729,8 @@ function loopStart () {
     };
 
     fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'});
-    fpsGraphic.x = 0;
+    fpsGraphic.anchor = new window.PIXI.Point(1, 0);
+    fpsGraphic.x = screenWidth - 1;
     fpsGraphic.y = 0;
 
     if (fpsEnabled) {
@@ -899,6 +908,11 @@ window.onload = function () {
         toggleControls();
     }, false);
 
+    document.getElementById('randomize-cycles').addEventListener('click', function () {
+        randomizeCycles(polygonPoints, cycleDuration);
+        return false;
+    }, false);
+
     var timeRange, timeInput;
     timeRange = document.getElementsByName('timeRange')[0];
     timeRange.value = cycleDuration;