lichen-community-systemsgh-18: Adds a mouse click ugen.

More minor tweaks to the playground to improve ease of use. Moved all mouse ugens into a "mouse" namespace.
colinbdclark · Apr 15, 2012 · a8302d1 · a8302d1
1 parent 6b61464
commit a8302d1
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 12 deletions.
diff --git a/demos/interactive/html/playground.html b/demos/interactive/html/playground.html
@@ -56,6 +56,7 @@ <h1>Flocking Playground</h1>
                     <option value="mouse_x">Mouse X</option>
                     <option value="mouse_y">Mouse Y</option>
                     <option value="mouse_xy">Mouse X &amp; Y</option>
+                    <option value="mouse_click">Mouse click</option>
                 </optgroup>
                 <option value="freq_stairs">Frequency stairs</option>
                 <option value="scope">Scope</option>
@@ -321,7 +322,7 @@ <h1>Flocking Playground</h1>
         var synth = flock.synth({
             ugen: "flock.ugen.sinOsc",
             freq: {
-                ugen: "flock.ugen.mouse",
+                ugen: "flock.ugen.mouse.cursor",
                 mul: 880,
                 add: 110
             }
@@ -332,7 +333,7 @@ <h1>Flocking Playground</h1>
         var synth = flock.synth({
             ugen: "flock.ugen.sinOsc",
             freq: {
-                ugen: "flock.ugen.mouse",
+                ugen: "flock.ugen.mouse.cursor",
                 mul: 880,
                 add: 110,
                 options: {
@@ -347,20 +348,36 @@ <h1>Flocking Playground</h1>
         var synth = flock.synth({
             ugen: "flock.ugen.sinOsc",
             freq: {
-                ugen: "flock.ugen.mouse",
+                ugen: "flock.ugen.mouse.cursor",
                 mul: 880,
                 add: 110,
                 options: {
                     axis: "width"
                 }
             },
             mul: {
-                ugen: "flock.ugen.mouse",
+                ugen: "flock.ugen.mouse.cursor",
                 options: {
                     axis: "height"
                 }
             }
         });
         </script>
+        <script type="application/flocking" id="mouse_click">
+        // Triggers a note whenever the mouse is clicked.
+        var synth = flock.synth({
+            ugen: "flock.ugen.sinOsc",
+            freq: 440,
+            mul: {
+                ugen: "flock.ugen.env.simpleASR",
+                attack: 0.25,
+                sustain: 0.6,
+                release: 0.5,
+                gate: {
+                    ugen: "flock.ugen.mouse.click"
+                }
+            }
+        });
+        </script>
     </body>
 </html>
diff --git a/demos/interactive/js/playground.js b/demos/interactive/js/playground.js
@@ -51,14 +51,10 @@ var demo = demo || {};
     };
 
     var setupLoadControls = function (that) {
-        var loadDemo = function (e) {
-            var id = $(that.selectors.demosMenu).val();
-            var code = $("#" + id).html();
-            that.editor.getSession().setValue(code);
-        };
+        $(that.selectors.loadButton).click(that.loadSelectedDemo);
 
-        $(that.selectors.loadButton).click(loadDemo);
-        $(that.selectors.demosMenu).change(loadDemo); // Automatically load the demo whenever the demo menu changes.
+        // Automatically load the demo whenever the demo menu changes.
+        $(that.selectors.demosMenu).change(that.loadSelectedDemo);
     };
 
     demo.liveEditorView = function (editorId, selectors) {
@@ -75,9 +71,20 @@ var demo = demo || {};
             selectors: selectors
         };
 
+        that.loadSelectedDemo = function () {
+            var id = $(that.selectors.demosMenu).val();
+            var code = $("#" + id).html();
+            that.editor.getSession().setValue(code);
+
+            if (flock.enviro.shared.isPlaying) {
+                that.playButton.click(); // Stop the previous demo if it is playing.
+            }
+        };
+
         setupEditor(that, editorId);
         setupPlayButton(that);
         setupLoadControls(that);
+        $(document).ready(that.loadSelectedDemo);
 
         return that;
     };

diff --git a/flocking/flocking-ugens.js b/flocking/flocking-ugens.js
@@ -1118,13 +1118,15 @@ var flock = flock || {};
         return that;
     };
 
+    flock.ugen.mouse = {};
+
     /**
      * Tracks the mouse's position along the specified axis within the boundaries the whole screen.
      * This unit generator will generate a signal between 0.0 and 1.0 based on the position of the mouse;
      * use the mul and add inputs to scale this value to an appropriate control signal.
      */
     // TODO: add the ability to track individual elements rather than the whole screen.
-    flock.ugen.mouse = function (inputs, output, options) {
+    flock.ugen.mouse.cursor = function (inputs, output, options) {
         var that = flock.ugen.mulAdd(inputs, output, options);
         that.rate = flock.rates.CONTROL;
         that.options.axis = that.options && that.options.axis ? that.options.axis : "x"; // By default, track the mouse along the x axis.
@@ -1186,4 +1188,34 @@ var flock = flock || {};
         return that;
     };
 
+    flock.ugen.mouse.click = function (inputs, output, options) {
+        var that = flock.ugen.mulAdd(inputs, output, options);
+        that.model.target = document.querySelector(that.options.target) || window;
+        that.model.value = 0.0;
+
+        that.gen = function (numSamps) {
+            var out = that.output,
+                model = that.model,
+                i;
+
+            for (i = 0; i < numSamps; i++) {
+                out[i] = model.value;
+                that.mulAdd(numSamps);
+            }
+        };
+
+        that.mouseDownListener = function (e) {
+            that.model.value = 1.0;
+        };
+
+        that.mouseUpListener = function (e) {
+            that.model.value = 0.0;
+        };
+
+        that.model.target.addEventListener("mousedown", that.mouseDownListener, false);
+        that.model.target.addEventListener("mouseup", that.mouseUpListener, false);
+
+        return that;
+    };
+
 }());