WIP adding a options panel to magic page

js/magic.js

@@ -31,6 +31,8 @@ var Magic = function (options) {
     // Average length of new spline (branch)
     this.splineLength = options.splineLength || 15;
 
+    this.paused = false;
+
     // Save this query here now that the page is loaded
     this.canvas = document.getElementById("magic");
 };
@@ -105,6 +107,10 @@ Magic.prototype.pickRandomColor = function() {
             "b": Math.floor(Math.random() * (255 + 1))};
 };
 
+Magic.prototype.clear = function() {
+  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+}
+
 Magic.prototype.drawSplineSegment = function(branch, context) {
     var ax = (-branch.points[0].x + 3*branch.points[1].x - 3*branch.points[2].x + branch.points[3].x) / 6;
     var ay = (-branch.points[0].y + 3*branch.points[1].y - 3*branch.points[2].y + branch.points[3].y) / 6;
@@ -205,62 +211,64 @@ Magic.prototype.cast = function(x, y, angle, chain) {
             self.canvas.width = dimensions.width;
         }
 
-        // if enough time has passed, cast another spell to draw
+        if (!self.paused) {
-        if (timeCounter >= self.waitTime && self.counting) {
+          // if enough time has passed, cast another spell to draw
-            self.cast(undefined, undefined, undefined, chain); // start position
+          if (timeCounter >= self.waitTime && self.counting) {
-            self.counting = false;
+              self.cast(undefined, undefined, undefined, chain); // start position
-        }
+              self.counting = false;
+          }
 
-        // Draw branches
+          // Draw branches
-        for (var i in self.spells) {
+          for (var i in self.spells) {
-            context.beginPath();
+              context.beginPath();
-            context.strokeStyle = self.spells[i].color;
+              context.strokeStyle = self.spells[i].color;
 
-            if (self.spells[i].duration > 0) {
+              if (self.spells[i].duration > 0) {
-                for (var j in self.spells[i].branches) {
+                  for (var j in self.spells[i].branches) {
-                    self.drawSplineSegment(self.spells[i].branches[j], context);
+                      self.drawSplineSegment(self.spells[i].branches[j], context);
 
-                    // When finished drawing splines, create a new set of branches
+                      // When finished drawing splines, create a new set of branches
-                    if (self.spells[i].branches[j].t >= 1) {       
+                      if (self.spells[i].branches[j].t >= 1) {       
-                        
+                          
-                        var newBranches = self.splitBranch(self.spells[i].branches[j]);
+                          var newBranches = self.splitBranch(self.spells[i].branches[j]);
-                        
+                          
-                        // Replace old branch with two new branches
+                          // Replace old branch with two new branches
-                        self.spells[i].branches.splice(j, 1);
+                          self.spells[i].branches.splice(j, 1);
-                        self.spells[i].branches = self.spells[i].branches.concat(newBranches);
+                          self.spells[i].branches = self.spells[i].branches.concat(newBranches);
-                    }
+                      }
-                }
+                  }
 
-                // If over 10 branches, prune the branches
+                  // If over 10 branches, prune the branches
-                if (prune) {
+                  if (prune) {
-                    if (sort) {
+                      if (sort) {
-                        while (self.spells[i].branches.length > self.prune_to) {
+                          while (self.spells[i].branches.length > self.prune_to) {
-                            self.spells[i].branches.pop();
+                              self.spells[i].branches.pop();
-                        }
+                          }
-                    } else {
+                      } else {
-                        while (self.spells[i].branches.length > self.prune_to) {
+                          while (self.spells[i].branches.length > self.prune_to) {
-                            self.spells[i].branches.splice(
+                              self.spells[i].branches.splice(
-                                    Math.floor(Math.random() * self.spells[i].branches.length),
+                                      Math.floor(Math.random() * self.spells[i].branches.length),
-                                    1);
+                                      1);
-                        }   
+                          }   
-                    }
+                      }
-                }
+                  }
 
-                context.stroke();
+                  context.stroke();
-                context.closePath();
+                  context.closePath();
-                self.spells[i].duration--;
+                  self.spells[i].duration--;
 
-            } else {
+              } else {
-                // cast a new spell at random position
+                  // cast a new spell at random position
-                if (self.spells[i].chain) {
+                  if (self.spells[i].chain) {
-                    self.cast(undefined, undefined, undefined, true);
+                      self.cast(undefined, undefined, undefined, true);
-                }
+                  }
-                self.spells.splice(i, 1); // spell is done now
+                  self.spells.splice(i, 1); // spell is done now
-            }
+              }
-        }
+          }
-        
+          
-        if (self.counting) {
+          if (self.counting) {
-            timeCounter++;
+              timeCounter++;
+          }
         }
         frameId = animationFrame.request(animate);
     }
@@ -290,9 +298,9 @@ Magic.prototype.draw = function() {
         var self = this;
         this.canvas.addEventListener("click", function () { self.canvasClickHandler.apply(self, arguments); });
 
-        var context = this.canvas.getContext("2d");
+        this.context = this.canvas.getContext("2d");
 
         // Cast magic spells
-        var frameId = this.drawSpells(context, false, true, true);
+        var frameId = this.drawSpells(this.context, false, true, true);
     }
 };

