HOT NEW ART

css/index.css

@@ -1,10 +1,10 @@
 /* FONT FACE */
 @font-face {
-  font-family: "PatrickHand";
-  font-style: normal;
-  font-weight: 400;
-  src: url(PatrickHand-Regular.ttf) format('truetype');
-  /*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
+	font-family: "PatrickHand";
+	font-style: normal;
+	font-weight: 400;
+	src: url(PatrickHand-Regular.ttf) format('truetype');
+	/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
 }
 
 /* HTML & BODY */
@@ -113,24 +113,28 @@ b, strong{
 }
 .sim_ui > div{
 	position: absolute;
-	background: #dd4040;
 	color: #fff;
 	text-align: center;
 	border-radius: 10px;
 }
-.sim_ui > #reset_button{
-	width: 150px;
-	left:25px;
-	top:0px;
-	font-size: 0.8em;
-	transition: top 0.3s ease-in-out;
-}
 .sim_ui > #start_button{
 	width: 200px;
 	padding: 0.5em 0;
+	background-image: url(../sprites/red_button.png);
+	background-size: 100% auto;
+
+	position: relative;
+	top:0;
+	transition: top 0.1s ease-in-out;
 }
-.sim_ui[active] > #reset_button{
-	top:60px;
+.sim_ui[active] > #start_button{
+	background-position: 0 -62.5px;
+}
+.sim_ui > #start_button:hover{
+	top:-3px;
+}
+.sim_ui > #start_button:active{
+	top:3px;
 }
 
 /* Sandbox UI */

index.html

@@ -240,7 +240,7 @@ MY "WHY" FOR MAKING THIS:
 
 <words id="networks_tutorial_end">
 
-	when you're done playing around,
+	when you're done doodling and playing around,
 	<next wiggle>let's continue &rarr;</next>
 
 </words>
@@ -559,8 +559,9 @@ MY "WHY" FOR MAKING THIS:
 
 <words id="bonding_2">
 	<b>
-	Find the sweet spot, and draw a group that's <i>just</i> connected enough
-	to spread a complex idea! &darr;
+	Draw a group that hits the sweet spot:
+	just connected enough to spread a complex idea!
+	&darr;
 	</b>
 </words>
 
@@ -610,13 +611,14 @@ MY "WHY" FOR MAKING THIS:
 	No matter how it's phrased,
 	people -- across times and cultures -- have often arrived at the same piece of wisdom:
 	<b>
-	a healthy society needs both tight bonds <i>within</i> groups
-	and thick bridges <i>between</i> groups.
+	a healthy society needs a sweet spot of bonds <i>within</i> groups
+	and bridges <i>between</i> groups.
 	</b>
+	That is:
 
 </words>
 <words id="bb_small_world_2">
-	That is, not this...
+	Not this...
 	<br>
 	(because ideas can't spread)
 </words>
@@ -826,10 +828,10 @@ MY "WHY" FOR MAKING THIS:
 	WIN
 </words>
 <words id="sim_start">
-	&gt; start
+	start simulation
 </words>
 <words id="sim_stop">
-	[] reset &amp; re-draw
+	reset &amp; re-draw
 </words>
 
 <!-- - - - - - - - - - - - - -->

js/chapters/2_Networks.js

@@ -23,7 +23,8 @@ SLIDES.push(
 			network: {
 				"contagion":0,
 				"peeps":[[44,184,0],[155,215,0],[237,105,0],[309,213,0],[646,211,0],[328,305,0],[629,308,0],[417,111,0],[538,362,0],[216,299,0],[94,314,0],[-61,220,0],[68,455,0],[733,147,0],[760,293,0],[776,437,0],[759,48,0],[134,33,0],[929,181,0],[848,111,0],[1013,330,0],[880,269,0],[538,128,0],[189,388,0],[853,356,0]],
-				"connections":[[5,6,0]]
+				//"connections":[[5,6,0]],
+				"connections":[[1,0,0],[0,11,0],[2,17,0],[9,23,0],[9,10,0],[9,1,0],[9,5,0],[23,12,0],[3,2,0],[4,13,0],[13,16,0],[13,19,0],[6,14,0],[14,24,0],[14,15,0],[14,21,0],[21,20,0],[21,18,0],[5,6,0]]
 			}
 		},
 
@@ -146,7 +147,8 @@ SLIDES.push(
 			},
 			options:{
 				infectedFrame: 2,
-				scale: 2
+				scale: 2,
+				_bottle: true
 			}
 		}
 
@@ -198,7 +200,8 @@ SLIDES.push(
 			},
 			options:{
 				infectedFrame: 2,
-				scale: 1.5
+				scale: 1.5,
+				_bottle: true
 			}
 		},
 

