diff --git a/css/index.css b/css/index.css
index 8c0a611..ee79c38 100644
--- a/css/index.css
+++ b/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 */
diff --git a/index.html b/index.html
index ba4a6bf..a9b107b 100644
--- a/index.html
+++ b/index.html
@@ -240,7 +240,7 @@ MY "WHY" FOR MAKING THIS:
- when you're done playing around,
+ when you're done doodling and playing around,
let's continue →
@@ -559,8 +559,9 @@ MY "WHY" FOR MAKING THIS:
- Find the sweet spot, and draw a group that's just connected enough
- to spread a complex idea! ↓
+ Draw a group that hits the sweet spot:
+ just connected enough to spread a complex idea!
+ ↓
@@ -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:
- a healthy society needs both tight bonds within groups
- and thick bridges between groups.
+ a healthy society needs a sweet spot of bonds within groups
+ and bridges between groups.
+ That is:
- That is, not this...
+ Not this...
(because ideas can't spread)
@@ -826,10 +828,10 @@ MY "WHY" FOR MAKING THIS:
WIN
- > start
+ start simulation
- [] reset & re-draw
+ reset & re-draw
diff --git a/js/chapters/2_Networks.js b/js/chapters/2_Networks.js
index 07b7f03..ace7e9d 100644
--- a/js/chapters/2_Networks.js
+++ b/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
}
},
diff --git a/js/chapters/3_Simple_Contagion.js b/js/chapters/3_Simple_Contagion.js
index f4104b1..97ff792 100644
--- a/js/chapters/3_Simple_Contagion.js
+++ b/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
}
},
diff --git a/js/chapters/4_Complex_Contagion.js b/js/chapters/4_Complex_Contagion.js
index c14cff7..3373e95 100644
--- a/js/chapters/4_Complex_Contagion.js
+++ b/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
}
},
diff --git a/js/chapters/5_Bonding_And_Bridging.js b/js/chapters/5_Bonding_And_Bridging.js
index abe89e7..97a05bc 100644
--- a/js/chapters/5_Bonding_And_Bridging.js
+++ b/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
}
},
diff --git a/js/chapters/6_Small_World.js b/js/chapters/6_Small_World.js
index f7b765d..d02a242 100644
--- a/js/chapters/6_Small_World.js
+++ b/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,
diff --git a/js/lib/helpers.js b/js/lib/helpers.js
index 8ed1b66..42769f0 100644
--- a/js/lib/helpers.js
+++ b/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){
diff --git a/js/sim/Peep.js b/js/sim/Peep.js
index 2aeaf53..aa91506 100644
--- a/js/sim/Peep.js
+++ b/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 //
//////////////////////////////////////////////////////////
diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js
index b670b21..f018bd2 100644
--- a/js/sim/Simulations.js
+++ b/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);
}
diff --git a/js/slideshow/Boxes.js b/js/slideshow/Boxes.js
index 3ba773b..8ae34a7 100644
--- a/js/slideshow/Boxes.js
+++ b/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);
diff --git a/js/slideshow/Pencil.js b/js/slideshow/Pencil.js
index c056bfe..14dde9f 100644
--- a/js/slideshow/Pencil.js
+++ b/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();
}
diff --git a/js/slideshow/Preloader.js b/js/slideshow/Preloader.js
index 6b5db76..79b7993 100644
--- a/js/slideshow/Preloader.js
+++ b/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");
}
diff --git a/sprites/button_large.png b/sprites/button_large.png
index 0b44da0..e9c140d 100644
Binary files a/sprites/button_large.png and b/sprites/button_large.png differ
diff --git a/sprites/conclusion.png b/sprites/conclusion.png
deleted file mode 100644
index 856cf2a..0000000
Binary files a/sprites/conclusion.png and /dev/null differ
diff --git a/sprites/confetti.png b/sprites/confetti.png
new file mode 100644
index 0000000..0bc94ea
Binary files /dev/null and b/sprites/confetti.png differ
diff --git a/sprites/peeps.png b/sprites/peeps.png
index b29368e..807f9ed 100644
Binary files a/sprites/peeps.png and b/sprites/peeps.png differ
diff --git a/sprites/red_button.png b/sprites/red_button.png
new file mode 100644
index 0000000..9533e48
Binary files /dev/null and b/sprites/red_button.png differ
diff --git a/sprites/sandbox_tools.png b/sprites/sandbox_tools.png
index dbd6670..43b1008 100644
Binary files a/sprites/sandbox_tools.png and b/sprites/sandbox_tools.png differ
diff --git a/sprites/small_world.png b/sprites/small_world.png
index e9aa95a..7038489 100644
Binary files a/sprites/small_world.png and b/sprites/small_world.png differ
diff --git a/sprites/tutorial_connect.png b/sprites/tutorial_connect.png
index ace4626..e32fda0 100644
Binary files a/sprites/tutorial_connect.png and b/sprites/tutorial_connect.png differ
diff --git a/sprites/tutorial_disconnect.png b/sprites/tutorial_disconnect.png
index 5c45580..e351303 100644
Binary files a/sprites/tutorial_disconnect.png and b/sprites/tutorial_disconnect.png differ