magic/index.html

@@ -5,6 +5,94 @@ title: Tyler Hallada
 
 <script>
   window.onload = function () {
-    new Magic({{ site.data.magic | jsonify }}).draw();
+    window.magicObj = new Magic({{site.data.magic | jsonify}});
+    magicObj.draw();
+    document.getElementById("play-pause").addEventListener("click", togglePlay);
+    document.getElementById("hide-show").addEventListener("click", togglePanel);
+    document.getElementById("clear").addEventListener("click", clear);
+  }
+
+  function updateMagic(key, value) {
+    magicObj[key] = value;
+  }
+
+  function togglePanel(event) {
+    var options = document.getElementById("options");
+    if (options.style.display === "none") {  // hidden
+      options.style.display = "block";
+      event.target.innerHTML = "Hide";
+    } else {  // shown
+      options.style.display = "none";
+      event.target.innerHTML = "Show";
+    }
+  }
+
+  function togglePlay(event) {
+    if (magicObj.paused) {
+      magicObj.paused = false;
+      event.target.innerHTML = "Pause";
+    } else {
+      magicObj.paused = true;
+      event.target.innerHTML = "Play";
+    }
+  }
+
+  function clear(event) {
+    magicObj.clear();
   }
 </script>
+<div class="options-panel">
+  <div class="controls-tab">
+    <div class="controls">
+      <button id="play-pause">Pause</button>
+      <button id="clear">Clear</button>
+      <button id="hide-show">Hide</button>
+    </div>
+  </div>
+  <div id="options" class="container-full" style="display:block;">
+    <div class="row clearfix">
+      <div class="column fourth">
+        <form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">
+          <label for="speed">Speed</label>
+          <input type="range" min=0.01 max=2 value={{site.data.magic.step}} id="speed" step=0.01>
+          <output name="output" for="speed">{{site.data.magic.step}}</output>
+        </form>
+      </div>
+      <div class="column fourth">
+        <form oninput="output.value=minDuration.value;updateMagic('minDuration', parseInt(minDuration.value))">
+          <label for="minDuration">Min Spell Duration</label>
+          <input type="range" min=1 max=1000 value={{site.data.magic.minDuration}} id="minDuration" step=1>
+          <output name="output" for="minDuration">{{site.data.magic.minDuration}}</output>
+        </form>
+      </div>
+      <div class="column fourth">
+        <form oninput="output.value=maxDuration.value;updateMagic('maxDuration', parseInt(maxDuration.value))">
+          <label for="maxDuration">Max Spell Duration</label>
+          <input type="range" min=1 max=1000 value={{site.data.magic.maxDuration}} id="maxDuration" step=1>
+          <output name="output" for="maxDuration">{{site.data.magic.maxDuration}}</output>
+        </form>
+      </div>
+      <div class="column fourth">
+        <form oninput="output.value=splineLength.value;updateMagic('splineLength', parseInt(splineLength.value))">
+          <label for="splineLength">Spline Length</label>
+          <input type="range" min=1 max=500 value={{site.data.magic.splineLength}} id="splineLength" step=1>
+          <output name="output" for="splineLength">{{site.data.magic.splineLength}}</output>
+        </form>
+      </div>
+    </div>
+    <div class="row clearfix">
+      <div class="column half">
+        <form oninput="output.value=minAngleChange.value;updateMagic('minAngleChange', parseInt(minAngleChange.value))">
+          <label for="minAngleChange">Min Angle</label>
+          <input type="range" min=0 max=360 value={{site.data.magic.minAngleChange}} id="minAngleChange" step=1>
+          <output name="output" for="minAngleChange">{{site.data.magic.minAngleChange}}</output>
+        </form>
+      </div>
+      <div class="column half">
+        <form oninput="output.value=maxAngleChange.value;updateMagic('maxAngleChange', parseInt(maxAngleChange.value))">
+          <label for="maxAngleChange">Max Angle</label>
+          <input type="range" min=0 max=360 value={{site.data.magic.maxAngleChange}} id="maxAngleChange" step=1>
+          <output name="output" for="maxAngleChange">{{site.data.magic.maxAngleChange}}</output>
+        </form>
+      </div>
+</div>