js/chapters/3_Simple_Contagion.js

@@ -39,7 +39,8 @@ SLIDES.push(
 			},
 			options:{
 				infectedFrame: 1,
-				scale: 1.25
+				scale: 1.25,
+				_dunce: true
 			}
 		},
 
@@ -133,7 +134,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 1,
 				scale: 1.25,
-				startUncuttable: true
+				startUncuttable: true,
+				_dunce: true
 			}
 		},
 

js/chapters/4_Complex_Contagion.js

@@ -29,7 +29,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 2,
 				scale: 1.75,
-				startUncuttable: true
+				startUncuttable: true,
+				_bottle: true
 			}
 		},
 
@@ -95,7 +96,8 @@ SLIDES.push(
 			},
 			options:{
 				infectedFrame: 3,
-				scale: 1.75
+				scale: 1.75,
+				_wisdom: true
 			}
 		},
 
@@ -158,7 +160,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 3,
 				scale: 1.25,
-				startUncuttable: true
+				startUncuttable: true,
+				_wisdom: true
 			}
 		},
 
@@ -255,7 +258,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 3,
 				scale: 1.25,
-				startUncuttable: true
+				startUncuttable: true,
+				_wisdom: true
 			}
 		},
 
@@ -370,7 +374,8 @@ SLIDES.push(
 			},
 			options:{
 				infectedFrame: 3,
-				scale: 1.75
+				scale: 1.75,
+				_wisdom: true
 			}
 		},
 

js/chapters/5_Bonding_And_Bridging.js

@@ -23,7 +23,8 @@ SLIDES.push(
 			},
 			options:{
 				infectedFrame: 3,
-				scale: 1
+				scale: 1,
+				_wisdom: true
 			}
 		},
 
@@ -108,7 +109,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 3,
 				scale: 1,
-				startUncuttable: true
+				startUncuttable: true,
+				_wisdom: true
 			}
 		},
 

js/chapters/6_Small_World.js

@@ -20,7 +20,8 @@ SLIDES.push(
 			options:{
 				infectedFrame: 3,
 				scale: 1,
-				startUncuttable: true
+				startUncuttable: true,
+				_wisdom: true
 			}
 		},
 
