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

preloader there

This commit is contained in:
Nicky Case 2018-04-16 11:44:14 -04:00
parent c9c7c7c333
commit e6871a8e3e
13 changed files with 352 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
audio/bg_music.mp3 Normal file
View File

Binary file not shown.

22
css/index.css
View File

@ -78,6 +78,10 @@ b, strong{
#slideshow .next_button:hover{
background-position: 0 -100px;
}
#slideshow .next_button[disabled]{
pointer-events: none;
opacity: 0.5;
}
.transitionable{
transition: opacity 0.3s ease-in-out,
left 0.3s ease-in-out,
@ -277,6 +281,24 @@ b, strong{
cursor: none;
}
/* PRE-PRELOADER */
#pre_preloader{
position: absolute;
background: #fff;
width:100%;
height: 100%;
cursor: default;
}
#pre_preloader > div{
text-align: center;
width:300px; height:40px;
line-height: 40px;
font-size: 40px;
margin: auto;
position: absolute;
top:-40px; left:0; right:0; bottom:0;
}
/* THIS THING'S WORDS */
words, bonus, glossary{
display: none;

134
index.html
View File

@ -24,6 +24,7 @@ Cursor is allowed to flow EVERYWHERE though...
</head>
<body>
<!-- THE SLIDESHOW -->
<div id="container">
<!-- Simulation(s) in background -->
@ -120,8 +121,14 @@ Cursor is allowed to flow EVERYWHERE though...
<div id="social"></div>
</div>
<!-- The Pencil -->
<canvas id="pencil"></canvas>
<!-- Preloader -->
<div id="pre_preloader">
<div>loading...</div>
</div>
</body>
</html>
@ -129,29 +136,43 @@ Cursor is allowed to flow EVERYWHERE though...
<!-- THE SLIDESHOW'S WORDS -->
<!-- - - - - - - - - - - - -->
<!-- 0. Introduction -->
<!-- Preloader -->
<words id="preloader_title">
<div style="font-size: 30px;">
<span>the</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">WISDOM</span>
<span style="position:relative;top: -10px;">and/or</span>
<span style="font-size: 60px;">MADNESS</span>
<br>
<span style="position: relative;top: -11px;">of</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px;">CROWDS</span>
</div>
<div style="color:#999">
playing time: 30 min • by nicky case, april 2018
</div>
<words id="_0_title">
the
<br>
WISDOM and/or MADNESS
<br>
of CROWDS
</words>
<words id="_0_subtitle">
playing time: 30 min • by nicky case, april 2018
<words id="preloader_button">
<next></next>
</words>
<words id="_0_loading">
<words id="preloader_loading">
loading...
</words>
<words id="_0_play">
<words id="preloader_play">
let's play! &rarr;
</words>
<words id="_0_intro">
<!-- Introduction -->
<words id="intro">
<div class="circle"><span>
<br><br>
@ -173,7 +194,7 @@ Cursor is allowed to flow EVERYWHERE though...
</span></div>
</words>
<words id="_0_intro_2">
<words id="intro_2">
<div class="circle"><span>
<br>
@ -197,22 +218,22 @@ Cursor is allowed to flow EVERYWHERE though...
</span></div>
</words>
<!-- 1. Networks -->
<!-- Networks -->
<words id="_1_tutorial_start">
<words id="networks_tutorial_start">
<b>Let's draw a network!</b>
Each connection represents a friendship between two people:
</words>
<words id="_1_tutorial_connect">
<words id="networks_tutorial_connect">
draw to connect
</words>
<words id="_1_tutorial_disconnect">
<words id="networks_tutorial_disconnect">
scratch to&nbsp;&nbsp;&nbsp;disconnect
</words>
<words id="_1_tutorial_end">
<words id="networks_tutorial_end">
feel free to keep playing around, and draw whatever friendship network you want!
when you're done,
@ -220,7 +241,7 @@ Cursor is allowed to flow EVERYWHERE though...
</words>
<words id="_1_threshold">
<words id="networks_threshold">
But people don't just have social connections to make pretty pictures.
People look at their social connections, to understand their social world.
@ -230,11 +251,11 @@ Cursor is allowed to flow EVERYWHERE though...
</words>
<words id="_1_threshold_instruction">
<words id="networks_threshold_instruction">
<b>Draw/erase connections, and see what happens! &rarr;</b>
</words>
<words id="_1_threshold_explanation">
<words id="networks_threshold_explanation">
<span style="color:#666">top-left:</span>
# of drinker friends / # of total friends &nbsp;&nbsp;&nbsp;&nbsp;
<br>
@ -246,11 +267,11 @@ Cursor is allowed to flow EVERYWHERE though...
<br> (they'll glow if past threshold) &nbsp;&nbsp;&nbsp;&nbsp;
</words>
<words id="_1_threshold_end">
<words id="networks_threshold_end">
<next>cool, got it</next>
</words>
<words id="_1_pre_puzzle">
<words id="networks_pre_puzzle">
However, networks can <i>fool</i> people.
Just like how you see the earth as flat because you're on it,
@ -273,7 +294,7 @@ Cursor is allowed to flow EVERYWHERE though...
</words>
<words id="_1_puzzle">
<words id="networks_puzzle">
<b style="font-size:2em">PUZZLE TIME!</b>
<br>
@ -282,19 +303,19 @@ Cursor is allowed to flow EVERYWHERE though...
(even though binge-drinkers are outnumbered 2-to-1)
</words>
<words id="_1_puzzle_metric">
<words id="networks_puzzle_metric">
<b>FOOLED:</b>
</words>
<words id="_1_puzzle_metric_2">
<words id="networks_puzzle_metric_2">
out of 9 people
</words>
<words id="_1_puzzle_end">
<words id="networks_puzzle_end">
Congrats! You manipulated a group of students into believing
in the prevalance of an incredibly unhealthy social norm! Good going!
<next wiggle>...uh. thanks?</next>
</words>
<words id="_1_post_puzzle">
<words id="networks_post_puzzle">
What you just created is called The Majority Illusion(*),
which also explains why people think their political views are consensus,
@ -312,17 +333,12 @@ Cursor is allowed to flow EVERYWHERE though...
<next>“Contagions!” &rarr;</next>
<!--<b>&larr; bonus challenge:</b> make everyone think
<i>less than half</i> of their friends are binge-drinkers-->
</words>
<!--words id="_1_post_puzzle_bonus">
🙌 yay you did it 🙌
</words-->
<!-- 2. Simple Contagions -->
<!-- Simple Contagions -->
<words id="_2_simple">
<words id="simple_simple">
Below, we start with one person (img) who has some information.
Some <i>mis</i>information. "Fake news", as the cool kids say.
And every day, that person spreads the rumor to their friends.
@ -332,7 +348,7 @@ Cursor is allowed to flow EVERYWHERE though...
(p.s: you can't draw <i>while</i> the sim's running)
</words>
<words id="_2_simple_2">
<words id="simple_simple_2">
Note: despite the negative name, "contagions" can be good or bad.
There's strong statistical evidence(*) that
smoking, happiness, obesity, voting patterns, and cooperation levels
@ -340,11 +356,11 @@ Cursor is allowed to flow EVERYWHERE though...
and even some evidence that suicides(*) and mass shootings(*) are, too.
</words>
<words id="_2_simple_end">
<words id="simple_simple_end">
<next wiggle>well that's depressing &rarr;</next>
</words>
<words id="_2_cascade">
<words id="simple_cascade">
Indeed it is.
Anyway, <b>PUZZLE TIME!</b>
<br>
@ -353,11 +369,11 @@ Cursor is allowed to flow EVERYWHERE though...
(new rule: you can't cut the <i>thick</i> connections)
</words>
<words id="_2_cascade_end">
<words id="simple_cascade_end">
<next wiggle>fan-flipping-tastic &rarr;</next>
</words>
<words id="_2_post_cascade">
<words id="simple_post_cascade">
This madness-spreading is called an <b>"information cascade"</b>.
Mr. Newton fell for such a cascade in 1720.
The world's financial institutions fell for such a cascade in 2008.
@ -366,13 +382,13 @@ Cursor is allowed to flow EVERYWHERE though...
They're called...
</words>
<words id="_2_post_cascade_end">
<words id="simple_post_cascade_end">
<next wiggle>“<i>Complex</i> Contagions!” &rarr;</next>
</words>
<!-- 3. Complex Contagions -->
<!-- Complex Contagions -->
<words id="_3_complex">
<words id="complex_complex">
<span style="line-height:1.4em">
Truth may be stranger than fiction, but it doesn't sell as well.
@ -402,7 +418,7 @@ Cursor is allowed to flow EVERYWHERE though...
</span>
</words>
<words id="_3_complex_2">
<words id="complex_complex_2">
<span style="line-height:1.4em">
<b>CAUTION:</b>
@ -434,17 +450,17 @@ Cursor is allowed to flow EVERYWHERE though...
</span>
</words>
<words id="_3_cascade">
<words id="complex_cascade">
You did this before, but now, with a <i>complex</i> contagion (img), it'll be tougher...
<b>Try to "infect" everyone with complex wisdom! &darr;</b>
(feel free to just hit 'start' and <i>try</i> as many solutions as you want)
</words>
<words id="_3_cascade_end">
<words id="complex_cascade_end">
<next wiggle>HOT DANG &rarr;</next>
</words>
<words id="_3_post_cascade">
<words id="complex_post_cascade">
Now, you may think: so what, complex contagions () are just simple contagions ()
that need more connections?
Not so fast!
@ -452,11 +468,11 @@ Cursor is allowed to flow EVERYWHERE though...
It's apples vs oranges, not apples vs more apples.
This idea will be clearer if we revisit...
</words>
<words id="_3_post_cascade_end">
<words id="complex_post_cascade_end">
<next wiggle>...yet another puzzle! &rarr;</next>
</words>
<words id="_3_prevent">
<words id="complex_prevent">
Now, let's do the <i>opposite</i> of everything we've done before.
If you hit "start" below now, the contagion will just spread to everyone.
No surprise there.
@ -464,7 +480,7 @@ Cursor is allowed to flow EVERYWHERE though...
<b>draw a network to <i>prevent</i> the contagion from spreading to everyone! &darr;</b>
</words>
<words id="_3_prevent_2">
<words id="complex_prevent_2">
And <i>that's</i> the important difference between "simple" and "complex" contagion.
While more connections always helps spread <i>simple</i> ideas,
more connections can <i>hurt</i> the spread of <i>complex</i> ideas!
@ -472,11 +488,11 @@ Cursor is allowed to flow EVERYWHERE though...
And this isn't just a theoretical problem. This can be a matter of life...
</words>
<words id="_3_prevent_end">
<words id="complex_prevent_end">
<next wiggle>...or death. &rarr;</next>
</words>
<words id="_3_groupthink">
<words id="complex_groupthink">
The people at NASA were smart cookies.
I mean, they'd used Newton's theories to get us to the moon.
@ -505,7 +521,7 @@ Cursor is allowed to flow EVERYWHERE though...
</words>
<!-- 4. Bonding & Bridging -->
<!-- Bonding & Bridging -->
<words id="bonding_1">
&larr; Too few connections, and an idea can't spread.
@ -598,7 +614,7 @@ Cursor is allowed to flow EVERYWHERE though...
<next>The Sandbox Mode &rarr;</next>
</words>
<!-- 5. Sandbox -->
<!-- Sandbox -->
<words id="sandbox_caption">
<b>NOTE: "Sandbox Mode" is totally optional!</b>
@ -654,8 +670,7 @@ Cursor is allowed to flow EVERYWHERE though...
[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
</words>
<!-- 6. Conclusion -->
<!-- recap and CONCRETE LIFE TAKE-AWAYS. mirror intro UI -->
<!-- Conclusion -->
<words id="conclusion_1">
@ -761,9 +776,9 @@ Cursor is allowed to flow EVERYWHERE though...
<next small>&lt;3</next>
</words>
<!-- 7. Credits -->
<!-- Credits -->
<words id="_7_credits">
<words id="credits">
CREDITS
<br>
CREDITS
@ -832,13 +847,14 @@ Cursor is allowed to flow EVERYWHERE though...
<script src="js/slideshow/Navigation.js"></script>
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
<script src="js/slideshow/Preloader.js"></script>
<script src="js/sim/Peep.js"></script>
<script src="js/sim/Connection.js"></script>
<script src="js/sim/ConnectorCutter.js"></script>
<!--script src="js/sim/_Game.js"></script-->
<script src="js/sim/Simulations.js"></script>
<script src="js/chapters/0_Preloader.js"></script>
<script src="js/chapters/1_Introduction.js"></script>
<script src="js/chapters/2_Networks.js"></script>
<script src="js/chapters/3_Simple_Contagion.js"></script>

75
js/chapters/0_Preloader.js Normal file
View File

@ -0,0 +1,75 @@
// FOR REUSE:
var SPLASH_NETWORK = {
"contagion":0,
"peeps":[[-408,-115,0],[290,-143,0],[400,-221,0],[-221,373,0],[-214,-378,0],[358,357,0],[-86,-420,0],[269,-369,0],[6,-324,0],[124,299,0],[-550,-119,0],[469,137,0],[366,80,0],[176,381,0],[-452,-217,0],[43,597,0],[238,276,0],[300,120,0],[22,416,0],[373,226,0],[-275,-172,0],[-113,-303,0],[-117,419,0],[-324,5,0],[156,-375,0],[-580,-250,0],[416,-111,0],[-215,-243,0],[-316,-65,0],[33,322,0],[112,456,0],[363,487,0],[-455,13,0],[95,-310,0],[302,-268,0],[507,-313,0],[254,200,0],[207,-249,0],[-177,271,0],[-77,315,0],[-357,387,0],[-462,305,0],[-332,261,0],[-258,195,0],[-556,184,0],[-312,87,0],[600,19,0],[593,158,0],[562,-188,0],[-249,534,0],[-318,-295,0],[-592,55,0],[-99,-541,0],[528,282,0],[322,-31,0],[241,542,0],[-244,-540,0],[-356,-469,0],[-435,-359,0],[456,-11,0],[-382,507,0],[22,-475,0],[14,-611,0],[-89,571,0],[396,-446,0],[284,-521,0],[152,-537,0],[-399,172,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],[53,47,0]]
};
SLIDES.push(
{
chapter: "Preloader",
add:[
// Splash
{
type:"sim",
x:960/2, y:540/2,
fullscreen: true,
network: SPLASH_NETWORK,
options:{
splash: true,
randomStart: 20
}
},
// Words
{
type:"box",
id:"title",
text:"preloader_title", x:180, y:125, w:600, h:230, align:"center"
},
{
type:"box",
id:"button",
text:"preloader_button", x:180, y:355, w:600, h:100, align:"center"
}
],
onstart: function(slideshow){
var button = slideshow.boxes.boxes[1].children[0];
button.setAttribute("disabled", true);
// START, FOR REAL
button.onclick = function(){
publish("START");
};
},
onupdate: function(slideshow, state){
// Only once
if(state.FULLY_LOADED) return;
// Set label
var label;
var button = slideshow.boxes.boxes[1].children[0];
if(window.PRELOAD_PROGRESS==1){
state.FULLY_LOADED = true;
label = getWords("preloader_play");
button.removeAttribute("disabled");
}else{
label = getWords("preloader_loading") + " ";
label += Math.round(window.PRELOAD_PROGRESS*100) + "%";
}
button.innerHTML = label;
}
}
);

26
js/chapters/1_Introduction.js
View File

@ -1,22 +1,18 @@
// 0 - INTRODUCTION
// FOR REUSE:
var SPLASH_NETWORK = {
"contagion":0,
"peeps":[[-408,-115,0],[290,-143,0],[400,-221,0],[-221,373,0],[-214,-378,0],[358,357,0],[-86,-420,0],[269,-369,0],[6,-324,0],[124,299,0],[-550,-119,0],[469,137,0],[366,80,0],[176,381,0],[-452,-217,0],[43,597,0],[238,276,0],[300,120,0],[22,416,0],[373,226,0],[-275,-172,0],[-113,-303,0],[-117,419,0],[-324,5,0],[156,-375,0],[-580,-250,0],[416,-111,0],[-215,-243,0],[-316,-65,0],[33,322,0],[112,456,0],[363,487,0],[-455,13,0],[95,-310,0],[302,-268,0],[507,-313,0],[254,200,0],[207,-249,0],[-177,271,0],[-77,315,0],[-357,387,0],[-462,305,0],[-332,261,0],[-258,195,0],[-556,184,0],[-312,87,0],[600,19,0],[593,158,0],[562,-188,0],[-249,534,0],[-318,-295,0],[-592,55,0],[-99,-541,0],[528,282,0],[322,-31,0],[241,542,0],[-244,-540,0],[-356,-469,0],[-435,-359,0],[456,-11,0],[-382,507,0],[22,-475,0],[14,-611,0],[-89,571,0],[396,-446,0],[284,-521,0],[152,-537,0],[-399,172,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],[53,47,0]]
};
SLIDES.push(
{
chapter: "Introduction",
clear:true,
remove:[
{type:"box", id:"title"},
{type:"box", id:"button"}
],
add:[
// Splash
{
ONLY_IF_IT_DOESNT_ALREADY_EXIST: true,
type:"sim",
x:960/2, y:540/2,
fullscreen: true,
@ -30,8 +26,8 @@ SLIDES.push(
// Words
{
type:"box",
id:"_0_intro",
text:"_0_intro", x:210, y:0, w:540, h:540, align:"center"
id:"intro",
text:"intro", x:210, y:0, w:540, h:540, align:"center"
},
]
@ -39,13 +35,13 @@ SLIDES.push(
},
{
remove:[
{ type:"box", id:"_0_intro" }
{ type:"box", id:"intro" }
],
add:[
{
type:"box",
id:"_0_intro_2",
text:"_0_intro_2", x:210, y:0, w:540, h:540, align:"center"
id:"intro_2",
text:"intro_2", x:210, y:0, w:540, h:540, align:"center"
}
]
}

72
js/chapters/2_Networks.js
View File

@ -12,7 +12,7 @@ SLIDES.push(
// The top instructions
{
type:"box",
text:"_1_tutorial_start", x:260, y:0, w:440, h:70, align:"center"
text:"networks_tutorial_start", x:260, y:0, w:440, h:70, align:"center"
},
// The fullscreen simulation
@ -31,7 +31,7 @@ SLIDES.push(
{
type:"box",
id:"connect_words",
text:"_1_tutorial_connect", x:280, y:183, w:400, align:"center", color:"#ccc"
text:"networks_tutorial_connect", x:280, y:183, w:400, align:"center", color:"#ccc"
},
{
type:"box",
@ -43,7 +43,7 @@ SLIDES.push(
{
type:"box",
id:"disconnect_words",
text:"_1_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:"#ccc"
},
{
type:"box",
@ -55,7 +55,7 @@ SLIDES.push(
{
type:"box",
id:"end_words",
text:"_1_tutorial_end", x:230, y:400, w:500, h:70, align:"center",
text:"networks_tutorial_end", x:230, y:400, w:500, h:70, align:"center",
hidden:true
}
@ -109,19 +109,19 @@ SLIDES.push(
// TEXT
{
type:"box",
id:"_1_threshold",
text:"_1_threshold", x:60, y:25, w:400
id:"networks_threshold",
text:"networks_threshold", x:60, y:25, w:400
},
{
type:"box",
id:"_1_threshold_instruction",
text:"_1_threshold_instruction", x:110, y:260, w:300,
id:"networks_threshold_instruction",
text:"networks_threshold_instruction", x:110, y:260, w:300,
align:"center"
},
{
type:"box",
id:"_1_threshold_explanation",
text:"_1_threshold_explanation", x:105, y:340, w:400,
id:"networks_threshold_explanation",
text:"networks_threshold_explanation", x:105, y:340, w:400,
align:"right",
color:"#bbb",
fontSize:"0.75em",
@ -129,8 +129,8 @@ SLIDES.push(
},
{
type:"box",
id:"_1_threshold_end",
text:"_1_threshold_end", x:60, y:430, w:400
id:"networks_threshold_end",
text:"networks_threshold_end", x:60, y:430, w:400
},
// SIMULATION: THRESHOLD
@ -155,16 +155,16 @@ SLIDES.push(
// pre-puzzle ramble
{
remove:[
{ type:"box", id:"_1_threshold" },
{ type:"box", id:"_1_threshold_instruction" },
{ type:"box", id:"_1_threshold_explanation" },
{ type:"box", id:"_1_threshold_end" }
{ type:"box", id:"networks_threshold" },
{ type:"box", id:"networks_threshold_instruction" },
{ type:"box", id:"networks_threshold_explanation" },
{ type:"box", id:"networks_threshold_end" }
],
add:[
{
type:"box",
id:"_1_pre_puzzle",
text:"_1_pre_puzzle", x:60, y:0, w:400
id:"networks_pre_puzzle",
text:"networks_pre_puzzle", x:60, y:0, w:400
}
]
},
@ -198,18 +198,18 @@ SLIDES.push(
// Done? Let's go... (hidden at first...)
{
type:"box",
id:"_1_puzzle",
text:"_1_puzzle", x:60, y:10, w:300
id:"networks_puzzle",
text:"networks_puzzle", x:60, y:10, w:300
},
{
type:"box",
id:"_1_puzzle_metric",
text:"_1_puzzle_metric", x:60, y:220, w:300
id:"networks_puzzle_metric",
text:"networks_puzzle_metric", x:60, y:220, w:300
},
{
type:"box",
id:"_1_puzzle_end",
text:"_1_puzzle_end", x:60, y:220, w:300,
id:"networks_puzzle_end",
text:"networks_puzzle_end", x:60, y:220, w:300,
hidden:true
}
@ -218,7 +218,7 @@ SLIDES.push(
onstart:function(slideshow, state){
// Modify puzzle metric box
var metric = slideshow.boxes.getChildByID("_1_puzzle_metric");
var metric = slideshow.boxes.getChildByID("networks_puzzle_metric");
metric.innerHTML = "";
var COLOR = "hsl(50, 100%, 50%)";
@ -257,7 +257,7 @@ SLIDES.push(
});
// Modify metric box!
var label = getWords("_1_puzzle_metric") + " " + peepCount + " " + getWords("_1_puzzle_metric_2");
var label = getWords("networks_puzzle_metric") + " " + peepCount + " " + getWords("networks_puzzle_metric_2");
state.metric_label.innerHTML = label;
state.metric_bar.style.width = Math.round((peepCount/9)*100)+"%";
@ -266,8 +266,8 @@ SLIDES.push(
if(peepCount==9){
var boxes = slideshow.boxes;
state.won = true;
boxes.hideChildByID("_1_puzzle_metric");
boxes.showChildByID("_1_puzzle_end");
boxes.hideChildByID("networks_puzzle_metric");
boxes.showChildByID("networks_puzzle_end");
sim.win();
}
}
@ -279,9 +279,9 @@ SLIDES.push(
// post-puzzle ramble, introduce simple contagion
{
remove:[
{ type:"box", id:"_1_puzzle" },
{ type:"box", id:"_1_puzzle_metric" },
{ type:"box", id:"_1_puzzle_end" }
{ type:"box", id:"networks_puzzle" },
{ type:"box", id:"networks_puzzle_metric" },
{ type:"box", id:"networks_puzzle_end" }
],
move:[
// shift sim to side
@ -291,13 +291,13 @@ SLIDES.push(
// new text
{
type:"box",
id:"_1_post_puzzle",
text:"_1_post_puzzle", x:560, y:0, w:400
id:"networks_post_puzzle",
text:"networks_post_puzzle", x:560, y:0, w:400
},
/*{
type:"box",
id:"_1_post_puzzle_bonus",
text:"_1_post_puzzle_bonus", x:170, y:1000 // offscreen!
id:"networks_post_puzzle_bonus",
text:"networks_post_puzzle_bonus", x:170, y:1000 // offscreen!
},*/
],
@ -314,7 +314,7 @@ SLIDES.push(
// Win Bonus
if(!state.won){
if(peepCount==9){
var winbox = slideshow.boxes.getChildByID("_1_post_puzzle_bonus");
var winbox = slideshow.boxes.getChildByID("networks_post_puzzle_bonus");
if(winbox){
winbox.style.top = "270px";
state.won = true;

24
js/chapters/3_Simple_Contagion.js
View File

@ -20,8 +20,8 @@ SLIDES.push(
// Intro text
{
type:"box",
id:"_2_simple",
text:"_2_simple",
id:"simple_simple",
text:"simple_simple",
x:80, y:0, w:800, h:160,
align: "center"
},
@ -55,7 +55,7 @@ SLIDES.push(
{
id:"end",
type:"box",
text:"_2_simple_end",
text:"simple_simple_end",
x:660, y:440, w:300, h:100,
hidden:true
}
@ -84,7 +84,7 @@ SLIDES.push(
},
{
remove:[
{type:"box", id:"_2_simple"}
{type:"box", id:"simple_simple"}
],
move:[
{type:"box", id:"ui", y:5},
@ -93,13 +93,13 @@ SLIDES.push(
add:[
{
type:"box",
text:"_2_simple_2",
text:"simple_simple_2",
x:0, y:390, w:650, h:100,
align: "right"
},
{
type:"box",
text:"_2_simple_end",
text:"simple_simple_end",
x:660, y:440, w:300, h:90
}
]
@ -113,8 +113,8 @@ SLIDES.push(
// Intro text
{
type:"box",
id:"_2_cascade",
text:"_2_cascade",
id:"simple_cascade",
text:"simple_cascade",
x:80, y:0, w:800, h:100,
align: "center"
},
@ -149,7 +149,7 @@ SLIDES.push(
{
id:"end",
type:"box",
text:"_2_cascade_end",
text:"simple_cascade_end",
x:330, y:460, w:300, h:100,
hidden:true
},
@ -178,7 +178,7 @@ SLIDES.push(
},
{
remove:[
{type:"box", id:"_2_cascade"},
{type:"box", id:"simple_cascade"},
{type:"box", id:"end"}
],
move:[
@ -188,13 +188,13 @@ SLIDES.push(
add:[
{
type:"box",
text:"_2_post_cascade",
text:"simple_post_cascade",
x:0, y:390, w:650, h:150,
align: "right"
},
{
type:"box",
text:"_2_post_cascade_end",
text:"simple_post_cascade_end",
x:660, y:450, w:300, h:90
}
]

34
js/chapters/4_Complex_Contagion.js
View File

@ -11,8 +11,8 @@ SLIDES.push(
// Intro text
{
type:"box",
id:"_3_complex",
text:"_3_complex",
id:"complex_complex",
text:"complex_complex",
x:0, y:0, w:480, h:540
},
@ -63,12 +63,12 @@ SLIDES.push(
{
remove:[
{type:"box", id:"_3_complex"}
{type:"box", id:"complex_complex"}
],
add:[
{
type:"box",
text:"_3_complex_2",
text:"complex_complex_2",
x:0, y:0, w:480, h:540
}
]
@ -83,8 +83,8 @@ SLIDES.push(
// Intro text
{
type:"box",
id:"_3_cascade",
text:"_3_cascade",
id:"complex_cascade",
text:"complex_cascade",
x:60, y:0, w:840, h:100,
align: "center"
},
@ -119,7 +119,7 @@ SLIDES.push(
{
id:"end",
type:"box",
text:"_3_cascade_end",
text:"complex_cascade_end",
x:330, y:460, w:300, h:100,
hidden:true
},
@ -149,7 +149,7 @@ SLIDES.push(
{
remove:[
{type:"box", id:"_3_cascade"},
{type:"box", id:"complex_cascade"},
{type:"box", id:"end"}
],
move:[
@ -159,13 +159,13 @@ SLIDES.push(
add:[
{
type:"box",
text:"_3_post_cascade",
text:"complex_post_cascade",
x:0, y:390, w:650, h:150,
align: "right"
},
{
type:"box",
text:"_3_post_cascade_end",
text:"complex_post_cascade_end",
x:660, y:450, w:300, h:90
}
]
@ -180,8 +180,8 @@ SLIDES.push(
// Intro text
{
type:"box",
id:"_3_prevent",
text:"_3_prevent",
id:"complex_prevent",
text:"complex_prevent",
x:80, y:0, w:800, h:140,
align: "center"
},
@ -216,7 +216,7 @@ SLIDES.push(
/*{
id:"end",
type:"box",
text:"_3_prevent_end",
text:"complex_prevent_end",
x:660, y:440, w:300, h:100,
hidden:true
}*/
@ -276,7 +276,7 @@ SLIDES.push(
{
remove:[
{type:"box", id:"_3_prevent"}
{type:"box", id:"complex_prevent"}
],
move:[
{type:"box", id:"ui", y:0},
@ -285,13 +285,13 @@ SLIDES.push(
add:[
{
type:"box",
text:"_3_prevent_2",
text:"complex_prevent_2",
x:0, y:390, w:650, h:100,
align: "right"
},
{
type:"box",
text:"_3_prevent_end",
text:"complex_prevent_end",
x:660, y:450, w:300, h:90
}
]
@ -330,7 +330,7 @@ SLIDES.push(
// Text
{
type:"box",
text:"_3_groupthink",
text:"complex_groupthink",
x:460, y:0, w:500, h:540
},

2
js/chapters/9_Credits.js
View File

@ -14,7 +14,7 @@ SLIDES.push(
// CREDITS
{
type:"box",
text:"_7_credits", x:280, y:0, w:400, h:70, align:"center", color:"#fff"
text:"credits", x:280, y:0, w:400, h:70, align:"center", color:"#fff"
}
]

18
js/main.js
View File

@ -28,7 +28,19 @@ window.onload = function(){
}
window.requestAnimationFrame(update);
// First slide!
slideshow.gotoChapter("Conclusion");
// Start Preloading!
publish("prepreload");
}
}
subscribe("START", function(){
// Music
// Navigation
// Introduction
slideshow.next();
});

287
js/sim/_Game.js
View File

@ -1,287 +0,0 @@
Math.TAU = Math.PI*2;
var canvas = document.getElementById("canvas");// || document.createElement("canvas");
canvas.style.cursor = "none";
var ctx = canvas.getContext('2d');
var peeps = [];
var connections = [];
var drawing = new Drawing();
var cursor = new Cursor();
var winnerImage = new Image();
winnerImage.src = "img/winner.png";
var CONTAGION_THRESHOLD = 0;
var CONTAGION_THRESHOLD_2 = 0;
var clearNetwork = function(){
peeps = [];
connections = [];
};
var loadNetwork = function(data){
// Clear!
clearNetwork();
// Peeps
data.peeps.forEach(function(p){
addPeep(p[0], p[1], p[2]);
});
// Connections
data.connections.forEach(function(c){
var from = peeps[c[0]];
var to = peeps[c[1]];
var uncuttable = c[2];
addConnection(from, to, uncuttable);
});
// Contagion threshold?
if(data.contagion !== undefined){
CONTAGION_THRESHOLD = data.contagion;
}else{
CONTAGION_THRESHOLD = 0;
}
if(data.contagion2 !== undefined){
CONTAGION_THRESHOLD_2 = data.contagion2;
}else{
CONTAGION_THRESHOLD_2 = 0;
}
}
var saveNetwork = function(){
var data = {
peeps: [],
connections: [],
contagion: CONTAGION_THRESHOLD,
contagion2: CONTAGION_THRESHOLD_2,
};
peeps.forEach(function(peep){
data.peeps.push([peep.x, peep.y, peep.state]);
});
connections.forEach(function(c){
var fromIndex = peeps.indexOf(c.from);
var toIndex = peeps.indexOf(c.to);
data.connections.push([fromIndex, toIndex, c.uncuttable]);
});
return data;
}
var DRAW_STATE = 0; // 0-nothing | 1-connecting | 2-erasing
var DRAW_CONNECT_FROM = null;
var CONNECT_FROM_BUFFER = 15;//25;
var CONNECT_TO_BUFFER = 25;
var YOU_ARE_WINNER = false;
function update(){
// Mouse logic...
if(SIM_IS_RUNNING){
DRAW_STATE = 0; // back to normal
Mouse.update();
}else{
if(Mouse.justPressed && DRAW_STATE===0){
// Clicked on a peep?
var peepClicked = _mouseOverPeep(CONNECT_FROM_BUFFER); // buffer of 20px
if(peepClicked){
DRAW_CONNECT_FROM = peepClicked;
DRAW_STATE = 1; // START CONNECTING
drawing.startConnect(peepClicked); // Drawing logic
}else{
DRAW_STATE = 2; // START ERASING
}
}
if(DRAW_STATE==2){ // ERASE
// Intersect with any CUTTABLE connections?
var line = [Mouse.lastX, Mouse.lastY, Mouse.x, Mouse.y];
for(var i=connections.length-1; i>=0; i--){ // going BACKWARDS coz killing
var c = connections[i];
if(c.uncuttable) continue; // don't touch the UNCUTTABLES
if(c.hitTest(line)) connections.splice(i,1);
}
drawing.startErase(); // Drawing logic
}
if(Mouse.justReleased && DRAW_STATE!==0){
// Connecting peeps, and released on a peep?
if(DRAW_STATE==1){
var peepReleased = _mouseOverPeep(CONNECT_TO_BUFFER); // buffer of 20px
if(peepReleased){ // connect 'em!
addConnection(DRAW_CONNECT_FROM, peepReleased);
DRAW_CONNECT_FROM = null;
}
drawing.endConnect(); // Drawing logic
}else if(DRAW_STATE==2){
drawing.endErase(); // Drawing logic
}
DRAW_STATE = 0; // back to normal
}
Mouse.update();
// Cursor Logic
if(DRAW_STATE==0){
var peepHovered = _mouseOverPeep(CONNECT_FROM_BUFFER); // buffer of 20px
if(peepHovered){
cursor.setMode(Cursor.CONNECT);
}else{
cursor.setMode(Cursor.NORMAL);
}
}
if(DRAW_STATE==1){
cursor.setMode(Cursor.CONNECT);
}
if(DRAW_STATE==2){
cursor.setMode(Cursor.ERASE);
}
}
// Update Logic
connections.forEach(function(connection){
connection.update(ctx);
});
drawing.update();
peeps.forEach(function(peep){
peep.update();
});
cursor.update();
// Draw Logic
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = SIM_IS_RUNNING ? "#eee" : "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(2,2);
_preUpdate();
//ctx.translate(0,100);
connections.forEach(function(connection){
connection.draw(ctx);
});
drawing.draw(ctx);
peeps.forEach(function(peep){
peep.draw(ctx);
});
cursor.draw(ctx);
_onUpdate();
if(YOU_ARE_WINNER){
ctx.drawImage(winnerImage, 0, 0, 500, 500);
}
ctx.restore();
// RAF
requestAnimationFrame(update);
}
function _preUpdate(){
// TO IMPLEMENT
}
function _onUpdate(){
// TO IMPLEMENT
}
///////////////////////////////////////
// CONTAGION UI, WHY NOT HMMMM ////////
///////////////////////////////////////
function $(query){
return document.querySelector(query);
}
function showContagionUI(){
// Just display the div
$("#sim_ui").style.display = "block";
_updateSimRunningUI();
}
var SIM_IS_RUNNING = false;
var SIM_STEP = 0;
var _updateSimRunningUI = function(){
if(SIM_IS_RUNNING){
$("#sim_is_not_running").style.display = "none";
$("#sim_is_running").style.display = "inline";
//document.body.style.background = "#777";
$("#sim_step").innerHTML = SIM_STEP;
}else{
$("#sim_is_not_running").style.display = "inline";
$("#sim_is_running").style.display = "none";
//document.body.style.background = "";
}
};
var _networkBeforeSimulationStarted = null;
function _startSim(){
SIM_STEP = 0;
SIM_IS_RUNNING = true;
_networkBeforeSimulationStarted = saveNetwork();
_updateSimRunningUI();
_startSimulation();
};
$("#sim_start").onclick = _startSim;
function _stopSim(){
SIM_IS_RUNNING = false;
_resetToBeforeSimStarted();
_updateSimRunningUI();
_stopSimulation();
};
$("#sim_stop").onclick = _stopSim;
function _simNext(){
SIM_STEP++;
_updateSimRunningUI();
_stepSimulation();
};
$("#sim_next").onclick = _simNext;
function _resetToBeforeSimStarted(){
loadNetwork(_networkBeforeSimulationStarted);
}
function _startSimulation(){
// To Implement
}
function _stopSimulation(){
// To Implement
}
function _stepSimulation(){
_infectPeople();
}
function _infectPeople(){
// Consider all peeps, and their friends
var toInfect = [];
peeps.forEach(function(peep){
// How many infected friends?
if(peep.numFriends==0) return; // No friends? NVM.
var ratioOfInfectedFriends = peep.numInfectedFriends/peep.numFriends;
// Passed threshold?
if(CONTAGION_THRESHOLD==0){ // simple contagion, just ANY friend
if(peep.numInfectedFriends>0) toInfect.push(peep);
}else{
// greater OR EQUALS (fuzz coz floating point)
if(ratioOfInfectedFriends>=CONTAGION_THRESHOLD-0.0001){
toInfect.push(peep);
}
}
});
// "Infect" the peeps who need to get infected
toInfect.forEach(function(peep){
peep.infect();
});
}

72
js/slideshow/Preloader.js Normal file
View File

@ -0,0 +1,72 @@
// Load just enough for the splash screen
subscribe("prepreload", function(){
Preload([
// For the Sim
{image:"sprites/button_large.png"},
{image:"sprites/line.png"},
{image:"sprites/peeps.png"},
{image:"sprites/pencil.png"},
],function(progress){
console.log("Pre-Preloader: "+progress);
if(progress==1){
var pre_preloader = $("#pre_preloader");
pre_preloader.parentNode.removeChild(pre_preloader);
slideshow.gotoChapter("Preloader");
publish("preload");
}
});
});
// Load the rest of it
window.PRELOAD_PROGRESS = 0;
subscribe("preload", function(){
Preload([
// Music
{audio:"audio/bg_music.mp3"},
// For the slides
{image:"sprites/sandbox_tools.png"},
{image:"sprites/scratch.png"},
{image:"sprites/tutorial_connect.png"},
{image:"sprites/tutorial_disconnect.png"},
],function(progress){
console.log("Preloader: "+progress);
window.PRELOAD_PROGRESS = progress;
});
});
///////////////////////////////////////////
///////////////////////////////////////////
var preload_images = [];
function Preload(assets, onProgress){
var loaded = 0;
var _onAssetLoad = function(){
loaded++;
onProgress(loaded/assets.length);
};
assets.forEach(function(asset){
// Image
if(asset.image){
var img = new Image();
img.onload = _onAssetLoad;
img.src = asset.image;
}
});
}

23
js/slideshow/Slideshow.js
View File

@ -26,7 +26,7 @@ function Slideshow(){
// GOTO and NEXT
var _delay = 300;
self.IS_TRANSITIONING = false;
self.goto = function(index){
self.goto = function(index, forceClear){
// Wait for transition to finish!
if(self.IS_TRANSITIONING) return;
@ -39,7 +39,7 @@ function Slideshow(){
// Clear?
var _delayNewSlide = 0;
if(slide.clear && !isFirstSlide){
if((slide.clear || forceClear) && !isFirstSlide){
_delayNewSlide = 800;
self.scratch.scratchOut(); // Scratch out
$("#container").removeAttribute("sim_is_running"); // remove that UI
@ -59,7 +59,9 @@ function Slideshow(){
var withFade = true;
switch(childConfig.type){
case "box":
self.boxes.removeChildByID(childConfig.id, withFade);
if(self.boxes.getChildByID(childConfig.id)){
self.boxes.removeChildByID(childConfig.id, withFade);
}
break;
case "sim":
//self.simulations.removeChildByID(childConfig);
@ -108,7 +110,12 @@ function Slideshow(){
self.boxes.add(childConfig, withFade);
break;
case "sim":
self.simulations.add(childConfig, withFade);
if(childConfig.ONLY_IF_IT_DOESNT_ALREADY_EXIST
&& self.simulations.sims.length>0){
// then nothing
}else{
self.simulations.add(childConfig, withFade);
}
break;
}
})
@ -143,7 +150,7 @@ function Slideshow(){
var index = SLIDES.findIndex(function(slide){
return slide.chapter == chapterID;
});
self.goto(index);
self.goto(index, true);
};
self.next = function(){
self.goto(self.slideIndex+1);
@ -159,8 +166,10 @@ function Slideshow(){
// Update
self.update = function(){
var slide = self.currentSlide;
self.simulations.update();
if(slide.onupdate) slide.onupdate(self, self.currentState);
if(slide){
self.simulations.update();
if(slide.onupdate) slide.onupdate(self, self.currentState);
}
};
// Draw