colinbdclark/index.html

## index.html
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>A Flocking Project</title>
		<script src="flocking/flocking-all.js"></script>
		<script src="waveSym-refactored.js"></script>
	</head>
	<body>
        <form>
            <select id="selector">
                <option>Square wave:</option>
                <option>Sine wave:</option>
            </select>
            <label for="freq">Frequency in x/y format, make it something like 1/2 or 1/4 to start out with, if you want like 5, make it 5/1.</label>
            <input type="text" id="freq" value="1/2" />
            <label for="mul"> Multiplyer. Make this 1 to start out with, making it something like .5 will make the effect more subtle, and values like 2 will make it more noticable. Don't go much larger than 4 if you care about not having distortion.</label>
            <input type="text" id="mul" value="1" />
            <input id="submit-button" type="submit" />
        </form>

        <script>
            // A one-line script block used to instantiate your app
            // when its mark up is ready.
            var app = waveSym.app();
        </script>
    </body>
</html>

## waveSym.js
// Wrap everything in a function to keep your stuff private.
(function () {
    // JavaScript strict mode is a good thing.
    "use strict";

    // Define a unique global namespace for your stuff.
    fluid.registerNamespace("waveSym");

    // A lookup table for ugens.
    waveSym.modeUGens = {
        "Square wave:": "flock.ugen.lfPulse",
        "Sine wave:": "flock.ugen.sinOsc"
    };

    // A function that will create an instance of your synth when called.
    waveSym.pinkNoiseSynth = function () {
        return flock.synth({
            synthDef: {
                id: "carrier",
                ugen: "flock.ugen.pinkNoise",
                freq: 500,
                mul: {
                    ugen: "flock.ugen.lfPulse",
                    freq: 2000/1,
                    mul: 1,
                    add:1
                }
            }
        });
    };

    // A function used to update your synth with values from the UI.
    waveSym.updateModulator = function (synth, mode, freq, mul) {
        synth.set("carrier.mul", {
            ugen: waveSym.modeUGens[mode],
            freq: freq,
            mul: mul,
            add: 1
        });
    };

    // A handler used to parse values from the UI.
	waveSym.updateFromUI = function (synth, enviro) {
        var mode = document.getElementById("selector").value;
        console.log("the mode is ", mode);

        var freq = document.getElementById("freq").value;
        freq = freq.split("/");
        freq = Number(freq[0]) / Number(freq[1]);
        console.log("The frequency is: " + freq);

        var mul = Number(document.getElementById("mul").value);

        // Create the synth if this is the first time.
        if (!enviro.model.isPlaying) {
            enviro.play();
        }

        waveSym.updateModulator(synth, mode, freq, mul);
    };

    // This is a creator function that will create a new "app"
    // object (or whatever you want to call it) that combines
    // your synth with all the logic needed to connect it up to
    // the user interface.
    waveSym.app = function () {
        var that = {
            enviro: flock.init(),
            synth: waveSym.pinkNoiseSynth()
        };

        that.update = function (event) {
            waveSym.updateFromUI(that.synth, that.enviro);

            // Prevent the form from being submitted.
            // jQuery makes this much easier.
            event.preventDefault();
            event.stopPropagation();
            return false;
        };

        that.init = function () {
            // Bind a click event to the button.
            var button = document.querySelector("#submit-button");
            button.addEventListener("click", that.update, true);
        };

        that.init();

        return that;
    };

}());
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>A Flocking Project</title>
	<script src="flocking/flocking-all.js"></script>
	<script src="waveSym-refactored.js"></script>
	</head>
	<body>
	<form>
	<select id="selector">
	<option>Square wave:</option>
	<option>Sine wave:</option>
	</select>
	<label for="freq">Frequency in x/y format, make it something like 1/2 or 1/4 to start out with, if you want like 5, make it 5/1.</label>
	<input type="text" id="freq" value="1/2" />
	<label for="mul"> Multiplyer. Make this 1 to start out with, making it something like .5 will make the effect more subtle, and values like 2 will make it more noticable. Don't go much larger than 4 if you care about not having distortion.</label>
	<input type="text" id="mul" value="1" />
	<input id="submit-button" type="submit" />
	</form>

	<script>
	// A one-line script block used to instantiate your app
	// when its mark up is ready.
	var app = waveSym.app();
	</script>
	</body>
	</html>
	// Wrap everything in a function to keep your stuff private.
	(function () {
	// JavaScript strict mode is a good thing.
	"use strict";

	// Define a unique global namespace for your stuff.
	fluid.registerNamespace("waveSym");

	// A lookup table for ugens.
	waveSym.modeUGens = {
	"Square wave:": "flock.ugen.lfPulse",
	"Sine wave:": "flock.ugen.sinOsc"
	};

	// A function that will create an instance of your synth when called.
	waveSym.pinkNoiseSynth = function () {
	return flock.synth({
	synthDef: {
	id: "carrier",
	ugen: "flock.ugen.pinkNoise",
	freq: 500,
	mul: {
	ugen: "flock.ugen.lfPulse",
	freq: 2000/1,
	mul: 1,
	add:1
	}
	}
	});
	};

	// A function used to update your synth with values from the UI.
	waveSym.updateModulator = function (synth, mode, freq, mul) {
	synth.set("carrier.mul", {
	ugen: waveSym.modeUGens[mode],
	freq: freq,
	mul: mul,
	add: 1
	});
	};

	// A handler used to parse values from the UI.
	waveSym.updateFromUI = function (synth, enviro) {
	var mode = document.getElementById("selector").value;
	console.log("the mode is ", mode);

	var freq = document.getElementById("freq").value;
	freq = freq.split("/");
	freq = Number(freq[0]) / Number(freq[1]);
	console.log("The frequency is: " + freq);

	var mul = Number(document.getElementById("mul").value);

	// Create the synth if this is the first time.
	if (!enviro.model.isPlaying) {
	enviro.play();
	}

	waveSym.updateModulator(synth, mode, freq, mul);
	};

	// This is a creator function that will create a new "app"
	// object (or whatever you want to call it) that combines
	// your synth with all the logic needed to connect it up to
	// the user interface.
	waveSym.app = function () {
	var that = {
	enviro: flock.init(),
	synth: waveSym.pinkNoiseSynth()
	};

	that.update = function (event) {
	waveSym.updateFromUI(that.synth, that.enviro);

	// Prevent the form from being submitted.
	// jQuery makes this much easier.
	event.preventDefault();
	event.stopPropagation();
	return false;
	};

	that.init = function () {
	// Bind a click event to the button.
	var button = document.querySelector("#submit-button");
	button.addEventListener("click", that.update, true);
	};

	that.init();

	return that;
	};

	}());