A HECK A LOT OF SOUNDS

css/index.css

@@ -110,6 +110,12 @@ b, strong{
 	line-height: 25px;
 	color: #aaa;
 	text-align: right;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none; 
+	
 }
 #container > #skip:hover{
 	color: #ccc;

index.html

@@ -371,6 +371,7 @@ MY "WHY" FOR MAKING THIS:
 	<br>
 	Draw a network &amp; run the simulation,
 	so that <i>everyone</i> gets infected with the "contagion".
+	<br>
 	(new rule: you can't cut the <i>thick</i> connections)
 </words>
 
@@ -403,8 +404,11 @@ MY "WHY" FOR MAKING THIS:
 
 	Now, let's simulate what happens if people <i>do</i> start drinking
 	<i>when 50%+ of their friends do!</i> 
-	<b>Before you start the sim, ask yourself what you think <i>should</i> happen.
-	Now, run the sim, and see what actually happens! &rarr;</b>
+	<b>Before you start the sim, ask yourself what you think <i>should</i> happen.</b>
+
+	<br><br>
+	
+	<b>Now, run the sim, and see what actually happens! &rarr;</b>
 
 </words>
 

js/chapters/A_Preloader.js

@@ -46,6 +46,7 @@ SLIDES.push(
 		// START, FOR REAL
 		button.onclick = function(){
 			publish("START");
+			publish("sound/button");
 		};
 
 	},

js/chapters/C_Networks.js

@@ -32,19 +32,19 @@ SLIDES.push(
 		{
 			type:"box",
 			id:"connect_words",
-			text:"networks_tutorial_connect", x:280, y:183, w:400, align:"center", color:"#ccc"
+			text:"networks_tutorial_connect", x:280, y:183-7, w:400, align:"center", color:"#bbb"
 		},
 		{
 			type:"box",
 			id:"connect_pic",
-			img:"sprites/tutorial_connect.png", x:330, y:150, w:300, h:100
+			img:"sprites/tutorial_connect.png", x:330, y:150-7, w:300, h:100
 		},
 
 		// "Disconnect" instruction (words & picture)
 		{
 			type:"box",
 			id:"disconnect_words",
-			text:"networks_tutorial_disconnect", x:280, y:280, w:400, align:"center", color:"#ccc"
+			text:"networks_tutorial_disconnect", x:280, y:280, w:400, align:"center", color:"#bbb"
 		},
 		{
 			type:"box",

js/chapters/D_Simple_Contagion.js

@@ -171,7 +171,10 @@ SLIDES.push(
 				var boxes = slideshow.boxes;
 				boxes.showChildByID("end", true);
 				state.ended = true;
-				sim.win();
+				sim.win({
+					small:true,
+					x:280, y:200, width:400, height:200
+				});
 			}
 		}
 

js/chapters/E_Complex_Contagion.js

@@ -132,7 +132,9 @@ SLIDES.push(
 				boxes.removeChildByID("complex_complex_3", true);
 				boxes.showChildByID("end", true);
 				state.ended = true;
-				sim.win();
+				sim.win({
+					small:true
+				});
 			}
 		}
 
@@ -326,7 +328,8 @@ SLIDES.push(
 								//boxes.showChildByID("end", true);
 								sim.win({
 									x:350, y:270-90,
-									width:260, height:260
+									width:260, height:260,
+									small:true
 								});
 							},350);
 							setTimeout(function(){

js/chapters/F_Bonding_And_Bridging.js

@@ -24,7 +24,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 3,
 				scale: 1,
-				_wisdom: true
+				_wisdom: true,
+				NO_BONK: true
 			}
 		},
 
@@ -81,7 +82,8 @@ SLIDES.push(
 				state.ended = true;
 				sim.win({
 					x:330+5, y:160-120+5,
-					width:280, height:280
+					width:280, height:280,
+					small:true
 				});
 			}
 		}

js/chapters/H_Conclusion.js

