audio on off and stuff

css/index.css

@@ -277,6 +277,37 @@ b, strong{
 	-ms-user-select: none;
 	user-select: none; 
 }
+#sound{
+	color: #fff;
+	width: 150px;
+    font-size: 30px;
+    height: 60px;
+}
+#sound_icon{
+	width: 60px; height: 60px;
+	position: absolute;
+}
+#sound_on, #sound_off{
+	position: absolute;
+	left:60px;
+	padding: 15px 0;
+    display: block;
+    line-height: 28px;
+    display: none;
+    letter-spacing: 2px;
+}
+#sound[mute=no] > #sound_icon{
+	background: rgba(255,255,255,0.5);
+}
+#sound[mute=yes] > #sound_icon{
+	background: rgba(255,255,255,0.25);
+}
+#sound[mute=no] > #sound_on{
+	display: block;
+}
+#sound[mute=yes] > #sound_off{
+	display: block;
+}
 #navigation{
 
 	display: none;

index.html

@@ -52,7 +52,11 @@ MY "WHY" FOR MAKING THIS:
 		
 		<!-- Navigation: Audio, Contents, Share, Translations -->
 		<div id="navigation_container">
-			<div id="audio"></div>
+			<div id="sound" mute="no">
+				<div id="sound_icon"></div>
+				<span id="sound_on">ON</span>
+				<span id="sound_off">OFF</span>
+			</div>
 			<div id="navigation">
 
 				<!-- The chapters -->

js/sim/ConnectorCutter.js

@@ -152,8 +152,6 @@ function ConnectorCutter(config){
 		if(self.sandbox_state!=0){
 			if(mouse.justPressed){
 
-				// TODO: Publish sound effects!
-
 				// Add Peep
 				if(self.sandbox_state==1){
 					self.sim._addPeepAtMouse(false); // not infected
@@ -174,6 +172,10 @@ function ConnectorCutter(config){
 					var contagionLevel = self.sim.contagion; // hack for sandbox: keep contagion the same
 					self.sim.clear();
 					self.sim.contagion = contagionLevel;
+
+					// Sound!
+					SOUNDS.boom.play();
+
 				}
 
 			}

js/sim/Peep.js

@@ -133,7 +133,7 @@ function Peep(config){
 			// Travel Clockwise
 			var spin = getUnitVector(self);
 			spin = rotateVector(spin, Math.TAU/4);
-			spin = multiplyVector(spin, 0.02);
+			spin = multiplyVector(spin, 0.02*0.8);
 			self.velocity = addVectors(self.velocity, spin);
 
 			// Air Friction

js/sim/Simulations.js

@@ -120,10 +120,12 @@ function Sim(config){
 	self.id = config.id;
 
 	// CONTAGION SOUND
-	var _CONTAGION_SOUND = 0;
+	//var _CONTAGION_SOUND = 0;
 	var _PLAY_CONTAGION_SOUND = function(){
-		_CONTAGION_SOUND = (_CONTAGION_SOUND+1)%3;
-		SOUNDS["contagion"+_CONTAGION_SOUND].play();
+		//_CONTAGION_SOUND = (_CONTAGION_SOUND+1)%3;
+		//SOUNDS["contagion"+_CONTAGION_SOUND].play();
+		SOUNDS.contagion.volume(0.75);
+		SOUNDS.contagion.play();
 	};
 
 	// Canvas
@@ -502,6 +504,11 @@ function Sim(config){
 				_draggingPeep = hoveredPeep;
 				_draggingOffset.x = _draggingPeep.x-self.mouse.x;
 				_draggingOffset.y = _draggingPeep.y-self.mouse.y;
+
+				// Sound!
+				SOUNDS.squeak_down.volume(0.6);
+				SOUNDS.squeak_down.play();
+
 			}
 		}
 	};
@@ -509,7 +516,13 @@ function Sim(config){
 		self._stopMove();	
 	}));
 	self._stopMove = function(){
+		
+		// Sound!
+		SOUNDS.squeak_up.volume(0.6);
+		SOUNDS.squeak_up.play();
+
 		_draggingPeep = null;
+
 	};
 	_keyHandlers.push(subscribe("key/down/1",function(){
 		_resetConnectorCutter();
@@ -520,18 +533,25 @@ function Sim(config){
 		self._addPeepAtMouse(true);
 	}));
 	self._addPeepAtMouse = function(infected){
-		//var overlapPeep = self.getHoveredPeep(20);
-		//if(!overlapPeep){
+
+		// SOUND
+		SOUNDS.pop.play();
+
 		self.addPeep(self.mouse.x, self.mouse.y, infected);
-		//}
+
 	};
 	_keyHandlers.push(subscribe("key/down/delete",function(){
 		_resetConnectorCutter();
 		self._deletePeep();	
 	}));
 	self._deletePeep = function(){
+
+		// SOUND
+		SOUNDS.trash.play();
+
 		var toDeletePeep = self.getHoveredPeep(0);
 		if(toDeletePeep) self.removePeep(toDeletePeep);
+
 	};
 
 	self.getCurrentNetwork = function(){

js/slideshow/Navigation.js

@@ -83,4 +83,16 @@ function Navigation(){
 		}
 	});
 
+	// Sound
+	var isMute = false;
+	$("#sound").onclick = function(){
+		if(isMute){
+			Howler.mute(isMute = false);
+			$("#sound").setAttribute("mute","no");
+		}else{
+			Howler.mute(isMute = true);
+			$("#sound").setAttribute("mute","yes");
+		}
+	};
+
 }

