Interface classes can be created with or without new keyword

[skip ci]

examples/analysis.html

@@ -58,7 +58,7 @@
 		$(function(){
 
 			//start button
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/bembe.html

@@ -76,7 +76,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 			
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/buses.html

@@ -65,7 +65,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Slider({
+			Interface.Slider({
 				name : "Chebyshev",
 				parent : $("#Sliders"),
 				min : -100,
@@ -75,7 +75,7 @@
 				}
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				name : "Chorus",
 				parent : $("#Sliders"),
 				min : -100,
@@ -85,7 +85,7 @@
 				}
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				name : "Freeverb",
 				parent : $("#Sliders"),
 				min : -100,

examples/daw.html

@@ -114,7 +114,7 @@
 
 		$(function(){
 
-			new Interface.Loader();
+			Interface.Loader();
 
 			var dragging = false;
 
@@ -141,7 +141,7 @@
 
 			var started = false;
 			
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/envelope.html

@@ -75,7 +75,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "attack",
 				name : "attack",
 				parent : $("#Sliders"),
@@ -85,7 +85,7 @@
 				exp : 2,
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "decay",
 				name : "decay",
 				parent : $("#Sliders"),
@@ -95,7 +95,7 @@
 				exp : 2,
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "release",
 				name : "release",
 				parent : $("#Sliders"),
@@ -105,7 +105,7 @@
 				exp : 2,
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "sustain",
 				name : "sustain",
 				tone : env,
@@ -115,7 +115,7 @@
 				exp : 2,
 			});
 
-			new Interface.Button({
+			Interface.Button({
 				text : "Trigger Attack",
 				activeText : "Trigger Release",
 				key : 32, //spacebar

examples/events.html

@@ -133,7 +133,7 @@
 
 		$(function(){
 
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/fmSynth.html

@@ -55,7 +55,7 @@
 
 		$(function(){
 		
-			new Interface.Slider({
+			Interface.Slider({
 				tone : synth,
 				param : "modulationIndex",
 				name : "mod index",

examples/funkyShape.html

@@ -272,7 +272,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Button({
+			Interface.Button({
 				type : "toggle",
 				text : "Start",
 				activeText : "Stop",

examples/grainPlayer.html

@@ -47,9 +47,9 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Loader();
+			Interface.Loader();
 
-			new Interface.Button({
+			Interface.Button({
 				text : "Start",
 				activeText : "Stop",
 				type : "toggle",
@@ -61,7 +61,7 @@
 				}
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "playbackRate",
 				name : "playbackRate",
 				parent : $("#Sliders"),
@@ -70,7 +70,7 @@
 				max : 2,
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "detune",
 				name : "detune",
 				parent : $("#Sliders"),
@@ -79,7 +79,7 @@
 				max : 1200,
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "grainSize",
 				name : "grainSize",
 				parent : $("#Sliders"),
@@ -88,7 +88,7 @@
 				max : 0.2,
 			});
 
-			new Interface.Slider({
+			Interface.Slider({
 				param : "overlap",
 				name : "overlap",
 				parent : $("#Sliders"),

examples/jump.html

@@ -265,7 +265,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 			
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/lfoEffects.html

@@ -77,7 +77,7 @@
 
 	$(function(){
 
-		new Interface.Dragger({
+		Interface.Dragger({
 			tone : panner,
 			x : {
 				param : "frequency",
@@ -97,7 +97,7 @@
 			}
 		});
 
-		new Interface.Dragger({
+		Interface.Dragger({
 			tone : filter, 
 			x : {
 				param : "frequency",
@@ -117,7 +117,7 @@
 			}
 		});
 
-		new Interface.Dragger({
+		Interface.Dragger({
 			tone : tremolo,
 			x : {
 				param : "frequency",

examples/meter.html

@@ -55,7 +55,7 @@
 		$(function(){
 
 			//start button
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/mic.html

@@ -93,7 +93,7 @@
 				}
 				drawLoop();
 				
-				new Interface.Button({
+				Interface.Button({
 					type : "toggle",
 					text : "Open Mic",
 					activeText : "Close Mic",

examples/noises.html

@@ -46,7 +46,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Dragger({
+			Interface.Dragger({
 				tone : noise,
 				y : {
 					param : "volume",

examples/oscillator.html

@@ -40,7 +40,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Dragger({
+			Interface.Dragger({
 				tone : osc,
 				x : {
 					param : "frequency",

examples/pianoPhase.html

@@ -104,7 +104,7 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 			
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",

examples/pingPongDelay.html

@@ -50,9 +50,9 @@
 	<script type="text/javascript">
 		$(function(){
 
-			new Interface.Loader();
+			Interface.Loader();
 
-			new Interface.Button({
+			Interface.Button({
 				text : "trigger",
 				start : function(){
 					player.start();

examples/quantization.html

@@ -46,9 +46,9 @@
 
 	$(function(){
 
-		new Interface.Transport();
+		Interface.Transport();
 
-		new Interface.Button({
+		Interface.Button({
 			type : "moment",
 			text : "@1m",
 			start : function(){
@@ -56,7 +56,7 @@
 			},
 		});
 
-		new Interface.Button({
+		Interface.Button({
 			type : "moment",
 			text : "@2n",
 			start : function(){
@@ -64,7 +64,7 @@
 			},
 		});
 
-		new Interface.Button({
+		Interface.Button({
 			type : "moment",
 			text : "@4n",
 			start : function(){
@@ -72,7 +72,7 @@
 			},
 		});
 
-		new Interface.Button({
+		Interface.Button({
 			type : "moment",
 			text : "@8n",
 			start : function(){

examples/rampTo.html

@@ -100,7 +100,7 @@
 
 			joints1.on("*", setValues);
 
-			new Interface.Slider({
+			Interface.Slider({
 				name : "harmony",
 				min : 0.5,
 				max : 2,
@@ -116,7 +116,7 @@
 			});
 
 
-			new Interface.Button({
+			Interface.Button({
 				text : "Unmute",
 				activeText : "Mute",
 				type : "toggle",

examples/scripts/Interface.js

@@ -46,18 +46,24 @@ $(function(){
  *  
  */
 Interface.Loader = function(){
-	this.element = $("<div>", {
-		"id" : "Loading",
-	}).appendTo("body");
+	if (this instanceof Interface.Loader){
 
-	this.text = $("<div>", {
-		"id" : "Text",
-		"text" : "Loading"
-	}).appendTo(this.element);
+		this.element = $("<div>", {
+			"id" : "Loading",
+		}).appendTo("body");
 
-	Tone.Buffer.on("load", function(){
-		this.element.addClass("Loaded");
-	}.bind(this));
+		this.text = $("<div>", {
+			"id" : "Text",
+			"text" : "Loading"
+		}).appendTo(this.element);
+
+		Tone.Buffer.on("load", function(){
+			this.element.addClass("Loaded");
+		}.bind(this));
+
+	} else {
+		return new Interface.Loader();
+	}
 };
 
 /**
@@ -68,79 +74,84 @@ Interface.Loader = function(){
  */
 Interface.Dragger = function(params){
 
-	if ($("#DragContainer").length === 0){
-		$("<div>", {
-			"id" : "DragContainer"
-		}).appendTo(params.parent || "#Content");	
+	if (this instanceof Interface.Dragger){
+
+		if ($("#DragContainer").length === 0){
+			$("<div>", {
+				"id" : "DragContainer"
+			}).appendTo(params.parent || "#Content");	
+		}
+
+		this.container = $("#DragContainer");
+
+		/**
+		 *  the tone object
+		 */
+		this.tone = params.tone;
+
+		/**
+		 *  callbacks
+		 */
+		this.start = params.start;
+
+		this.end = params.end;
+
+		this.drag = params.drag;
+
+		/**
+		 *  the name
+		 */
+		var name = params.name ? params.name : this.tone ? this.tone.toString() : "";
+
+		/**
+		 *  elements
+		 */
+		this.element = $("<div>", {
+			"class" : "Dragger",
+			"id" : name
+		}).appendTo(this.container)
+			.on("dragMove", this._ondrag.bind(this))
+			.on("touchstart mousedown", this._onstart.bind(this))
+			.on("dragEnd touchend mouseup", this._onend.bind(this));
+
+		this.name = $("<div>", {
+			"id" : "Name",
+			"text" : name
+		}).appendTo(this.element);
+
+		this.element.draggabilly({
+			"axis" : this.axis,
+			"containment": this.container
+		});
+
+		/**
+		 *  x slider
+		 */
+		var xParams = params.x;
+		xParams.axis = "x";
+		xParams.element = this.element;
+		xParams.tone = this.tone;
+		xParams.container = this.container;
+		this.xAxis = new Interface.Slider(xParams);
+
+		/**
+		 *  y slider
+		 */
+		var yParams = params.y;
+		yParams.axis = "y";
+		yParams.element = this.element;
+		yParams.tone = this.tone;
+		yParams.container = this.container;
+		this.yAxis = new Interface.Slider(yParams);
+
+		//set the axis indicator
+		var position = this.element.position();
+		this.halfSize = this.xAxis.halfSize;
+		this.xAxis.axisIndicator.css("top", position.top + this.halfSize);
+		this.yAxis.axisIndicator.css("left", position.left + this.halfSize);
+	} else {
+		return new Interface.Dragger(params);
 	}
-
-	this.container = $("#DragContainer");
-
-	/**
-	 *  the tone object
-	 */
-	this.tone = params.tone;
-
-	/**
-	 *  callbacks
-	 */
-	this.start = params.start;
-
-	this.end = params.end;
-
-	this.drag = params.drag;
-
-	/**
-	 *  the name
-	 */
-	var name = params.name ? params.name : this.tone ? this.tone.toString() : "";
-
-	/**
-	 *  elements
-	 */
-	this.element = $("<div>", {
-		"class" : "Dragger",
-		"id" : name
-	}).appendTo(this.container)
-		.on("dragMove", this._ondrag.bind(this))
-		.on("touchstart mousedown", this._onstart.bind(this))
-		.on("dragEnd touchend mouseup", this._onend.bind(this));
-
-	this.name = $("<div>", {
-		"id" : "Name",
-		"text" : name
-	}).appendTo(this.element);
-
-	this.element.draggabilly({
-		"axis" : this.axis,
-		"containment": this.container
-	});
-
-	/**
-	 *  x slider
-	 */
-	var xParams = params.x;
-	xParams.axis = "x";
-	xParams.element = this.element;
-	xParams.tone = this.tone;
-	xParams.container = this.container;
-	this.xAxis = new Interface.Slider(xParams);
-
-	/**
-	 *  y slider
-	 */
-	var yParams = params.y;
-	yParams.axis = "y";
-	yParams.element = this.element;
-	yParams.tone = this.tone;
-	yParams.container = this.container;
-	this.yAxis = new Interface.Slider(yParams);
-
-	//set the axis indicator
-	var position = this.element.position();
-	this.halfSize = this.xAxis.halfSize;
-	this.xAxis.axisIndicator.css("top", position.top + this.halfSize);
-	this.yAxis.axisIndicator.css("left", position.left + this.halfSize);
 };
 
 Interface.Dragger.prototype._ondrag = function(e, pointer){
@@ -183,93 +194,99 @@ Interface.Dragger.prototype._onend = function(e){
  */
 Interface.Slider = function(params){
 
-	this.tone = params.tone;
+	if (this instanceof Interface.Slider){
 
-	/**
-	 *  the name
-	 */
-	var name = params.name ? params.name : this.tone ? this.tone.toString() : "";
+		this.tone = params.tone;
 
-	/**
-	 *  callback functions
-	 */
-	this.start = params.start;
+		/**
+		 *  the name
+		 */
+		var name = params.name ? params.name : this.tone ? this.tone.toString() : "";
 
-	this.end = params.end;
+		/**
+		 *  callback functions
+		 */
+		this.start = params.start;
 
-	this.drag = params.drag;
+		this.end = params.end;
 
-	/**
-	 *  the axis indicator
-	 */
-	this.axis = params.axis || "x";
+		this.drag = params.drag;
 
-	if (!params.element){
+		/**
+		 *  the axis indicator
+		 */
+		this.axis = params.axis || "x";
 
-		this.container = $("<div>", {
-			"class" : "Slider "+this.axis,
-		}).appendTo(params.parent || "#Content");
+		if (!params.element){
 
-		this.element = $("<div>", {
-			"class" : "Dragger",
-			"id" : name
-		}).appendTo(this.container)
-			.on("dragMove", this._ondrag.bind(this))
-			.on("touchstart mousedown", this._onstart.bind(this))
-			.on("dragEnd touchend mouseup", this._onend.bind(this));
+			this.container = $("<div>", {
+				"class" : "Slider "+this.axis,
+			}).appendTo(params.parent || "#Content");
 
-		this.name = $("<div>", {
-			"id" : "Name",
-			"text" : name
-		}).appendTo(this.element);
+			this.element = $("<div>", {
+				"class" : "Dragger",
+				"id" : name
+			}).appendTo(this.container)
+				.on("dragMove", this._ondrag.bind(this))
+				.on("touchstart mousedown", this._onstart.bind(this))
+				.on("dragEnd touchend mouseup", this._onend.bind(this));
+
+			this.name = $("<div>", {
+				"id" : "Name",
+				"text" : name
+			}).appendTo(this.element);
+
+			this.element.draggabilly({
+				"axis" : this.axis,
+				"containment": this.container.get(0)
+			});
+		} else {
+			this.element = params.element;
+
+			this.container = params.container;
+		}
+
+		this.axisIndicator = $("<div>", {
+			"id" : this.axis + "Axis",
+			"class" : "Axis"
+		}).appendTo(this.container);
+
+		/**
+		 *  the initial value / position
+		 */
+		this.parameter = params.param || false;
+		//default values
+		this.min = typeof params.min === "undefined" ? 0 : params.min;
+		this.max = typeof params.max === "undefined" ? 1 : params.max;
+		this.exp = typeof params.exp === "undefined" ? 1 : params.exp;
+		if (params.options){
+			this.options = params.options;
+			this.min = 0;
+			this.max = this.options.length - 1;
+			this.exp = params.exp || 1;
+		}
+
+		/**
+		 *  cache some measurements for later
+		 */
+		this.halfSize = this.element.width() / 2;
+
+		this.maxAxis = this.axis === "x" ? "width" : "height";
+		this.posAxis = this.axis === "x" ? "left" : "top";
+		this.oppositeAxis = this.axis === "x" ? "top" : "left";
+
+		/**
+		 *  initial value
+		 */
+		if (this.parameter || typeof params.value !== "undefined"){
+
+			var paramValue = typeof params.value !== "undefined" ? params.value : this.tone.get(this.parameter);
+
+			this.value(paramValue);		
+		}
 
-		this.element.draggabilly({
-			"axis" : this.axis,
-			"containment": this.container.get(0)
-		});
 	} else {
-		this.element = params.element;
-
-		this.container = params.container;
-	}
-
-	this.axisIndicator = $("<div>", {
-		"id" : this.axis + "Axis",
-		"class" : "Axis"
-	}).appendTo(this.container);
-
-	/**
-	 *  the initial value / position
-	 */
-	this.parameter = params.param || false;
-	//default values
-	this.min = typeof params.min === "undefined" ? 0 : params.min;
-	this.max = typeof params.max === "undefined" ? 1 : params.max;
-	this.exp = typeof params.exp === "undefined" ? 1 : params.exp;
-	if (params.options){
-		this.options = params.options;
-		this.min = 0;
-		this.max = this.options.length - 1;
-		this.exp = params.exp || 1;
-	}
-
-	/**
-	 *  cache some measurements for later
-	 */
-	this.halfSize = this.element.width() / 2;
-
-	this.maxAxis = this.axis === "x" ? "width" : "height";
-	this.posAxis = this.axis === "x" ? "left" : "top";
-	this.oppositeAxis = this.axis === "x" ? "top" : "left";
-
-	/**
-	 *  initial value
-	 */
-	if (this.parameter || typeof params.value !== "undefined"){
-
-		var paramValue = typeof params.value !== "undefined" ? params.value : this.tone.get(this.parameter);
-
-		this.value(paramValue);		
+		return new Interface.Slider(params);
 	}
 };
 
@@ -358,44 +375,49 @@ Interface.Slider.prototype._setParam = function(value){
  */
 Interface.Button = function(params){
 
-	this.activeText = params.activeText || false;
+	if (this instanceof Interface.Button){
 
-	this.text = params.text || "Button";
+		this.activeText = params.activeText || false;
 
-	this.type = params.type || "moment";
+		this.text = params.text || "Button";
 
-	this.element = $("<div>", {
-		"class" : "Button",
-		"text" : this.text
-	}).appendTo(params.parent || "#Content")
-		.on("mousedown touchstart", this._start.bind(this));
+		this.type = params.type || "moment";
 
-	if (this.type === "moment"){
-		this.element.on("mouseup touchend", this._end.bind(this));
-	} else {
-		this.element.addClass("Toggle");
-	}
+		this.element = $("<div>", {
+			"class" : "Button",
+			"text" : this.text
+		}).appendTo(params.parent || "#Content")
+			.on("mousedown touchstart", this._start.bind(this));
 
-	/**
-	 *  the button state
-	 */
-	this.active = false;
-
-	/**
-	 *  callbacks
-	 */
-	this.start = params.start;
-	this.end = params.end;
-
-	/**
-	 *  key presses
-	 */
-	if (params.key){
-		this.key = params.key;
-		$(window).on("keydown", this._keydown.bind(this));
 		if (this.type === "moment"){
-			$(window).on("keyup", this._keyup.bind(this));
+			this.element.on("mouseup touchend", this._end.bind(this));
+		} else {
+			this.element.addClass("Toggle");
 		}
+
+		/**
+		 *  the button state
+		 */
+		this.active = false;
+
+		/**
+		 *  callbacks
+		 */
+		this.start = params.start;
+		this.end = params.end;
+
+		/**
+		 *  key presses
+		 */
+		if (params.key){
+			this.key = params.key;
+			$(window).on("keydown", this._keydown.bind(this));
+			if (this.type === "moment"){
+				$(window).on("keyup", this._keyup.bind(this));
+			}
+		}
+	} else {
+		return new Interface.Button(params);
 	}
 };
 
@@ -452,16 +474,22 @@ Interface.Button.prototype._keyup = function(e){
  */
 Interface.Transport = function(){
 
-	this.element = $("<div>", {
-		"class" : "Transport",
-	}).appendTo("#Content");
+	if (this instanceof Interface.Transport){
 
-	this.position = $("<div>", {
-		"id" : "Position"
-	}).appendTo(this.element);
+		this.element = $("<div>", {
+			"class" : "Transport",
+		}).appendTo("#Content");
 
-	this._boundLoop = this._loop.bind(this);
-	this._loop();
+		this.position = $("<div>", {
+			"id" : "Position"
+		}).appendTo(this.element);
+
+		this._boundLoop = this._loop.bind(this);
+		this._loop();
+
+	} else {
+		return new Interface.Transport();
+	}
 };
 
 Interface.Transport.prototype._loop = function(){

examples/shiny.html

@@ -215,7 +215,7 @@
 
 		$(function(){
 
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start",
@@ -229,7 +229,7 @@
 			});
 
 			var lastSynthNote = synthNotes[0];
-			new Interface.Dragger({
+			Interface.Dragger({
 				// container : "#Content",
 				x : {
 					options : synthNotes,

examples/signal.html

@@ -101,7 +101,7 @@
 
 			var detuneLFOGUI = Notone.add(detuneLFO, "Detune LFO", ["type"]);*/
 
-			new Interface.Slider({
+			Interface.Slider({
 				drag : function(value){
 					frequency.rampTo(value, 0.1);
 				},

examples/spatialPanner.html

@@ -65,9 +65,9 @@
 	<script id="GUI" type="text/javascript">
 		$(function(){
 
-			new Interface.Loader()
+			Interface.Loader()
 			
-			new Interface.Button({
+			Interface.Button({
 				key : 32,
 				type : "toggle",
 				text : "Start Sound",

examples/stepSequencer.html

@@ -78,7 +78,7 @@
 
 		$(function(){
 
-			new Interface.Slider({
+			Interface.Slider({
 				name : "BPM",
 				min : 80,
 				max : 200,
@@ -88,7 +88,7 @@
 				}
 			});
 
-			new Interface.Button({
+			Interface.Button({
 				text : "Start",
 				activeText : "Stop",
 				type : "toggle",