Permalink
Browse files

gh-18: Adds a simple screen-wide mouse tracking unit generator.

Improved the demo playground by automatically loading demos when they are selected.
Other minor demo-related tweaks.
  • Loading branch information...
1 parent 80a0070 commit 6b61464ac7c4f8acee6db033ddec84a9101a09e9 @colinbdclark committed Apr 15, 2012
Showing with 151 additions and 22 deletions.
  1. +69 −16 demos/interactive/html/playground.html
  2. +9 −6 demos/interactive/js/playground.js
  3. +73 −0 flocking/flocking-ugens.js
@@ -28,12 +28,22 @@
<div id="navi">
<button id="play-button">Play</button>
<select id="sample_code_sel" size="1">
- <option value="amp_mod" selected="selected">Amplitude modulation</option>
- <option value="freq_stairs">Frequency stairs</option>
- <option value="freq_mod">Frequency modulation</option>
- <option value="phase_mod">Phase modulation</option>
- <option value="scope">Scope</option>
- <option value="stereo">Stereo</option>
+ <optgroup label="Simple Waveforms">
+ <option value="simple_sin">Sine</option>
+ <option value="simple_triangle">Triangle</option>
+ <option value="simple_square">Square</option>
+ <option value="simple_saw">Saw</option>
+ </optgroup>
+ <optgroup label="Noise">
+ <option value="noise_dust">Dust</option>
+ <option value="noise_lf">LFNoise</option>
+ <option value="noise_sin">LFNoise &amp; SinOsc</option>
+ </optgroup>
+ <optgroup label="Modulation">
+ <option value="amp_mod" selected="selected">Amplitude modulation</option>
+ <option value="freq_mod">Frequency modulation</option>
+ <option value="phase_mod">Phase modulation</option>
+ </optgroup>
<optgroup label="Envelopes">
<option value="simpleASR">Simple Attack/Sustain/Release</option>
</optgroup>
@@ -42,17 +52,14 @@
<option value="line_mod">Mod SinOsc Freq</option>
<option value="line_phase">SinOsc Phase</option>
</optgroup>
- <optgroup label="Noise">
- <option value="noise_dust">Dust</option>
- <option value="noise_lf">LFNoise</option>
- <option value="noise_sin">LFNoise &amp; SinOsc</option>
- </optgroup>
- <optgroup label="Simple Waveforms">
- <option value="simple_sin">Sine</option>
- <option value="simple_triangle">Triangle</option>
- <option value="simple_square">Square</option>
- <option value="simple_saw">Saw</option>
+ <optgroup label="Mouse">
+ <option value="mouse_x">Mouse X</option>
+ <option value="mouse_y">Mouse Y</option>
+ <option value="mouse_xy">Mouse X &amp; Y</option>
</optgroup>
+ <option value="freq_stairs">Frequency stairs</option>
+ <option value="scope">Scope</option>
+ <option value="stereo">Stereo</option>
</select>
<button id="load-button">Load</button>
</div>
@@ -309,5 +316,51 @@
}
]);
</script>
+ <script type="application/flocking" id="mouse_x">
+ // Tracks the mouse's horizonal movement across the entire screen.
+ var synth = flock.synth({
+ ugen: "flock.ugen.sinOsc",
+ freq: {
+ ugen: "flock.ugen.mouse",
+ mul: 880,
+ add: 110
+ }
+ });
+ </script>
+ <script type="application/flocking" id="mouse_y">
+ // Tracks the mouse's vertical movement across the entire screen.
+ var synth = flock.synth({
+ ugen: "flock.ugen.sinOsc",
+ freq: {
+ ugen: "flock.ugen.mouse",
+ mul: 880,
+ add: 110,
+ options: {
+ axis: "height"
+ }
+ }
+ });
+ </script>
+ <script type="application/flocking" id="mouse_xy">
+ // Maps the mouse's vertical position to amplitude
+ // and its horizontal position to pitch.
+ var synth = flock.synth({
+ ugen: "flock.ugen.sinOsc",
+ freq: {
+ ugen: "flock.ugen.mouse",
+ mul: 880,
+ add: 110,
+ options: {
+ axis: "width"
+ }
+ },
+ mul: {
+ ugen: "flock.ugen.mouse",
+ options: {
+ axis: "height"
+ }
+ }
+ });
+ </script>
</body>
</html>
@@ -50,12 +50,15 @@ var demo = demo || {};
});
};
- var setupLoadButton = function (that) {
- $(that.selectors.loadButton).click(function (e) {
+ var setupLoadControls = function (that) {
+ var loadDemo = function (e) {
var id = $(that.selectors.demosMenu).val();
- var code = $("#" + id).html();
- that.editor.getSession().setValue(code);
- });
+ var code = $("#" + id).html();
+ that.editor.getSession().setValue(code);
+ };
+
+ $(that.selectors.loadButton).click(loadDemo);
+ $(that.selectors.demosMenu).change(loadDemo); // Automatically load the demo whenever the demo menu changes.
};
demo.liveEditorView = function (editorId, selectors) {
@@ -74,7 +77,7 @@ var demo = demo || {};
setupEditor(that, editorId);
setupPlayButton(that);
- setupLoadButton(that);
+ setupLoadControls(that);
return that;
};
View
@@ -1074,6 +1074,11 @@ var flock = flock || {};
return that;
};
+
+ /***********************
+ * DOM-dependent UGens *
+ ***********************/
+
flock.ugen.scope = function (inputs, output, options) {
var that = flock.ugen(inputs, output, options);
@@ -1113,4 +1118,72 @@ var flock = flock || {};
return that;
};
+ /**
+ * 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) {
+ 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.
+
+ /**
+ * Generates a control rate signal between 0.0 and 1.0 by tracking the mouse's position along the specified axis.
+ *
+ * @param numSamps the number of samples to generate
+ */
+ // TODO: Implement lag and curve.
+ that.gen = function (numSamps) {
+ var size = that.model.size,
+ model = that.model,
+ out = that.output,
+ i;
+
+ for (i = 0; i < numSamps; i++) {
+ out[i] = model.mousePosition / size;
+ }
+
+ that.mulAdd(numSamps);
+ };
+
+ that.moveListener = function (e) {
+ that.model.mousePosition = e[that.model.eventProp];
+ };
+
+ that.downAndMoveListener = function (e) {
+ that.model.mousePosition = that.model.isMouseDown ? e[that.model.eventProp] : 0.0;
+ };
+
+ that.init = function () {
+ if (that.options.axis === "x" || that.options.axis === "width" || that.options.axis === "horizontal") {
+ that.model.eventProp = "screenX";
+ that.model.size = window.screen.width;
+ } else {
+ that.model.eventProp = "screenY";
+ that.model.size = window.screen.height;
+ }
+ that.model.mousePosition = 0;
+
+ var listener = that.moveListener;
+ if (that.options.onlyOnMouseDown) {
+ document.addEventListener("mousedown", function (e) {
+ that.model.isMouseDown = true;
+ }, false);
+
+ document.addEventListener("mouseup", function (e) {
+ that.model.isMouseDown = false;
+ that.model.mousePosition = 0;
+ }, false);
+
+ listener = that.downAndMoveListener;
+ }
+ document.addEventListener("mousemove", listener, false);
+ };
+
+ that.init();
+ return that;
+ };
+
}());

0 comments on commit 6b61464

Please sign in to comment.