NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

even more words

This commit is contained in:
Nicky Case 2018-04-13 16:58:04 -04:00
parent 3189800db5
commit 29d396cd65
10 changed files with 425 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
index.html
View File

@ -72,7 +72,7 @@ Cursor is allowed to flow EVERYWHERE though...
</div> </div>
<div chapter="Sandbox"> <div chapter="Sandbox">
<span>5</span> <span>5</span>
<span>5. Sandbox</span> <span>5. Sandbox Mode</span>
</div> </div>
<div chapter="Conclusion"> <div chapter="Conclusion">
<span>6</span> <span>6</span>
@ -115,23 +115,23 @@ Cursor is allowed to flow EVERYWHERE though...
<!-- 0. Introduction --> <!-- 0. Introduction -->
<words id="_0_title"> <words id="_0_title">
the the
<br> <br>
WISDOM and/or MADNESS WISDOM and/or MADNESS
<br> <br>
of CROWDS of CROWDS
</words> </words>
<words id="_0_subtitle"> <words id="_0_subtitle">
playing time: 30 min • by nicky case, april 2018 playing time: 30 min • by nicky case, april 2018
</words> </words>
<words id="_0_loading"> <words id="_0_loading">
loading... loading...
</words> </words>
<words id="_0_play"> <words id="_0_play">
let's play! &rarr; let's play! &rarr;
</words> </words>
<words id="_0_intro"> <words id="_0_intro">
@ -139,9 +139,9 @@ let's play! &rarr;
<br><br><br> <br><br><br>
Sir Isaac Newton was pretty sure he was one smart cookie. Sir Isaac Newton was pretty sure he was a smart cookie.
I mean, after inventing calculus and a theory of gravity, I mean, after inventing calculus and a theory of gravity,
he should be smart enough to do some financial investing, right? he should be clever enough to do some financial investing, right?
Anyway, Anyway,
long story short, he lost $4,600,000 (in today's dollars) long story short, he lost $4,600,000 (in today's dollars)
in the nationwide speculation frenzy known as the South Sea Bubble of 1720. in the nationwide speculation frenzy known as the South Sea Bubble of 1720.
@ -164,7 +164,7 @@ let's play! &rarr;
the <i>madness</i> of crowds. the <i>madness</i> of crowds.
And yet, just when you lose hope in humanity, And yet, just when you lose hope in humanity,
you see citizens rescuing each other in hurricanes, you see citizens rescuing each other in hurricanes,
communities creating solutions after tragedy, communities creating solutions to problems,
movements of ordinary people fighting for a better world: movements of ordinary people fighting for a better world:
the <i>wisdom</i> of crowds! the <i>wisdom</i> of crowds!
@ -286,18 +286,22 @@ let's play! &rarr;
<br><br> <br><br>
(BONUS BOX: a response to the books)
<br><br>
But ideas/behaviors aren't just passively observed, they actively <i>spread</i>. But ideas/behaviors aren't just passively observed, they actively <i>spread</i>.
So now, let's look at something network scientists call... So now, let's look at something network scientists call...
<next>“Contagions!” &rarr;</next> <next>“Contagions!” &rarr;</next>
<b>&larr; bonus challenge:</b> make everyone think <!--<b>&larr; bonus challenge:</b> make everyone think
<i>less than half</i> of their friends are binge-drinkers <i>less than half</i> of their friends are binge-drinkers-->
</words> </words>
<words id="_1_post_puzzle_bonus"> <!--words id="_1_post_puzzle_bonus">
🙌 yay you did it 🙌 🙌 yay you did it 🙌
</words> </words-->
<!-- 2. Simple Contagions --> <!-- 2. Simple Contagions -->
@ -339,10 +343,10 @@ let's play! &rarr;
<words id="_2_post_cascade"> <words id="_2_post_cascade">
This madness-spreading is called an <b>"information cascade"</b>. This madness-spreading is called an <b>"information cascade"</b>.
Mr. Newton fell for such a cascade in 1720. Mr. Newton fell for such a cascade in 1720.
The world's markets fell for such a cascade in 2008. The world's financial institutions fell for such a cascade in 2008.
But so what? You already knew ideas spread. But so what? You already knew ideas spread.
However, network scientists recently found a <i>new</i> kind of contagion, However, network scientists recently found a <i>new</i>, strange kind of contagion.
one that spreads strangely. And they're called... And they're called...
</words> </words>
<words id="_2_post_cascade_end"> <words id="_2_post_cascade_end">
@ -373,7 +377,7 @@ let's play! &rarr;
<br><br> <br><br>
<b>On the right, a person needs <i>at least 25%</i> of their friends to <b>On the right, a person needs <i>AT LEAST 25%</i> of their friends to
adopt a complex fact (img) before they do. adopt a complex fact (img) before they do.
Try "infecting" them all with <i>wisdom!</i> &rarr;</b> Try "infecting" them all with <i>wisdom!</i> &rarr;</b>
@ -473,92 +477,197 @@ let's play! &rarr;
<br><br> <br><br>
So, too connected, and ideas are crushed. So, that's how to get crowd madness.
But, too disconnected, and ideas can't even spread. But how can we "design" for crowd <i>wisdom?</i>
So, how can we "design" a crowd, a group, a society with... In short, two words:
<next>...the right balance?</next> <next>Bonding &amp; Bridging &rarr;</next>
</words> </words>
<!-- 4. Bonding & Bridging --> <!-- 4. Bonding & Bridging -->
<words id="bonding_1">
&larr; Too few connections, and an idea can't spread.
<br>
Too many connections, and you get groupthink. &rarr;
</words>
<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;
</b>
</words>
<words id="bonding_end">
This is called <b>bonding social capital</b>,
the strength of the connections <i>within</i> a single group.
But what about the connections...
<next wiggle>...<i>between</i> groups?</next>
</words>
<words id="bridging_1">
As you might have guessed, <b>bridging social capital</b>
is the strength of the connections <i>between</i> groups.
This is important, because it helps groups break out of their insular echo chambers!
<br>
<b>Try to "infect" everyone with wisdom:</b>
</words>
<words id="bridging_end">
Like bonding, bridging social capital has a sweet spot.
(optional challenge: draw a bridge so thick that the complex contagion
<i>can't</i> pass through it!)
<br><br>
Now that we know how to "design" connections <i>within</i> and <i>between</i> groups, let's...
<next wiggle>...do BOTH. &rarr;</next>
</words>
<words id="bb_1">
<b style="font-size:2em">FINAL PUZZLE!</b>
<br>
Draw connections within groups (bonding) and between groups (bridging)
<i>however</i> you want, to spread wisdom to everyone:
</words>
<words id="bb_2">
derp derp
<next wiggle>derp derp &rarr;</next>
// "SMALL WORLD"
// e pluribus unum
// unity in diversity?
// examples
// JFK story in footnote
</words>
<words id="bb_small_world">
</words>
<!-- 5. Sandbox --> <!-- 5. Sandbox -->
<words id="sandbox_caption">
<b>NOTE: "Sandbox Mode" is totally optional.</b>
Feel free to skip it, or play around!(*)
When you're done, let's recap...
</words>
<words id="sandbox_next">
<next>what we learnt today!</next>
</words>
<words id="sandbox_contagion">
Contagion:
</words>
<words id="sandbox_contagion_simple">
simple
</words>
<words id="sandbox_contagion_complex">
complex
</words>
<words id="sandbox_color_chooser">
The Contagion's Color:
</words>
<words id="sandbox_tool_chooser">
Select a tool...
</words>
<words id="sandbox_tool_pencil">
Draw Network
</words>
<words id="sandbox_tool_add">
Add Person
</words>
<words id="sandbox_tool_add_infected">
Add "Infected"
</words>
<words id="sandbox_tool_move">
Drag Person
</words>
<words id="sandbox_tool_delete">
Delete Person
</words>
<words id="sandbox_tool_clear">
<b>CLEAR IT ALL</b>
</words>
<words id="sandbox_shortcuts_label">
(...or, use keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
[1]: Add Person &nbsp;&nbsp;&nbsp; [2]: Add "Infected"
<br>
[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
</words>
<!-- 6. Conclusion --> <!-- 6. Conclusion -->
<!-- recap and CONCRETE LIFE TAKE-AWAYS. mirror intro UI --> <!-- recap and CONCRETE LIFE TAKE-AWAYS. mirror intro UI -->
<words id="conclusion_1">
IN CONCLUSION:
Contagion &amp; Connections.
<next>derp</next>
</words>
<words id="conclusion_2">
<div class="circle"><span>
in the final circle
recap all stories,
HUMAN BRAIN.
<next>derp</next>
</span></div>
</words>
<words id="conclusion_3">
<div class="circle"><span>
GOOD OMENS QUOTE.
<next>derp</next>
</span></div>
</words>
<!-- 7. Credits --> <!-- 7. Credits -->
<words id="_7_credits"> <words id="_7_credits">
FWEEEEEE CREDITS
<br>
CREDITS
<br>
CREDITS
<br>
CREDITS
<br>
CREDITS
</words> </words>
<!-- x. misc --> <!-- x. misc -->
<words id="WIN"> <words id="WIN">
WIN WIN
</words> </words>
<words id="sim_start"> <words id="sim_start">
&gt; start &gt; start
</words> </words>
<words id="sim_next"> <words id="sim_next">
&gt;&gt; next &gt;&gt; next
</words> </words>
<words id="sim_reset"> <words id="sim_reset">
&olarr; reset &olarr; reset
</words>
<words id="sandbox_contagion">
Contagion:
</words>
<words id="sandbox_contagion_simple">
simple
</words>
<words id="sandbox_contagion_complex">
complex
</words>
<words id="sandbox_color_chooser">
The Contagion's Color:
</words>
<words id="sandbox_tool_chooser">
Select a tool...
</words>
<words id="sandbox_tool_pencil">
Draw Network
</words>
<words id="sandbox_tool_add">
Add Person
</words>
<words id="sandbox_tool_add_infected">
Add "Infected"
</words>
<words id="sandbox_tool_move">
Move Person
</words>
<words id="sandbox_tool_delete">
Delete Person
</words>
<words id="sandbox_tool_clear">
<b>CLEAR IT ALL</b>
</words>
<words id="sandbox_shortcuts_label">
(...or, use keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
[1]: Add Person
<br>
[2]: Add "Infected" Person
<br>
[Space]: Move Person
<br>
[Backspace]: Delete Person
</words> </words>
<!-- - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - -->
<!-- BONUS BOXES (footnotes) --> <!-- BONUS BOXES (footnotes) -->
<!-- - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - -->
<!--
1. other kinds of connections
2. response to the books
3. other kinds of contagions
4. the limits - map, ecology, etc
5. books to read
-->
<bonus id="herp"> <bonus id="herp">
<title>HERP DERP</title> <title>HERP DERP</title>
<description> <description>

14
js/chapters/0_Introduction.js
View File

@ -1,4 +1,12 @@
// 0 - INTRODUCTION // 0 - INTRODUCTION
// FOR REUSE:
var SPLASH_NETWORK = {
"contagion":0,
"peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]],
"connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]]
};
SLIDES.push( SLIDES.push(
{ {
@ -12,11 +20,7 @@ SLIDES.push(
type:"sim", type:"sim",
x:960/2, y:540/2, x:960/2, y:540/2,
fullscreen: true, fullscreen: true,
network: { network: SPLASH_NETWORK,
"contagion":0,
"peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]],
"connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]]
},
options:{ options:{
splash: true, splash: true,
randomStart: 20 randomStart: 20

6
js/chapters/1_Networks.js
View File

@ -294,13 +294,14 @@ SLIDES.push(
id:"_1_post_puzzle", id:"_1_post_puzzle",
text:"_1_post_puzzle", x:560, y:0, w:400 text:"_1_post_puzzle", x:560, y:0, w:400
}, },
{ /*{
type:"box", type:"box",
id:"_1_post_puzzle_bonus", id:"_1_post_puzzle_bonus",
text:"_1_post_puzzle_bonus", x:170, y:1000 // offscreen! text:"_1_post_puzzle_bonus", x:170, y:1000 // offscreen!
}, },*/
], ],
/*
onupdate:function(slideshow, state){ onupdate:function(slideshow, state){
// How many peeps passed? // How many peeps passed?
@ -322,6 +323,7 @@ SLIDES.push(
} }
} }
*/
} }

3
js/chapters/3_Complex_Contagion.js
View File

@ -331,8 +331,7 @@ SLIDES.push(
{ {
type:"box", type:"box",
text:"_3_groupthink", text:"_3_groupthink",
x:460, y:0, w:500, h:540, x:460, y:0, w:500, h:540
lineHeight:"1.4em"
}, },

180
js/chapters/4_Bonding_And_Bridging.js
View File

@ -6,22 +6,87 @@ SLIDES.push(
clear:true, clear:true,
add:[ add:[
// Sim // Sim
// DRAWING FOR SOFT CONSTRAINTS...
{ {
type:"sim", type:"sim",
x:0, y:130, x:0, y:130,
fullscreen: true, fullscreen: true,
network: { network: {
"contagion":0.25, "contagion":0.25,
"peeps":[[92,52,1],[178,54,0],[25,131,0],[83,213,0],[174,213,0],[233,135,0],[421,50,1],[365,141,0],[423,230,0],[527,228,0],[586,135,0],[522,54,0],[772,50,1],[711,128,0],[770,211,0],[864,210,0],[933,126,0],[858,52,0]], "peeps":[
"connections":[[13,12,0],[12,17,0],[16,15,0],[15,14,0],[14,13,0],[13,16,0],[16,14,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0]] [90,-67,1],[181,-71,0],[36,21,0],[107,98,0],[206,92,0],[244,6,0],
[416,106,1],[352,181,0],[415,267,0],[528,268,0],[595,186,0],[532,107,0],
[769,-68,1],[701,6,0],[753,96,0],[855,110,0],[928,35,0],[867,-59,0]
],
"connections":[[13,12,0],[12,17,0],[16,15,0],[14,13,0],[13,16,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0],[15,14,0],[14,16,0]]
}, },
options:{ options:{
infectedFrame: 3, infectedFrame: 3,
scale: 1 scale: 1
} }
}, },
]
// UI for the simulation
{
type:"box",
id:"ui",
x:370, y:445,
sim_ui:"blue"
},
// Words
{
type:"box",
text:"bonding_1",
x:230, y:0+15, w:500, h:70,
align:"center"
},
// Words 2
{
type:"box",
text:"bonding_2",
x:300, y:70+15, w:360, h:100,
align:"center"
},
// Words End
{
id:"end",
type:"box",
text:"bonding_end",
x:660, y:290, w:300, h:250,
hidden:true
}
],
onupdate:function(slideshow, state){
// If Peeps[6] to Peep[11] pass..
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
for(var i=6; i<=11; i++){
var peep = sim.peeps[i];
if(peep.infected) peepCount++;
}
// Win
if(!state.ended){
if(peepCount==6){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win({
x:330+5, y:160-120+5,
width:280, height:280
});
}
}
}
}, },
@ -30,15 +95,16 @@ SLIDES.push(
clear:true, clear:true,
add:[ add:[
// Sim // Sim
{ {
type:"sim", type:"sim",
x:0, y:0, x:-70, y:-30,
fullscreen: true, fullscreen: true,
network: { network: {
"contagion":0.25, "contagion":0.25,
"peeps":[[314,58,1],[418,87,0],[234,139,0],[277,234,0],[386,264,0],[460,180,0],[538,390,0],[617,309,0],[719,333,0],[766,432,0],[680,514,0],[572,491,0]], "peeps":[[182,92,1],[300,106,0],[107,196,0],[151,300,0],[301,309,0],[354,213,0],[441,384,0],[500,290,0],[644,304,0],[691,422,0],[621,510,0],[491,488,0]],
"connections":[[7,6,0],[6,11,0],[11,10,0],[9,8,0],[8,7,0],[6,10,0],[6,9,0],[9,11,0],[11,7,0],[7,10,0],[9,7,0],[8,10,0],[10,9,0],[6,8,0],[8,11,0],[0,1,0],[2,5,0],[4,3,0]] "connections":[[6,7,1],[7,8,1],[8,9,1],[9,10,1],[10,11,1],[11,6,1],[6,9,1],[9,11,1],[11,8,1],[8,10,1],[10,7,1],[7,9,1],[11,7,1],[6,10,1],[6,8,1],[0,1,1],[1,5,1],[5,4,1],[4,3,1],[2,3,1],[2,0,1],[3,1,1]]
}, },
options:{ options:{
infectedFrame: 3, infectedFrame: 3,
@ -46,7 +112,53 @@ SLIDES.push(
startUncuttable: true startUncuttable: true
} }
}, },
]
// UI for the simulation
{
type:"box",
id:"ui",
x:95, y:390,
sim_ui:"blue"
},
// Words
{
type:"box",
text:"bridging_1",
x:340, y:30, w:620, h:120
},
// Words End
{
id:"end",
type:"box",
text:"bridging_end",
x:660, y:180, w:300, h:360,
hidden:true
}
],
onupdate:function(slideshow, state){
// If ALL infected...
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
sim.peeps.forEach(function(peep){
if(peep.infected) peepCount++;
});
// Win
if(!state.ended){
if(peepCount==sim.peeps.length){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win();
}
}
}
}, },
@ -55,15 +167,16 @@ SLIDES.push(
clear:true, clear:true,
add:[ add:[
// Sim // Sim
// use a DRAWING to impose SOFT CONSTRAINTS // use a DRAWING to impose SOFT CONSTRAINTS
{ {
type:"sim", type:"sim",
x:0, y:0, x:150, y:0,
fullscreen: true, fullscreen: true,
network: { network: {
"contagion":0.25, "contagion":0.25,
"peeps":[[474,46,1],[578,100,0],[388,94,0],[568,195,0],[392,190,0],[486,233,0],[273,318,0],[183,363,0],[183,447,0],[256,498,0],[355,376,0],[347,469,0],[630,367,0],[696,308,0],[791,360,0],[784,442,0],[725,495,0],[637,450,0]], "peeps":[[485,50,1],[581,97,0],[389,101,0],[579,200,0],[399,193,0],[487,243,0],[290,312,0],[201,358,0],[196,446,0],[278,509,0],[381,374,0],[367,469,0],[596,370,0],[680,315,0],[778,354,0],[784,454,0],[700,506,0],[604,459,0]],
"connections":[] "connections":[]
}, },
options:{ options:{
@ -72,7 +185,54 @@ SLIDES.push(
startUncuttable: true startUncuttable: true
} }
}, },
]
// UI for the simulation
{
type:"box",
id:"ui",
x:70, y:190,
sim_ui:"blue"
},
// Words
{
type:"box",
text:"bb_1",
x:0, y:10, w:350, h:170
},
// Words
{
id:"end",
type:"box",
text:"bb_2",
x:0, y:310, w:300, h:230,
//hidden: true
}
],
onupdate:function(slideshow, state){
// If ALL infected...
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
sim.peeps.forEach(function(peep){
if(peep.infected) peepCount++;
});
// Win
if(!state.ended){
if(peepCount==sim.peeps.length){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win();
}
}
}
}, },

22
js/chapters/5_Sandbox.js
View File

@ -12,10 +12,10 @@ SLIDES.push(
x:0, y:0, x:0, y:0,
fullscreen: true, fullscreen: true,
network: { network: {
"contagion":0, "contagion":0.25,
"peeps":[[443,213,1],[570,309,0],[686,194,0]], "peeps":[[506,195,1],[621,270,0],[724,194,0]],
"connections":[[0,1,0],[1,2,0]] "connections":[[0,1,0],[1,2,0]]
} },
}, },
// The Sandbox UI // The Sandbox UI
@ -28,9 +28,21 @@ SLIDES.push(
// Simulation UI // Simulation UI
{ {
type:"box", type:"box",
x:35, y:450, x:35, y:365,
sim_ui:"red" sim_ui:"red"
} },
// Words
{
type:"box",
text:"sandbox_caption",
x:70, y:470, w:550, h:70
},
{
type:"box",
text:"sandbox_next",
x:605, y:455, w:300, h:100
},
] ]

33
js/chapters/6_Conclusion.js
View File

@ -1,7 +1,36 @@
// 0 - INTRODUCTION // 0 - INTRODUCTION
SLIDES.push( SLIDES.push(
{ /*{
chapter: "Conclusion", chapter: "Conclusion",
clear:true clear:true
} }*/
{
chapter: "Conclusion",
clear:true,
add:[
// Splash
{
type:"sim",
x:960/2, y:540/2,
fullscreen: true,
network: SPLASH_NETWORK,
options:{
splash: true,
randomStart: 20
}
},
// Words
{
type:"box",
text:"conclusion_2", x:210, y:0, w:540, h:540, align:"center"
},
]
},
); );

2
js/main.js
View File

@ -29,6 +29,6 @@ window.onload = function(){
window.requestAnimationFrame(update); window.requestAnimationFrame(update);
// First slide! // First slide!
slideshow.gotoChapter("Complex-Groupthink"); slideshow.gotoChapter("Sandbox");
} }

4
js/sim/Simulations.js
View File

@ -315,7 +315,7 @@ function Sim(config){
self.confetti = []; self.confetti = [];
self.winWord = {x:0, y:0, ticker:-1}; self.winWord = {x:0, y:0, ticker:-1};
self.win = function(){ self.win = function(bounds){
// ONLY ONCE // ONLY ONCE
if(self.wonBefore) return; if(self.wonBefore) return;
@ -324,7 +324,7 @@ function Sim(config){
// Get center of peeps // Get center of peeps
var fullscreenOffsetX = config.x + simOffset.x; var fullscreenOffsetX = config.x + simOffset.x;
var fullscreenOffsetY = config.y + simOffset.y; var fullscreenOffsetY = config.y + simOffset.y;
var bounds = getBoundsOfPoints(self.peeps); bounds = bounds || getBoundsOfPoints(self.peeps); // OPTIONAL BOUNDS
var cx = bounds.x + bounds.width/2; var cx = bounds.x + bounds.width/2;
var cy = bounds.y + bounds.height/2; var cy = bounds.y + bounds.height/2;
cx += fullscreenOffsetX; cx += fullscreenOffsetX;

8
js/slideshow/SandboxUI.js
View File

@ -44,9 +44,11 @@ function SandboxUI(container){
// Choose Color of Peeps // // Choose Color of Peeps //
/////////////////////////// ///////////////////////////
var GAP = "0.5em";
var colorChooserLabel = document.createElement("div"); var colorChooserLabel = document.createElement("div");
colorChooserLabel.innerHTML = getWords("sandbox_color_chooser"); colorChooserLabel.innerHTML = getWords("sandbox_color_chooser");
colorChooserLabel.style.marginTop = "1em"; colorChooserLabel.style.marginTop = GAP;
var colorChooser = new ChooseOne({ var colorChooser = new ChooseOne({
options:[ options:[
1, // red 1, // red
@ -75,7 +77,7 @@ function SandboxUI(container){
var toolChooserLabel = document.createElement("div"); var toolChooserLabel = document.createElement("div");
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser"); toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
toolChooserLabel.style.marginTop = "1em"; toolChooserLabel.style.marginTop = "0.25em"; //GAP;
var tools = [ var tools = [
"pencil", "pencil",
"add", "add",
@ -122,7 +124,7 @@ function SandboxUI(container){
var shortcutsLabel = document.createElement("div"); var shortcutsLabel = document.createElement("div");
shortcutsLabel.innerHTML = getWords("sandbox_shortcuts_label"); shortcutsLabel.innerHTML = getWords("sandbox_shortcuts_label");
shortcutsLabel.id = "sandbox_shortcuts_label"; shortcutsLabel.id = "sandbox_shortcuts_label";
shortcutsLabel.style.marginTop = "1em"; shortcutsLabel.style.marginTop = GAP;
var shortcuts = document.createElement("div"); var shortcuts = document.createElement("div");
shortcuts.innerHTML = getWords("sandbox_shortcuts"); shortcuts.innerHTML = getWords("sandbox_shortcuts");
shortcuts.id = "sandbox_shortcuts"; shortcuts.id = "sandbox_shortcuts";