@@ -79,6 +80,12 @@ SLIDES.push(
 	clear:true,
 	add:[
 
+		// PIC
+		{
+			type:"box",
+			img:"sprites/small_world.png", x:-10, y:95, w:970, h:284
+		},
+
 		// Words
 		{
 			type:"box",
@@ -102,10 +109,6 @@ SLIDES.push(
 			fontSize:"30px", lineHeight:"30px",
 			align:"center"
 		},
-		{
-			type:"box",
-			img:"sprites/small_world.png", x:-10, y:95, w:970, h:284
-		},
 		{
 			type:"box",
 			text:"bb_small_world_5", x:0, y:360, w:640, h:180,

js/lib/helpers.js

@@ -2,7 +2,7 @@
 // HELPERS ///////
 //////////////////
 
-Math.TAU = 6.2831853072;
+Math.TAU = 6.2831853072; // for true believers
 
 // The poor man's jQuery
 function $(query){

js/sim/Peep.js

@@ -148,15 +148,25 @@ function Peep(config){
 	};
 
 	// Body Sprite
+	var _initSpriteScale = 0.3;
 	self.sprite = new Sprite({
 		src: "sprites/peeps.png",
 		frames:6, sw:200, sh:200,
 	});
 	self.sprite.pivotX = 100;
 	self.sprite.pivotY = 100;
-	var _initSpriteScale = 0.3;
 	self.sprite.scale = _initSpriteScale;
-	//self.sprite.gotoFrame(1);
+
+	// Prop Sprite
+	self.propSprite = new Sprite({
+		src: "sprites/peeps.png",
+		frames:6, sw:200, sh:200,
+	});
+	self.propSprite.pivotX = 100;
+	self.propSprite.pivotY = 100;
+	self.propSprite.scale = _initSpriteScale;
+	var _bottleAnim = Math.random()*Math.TAU;
+	var _bottleSpeed = 0.01 + Math.random()*0.01;
 
 	// Draw
 	var radius = 25;
@@ -219,9 +229,33 @@ function Peep(config){
 		ctx.translate(self.faceX, self.faceY);
 		self.sprite.rotation = 0;
 		self.sprite.gotoFrame(self.faceBlink ? 7 : 6);
+		if(self.sim.options._wisdom && self.infected){
+			self.sprite.gotoFrame(10);
+		}
+		if(self.sim.options._bottle && self.infected){
+			self.sprite.rotation = Math.sin(_bottleAnim*1.5)*0.15;
+		}
 		self.sprite.draw(ctx);
 		ctx.restore();
 
+		// PROPS?
+		if(self.sim.options._bottle && self.infected){
+			self.propSprite.x = 25;
+			self.propSprite.y = 15;
+			_bottleAnim += _bottleSpeed;
+			self.propSprite.scale = 0.25;
+			self.propSprite.rotation = 0.2 + Math.sin(_bottleAnim)*0.2;
+			self.propSprite.gotoFrame(9);
+			self.propSprite.draw(ctx);
+		}
+		if(self.sim.options._dunce && self.infected){
+			self.propSprite.x = -14;
+			self.propSprite.y = -22;
+			self.propSprite.scale = 0.25;
+			self.propSprite.gotoFrame(8);
+			self.propSprite.draw(ctx);
+		}
+
 		//////////////////////////////////////////////////////////
 		// LABEL FOR INFECTED/FRIENDS, BAR, AND CONTAGION LEVEL //
 		//////////////////////////////////////////////////////////

js/sim/Simulations.js

@@ -266,14 +266,12 @@ function Sim(config){
 		// Draw confetti - NOT AFFECTED BY TRANSFORMS.
 		self.confetti.forEach(function(confetti){
 			ctx.save();
-			var _hue = confetti.frame*72; // placeholder
-			ctx.fillStyle = "hsl("+_hue+",100%,80%)";
-			var offsetX = -Math.sin(confetti.spin)*9;
-			ctx.translate(confetti.x+offsetX, confetti.y);
-			ctx.rotate(Math.sin(confetti.spin)*0.2);
-			ctx.beginPath();
-			ctx.rect(-20,-10,40,20);
-			ctx.fill();
+				var offsetX = -Math.sin(confetti.spin)*9;
+				ctx.translate(confetti.x+offsetX, confetti.y);
+				ctx.rotate(Math.sin(confetti.spin)*0.2);
+				if(confetti.flip) ctx.scale(-1,1);
+				self.confettiSprite.gotoFrame(confetti.frame);
+				self.confettiSprite.draw(ctx);
 			ctx.restore();
 		});
 
@@ -330,6 +328,15 @@ function Sim(config){
 	self.confetti = [];
 	self.winWord = {x:0, y:0, ticker:-1};
 
+	// Confetti Sprite
+	self.confettiSprite = new Sprite({
+		src: "sprites/confetti.png",
+		frames:3, sw:100, sh:50,
+	});
+	self.confettiSprite.pivotX = 50;
+	self.confettiSprite.pivotY = 50;
+	self.confettiSprite.scale = 0.5;
+
 	self.win = function(bounds){
 
 		// ONLY ONCE
@@ -366,7 +373,8 @@ function Sim(config){
 				frame: frame,
 				spinSpeed: spinSpeed,
 				spin: Math.random()*Math.TAU,
-				g: 0.10+Math.random()*0.10
+				g: 0.10+Math.random()*0.10,
+				flip: (Math.random()<0.5)
 			};
 			self.confetti.push(confetti);
 		}

js/slideshow/Boxes.js

@@ -86,6 +86,14 @@ function Boxes(){
 				slideshow.next();
 			};
 
+			// to prevent sim from resetting...
+			nextButton.onmousedown = function(event){
+				event.stopPropagation();
+			};
+			nextButton.ontouchstart = function(event){
+				event.stopPropagation();
+			};
+
 			// Replace it in parent!
 			next.parentNode.replaceChild(nextButton, next);
 

js/slideshow/Pencil.js

@@ -29,7 +29,7 @@ function Pencil(){
 	var _margin = 10;
 	var _offset = 10;
 	self.colors = [
-		"#ccc",
+		"#888",
 		"#000",
 		"#ff5555"
 	];
@@ -90,7 +90,7 @@ function Pencil(){
 				ctx.fillStyle = self.colors[self.sprite.currentFrame];
 				ctx.beginPath();
 				ctx.globalAlpha = 0.5;
-				ctx.arc(0, 0, 8, 0, Math.TAU);
+				ctx.arc(0, 0, 5, 0, Math.TAU);
 				ctx.fill();
 				ctx.restore();
 			}

js/slideshow/Preloader.js

@@ -16,7 +16,7 @@ subscribe("prepreload", function(){
 			pre_preloader.parentNode.removeChild(pre_preloader);
 			
 			//slideshow.gotoChapter("Preloader");
-			slideshow.gotoChapter("Complex");
+			slideshow.gotoChapter("BB");
 
 			publish("preload");
 		}