js/slideshow/Preloader.js

@@ -17,7 +17,6 @@ subscribe("prepreload", function(){
 		{id:"snip2", audio:"audio/snip2.mp3"},
 
 	],function(progress){
-		console.log("Pre-Preloader: "+progress);
 		if(progress==1){
 			var pre_preloader = $("#pre_preloader");
 			pre_preloader.parentNode.removeChild(pre_preloader);
@@ -42,21 +41,24 @@ subscribe("preload", function(){
 
 		// Sound Effects
 		{id:"bonk", audio:"audio/bonk.mp3"},
+		{id:"boom", audio:"audio/boom.mp3"},
 		{id:"button0", audio:"audio/button0.mp3"},
 		{id:"button1", audio:"audio/button1.mp3"},
 		{id:"button2", audio:"audio/button2.mp3"},
 		{id:"chimes", audio:"audio/chimes.mp3"},
-		{id:"contagion0", audio:"audio/contagion0.mp3"},
-		{id:"contagion1", audio:"audio/contagion1.mp3"},
-		{id:"contagion2", audio:"audio/contagion2.mp3"},
+		{id:"contagion", audio:"audio/contagion.mp3"},
 		{id:"party", audio:"audio/party.mp3"},
 		{id:"party_short", audio:"audio/party_short.mp3"},
 		{id:"pluck0", audio:"audio/pluck0.mp3"},
 		{id:"pluck1", audio:"audio/pluck1.mp3"},
 		{id:"pluck2", audio:"audio/pluck2.mp3"},
 		{id:"pluck3", audio:"audio/pluck3.mp3"},
+		{id:"pop", audio:"audio/pop.mp3"},
 		{id:"scratch_in", audio:"audio/scratch_in.mp3"},
 		{id:"scratch_out", audio:"audio/scratch_out.mp3"},
+		{id:"squeak_down", audio:"audio/squeak_down.mp3"},
+		{id:"squeak_up", audio:"audio/squeak_up.mp3"},
+		{id:"trash", audio:"audio/trash.mp3"},
 
 		// For the slides
 		{id:"icons/blue", image:"sprites/icons/blue.png"},
@@ -73,7 +75,6 @@ subscribe("preload", function(){
 		{id:"tutorial_disconnect", image:"sprites/tutorial_disconnect.png"},
 
 	],function(progress){
-		console.log("Preloader: "+progress);
 		window.PRELOAD_PROGRESS = progress;
 	});