Reposition fps graphic, randomize cycles button

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;

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>

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;