updated examples style and copy

add Logo, updated qwerty hancock & nexusUI

examples/analysis.html

@@ -8,7 +8,8 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -97,8 +98,9 @@
 			var canvasWidth, canvasHeight;
 
 			function sizeCanvases(){
-				canvasWidth = $("canvas").width();
-				canvasHeight = $("canvas").height();
+				canvasWidth = $("#fft").width();
+				canvasHeight = $("#fft").height();
+				console.log(canvasWidth);
 				waveContext.canvas.width = canvasWidth;
 				fftContext.canvas.width = canvasWidth;
 				waveContext.canvas.height = canvasHeight;
@@ -124,16 +126,6 @@
 			}
 			loop();
 
-			/*Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			var fmGUI = Notone.add(synth, "SimpleFM");*/
-
 		});
 	</script>
 </body>

examples/buses.html

@@ -8,8 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -75,15 +76,6 @@
 	</script>
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			Notone.add(synth);
 
 			new Interface.Slider({
 				name : "Chebyshev",

examples/envelope.html

@@ -8,8 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -61,7 +62,8 @@
 
 		//create an oscillator and connect it to the envelope
 		var osc = new Tone.Oscillator({
-			"type" : "triangle",
+			"partials" : [3, 2, 1],
+			"type" : "custom",
 			"frequency" : "C#4",
 			"volume" : -8,
 		}).connect(env).start();
@@ -70,23 +72,12 @@
 
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			var oscGUI = Notone.add(osc, "Oscillator");
-
-			var envGUI = Notone.add(env, "Envelope");
 
 			new Interface.Slider({
 				param : "attack",
 				name : "attack",
 				parent : $("#Sliders"),
-				gui : envGUI,
+				tone : env,
 				min : 0.005,
 				max : 1,
 				exp : 2,
@@ -96,7 +87,7 @@
 				param : "decay",
 				name : "decay",
 				parent : $("#Sliders"),
-				gui : envGUI,
+				tone : env,
 				min : 0.005,
 				max : 1,
 				exp : 2,
@@ -106,7 +97,7 @@
 				param : "release",
 				name : "release",
 				parent : $("#Sliders"),
-				gui : envGUI,
+				tone : env,
 				min : 0.2,
 				max : 2,
 				exp : 2,
@@ -115,7 +106,7 @@
 			new Interface.Slider({
 				param : "sustain",
 				name : "sustain",
-				gui : envGUI,
+				tone : env,
 				axis : "y",
 				min : 0.0,
 				max : 1,

examples/events.html

@@ -11,7 +11,7 @@
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
 	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
-	<script type="text/javascript" src="../../Logo/build/Logo.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 

examples/fmSynth.html

@@ -8,10 +8,12 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
 
+
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
 	<script type="text/javascript">
@@ -32,25 +34,31 @@
 
 	<script type="text/javascript">			
 		var synth = new Tone.SimpleFM({
-			"modulationIndex" : 12.22
+			"modulationIndex" : 12.22,
+			"carrier" : {
+				"envelope" : {
+					"attack" : 0.01,
+					"decay" : 0.2
+				}
+			},
+			"modulator" : {
+				"oscillator" : {
+					"type" : "square"
+				},
+				"envelope" : {
+					"attack" : 0.2,
+					"decay" : 0.01
+				}
+			}
 		}).toMaster();
 	</script>
 
 	<script type="text/javascript">
 
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			var fmGUI = Notone.add(synth, "SimpleFM");
-
+		
 			new Interface.Slider({
-				gui : fmGUI,
+				tone : synth,
 				param : "modulationIndex",
 				name : "mod index",
 				max : 100

examples/funkyShape.html

@@ -13,7 +13,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/p5.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -24,6 +26,13 @@
 
 </head>
 <body>
+	<style type="text/css">
+		canvas {
+			position: absolute;
+			top: 0px;
+			z-index: -1;
+		}
+	</style>
 	<div id="Content" class="FullScreen">
 		<div id="Title">Using p5</div>
 		<div id="Explanation">
@@ -159,6 +168,10 @@
 		    }
 		}).connect(lowPass);
 
+		var openHiHatPart = new Tone.Part(function(time){
+			openHiHat.triggerAttack(time);
+		}, ["2*8n", "6*8n"]).start(0);
+
 		var closedHiHat = new Tone.NoiseSynth({
 			"volume" : -10,
 		    "filter": {
@@ -178,6 +191,10 @@
 		    }
 		}).connect(lowPass);
 
+		var closedHatPart = new Tone.Part(function(time){
+			closedHiHat.triggerAttack(time);
+		}, ["0*8n", "1*16n", "1*8n", "3*8n", "4*8n", "5*8n", "7*8n", "8*8n"]).start(0);
+
 		//BASS
 		var bassEnvelope = new Tone.AmplitudeEnvelope({
 		    "attack": 0.01,
@@ -194,6 +211,14 @@
 		var bass = new Tone.PulseOscillator("A2", 0.4).chain(bassFilter, bassEnvelope);
 		bass.start();
 
+		var bassPart = new Tone.Part(function(time, note){
+			bass.frequency.setValueAtTime(note, time);
+		    bassEnvelope.triggerAttack(time);
+		}, [["0:0", "A1"],
+			["0:2", "G1"],
+			["0:2:2", "C2"],
+			["0:3:2", "A1"]]).start(0);
+
 		//BLEEP
 		var bleepEnvelope = new Tone.AmplitudeEnvelope({
 		    "attack": 0.01,
@@ -202,9 +227,14 @@
 		    "release": 0,
 		}).toMaster();
 
+
 		var bleep = new Tone.Oscillator("A4").connect(bleepEnvelope);
 		bleep.start();
 
+		var bleepLoop = new Tone.Loop(function(time){
+			 bleepEnvelope.triggerAttack(time);
+		}, "2n").start(0);
+
 		//KICK
 		var kickEnvelope = new Tone.AmplitudeEnvelope({
 		    "attack": 0.01,
@@ -213,8 +243,7 @@
 		    "release": 0
 		}).toMaster();
 
-		var kick = new Tone.Oscillator("A2").connect(kickEnvelope);
-		kick.start();
+		var kick = new Tone.Oscillator("A2").connect(kickEnvelope).start();
 
 		kickSnapEnv = new Tone.ScaledEnvelope({
 		    "attack": 0.005,
@@ -225,44 +254,12 @@
 		    "max": 700
 		}).connect(kick.frequency);
 
-		var score = {
-		    "kick": ["0", "0:0:3", "0:2:0", "0:3:1"],
-		    "closedHiHat": ["0*8n", "1*16n", "1*8n", "3*8n", "4*8n", "5*8n", "7*8n", "8*8n"],
-		    "openHiHat": ["2*8n", "6*8n"],
-		    "bass": [
-		        ["0:0", "A1", "8n"],
-		        ["0:2", "G1", "8n"],
-		        ["0:2:2", "C2", "8n"],
-		        ["0:3:2", "A1", "8n"]
-		    ]
-		};
-
-		Tone.Note.parseScore(score);
-
-		Tone.Note.route("kick", function(time) {
-		    kickEnvelope.triggerAttack(time);
-		    kickSnapEnv.triggerAttack(time);
-		});
-
-		Tone.Note.route("closedHiHat", function(time) {
-		    closedHiHat.triggerAttack(time);
-		});
-
-		Tone.Note.route("openHiHat", function(time) {
-		    openHiHat.triggerAttack(time);
-		});
-
-		Tone.Note.route("bass", function(time, note) {
-		    bass.frequency.value = bass.frequency.toFrequency(note);
-		    bassEnvelope.triggerAttack(time);
-		});
-
-		//LOOP THE TRANSPORT
-
-		Tone.Transport.setInterval(function(time) {
-		    bleepEnvelope.triggerAttack(time);
-		}, "2n");
+		var kickPart = new Tone.Part(function(time){
+			kickEnvelope.triggerAttack(time);
+			kickSnapEnv.triggerAttack(time);
+		}, ["0", "0:0:3", "0:2:0", "0:3:1"]).start(0);
 
+		//TRANSPORT
 		Tone.Transport.loopStart = 0;
 		Tone.Transport.loopEnd = "1:0";
 		Tone.Transport.loop = true;

examples/index.html

@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/ExampleList.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">	
@@ -34,26 +35,24 @@
 			margin-bottom: 40px;
 		}
 	</style>
-	<div id="Content" class="FullScreen"></div>
+	<div id="Content" class="FullScreen">
+		<div id="ExampleList"></div>
+	</div>
 	<script type="text/javascript">
 
-		var container = $("<div>", {
-			"id" : "ExampleList",
-		}).appendTo("#Content");
+		var container = $("#ExampleList");
 
 		$(function(){
-			var topbar = $("<div>").attr("id", "TopBar");
-			$("body").prepend(topbar);
-			$("<div>")
-				.attr("id", "Homepage")
-				.attr("title", "github")
-				.html("<a href='http://github.com/TONEnoTONE/Tone.js'>Tone.js</a>")
-				.appendTo(topbar);
-			$("<div>")
-				.attr("id", "Examples")
-				.attr("title", "examples")
-				.html("<a href='./index.html'>examples</a>")
-				.appendTo(topbar);
+
+			$(function(){
+				var topbar = $("<div>").attr("id", "TopBar");
+				$("body").prepend(topbar);
+				var logo = new Logo({
+					"container" : topbar,
+					"height" : topbar.height() - 6,
+					"width" : 140
+				});
+			});
 
 			for (var catName in ExampleList){
 				$("<div>").addClass("Category").text(catName).appendTo(container);

examples/lfoEffects.html

@@ -8,8 +8,9 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -73,22 +74,9 @@
 	<script id="gui" type="text/javascript">
 
 	$(function(){
-		Notone.config({
-			"search" : false,
-			"expandInDrawer" : true,
-			"hideDrawer" : Interface.isMobile,
-			"drawer" : true,
-			"container" : "body"
-		});
-
-		var pannerGUI = Notone.add(panner, "AutoPanner");
-
-		var tremoloGUI = Notone.add(tremolo, "Tremolo");
-		
-		var filterGUI = Notone.add(filter, "AutoFilter");
 
 		new Interface.Dragger({
-			gui : pannerGUI,
+			tone : panner,
 			x : {
 				param : "frequency",
 				min : 0.1,
@@ -108,7 +96,7 @@
 		});
 
 		new Interface.Dragger({
-			gui : filterGUI, 
+			tone : filter, 
 			x : {
 				param : "frequency",
 				min : 0.1,
@@ -128,7 +116,7 @@
 		});
 
 		new Interface.Dragger({
-			gui : tremoloGUI,
+			tone : tremolo,
 			x : {
 				param : "frequency",
 				min : 0.1,

examples/mic.html

@@ -8,7 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -62,6 +64,36 @@
 			} else {
 
 				mic.open(function(){
+
+					var canvas = $("<canvas>").appendTo("#Content");
+
+					var context = canvas.get(0).getContext("2d");
+
+					context.canvas.width = canvas.width();
+					context.canvas.height = canvas.height();
+
+					function drawLoop(){
+						var canvasWidth = context.canvas.width;
+						var canvasHeight = context.canvas.height;
+						requestAnimationFrame(drawLoop);
+						//draw the waveform
+						context.clearRect(0, 0, canvasWidth, canvasHeight);
+						var values = analyser.analyse();
+						context.beginPath();
+						context.lineJoin = "round";
+						context.lineWidth = 6;
+						context.strokeStyle = "white";
+						context.moveTo(0, (values[0] / 255) * canvasHeight);
+						for (var i = 1, len = values.length; i < len; i++){
+							var val = values[i] / 255;
+							var x = canvasWidth * (i / (len - 1));
+							var y = val * canvasHeight;
+							context.lineTo(x, y);
+						}
+						context.stroke();
+					}
+					drawLoop();
+					
 					new Interface.Button({
 						type : "toggle",
 						text : "Start Mic",
@@ -75,34 +107,6 @@
 					});
 				});
 
-				var canvas = $("<canvas>").appendTo("#Content");
-
-				var context = canvas.get(0).getContext("2d");
-
-				context.canvas.width = canvas.width();
-				context.canvas.height = canvas.height();
-
-				function drawLoop(){
-					var canvasWidth = context.canvas.width;
-					var canvasHeight = context.canvas.height;
-					requestAnimationFrame(drawLoop);
-					//draw the waveform
-					context.clearRect(0, 0, canvasWidth, canvasHeight);
-					var values = analyser.analyse();
-					context.beginPath();
-					context.lineJoin = "round";
-					context.lineWidth = 6;
-					context.strokeStyle = "white";
-					context.moveTo(0, (values[0] / 255) * canvasHeight);
-					for (var i = 1, len = values.length; i < len; i++){
-						var val = values[i] / 255;
-						var x = canvasWidth * (i / (len - 1));
-						var y = val * canvasHeight;
-						context.lineTo(x, y);
-					}
-					context.stroke();
-				}
-				drawLoop();
 			}
 
 		});

examples/monoSynth.html

@@ -8,8 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -45,6 +46,14 @@
 				"decay" : 0.2,
 				"sustain" : 0.4,
 				"release" : 0.2,
+			},
+			"filterEnvelope" : {
+				"attack" : 0.005,
+				"decay" : 0.1,
+				"sustain" : 0.05,
+				"release" : 0.8,
+				"min" : 300,
+				"max" : 10000
 			}
 		}).toMaster();
 
@@ -52,15 +61,6 @@
 
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			Notone.add(synth);
 
 			var keyboard = new QwertyHancock({
 				id: "Keyboard",

examples/noises.html

@@ -8,8 +8,9 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -42,18 +43,9 @@
 
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			var noiseGUI = Notone.add(noise, "Noise");
 
 			new Interface.Dragger({
-				gui : noiseGUI,
+				tone : noise,
 				y : {
 					param : "volume",
 					min : -40,

examples/oscillator.html

@@ -8,8 +8,9 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -22,7 +23,7 @@
 	<div id="Content">
 		<div id="Title">Oscillator</div>
 		<div id="Explanation">
-			Click and drag the dot to hear the oscillator. The x-axis controls the freqency of the oscillator and the y-axis controls the amplitude.
+			Click and drag the dot to hear the oscillator. The x-axis controls the freqency of the oscillator and the y-axis controls the volume.
 			<br><br>
 			<a href="http://tonejs.org/docs/#Oscillator">Tone.Oscillator</a> docs.
 		</div>
@@ -36,21 +37,12 @@
 	</script>
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			var oscGUI = Notone.add(osc, "Oscillator");
 
 			new Interface.Dragger({
-				gui: oscGUI,
+				tone : osc,
 				x : {
 					param : "frequency",
-					min : 40,
+					min : 60,
 					max : 2000,
 					exp : 2
 				},

examples/pingPongDelay.html

@@ -8,8 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -46,15 +47,6 @@
 	</script>
 	<script type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			Notone.add(feedbackDelay);
 
 			new Interface.Loader();
 

examples/player.html

@@ -8,8 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -22,13 +23,8 @@
 	<div id="Content">
 		<div id="Title">Grains</div>
 		<div id="Explanation">
-			Click on the button to play short looped section (also called a grain)
+			Click on the button to play short looped section of the audio file
 			using <a href="http://tonejs.org/docs/#Player">Tone.Player</a>. 
-			When the loop becomes very small, it takes on another pitch value. 
-			<br><br>
-			The duration of the sample is &#8275;2.5 seconds. Any values for loopStart or loopEnd 
-			larger than the duration will just loop to the end of the sample. Also make sure 
-			that loopStart is smaller than loopEnd. 
 		</div>
 	</div>
 	<script type="text/javascript">
@@ -44,15 +40,6 @@
 	
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			var playerGUI = Notone.add(player, "player", ["loopStart", "loopEnd"]);
 
 			new Interface.Loader();
 

examples/polySynth.html

@@ -8,7 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -37,7 +39,11 @@
 
 	<script type="text/javascript">
 
-		var synth = new Tone.PolySynth(6, Tone.SimpleSynth).toMaster();
+		var synth = new Tone.PolySynth(6, Tone.SimpleSynth, {
+			"oscillator" : {
+				"partials" : [0, 2, 3, 4],
+			}
+		}).toMaster();
 
 	</script>
 

examples/quantization.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+	<title>Quantize</title>
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+	<script type="text/javascript" src="../build/Tone.js"></script>
+	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
+	<script type="text/javascript" src="./scripts/Interface.js"></script>
+
+	<link rel="stylesheet" type="text/css" href="./style/examples.css">
+
+	<script type="text/javascript">
+		// jshint ignore: start
+	</script>
+</head>
+<body>
+	<style type="text/css">
+		.Button {
+			width: calc(50% - 4px)!important;
+			float: left;
+			margin: 2px;
+		}
+	</style>
+	<div id="Content" class="FullScreen">
+		<div id="Title">Quantization</div>
+		<div id="Explanation">
+			Using the "@" symbol, <a href="https://github.com/Tonejs/Tone.js/wiki/Time" target="_blank">Time</a> 
+			expressions can be <a href="https://en.wikipedia.org/wiki/Quantization_(music)" target="_blank">quantized</a> 
+			(aligned to a subdivision). In this example, a note's start time is aligned to the given subdivision. 
+		</div>
+	</div>
+	<script id="JSCode" type="text/javascript">
+		var polySynth = new Tone.PolySynth(4, Tone.SimpleSynth).toMaster();
+
+		Tone.Transport.start();
+
+	</script>
+	<script id="gui" type="text/javascript">
+
+	$(function(){
+
+		new Interface.Transport();
+
+		new Interface.Button({
+			type : "moment",
+			text : "@1m",
+			start : function(){
+				polySynth.triggerAttackRelease("C2", "8n", "@1m", 2);
+			},
+		});
+
+		new Interface.Button({
+			type : "moment",
+			text : "@2n",
+			start : function(){
+				polySynth.triggerAttackRelease("G3", "8n", "@2n");
+			},
+		});
+
+		new Interface.Button({
+			type : "moment",
+			text : "@4n",
+			start : function(){
+				polySynth.triggerAttackRelease("E4", "8n", "@4n");
+			},
+		});
+
+		new Interface.Button({
+			type : "moment",
+			text : "@8n",
+			start : function(){
+				polySynth.triggerAttackRelease("B4", "8n", "@8n");
+			},
+		});
+	});
+		
+	</script>
+
+</body>
+</html>

examples/rampTo.html

@@ -8,7 +8,8 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
 	<script type="text/javascript" src="./scripts/nexusUI.js"></script>
 
@@ -53,7 +54,7 @@
 
 		var reverb = new Tone.JCReverb().toMaster();
 
-		for (var i = 0; i < 7; i++){
+		for (var i = 0; i < 8; i++){
 			oscillators["node" + i] = new Tone.Oscillator({
 				"frequency" : bassFreq * i,
 				"type" :  "sawtooth10",
@@ -68,7 +69,7 @@
 		nx.onload = function(){
 			nx.colorize("#7F33ED");
 
-			joints1.nodeSize = 45;
+			joints1.nodeSize = 25;
 			joints1.val.x = Math.random();
 			joints1.val.y = Math.random();
 			joints1.resize($("#Content").width(), 250);
@@ -76,7 +77,6 @@
 			var width = joints1.width;
 			var height = joints1.height;
 			joints1.threshold = Math.max($("#Content").width() / 1.5, 60);
-			randomPlacement();
 			joints1.init();
 			joints1.draw();
 
@@ -86,18 +86,6 @@
 				joints1.draw();
 			});
 
-			function randomPlacement(){
-				var width = $("#Content").width();
-				var height = joints1.height;
-				var len = Object.keys(oscillators).length;
-				for (var i = 0; i < len; i++){
-					joints1.joints[i] = {
-						x : Math.random() * width,
-						y : Math.random() * height
-					}
-				}
-			}
-
 			function setValues(data){
 				for (var n in oscillators){
 					if (data.hasOwnProperty(n)){

examples/scripts/Interface.js

@@ -14,11 +14,15 @@ var Interface = {
 $(function(){
 	var topbar = $("<div>").attr("id", "TopBar");
 	$("body").prepend(topbar);
-	$("<div>")
-		.attr("id", "Homepage")
-		.attr("title", "github")
-		.html("<a href='http://github.com/TONEnoTONE/Tone.js'>Tone.js</a>")
-		.appendTo(topbar);
+	
+	if (typeof Tone !== "undefined"){
+		var logo = new Logo({
+			"container" : topbar,
+			"height" : topbar.height() - 6,
+			"width" : 140
+		});
+
+	}
 	$("<div>")
 		.attr("id", "Examples")
 		.attr("title", "examples")
@@ -31,33 +35,13 @@ $(function(){
 		var element = $("<div>", {"id" : "MobileStart"}).appendTo("body");
 		$("<div>").attr("id", "Button")
 			.text("\u25B6")
-			.on("touchstart", function(e){
+			.on("touchstart touchend", function(e){
 				e.preventDefault();
 				Tone.startMobile();
 				element.remove();
 			})
 			.appendTo(element);  
 	}
-	//get the master output
-	if (typeof Tone !== "undefined"){
-		var meter = new Tone.Meter(2);
-		Tone.Master.connect(meter);
-		var meterElement = $("<div>").attr("id", "Meter").appendTo(topbar);
-		var leftLevel = $("<div>").addClass("Level")
-			.attr("id", "Left")
-			.appendTo(meterElement);
-		var rightLevel = $("<div>").addClass("Level")
-			.attr("id", "Right")
-			.appendTo(meterElement);
-		function update(){
-			requestAnimationFrame(update);
-			var leftHeight = 100 - Math.max(Math.min(Math.abs(meter.getDb(0)), 100), 0);
-			var rightHeight = 100 - Math.max(Math.min(Math.abs(meter.getDb(1)), 100), 0);
-			leftLevel.height(leftHeight + "%");
-			rightLevel.height(rightHeight + "%");
-		}
-		update();
-	}
 });
 
 /**
@@ -75,9 +59,9 @@ Interface.Loader = function(){
 		"text" : "Loading"
 	}).appendTo(this.element);
 
-	Tone.Buffer.onload = function(){
+	Tone.Buffer.on("load", function(){
 		this.element.addClass("Loaded");
-	}.bind(this);
+	}.bind(this));
 };
 
 /**
@@ -97,9 +81,9 @@ Interface.Dragger = function(params){
 	this.container = $("#DragContainer");
 
 	/**
-	 *  the gui
+	 *  the tone object
 	 */
-	this.gui = params.gui;
+	this.tone = params.tone;
 
 	/**
 	 *  callbacks
@@ -113,7 +97,7 @@ Interface.Dragger = function(params){
 	/**
 	 *  the name
 	 */
-	var name = params.name ? params.name : this.gui.name ? this.gui.name : "";
+	var name = params.name ? params.name : this.tone ? this.tone.toString() : "";
 
 	/**
 	 *  elements
@@ -142,7 +126,7 @@ Interface.Dragger = function(params){
 	var xParams = params.x;
 	xParams.axis = "x";
 	xParams.element = this.element;
-	xParams.gui = this.gui;
+	xParams.tone = this.tone;
 	xParams.container = this.container;
 	this.xAxis = new Interface.Slider(xParams);
 
@@ -152,7 +136,7 @@ Interface.Dragger = function(params){
 	var yParams = params.y;
 	yParams.axis = "y";
 	yParams.element = this.element;
-	yParams.gui = this.gui;
+	yParams.tone = this.tone;
 	yParams.container = this.container;
 	this.yAxis = new Interface.Slider(yParams);
 
@@ -203,9 +187,12 @@ Interface.Dragger.prototype._onend = function(e){
  */
 Interface.Slider = function(params){
 
-	this.gui = params.gui;
+	this.tone = params.tone;
 
-	var name = params.name ? params.name : this.gui ? this.gui.name : "";
+	/**
+	 *  the name
+	 */
+	var name = params.name ? params.name : this.tone ? this.tone.toString() : "";
 
 	/**
 	 *  callback functions
@@ -291,7 +278,10 @@ Interface.Slider = function(params){
 			maxSize = this.container[this.maxAxis]() - maxSize;
 		}
 
-		var paramValue = typeof params.value !== "undefined" ? params.value : this.gui.params[this.parameter].get();
+		var paramValue = typeof params.value !== "undefined" ? params.value : this.tone.get(this.parameter);
+		if (paramValue.hasOwnProperty(this.parameter)){
+			paramValue = paramValue[this.parameter];
+		}
 
 		if (this.options){
 			paramValue = this.options.indexOf(paramValue);
@@ -355,8 +345,8 @@ Interface.Slider.prototype._onend = function(){
 };
 
 Interface.Slider.prototype._setParam = function(value){
-	if (this.parameter && this.gui){
-		this.gui.params[this.parameter].set(value);
+	if (this.parameter && this.tone){
+		this.tone.set(this.parameter, value);
 	}
 };
 
@@ -452,4 +442,28 @@ Interface.Button.prototype._keyup = function(e){
 		e.preventDefault();
 		this._end();
 	}
+};
+
+/**
+ *
+ *	TRANSPORT
+ *  
+ */
+Interface.Transport = function(){
+
+	this.element = $("<div>", {
+		"class" : "Transport",
+	}).appendTo("#Content");
+
+	this.position = $("<div>", {
+		"id" : "Position"
+	}).appendTo(this.element);
+
+	this._boundLoop = this._loop.bind(this);
+	this._loop();
+};
+
+Interface.Transport.prototype._loop = function(){
+	setTimeout(this._boundLoop, 50);
+	this.position.text(Tone.Transport.position);
 };

examples/scripts/qwerty-hancock.js

@@ -1,7 +1,7 @@
 /*
- * Qwerty Hancock keyboard library v0.4.5
+ * Qwerty Hancock keyboard library v0.5.1
  * The web keyboard for now people.
- * Copyright 2012-14, Stuart Memo
+ * Copyright 2012-15, Stuart Memo
  *
  * Licensed under the MIT License
  * http://opensource.org/licenses/mit-license.php
@@ -9,8 +9,13 @@
  * http://stuartmemo.com/qwerty-hancock
  */
 
-(function (window, undefined) {
-    var version = '0.4.5',
+(function () {
+    var root = this;
+    /* In <script> context, `this` is the window.
+     * In node context (browserify), `this` is the node global.
+     */
+    var globalWindow = typeof global === 'undefined' ? root : root.window;
+    var version = '0.5.1',
         settings = {},
         mouse_is_down = false,
         keysDown = {},
@@ -278,7 +283,7 @@
             callback(element.title, getFrequencyOfNote(element.title));
         }
     };
- 
+
     /**
     * Create key DOM element.
     * @return {object} Key DOM element.
@@ -359,7 +364,7 @@
     var setKeyPressOffset = function (sorted_white_notes) {
         settings.keyPressOffset = sorted_white_notes[0] === 'C' ? 0 : 1;
     };
-    
+
     var createKeyboard = function () {
         var keyboard = {
             container: document.getElementById(settings.id),
@@ -410,7 +415,7 @@
             lightenUp(document.getElementById(key_pressed));
        }
     };
- 
+
     /**
      * Handle a keyboard key being released.
      * @param {element} key The DOM element of the key that was released.
@@ -437,12 +442,12 @@
         var that = this;
 
         // Key is pressed down on keyboard.
-        window.addEventListener('keydown', function (key) {
+        globalWindow.addEventListener('keydown', function (key) {
             keyboardDown(key, that.keyDown);
         });
- 
+
         // Key is released on keyboard.
-        window.addEventListener('keyup', function (key) {
+        globalWindow.addEventListener('keyup', function (key) {
             keyboardUp(key, that.keyUp);
         });
 
@@ -483,7 +488,7 @@
             keyboard_element.addEventListener('touchcancel', function (event) {
                 mouseOut(event.target, that.keyUp);
             });
-        } 
+        }
     };
 
     /**
@@ -504,5 +509,12 @@
         init.call(this, settings);
     };
 
-    window.QwertyHancock = QwertyHancock;
-})(window);
+    if (typeof exports !== 'undefined') {
+      if (typeof module !== 'undefined' && module.exports) {
+        exports = module.exports = QwertyHancock;
+      }
+      exports.QwertyHancock = QwertyHancock;
+    } else {
+      root.QwertyHancock = QwertyHancock;
+    }
+})(this);

examples/shiny.html

@@ -8,8 +8,10 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
+	<script type="text/javascript" src="./scripts/nexusUI.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
 
@@ -64,6 +66,15 @@
 		}
 	}).chain(distortion, drumCompress);
 
+	var hatsLoop = new Tone.Loop({
+		"callback" : function(time){
+			hats.triggerAttackRelease(0, "8n", time);
+		},
+		"interval" : "16n",
+		"probability" : 0.8
+	}).start("1m");
+
+	//SNARE PART
 	var snare = new Tone.Sampler("./audio/505/snare.mp3", {
 		"envelope" : {
 			"attack" : 0.01,
@@ -77,42 +88,39 @@
 			"min" : 3000,
 			"max" : 10000
 		},
-
 	}).chain(distortion, drumCompress);
 
-	var kick = new Tone.MonoSynth({
-		"portamento" : 0.00,
+	var snarePart = new Tone.Sequence(function(time, velocity){
+		snare.triggerAttackRelease(0, "8n", time, velocity);
+	}, [null, 1, null, [1, 0.3]]).start(0);
+
+	var kick = new Tone.DrumSynth({
+		"pitchDecay" : 0.01,
+		"octaves" : 6,
 		"oscillator" : {
-			"type" : "square"
-		},
-		"filter" : {
-			"Q" : 2,
-			"type" : "bandpass",
-			"rolloff" : -12
+			"type" : "square4"
 		},
 		"envelope" : {
-			"attack" : 0.01,
+			"attack" : 0.001,
 			"decay" : 0.2,
-			"sustain" : 0.0,
-			"release" : 0.2
-		},
-		"filterEnvelope" : {
-			"attack" : 0.01,
-			"decay" : 0.2,
-			"sustain" : 1,
-			"release" : 0.4,
-			"min" : 3000,
-			"max" : 30
+			"sustain" : 0
 		}
 	}).connect(drumCompress);
+
+	var kickPart = new Tone.Sequence(function(time, probability){
+		if (Math.random() < probability){
+			kick.triggerAttack("C1", time);
+		}
+	}, [1, [1, [null, 0.3]], 1, [1, [null, 0.5]], 1, 1, 1, [1, [null, 0.8]]], "2n").start(0);
 	
 	// BASS
 	var bass = new Tone.SimpleFM({
-		"harmonicity" : 2,
-		"modulationIndex" : 3,
+		"harmonicity" : 1,
+		"modulationIndex" : 3.5,
 		"carrier" : {
 			"oscillator" : {
-				"type" : "square"
+				"type" : "custom",
+				"partials" : [0, 1, 0, 2]
 			},
 			"envelope" : {
 				"attack" : 0.08,
@@ -122,7 +130,7 @@
 		},
 		"modulator" : {
 			"oscillator" : {
-				"type" : "sine"
+				"type" : "square"
 			},
 			"envelope" : {
 				"attack" : 0.1,
@@ -133,6 +141,23 @@
 		}
 	}).toMaster();
 
+
+	var bassPart = new Tone.Part(function(time, event){
+		if (Math.random() < event.prob){
+			bass.triggerAttackRelease(event.note, event.dur, time);
+		}
+	}, [{time : "0:0", note : "C2", dur : "4n + 8n", prob: 1}, {time : "0:2", note : "C2", dur : "8n", prob : 0.6}, 
+		{time : "0:2 + 4t", note : "C2", dur : "8n", prob : 0.4}, {time : "0:2 + 4t*2", note : "C2", dur : "8n", prob : 0.9},
+		{time : "1:0", note : "C2", dur : "4n + 8n", prob : 1}, {time : "1:2", note : "C2", dur : "8n", prob : 0.6}, 
+		{time : "1:2 + 4t", note : "C2", dur : "8n", prob : 0.4}, {time : "1:2 + 4t*2", note : "E2", dur : "8n", prob : 0.9},
+		{time : "2:0", note : "F2", dur : "4n + 8n", prob : 1}, {time : "2:2", note : "F2", dur : "8n", prob : 0.6}, 
+		{time : "2:2 + 4t", note : "F2", dur : "8n", prob : 0.4}, {time : "2:2 + 4t*2", note : "F2", dur : "8n", prob : 0.9},
+		{time : "3:0", note : "F2", dur : "4n + 8n", prob : 1}, {time : "3:2", note : "F2", dur : "8n", prob : 0.6}, 
+		{time : "3:2 + 4t", note : "F2", dur : "8n", prob : 0.4}, {time : "3:2 + 4t*2", note : "B1", dur : "8n", prob : 0.9}]).start(0);
+
+	bassPart.loop = true;
+	bassPart.loopEnd = "4m";
+
 	//SYNTH
 	var synth = new Tone.DuoSynth({
 		"vibratoAmount" : 0.5,
@@ -192,91 +217,16 @@
 		}
 	}).toMaster();
 
-	// SCORE //
-
 	var synthNotes = ["C2", "E2", "G2", "A2", 
 					  "C3", "D3", "E3", "G3", "A3", "B3", 
 					  "C4", "D4", "E4", "G4", "A4", "B4", "C5"];
 
-	//randomly generate a highhat score on each refresh
-	var highHatNotes = [];
-	for (var i = 0; i < 16*4; i++){
-		var probability = (i % 2) === 0 ? 1 : 0.2;
-		highHatNotes.push([i+"*16n", probability]);
-	}
-
-	var Score = {
-		"hats" : highHatNotes,
-		"kick" : [["0", 1],["0:2", 1], 
-				  ["1:0", 1],["1:2", 1], ["1:3:2", 0.3], 
-				  ["2:0", 1],["2:2", 1], 
-				  ["3:0", 1],["3:2", 1], ["3:3:2", 0.5]],
-		"snare" : ["0:1", "0:3", 
-				   "1:1", "1:3", 
-				   "2:1", "2:3", 
-				   "3:1", "3:3"],
-		"bass" : [["0:0", "C2", "4n + 8n", 1], ["0:2", "C2", "8n", 0.5], 
-				  ["0:2 + 4t", "C2", "8n", 0.2], ["0:2 + 4t*2", "C2", "8n", 0.7],
-				  ["1:0", "C2", "4n + 8n", 1], ["1:2", "C2", "8n", 0.5], 
-				  ["1:2 + 4t", "C2", "8n", 0.2], ["1:2 + 4t*2", "E2", "8n", 0.7],
-				  ["2:0", "F2", "4n + 8n", 1], ["2:2", "F2", "8n", 0.5], 
-				  ["2:2 + 4t", "F2", "8n", 0.2], ["2:2 + 4t*2", "F2", "8n", 0.7],
-				  ["3:0", "F2", "4n + 8n", 1], ["3:2", "F2", "8n", 0.5], 
-				  ["3:2 + 4t", "F2", "8n", 0.2], ["3:2 + 4t*2", "B1", "8n", 0.7]]
-	};
-	//parse the score
-	Tone.Note.parseScore(Score);
-
-
-	//modulate the globalProbability with an LFO so the probability of all the parts changes over time
-	var globalProbability = 0;
-	var probabilityLFO = 0;
-	setInterval(function(){
-		globalProbability = (Math.cos(probabilityLFO + Math.PI) + 1)/2;
-		probabilityLFO += 0.1;
-	}, 1000);
-
-	//route note events
-	Tone.Note.route("hats", function(time, probability){
-		if (Math.random() < probability + globalProbability / 2){
-			hats.triggerAttackRelease(0,"8n", time);
-		}
-	});
-	Tone.Note.route("kick", function(time, probability){
-		if (Math.random() < probability + globalProbability){
-			kick.triggerAttack("C2", time);
-		}
-	});
-	Tone.Note.route("snare", function(time){
-		snare.triggerAttack(0, time);
-	});
-	Tone.Note.route("bass", function(time, note, duration, probability){
-		if (Math.random() < probability + globalProbability){
-			bass.triggerAttack(note, time);
-		}
-	});
-
-	//setup the transport looping
-	Tone.Transport.setLoopPoints(0, "4m");
-	Tone.Transport.loop = true;
 	Tone.Transport.bpm.value = 125;
 
 	</script>
 	<script type="text/javascript">
 
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			Notone.add(synth, "Synth Lead");
-			Notone.add(bass, "Bass");
-			Notone.add(distortion, "Distortion");
-			Notone.add(drumCompress, "Drum Compressor");
 
 			new Interface.Button({
 				key : 32,
@@ -317,7 +267,7 @@
 				name : "Synth"
 			});
 
-			new Interface.Loader();
+			Interface.Loader();
 
 		});
 	</script>

examples/signal.html

@@ -8,7 +8,8 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -84,7 +85,7 @@
 	<script id="GUI" type="text/javascript">
 
 		$(function(){
-			Notone.config({
+			/*Notone.config({
 				"search" : false,
 				"expandInDrawer" : true,
 				"hideDrawer" : Interface.isMobile,
@@ -96,7 +97,7 @@
 
 			var leftOscGUI = Notone.add(leftOsc, "Left Oscillator", ["type"]);
 
-			var detuneLFOGUI = Notone.add(detuneLFO, "Detune LFO", ["type"]);
+			var detuneLFOGUI = Notone.add(detuneLFO, "Detune LFO", ["type"]);*/
 
 			new Interface.Slider({
 				drag : function(value){

examples/simpleSynth.html

@@ -8,8 +8,9 @@
 	
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="./style/examples.css">
@@ -55,7 +56,7 @@
 			"envelope" : {
 				"attack" : 0.01,
 				"decay" : 0.2,
-				"sustain" : 0.4,
+				"sustain" : 0.2,
 				"release" : 0.2,
 			}
 		}).toMaster();
@@ -64,16 +65,6 @@
 
 	<script id="GUI" type="text/javascript">
 		$(function(){
-			Notone.config({
-				"search" : false,
-				"expandInDrawer" : true,
-				"expandChildren" : true,
-				"hideDrawer" : Interface.isMobile,
-				"drawer" : true,
-				"container" : "body"
-			});
-
-			Notone.add(synth);
 
 			var keyboard = new QwertyHancock({
 				id: "Keyboard",

examples/stepSequencer.html

@@ -8,7 +8,8 @@
 
 	<script type="text/javascript" src="../build/Tone.js"></script>
 	<script type="text/javascript" src="./scripts/jquery.min.js"></script>
-	<script type="text/javascript" src="./scripts/Notone.GUI.js"></script>
+	<script type="text/javascript" src="./scripts/draggabilly.js"></script>
+	<script type="text/javascript" src="./scripts/Logo.js"></script>
 	<script type="text/javascript" src="./scripts/Interface.js"></script>
 	<script type="text/javascript" src="./scripts/nexusUI.js"></script>
 
@@ -25,7 +26,7 @@
 			margin-top: 3px;
 		}
 	</style>
-	<div id="Content" class="FullScreen">
+	<div id="Content">
 		<div id="Title">Tone.Transport</div>
 		<div id="Explanation">
 			<a href="http://tonejs.org/docs/#Transport">Tone.Transport</a> 
@@ -44,32 +45,29 @@
 			"E" : "./audio/casio/E2.mp3",
 			"F#" : "./audio/casio/Fs2.mp3",
 		}, {
+			"volume" : -10,
 			"envelope" : {
-				"release" : 0.2
+				// "release" : 0.2
 			}
 		}).toMaster();
-		keys.volume.value = -15;
 
-		//keep track of steps and notes
-		var stepNumber = 0;
-		var noteNames = ["A", "C#", "E", "F#"];
+		// var keys = new Tone.PolySynth(4, Tone.SimpleSynth).toMaster();
 
-		//the repeated callback
-		Tone.Transport.setInterval(function(time){
-			//get the notes at the step
-			var column = matrix1.matrix[stepNumber];
+		//the notes
+		var noteNames = ["F#", "E", "C#", "A"];
+		// var noteNames = ["F#3", "E3", "C#3", "A3"];
+
+		var loop = new Tone.Sequence(function(time, col){
+			var column = matrix1.matrix[col];
 			for (var i = 0; i < 4; i++){
 				if (column[i] === 1){
 					keys.triggerAttackRelease(noteNames[i], "32n", time);
 				}
 			}
-			stepNumber++;
-			stepNumber = stepNumber % 16;
-		}, "16n");
+		}, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], "16n");
+
+		Tone.Transport.start();
 
-		//transport settings
-		Tone.Transport.loopEnd = "1m";
-		Tone.Transport.loop = true;
 	</script>
 	<script type="text/javascript">
 		nx.onload = function(){
@@ -99,13 +97,15 @@
 				type : "toggle",
 				key : 32, //spacebar
 				start : function(){
-					Tone.Transport.start();
+					loop.start();
 				},
 				end : function(){
-					Tone.Transport.stop();
+					loop.stop();
 				},
 			});
 
+			Interface.Loader();
+
 			$(window).on("resize", function(){
 				matrix1.resize($("#Content").width(), 250);
 				matrix1.draw();	

examples/style/examples.css

@@ -1,9 +1,3 @@
-/**
- *  COLORS
- */
-/** 
- *  SIZING
- */
 /* FOR MOBILES */
 @media (max-width: 400px) {
   #TopBar #Homepage a {
@@ -11,7 +5,7 @@
 
   #Content {
     font-size: 10px !important;
-    max-width: calc(100% - 32px) !important; }
+    max-width: calc(100% - 6px) !important; }
 
   #Content * {
     font-size: 14px !important; } }
@@ -20,13 +14,6 @@ html, body {
   margin: 0px;
   height: calc(100% - 4px); }
 
-#NotoneDrawer {
-  top: 40.5px;
-  z-index: 2; }
-
-.Notone {
-  z-index: 3 !important; }
-
 /**
  *  
  *  TOP BAR
@@ -34,60 +21,28 @@ html, body {
  */
 #TopBar {
   background-color: black;
-  height: 34.5px;
+  height: 35px;
   margin: 3px;
   position: relative;
-  width: calc(100% - 2 * 3px);
+  width: calc(100% - 6px);
   font-family: monospace; }
-  #TopBar #Homepage {
-    position: relative;
-    float: left;
-    margin-left: 20px;
-    font-size: 24px;
-    line-height: 34.5px;
-    color: white; }
-    #TopBar #Homepage a {
-      line-height: inherit;
-      height: 100%;
-      position: absolute;
-      font-size: 24px;
-      color: white;
-      text-transform: none;
-      text-decoration: none;
-      margin-left: 0px; }
+  #TopBar #TonejsLogo {
+    position: absolute;
+    top: 3px; }
   #TopBar #Examples {
-    left: 50%;
-    height: 34.5px;
-    line-height: 34.5px;
-    position: absolute; }
+    right: 10px;
+    top: 0px;
+    height: 35px;
+    line-height: 35px;
+    position: absolute;
+    width: 100px;
+    text-align: left; }
     #TopBar #Examples a {
       position: absolute;
       font-size: 14px;
-      left: 50%;
-      -webkit-transform: translate(-50%, 0);
-          -ms-transform: translate(-50%, 0);
-              transform: translate(-50%, 0);
-      text-align: center;
       color: white;
       text-transform: none;
-      text-decoration: none;
-      margin-left: 0px; }
-  #TopBar #Meter {
-    width: 50px;
-    height: calc(100% - 10px);
-    position: absolute;
-    right: 3px;
-    top: 5px; }
-    #TopBar #Meter .Level {
-      height: 100%;
-      position: absolute;
-      width: 47%;
-      background-color: #59d72e;
-      bottom: 0px; }
-    #TopBar #Meter #Left {
-      left: 0px; }
-    #TopBar #Meter #Right {
-      right: 0px; }
+      text-decoration: none; }
 
 #MobileStart {
   position: absolute;
@@ -118,21 +73,18 @@ html, body {
     background-color: #ED33CF;
     color: #22DBC0; }
 
-.Mobile #Content {
-  width: calc(100% - 28px); }
-
 #Content {
   font-family: monospace;
   position: absolute;
-  right: 3px;
-  width: calc(100% - 280px);
+  left: 3px;
+  width: calc(100% - 6px);
   margin-bottom: 15px; }
   #Content #Title {
     height: 23px;
     line-height: 23px;
     font-size: 1.2em;
     color: white;
-    width: calc(100% - padding);
+    width: calc(100% - 15px);
     padding-left: 15px;
     background-color: black; }
   #Content #Explanation {
@@ -237,7 +189,7 @@ html, body {
   #Content .Button:hover {
     color: white;
     background-color: #3833ED; }
-  #Content .Button:hover:active, #Content .Button:hover:active.Active {
+  #Content .Button:hover:active, #Content #Content .Button:hover:active.Active {
     color: #22DBC0;
     background-color: #ED33CF; }
   #Content .Button.Toggle.Active {
@@ -246,17 +198,30 @@ html, body {
     line-height: 84px;
     color: black;
     background-color: white; }
-
-#Content.FullScreen {
-  width: calc(100% - 6px) !important;
-  max-width: calc(100% - 6px) !important; }
+  #Content .Transport {
+    width: 100%;
+    height: 30px;
+    background-color: black;
+    line-height: 30px;
+    color: white;
+    border-radius: 10px;
+    margin-top: 3px;
+    position: relative; }
+    #Content .Transport #Position {
+      width: 70px;
+      left: 50%;
+      margin-left: -35px;
+      text-align: left;
+      height: 100%;
+      position: absolute;
+      color: white; }
 
 #Keyboard {
   margin: 3px !important; }
 
 code {
   background-color: #ECECEC;
-  color: #8C8C8C;
+  color: #333;
   padding: 1px; }
 
 #Loading {