@@ -88,6 +88,10 @@ SLIDES.push(
 		{type:"box", id:"conclusion_3"}
 	],
 	onstart: function(slideshow, state){
+
+		// SOUND
+		SOUNDS.chimes.play();
+
 		// splash animation, then auto-next to CREDITS.
 		var splash = slideshow.simulations.sims[0];
 		splash.options.CONCLUSION = true;
@@ -95,6 +99,7 @@ SLIDES.push(
 		setTimeout(function(){
 			slideshow.next();
 		},7000);
+
 	},
 	onupdate: function(slideshow, state){
 		var splash = slideshow.simulations.sims[0];

js/main.js

@@ -46,6 +46,7 @@ subscribe("START", function(){
 	// Show Skip Button
 	$("#skip").style.display = "block";
 	$("#skip").onclick = function(){
+		publish("sound/button");
 		slideshow.next();
 	};
 

js/sim/Connection.js

@@ -39,10 +39,19 @@ function Connection(config){
 		var dy = self.to.y - self.from.y;
 		var a = Math.atan2(dy,dx);
 		var dist = Math.sqrt(dx*dx + dy*dy);
+		ctx.rotate(a);
+
+		// SHAKE
+		if(self.shaking>=0 && self.shaking<1){
+			self.shaking+=0.05;
+			var amplitude = (1-self.shaking)*3;
+			ctx.translate(0, Math.sin(self.shaking*Math.TAU*3)*amplitude);
+		}
+
 		self.sprite.scaleX = dist/300;
 		self.sprite.scaleY = self.uncuttable ? 1 : 0.5; // thick=uncuttable
 		//self.sprite.scaleY *= s;
-		self.sprite.rotation = a;
+		//self.sprite.rotation = a;
 		self.sprite.draw(ctx);
 		ctx.restore();
 
@@ -117,5 +126,9 @@ function Connection(config){
 		}
 
 	};
+	self.shaking = -1;
+	self.shake = function(){
+		self.shaking = 0;
+	};
 
 }

js/sim/ConnectorCutter.js

@@ -10,6 +10,21 @@ function ConnectorCutter(config){
 	self.isCutting = false;
 	self.cutTrail = [];
 
+	// SNIP & PLUCK SOUND
+	var _SNIP_SOUND = 0;
+	var _SNIP = function(){
+		_SNIP_SOUND = (_SNIP_SOUND+1)%3;
+		SOUNDS["snip"+_SNIP_SOUND].play();
+	};
+	var _PLUCK_SOUND_INDEX = 0;
+	var _PLUCK_SOUND = [0,1,2,3,2,1];
+	var _PLUCK = function(){
+		var soundName = "pluck"+_PLUCK_SOUND[_PLUCK_SOUND_INDEX];
+		SOUNDS[soundName].play();
+		_PLUCK_SOUND_INDEX++;
+		if(_PLUCK_SOUND_INDEX >= _PLUCK_SOUND.length) _PLUCK_SOUND_INDEX=0;
+	};
+
 	// Update!
 	self.state = 0; // 0-nothing | 1-connecting | 2-cutting
 	self.sandbox_state = 0; // 0-pencil | 1-add_peep | 2-add_infected | 3-move | 4-delete | 5-bomb
@@ -44,8 +59,14 @@ function ConnectorCutter(config){
 					// Clicked on a peep?
 					var peepClicked = self.sim.getHoveredPeep(20);
 					if(peepClicked){
+
 						self.state = 1; // START CONNECTING
 						self.connectFrom = peepClicked;
+
+						// SOUND!
+						SOUNDS.pencil_short.volume(0.37);
+						SOUNDS.pencil_short.play();
+
 					}else{
 						self.state = 2; // START ERASING
 					}
@@ -59,7 +80,14 @@ function ConnectorCutter(config){
 					if(self.state==1){
 						var peepReleased = self.sim.getHoveredPeep(20);
 						if(peepReleased){
-							self.sim.addConnection(self.connectFrom, peepReleased);
+							var successfulConnection = self.sim.addConnection(self.connectFrom, peepReleased);
+
+							// SOUND!
+							if(successfulConnection){
+								SOUNDS.pencil.volume(0.37);
+								SOUNDS.pencil.play();
+							}
+
 						}
 					}
 
@@ -100,7 +128,13 @@ function ConnectorCutter(config){
 
 				// Try cutting
 				var line = [mouse.lastX, mouse.lastY, mouse.x, mouse.y];
-				self.sim.tryCuttingConnections(line);
+				var wasLineCut = self.sim.tryCuttingConnections(line);
+				if(wasLineCut==1){ // snip!
+					_SNIP();
+				}
+				if(wasLineCut==-1){ // uncuttable
+					_PLUCK();
+				}
 			
 				// Add to trail
 				self.cutTrail.unshift([mouse.x,mouse.y]); // add to start

js/sim/Simulations.js

@@ -119,6 +119,13 @@ function Sim(config){
 
 	self.id = config.id;
 
+	// CONTAGION SOUND
+	var _CONTAGION_SOUND = 0;
+	var _PLAY_CONTAGION_SOUND = function(){
+		_CONTAGION_SOUND = (_CONTAGION_SOUND+1)%3;
+		SOUNDS["contagion"+_CONTAGION_SOUND].play();
+	};
+
 	// Canvas
 	if(config.fullscreen){
 		var container = $("#simulations_container");
@@ -343,10 +350,23 @@ function Sim(config){
 		if(self.wonBefore) return;
 		self.wonBefore = true;
 
+		// SOUND!
+		if(bounds && bounds.small){
+			SOUNDS.party_short.play();
+		}else{
+			SOUNDS.party.play();
+		}
+
+		// AMOUNT OF CONFETTI
+		var AMOUNT_OF_CONFETTI = 100;
+		if(bounds && bounds.small){
+			AMOUNT_OF_CONFETTI = 50;
+		}
+
 		// Get center of peeps
 		var fullscreenOffsetX = config.x + simOffset.x;
 		var fullscreenOffsetY = config.y + simOffset.y;
-		bounds = bounds || getBoundsOfPoints(self.peeps); // OPTIONAL BOUNDS
+		if(!bounds || !bounds.x) bounds = getBoundsOfPoints(self.peeps); // OPTIONAL BOUNDS
 		var cx = bounds.x + bounds.width/2;
 		var cy = bounds.y + bounds.height/2;
 		cx += fullscreenOffsetX;
@@ -360,7 +380,7 @@ function Sim(config){
 		self.winWord.ticker = 0;
 
 		// Place confetti
-		for(var i=0; i<100; i++){
+		for(var i=0; i<AMOUNT_OF_CONFETTI; i++){
 			var angle = Math.random()*Math.TAU;
 			var burst = bounds.width/15;
 			var frame = Math.floor(Math.random()*5);
@@ -392,15 +412,38 @@ function Sim(config){
 		self.networkConfig = self.getCurrentNetwork();
 	};
 
+	self._canPlayBonkSound = true;
+
 	self.reload = function(){
 		var contagionLevel = self.contagion; // hack for sandbox: keep contagion the same
 		self.STEP = 0;
+		self._canPlayBonkSound = true;
 		self.init();
 		self.contagion = contagionLevel;
 	};
 
 	self.nextStep = function(){
 
+		// SOUND! If anyone can be infected, play Contagion sound.
+		// Otherwise play Bonk sound ONCE
+		var canBeInfected = self.peeps.filter(function(peep){
+			return !peep.infected && peep.isPastThreshold;
+		}).length;
+		var isEveryoneInfected = true;
+		self.peeps.forEach(function(peep){
+			if(!peep.infected) isEveryoneInfected=false;
+		});
+		if(canBeInfected>0){
+			_PLAY_CONTAGION_SOUND();
+		}else if(self._canPlayBonkSound && !isEveryoneInfected){
+			self._canPlayBonkSound = false;
+
+			if(!config.options.NO_BONK){
+				SOUNDS.bonk.play();
+			}
+			
+		}
+
 		// "Infect" the peeps who need to get infected
 		setTimeout(function(){
 			self.STEP++;
@@ -565,11 +608,20 @@ function Sim(config){
 		});
 	};
 	self.tryCuttingConnections = function(line){
+		var wasLineCut = 0;
 		for(var i=self.connections.length-1; i>=0; i--){ // going BACKWARDS coz killing connections
 			var c = self.connections[i];
-			if(c.uncuttable) continue; // don't touch the UNCUTTABLES
-			if(c.hitTest(line)) self.connections.splice(i,1);
+			if(c.hitTest(line)){
+				if(c.uncuttable){ // can't cut uncuttables!
+					wasLineCut = -1;
+					c.shake();
+				}else{
+					wasLineCut = 1;
+					self.connections.splice(i,1);
+				}
+			}
 		}
+		return wasLineCut;
 	};
 	self.removeAllConnectedTo = function(peep){
 		for(var i=self.connections.length-1; i>=0; i--){ // backwards index coz we're deleting

js/slideshow/Boxes.js

@@ -83,6 +83,7 @@ function Boxes(){
 			nextButton.className = "next_button";
 			nextButton.innerHTML = next.innerHTML;
 			nextButton.onclick = function(){
+				publish("sound/button");
 				slideshow.next();
 			};
 
@@ -104,6 +105,7 @@ function Boxes(){
 			ref.onclick = function(){
 				var id = ref.id;
 				publish("reference/show",[id]);
+				publish("sound/button");
 			};
 		});
 
@@ -113,6 +115,7 @@ function Boxes(){
 			bon.innerHTML = "(?) "+title;
 			bon.onclick = function(){
 				publish("bonus/show", [bon.id]);
+				publish("sound/button");
 			};
 		});
 
@@ -171,4 +174,4 @@ function Boxes(){
 
 	};
 
-}
+}

js/slideshow/Modal.js

@@ -24,6 +24,7 @@ window.Modal = {
 		$("#modal").setAttribute("size", large ? "large" : "small");
 	},
 	hide: function(){
+		publish("sound/button");
 		$("#modal_container").removeAttribute("show");
 	}
 };

js/slideshow/Navigation.js

@@ -27,6 +27,7 @@ function Navigation(){
 		if(chapter){
 			(function(nav, chapter){
 				nav.onclick = function(){
+					publish("sound/button");
 					slideshow.gotoChapter(chapter);
 				};
 			})(nav, chapter);

js/slideshow/Preloader.js

@@ -3,12 +3,19 @@ subscribe("prepreload", function(){
 
 	Preload([
 
-		// For the Sim
+		// For the Splash
 		{id:"button_large", image:"sprites/button_large.png"},
 		{id:"line", image:"sprites/line.png"},
 		{id:"peeps", image:"sprites/peeps.png"},
 		{id:"pencil", image:"sprites/pencil.png"},
 
+		// Sound Effects
+		{id:"pencil", audio:"audio/pencil.mp3"},
+		{id:"pencil_short", audio:"audio/pencil_short.mp3"},
+		{id:"snip0", audio:"audio/snip0.mp3"},
+		{id:"snip1", audio:"audio/snip1.mp3"},
+		{id:"snip2", audio:"audio/snip2.mp3"},
+
 	],function(progress){
 		console.log("Pre-Preloader: "+progress);
 		if(progress==1){
@@ -16,7 +23,7 @@ subscribe("prepreload", function(){
 			pre_preloader.parentNode.removeChild(pre_preloader);
 			
 			slideshow.gotoChapter("Preloader");
-			//slideshow.gotoChapter("SmallWorld-Explanation");
+			//slideshow.gotoChapter("Simple-Cascade");
 
 			publish("preload");
 		}
@@ -33,9 +40,35 @@ subscribe("preload", function(){
 		// Music
 		{id:"bg_music", audio:"audio/bg_music.mp3"},
 
+		// Sound Effects
+		{id:"bonk", audio:"audio/bonk.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:"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:"scratch_in", audio:"audio/scratch_in.mp3"},
+		{id:"scratch_out", audio:"audio/scratch_out.mp3"},
+
 		// For the slides
+		{id:"icons/blue", image:"sprites/icons/blue.png"},
+		{id:"icons/gray", image:"sprites/icons/gray.png"},
+		{id:"icons/red", image:"sprites/icons/red.png"},
+		{id:"icons/yellow", image:"sprites/icons/yellow.png"},
+		{id:"confetti", image:"sprites/confetti.png"},
+		{id:"nasa", image:"sprites/nasa.png"},
+		{id:"red_button", image:"sprites/red_button.png"},
 		{id:"sandbox_tools", image:"sprites/sandbox_tools.png"},
 		{id:"scratch", image:"sprites/scratch.png"},
+		{id:"small_world", image:"sprites/small_world.png"},
 		{id:"tutorial_connect", image:"sprites/tutorial_connect.png"},
 		{id:"tutorial_disconnect", image:"sprites/tutorial_disconnect.png"},
 

js/slideshow/SandboxUI.js

@@ -158,6 +158,7 @@ function ChooseOne(config){
 
 		// On Input
 		buttonDOM.onclick = function(){
+			publish("sound/button");
 			self.highlight(buttonDOM); // highlight
 			config.oninput(value); // input
 		};

js/slideshow/Scratch.js

@@ -4,14 +4,26 @@ function Scratch(){
 	self.dom = $("#scratch");
 
 	self.scratchIn = function(){
+
+		// SOUND!
+		SOUNDS.scratch_in.play();
+
+		// anim
 		self.startUpdateLoop(false, function(){
 			self.dom.style.display = "none";
 		});
+		
 	};
 
 	self.scratchOut = function(){
+
+		// SOUND!
+		SOUNDS.scratch_in.play();
+
+		// anim
 		self.dom.style.display = "block";
 		self.startUpdateLoop(true);
+
 	};
 
 	self.startUpdateLoop = function(out, callback){

js/slideshow/SimUI.js

@@ -15,6 +15,7 @@ function SimUI(container, color){
 		event.stopPropagation();
 	};
 	startButton.onclick = function(event){
+		publish("sound/button");
 		if(!Simulations.IS_RUNNING){
 			Simulations.IS_RUNNING = true;
 			publish("sim/start");

js/slideshow/Slideshow.js

@@ -181,3 +181,13 @@ function Slideshow(){
 	}
 
 }
+
+////////////////////////////////
+// BUTTON SOUNDS COZ WHATEVER //
+////////////////////////////////
+
+var _BUTTON_SOUND = 0;
+subscribe("sound/button",function(){
+	_BUTTON_SOUND = (_BUTTON_SOUND+1)%3;
+	SOUNDS["button"+_BUTTON_SOUND].play();
+});