preloader there
This commit is contained in:
Nicky Case
parent
c9c7c7c333
commit
e6871a8e3e
Binary file not shown.
|
|
@ -78,6 +78,10 @@ b, strong{
|
||||||
#slideshow .next_button:hover{
|
#slideshow .next_button:hover{
|
||||||
background-position: 0 -100px;
|
background-position: 0 -100px;
|
||||||
}
|
}
|
||||||
|
#slideshow .next_button[disabled]{
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
.transitionable{
|
.transitionable{
|
||||||
transition: opacity 0.3s ease-in-out,
|
transition: opacity 0.3s ease-in-out,
|
||||||
left 0.3s ease-in-out,
|
left 0.3s ease-in-out,
|
||||||
|
|
@ -277,6 +281,24 @@ b, strong{
|
||||||
cursor: none;
|
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 */
|
/* THIS THING'S WORDS */
|
||||||
words, bonus, glossary{
|
words, bonus, glossary{
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
134
index.html
134
index.html
|
|
@ -24,6 +24,7 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<!-- THE SLIDESHOW -->
|
||||||
<div id="container">
|
<div id="container">
|
||||||
|
|
||||||
<!-- Simulation(s) in background -->
|
<!-- Simulation(s) in background -->
|
||||||
|
|
@ -120,8 +121,14 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<div id="social"></div>
|
<div id="social"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- The Pencil -->
|
||||||
<canvas id="pencil"></canvas>
|
<canvas id="pencil"></canvas>
|
||||||
|
|
||||||
|
<!-- Preloader -->
|
||||||
|
<div id="pre_preloader">
|
||||||
|
<div>loading...</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
@ -129,29 +136,43 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<!-- THE SLIDESHOW'S WORDS -->
|
<!-- 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>
|
||||||
|
|
||||||
<words id="_0_subtitle">
|
<words id="preloader_button">
|
||||||
playing time: 30 min • by nicky case, april 2018
|
<next></next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_0_loading">
|
<words id="preloader_loading">
|
||||||
loading...
|
loading...
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_0_play">
|
<words id="preloader_play">
|
||||||
let's play! →
|
let's play! →
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_0_intro">
|
<!-- Introduction -->
|
||||||
|
|
||||||
|
<words id="intro">
|
||||||
<div class="circle"><span>
|
<div class="circle"><span>
|
||||||
|
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
@ -173,7 +194,7 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
</span></div>
|
</span></div>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_0_intro_2">
|
<words id="intro_2">
|
||||||
<div class="circle"><span>
|
<div class="circle"><span>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -197,22 +218,22 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
</span></div>
|
</span></div>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<!-- 1. Networks -->
|
<!-- Networks -->
|
||||||
|
|
||||||
<words id="_1_tutorial_start">
|
<words id="networks_tutorial_start">
|
||||||
<b>Let's draw a network!</b>
|
<b>Let's draw a network!</b>
|
||||||
Each connection represents a friendship between two people:
|
Each connection represents a friendship between two people:
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_tutorial_connect">
|
<words id="networks_tutorial_connect">
|
||||||
draw to connect
|
draw to connect
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_tutorial_disconnect">
|
<words id="networks_tutorial_disconnect">
|
||||||
scratch to disconnect
|
scratch to disconnect
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_tutorial_end">
|
<words id="networks_tutorial_end">
|
||||||
|
|
||||||
feel free to keep playing around, and draw whatever friendship network you want!
|
feel free to keep playing around, and draw whatever friendship network you want!
|
||||||
when you're done,
|
when you're done,
|
||||||
|
|
@ -220,7 +241,7 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
|
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_threshold">
|
<words id="networks_threshold">
|
||||||
|
|
||||||
But people don't just have social connections to make pretty pictures.
|
But people don't just have social connections to make pretty pictures.
|
||||||
People look at their social connections, to understand their social world.
|
People look at their social connections, to understand their social world.
|
||||||
|
|
@ -230,11 +251,11 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
|
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_threshold_instruction">
|
<words id="networks_threshold_instruction">
|
||||||
<b>Draw/erase connections, and see what happens! →</b>
|
<b>Draw/erase connections, and see what happens! →</b>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_threshold_explanation">
|
<words id="networks_threshold_explanation">
|
||||||
<span style="color:#666">top-left:</span>
|
<span style="color:#666">top-left:</span>
|
||||||
# of drinker friends / # of total friends
|
# of drinker friends / # of total friends
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -246,11 +267,11 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<br> (they'll glow if past threshold)
|
<br> (they'll glow if past threshold)
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_threshold_end">
|
<words id="networks_threshold_end">
|
||||||
<next>cool, got it</next>
|
<next>cool, got it</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_pre_puzzle">
|
<words id="networks_pre_puzzle">
|
||||||
|
|
||||||
However, networks can <i>fool</i> people.
|
However, networks can <i>fool</i> people.
|
||||||
Just like how you see the earth as flat because you're on it,
|
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>
|
||||||
|
|
||||||
<words id="_1_puzzle">
|
<words id="networks_puzzle">
|
||||||
|
|
||||||
<b style="font-size:2em">PUZZLE TIME!</b>
|
<b style="font-size:2em">PUZZLE TIME!</b>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -282,19 +303,19 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
(even though binge-drinkers are outnumbered 2-to-1)
|
(even though binge-drinkers are outnumbered 2-to-1)
|
||||||
|
|
||||||
</words>
|
</words>
|
||||||
<words id="_1_puzzle_metric">
|
<words id="networks_puzzle_metric">
|
||||||
<b>FOOLED:</b>
|
<b>FOOLED:</b>
|
||||||
</words>
|
</words>
|
||||||
<words id="_1_puzzle_metric_2">
|
<words id="networks_puzzle_metric_2">
|
||||||
out of 9 people
|
out of 9 people
|
||||||
</words>
|
</words>
|
||||||
<words id="_1_puzzle_end">
|
<words id="networks_puzzle_end">
|
||||||
Congrats! You manipulated a group of students into believing
|
Congrats! You manipulated a group of students into believing
|
||||||
in the prevalance of an incredibly unhealthy social norm! Good going!
|
in the prevalance of an incredibly unhealthy social norm! Good going!
|
||||||
<next wiggle>...uh. thanks?</next>
|
<next wiggle>...uh. thanks?</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_1_post_puzzle">
|
<words id="networks_post_puzzle">
|
||||||
|
|
||||||
What you just created is called The Majority Illusion(*),
|
What you just created is called The Majority Illusion(*),
|
||||||
which also explains why people think their political views are consensus,
|
which also explains why people think their political views are consensus,
|
||||||
|
|
@ -312,17 +333,12 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
|
|
||||||
<next>“Contagions!” →</next>
|
<next>“Contagions!” →</next>
|
||||||
|
|
||||||
<!--<b>← bonus challenge:</b> make everyone think
|
|
||||||
<i>less than half</i> of their friends are binge-drinkers-->
|
|
||||||
|
|
||||||
</words>
|
</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.
|
Below, we start with one person (img) who has some information.
|
||||||
Some <i>mis</i>information. "Fake news", as the cool kids say.
|
Some <i>mis</i>information. "Fake news", as the cool kids say.
|
||||||
And every day, that person spreads the rumor to their friends.
|
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)
|
(p.s: you can't draw <i>while</i> the sim's running)
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_2_simple_2">
|
<words id="simple_simple_2">
|
||||||
Note: despite the negative name, "contagions" can be good or bad.
|
Note: despite the negative name, "contagions" can be good or bad.
|
||||||
There's strong statistical evidence(*) that
|
There's strong statistical evidence(*) that
|
||||||
smoking, happiness, obesity, voting patterns, and cooperation levels
|
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.
|
and even some evidence that suicides(*) and mass shootings(*) are, too.
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_2_simple_end">
|
<words id="simple_simple_end">
|
||||||
<next wiggle>well that's depressing →</next>
|
<next wiggle>well that's depressing →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_2_cascade">
|
<words id="simple_cascade">
|
||||||
Indeed it is.
|
Indeed it is.
|
||||||
Anyway, <b>PUZZLE TIME!</b>
|
Anyway, <b>PUZZLE TIME!</b>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -353,11 +369,11 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
(new rule: you can't cut the <i>thick</i> connections)
|
(new rule: you can't cut the <i>thick</i> connections)
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_2_cascade_end">
|
<words id="simple_cascade_end">
|
||||||
<next wiggle>fan-flipping-tastic →</next>
|
<next wiggle>fan-flipping-tastic →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_2_post_cascade">
|
<words id="simple_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 financial institutions fell for such a cascade in 2008.
|
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...
|
They're called...
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_2_post_cascade_end">
|
<words id="simple_post_cascade_end">
|
||||||
<next wiggle>“<i>Complex</i> Contagions!” →</next>
|
<next wiggle>“<i>Complex</i> Contagions!” →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<!-- 3. Complex Contagions -->
|
<!-- Complex Contagions -->
|
||||||
|
|
||||||
<words id="_3_complex">
|
<words id="complex_complex">
|
||||||
<span style="line-height:1.4em">
|
<span style="line-height:1.4em">
|
||||||
|
|
||||||
Truth may be stranger than fiction, but it doesn't sell as well.
|
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>
|
</span>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_complex_2">
|
<words id="complex_complex_2">
|
||||||
<span style="line-height:1.4em">
|
<span style="line-height:1.4em">
|
||||||
|
|
||||||
<b>CAUTION:</b>
|
<b>CAUTION:</b>
|
||||||
|
|
@ -434,17 +450,17 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
</span>
|
</span>
|
||||||
</words>
|
</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...
|
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! ↓</b>
|
<b>Try to "infect" everyone with complex wisdom! ↓</b>
|
||||||
(feel free to just hit 'start' and <i>try</i> as many solutions as you want)
|
(feel free to just hit 'start' and <i>try</i> as many solutions as you want)
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_cascade_end">
|
<words id="complex_cascade_end">
|
||||||
<next wiggle>HOT DANG →</next>
|
<next wiggle>HOT DANG →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_post_cascade">
|
<words id="complex_post_cascade">
|
||||||
Now, you may think: so what, complex contagions () are just simple contagions ()
|
Now, you may think: so what, complex contagions () are just simple contagions ()
|
||||||
that need more connections?
|
that need more connections?
|
||||||
Not so fast!
|
Not so fast!
|
||||||
|
|
@ -452,11 +468,11 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
It's apples vs oranges, not apples vs more apples.
|
It's apples vs oranges, not apples vs more apples.
|
||||||
This idea will be clearer if we revisit...
|
This idea will be clearer if we revisit...
|
||||||
</words>
|
</words>
|
||||||
<words id="_3_post_cascade_end">
|
<words id="complex_post_cascade_end">
|
||||||
<next wiggle>...yet another puzzle! →</next>
|
<next wiggle>...yet another puzzle! →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_prevent">
|
<words id="complex_prevent">
|
||||||
Now, let's do the <i>opposite</i> of everything we've done before.
|
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.
|
If you hit "start" below now, the contagion will just spread to everyone.
|
||||||
No surprise there.
|
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! ↓</b>
|
<b>draw a network to <i>prevent</i> the contagion from spreading to everyone! ↓</b>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_prevent_2">
|
<words id="complex_prevent_2">
|
||||||
And <i>that's</i> the important difference between "simple" and "complex" contagion.
|
And <i>that's</i> the important difference between "simple" and "complex" contagion.
|
||||||
While more connections always helps spread <i>simple</i> ideas,
|
While more connections always helps spread <i>simple</i> ideas,
|
||||||
more connections can <i>hurt</i> the spread of <i>complex</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...
|
And this isn't just a theoretical problem. This can be a matter of life...
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_prevent_end">
|
<words id="complex_prevent_end">
|
||||||
<next wiggle>...or death. →</next>
|
<next wiggle>...or death. →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<words id="_3_groupthink">
|
<words id="complex_groupthink">
|
||||||
|
|
||||||
The people at NASA were smart cookies.
|
The people at NASA were smart cookies.
|
||||||
I mean, they'd used Newton's theories to get us to the moon.
|
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>
|
</words>
|
||||||
|
|
||||||
<!-- 4. Bonding & Bridging -->
|
<!-- Bonding & Bridging -->
|
||||||
|
|
||||||
<words id="bonding_1">
|
<words id="bonding_1">
|
||||||
← Too few connections, and an idea can't spread.
|
← Too few connections, and an idea can't spread.
|
||||||
|
|
@ -598,7 +614,7 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<next>The Sandbox Mode →</next>
|
<next>The Sandbox Mode →</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<!-- 5. Sandbox -->
|
<!-- Sandbox -->
|
||||||
|
|
||||||
<words id="sandbox_caption">
|
<words id="sandbox_caption">
|
||||||
<b>NOTE: "Sandbox Mode" is totally optional!</b>
|
<b>NOTE: "Sandbox Mode" is totally optional!</b>
|
||||||
|
|
@ -654,8 +670,7 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
[Space]: Drag [Backspace]: Delete
|
[Space]: Drag [Backspace]: Delete
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<!-- 6. Conclusion -->
|
<!-- Conclusion -->
|
||||||
<!-- recap and CONCRETE LIFE TAKE-AWAYS. mirror intro UI -->
|
|
||||||
|
|
||||||
<words id="conclusion_1">
|
<words id="conclusion_1">
|
||||||
|
|
||||||
|
|
@ -761,9 +776,9 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<next small><3</next>
|
<next small><3</next>
|
||||||
</words>
|
</words>
|
||||||
|
|
||||||
<!-- 7. Credits -->
|
<!-- Credits -->
|
||||||
|
|
||||||
<words id="_7_credits">
|
<words id="credits">
|
||||||
CREDITS
|
CREDITS
|
||||||
<br>
|
<br>
|
||||||
CREDITS
|
CREDITS
|
||||||
|
|
@ -832,13 +847,14 @@ Cursor is allowed to flow EVERYWHERE though...
|
||||||
<script src="js/slideshow/Navigation.js"></script>
|
<script src="js/slideshow/Navigation.js"></script>
|
||||||
<script src="js/slideshow/SimUI.js"></script>
|
<script src="js/slideshow/SimUI.js"></script>
|
||||||
<script src="js/slideshow/SandboxUI.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/Peep.js"></script>
|
||||||
<script src="js/sim/Connection.js"></script>
|
<script src="js/sim/Connection.js"></script>
|
||||||
<script src="js/sim/ConnectorCutter.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/sim/Simulations.js"></script>
|
||||||
|
|
||||||
|
<script src="js/chapters/0_Preloader.js"></script>
|
||||||
<script src="js/chapters/1_Introduction.js"></script>
|
<script src="js/chapters/1_Introduction.js"></script>
|
||||||
<script src="js/chapters/2_Networks.js"></script>
|
<script src="js/chapters/2_Networks.js"></script>
|
||||||
<script src="js/chapters/3_Simple_Contagion.js"></script>
|
<script src="js/chapters/3_Simple_Contagion.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
);
|
||||||
|
|
@ -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(
|
SLIDES.push(
|
||||||
|
|
||||||
{
|
{
|
||||||
chapter: "Introduction",
|
chapter: "Introduction",
|
||||||
clear:true,
|
|
||||||
|
remove:[
|
||||||
|
{type:"box", id:"title"},
|
||||||
|
{type:"box", id:"button"}
|
||||||
|
],
|
||||||
|
|
||||||
add:[
|
add:[
|
||||||
|
|
||||||
// Splash
|
// Splash
|
||||||
{
|
{
|
||||||
|
ONLY_IF_IT_DOESNT_ALREADY_EXIST: true,
|
||||||
type:"sim",
|
type:"sim",
|
||||||
x:960/2, y:540/2,
|
x:960/2, y:540/2,
|
||||||
fullscreen: true,
|
fullscreen: true,
|
||||||
|
|
@ -30,8 +26,8 @@ SLIDES.push(
|
||||||
// Words
|
// Words
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_0_intro",
|
id:"intro",
|
||||||
text:"_0_intro", x:210, y:0, w:540, h:540, align:"center"
|
text:"intro", x:210, y:0, w:540, h:540, align:"center"
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
@ -39,13 +35,13 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{ type:"box", id:"_0_intro" }
|
{ type:"box", id:"intro" }
|
||||||
],
|
],
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_0_intro_2",
|
id:"intro_2",
|
||||||
text:"_0_intro_2", x:210, y:0, w:540, h:540, align:"center"
|
text:"intro_2", x:210, y:0, w:540, h:540, align:"center"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ SLIDES.push(
|
||||||
// The top instructions
|
// The top instructions
|
||||||
{
|
{
|
||||||
type:"box",
|
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
|
// The fullscreen simulation
|
||||||
|
|
@ -31,7 +31,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"connect_words",
|
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",
|
type:"box",
|
||||||
|
|
@ -43,7 +43,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"disconnect_words",
|
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",
|
type:"box",
|
||||||
|
|
@ -55,7 +55,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"end_words",
|
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
|
hidden:true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -109,19 +109,19 @@ SLIDES.push(
|
||||||
// TEXT
|
// TEXT
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_threshold",
|
id:"networks_threshold",
|
||||||
text:"_1_threshold", x:60, y:25, w:400
|
text:"networks_threshold", x:60, y:25, w:400
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_threshold_instruction",
|
id:"networks_threshold_instruction",
|
||||||
text:"_1_threshold_instruction", x:110, y:260, w:300,
|
text:"networks_threshold_instruction", x:110, y:260, w:300,
|
||||||
align:"center"
|
align:"center"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_threshold_explanation",
|
id:"networks_threshold_explanation",
|
||||||
text:"_1_threshold_explanation", x:105, y:340, w:400,
|
text:"networks_threshold_explanation", x:105, y:340, w:400,
|
||||||
align:"right",
|
align:"right",
|
||||||
color:"#bbb",
|
color:"#bbb",
|
||||||
fontSize:"0.75em",
|
fontSize:"0.75em",
|
||||||
|
|
@ -129,8 +129,8 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_threshold_end",
|
id:"networks_threshold_end",
|
||||||
text:"_1_threshold_end", x:60, y:430, w:400
|
text:"networks_threshold_end", x:60, y:430, w:400
|
||||||
},
|
},
|
||||||
|
|
||||||
// SIMULATION: THRESHOLD
|
// SIMULATION: THRESHOLD
|
||||||
|
|
@ -155,16 +155,16 @@ SLIDES.push(
|
||||||
// pre-puzzle ramble
|
// pre-puzzle ramble
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{ type:"box", id:"_1_threshold" },
|
{ type:"box", id:"networks_threshold" },
|
||||||
{ type:"box", id:"_1_threshold_instruction" },
|
{ type:"box", id:"networks_threshold_instruction" },
|
||||||
{ type:"box", id:"_1_threshold_explanation" },
|
{ type:"box", id:"networks_threshold_explanation" },
|
||||||
{ type:"box", id:"_1_threshold_end" }
|
{ type:"box", id:"networks_threshold_end" }
|
||||||
],
|
],
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_pre_puzzle",
|
id:"networks_pre_puzzle",
|
||||||
text:"_1_pre_puzzle", x:60, y:0, w:400
|
text:"networks_pre_puzzle", x:60, y:0, w:400
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -198,18 +198,18 @@ SLIDES.push(
|
||||||
// Done? Let's go... (hidden at first...)
|
// Done? Let's go... (hidden at first...)
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_puzzle",
|
id:"networks_puzzle",
|
||||||
text:"_1_puzzle", x:60, y:10, w:300
|
text:"networks_puzzle", x:60, y:10, w:300
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_puzzle_metric",
|
id:"networks_puzzle_metric",
|
||||||
text:"_1_puzzle_metric", x:60, y:220, w:300
|
text:"networks_puzzle_metric", x:60, y:220, w:300
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_puzzle_end",
|
id:"networks_puzzle_end",
|
||||||
text:"_1_puzzle_end", x:60, y:220, w:300,
|
text:"networks_puzzle_end", x:60, y:220, w:300,
|
||||||
hidden:true
|
hidden:true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -218,7 +218,7 @@ SLIDES.push(
|
||||||
onstart:function(slideshow, state){
|
onstart:function(slideshow, state){
|
||||||
|
|
||||||
// Modify puzzle metric box
|
// Modify puzzle metric box
|
||||||
var metric = slideshow.boxes.getChildByID("_1_puzzle_metric");
|
var metric = slideshow.boxes.getChildByID("networks_puzzle_metric");
|
||||||
metric.innerHTML = "";
|
metric.innerHTML = "";
|
||||||
|
|
||||||
var COLOR = "hsl(50, 100%, 50%)";
|
var COLOR = "hsl(50, 100%, 50%)";
|
||||||
|
|
@ -257,7 +257,7 @@ SLIDES.push(
|
||||||
});
|
});
|
||||||
|
|
||||||
// Modify metric box!
|
// 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_label.innerHTML = label;
|
||||||
state.metric_bar.style.width = Math.round((peepCount/9)*100)+"%";
|
state.metric_bar.style.width = Math.round((peepCount/9)*100)+"%";
|
||||||
|
|
||||||
|
|
@ -266,8 +266,8 @@ SLIDES.push(
|
||||||
if(peepCount==9){
|
if(peepCount==9){
|
||||||
var boxes = slideshow.boxes;
|
var boxes = slideshow.boxes;
|
||||||
state.won = true;
|
state.won = true;
|
||||||
boxes.hideChildByID("_1_puzzle_metric");
|
boxes.hideChildByID("networks_puzzle_metric");
|
||||||
boxes.showChildByID("_1_puzzle_end");
|
boxes.showChildByID("networks_puzzle_end");
|
||||||
sim.win();
|
sim.win();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -279,9 +279,9 @@ SLIDES.push(
|
||||||
// post-puzzle ramble, introduce simple contagion
|
// post-puzzle ramble, introduce simple contagion
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{ type:"box", id:"_1_puzzle" },
|
{ type:"box", id:"networks_puzzle" },
|
||||||
{ type:"box", id:"_1_puzzle_metric" },
|
{ type:"box", id:"networks_puzzle_metric" },
|
||||||
{ type:"box", id:"_1_puzzle_end" }
|
{ type:"box", id:"networks_puzzle_end" }
|
||||||
],
|
],
|
||||||
move:[
|
move:[
|
||||||
// shift sim to side
|
// shift sim to side
|
||||||
|
|
@ -291,13 +291,13 @@ SLIDES.push(
|
||||||
// new text
|
// new text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_post_puzzle",
|
id:"networks_post_puzzle",
|
||||||
text:"_1_post_puzzle", x:560, y:0, w:400
|
text:"networks_post_puzzle", x:560, y:0, w:400
|
||||||
},
|
},
|
||||||
/*{
|
/*{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_1_post_puzzle_bonus",
|
id:"networks_post_puzzle_bonus",
|
||||||
text:"_1_post_puzzle_bonus", x:170, y:1000 // offscreen!
|
text:"networks_post_puzzle_bonus", x:170, y:1000 // offscreen!
|
||||||
},*/
|
},*/
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
@ -314,7 +314,7 @@ SLIDES.push(
|
||||||
// Win Bonus
|
// Win Bonus
|
||||||
if(!state.won){
|
if(!state.won){
|
||||||
if(peepCount==9){
|
if(peepCount==9){
|
||||||
var winbox = slideshow.boxes.getChildByID("_1_post_puzzle_bonus");
|
var winbox = slideshow.boxes.getChildByID("networks_post_puzzle_bonus");
|
||||||
if(winbox){
|
if(winbox){
|
||||||
winbox.style.top = "270px";
|
winbox.style.top = "270px";
|
||||||
state.won = true;
|
state.won = true;
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,8 @@ SLIDES.push(
|
||||||
// Intro text
|
// Intro text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_2_simple",
|
id:"simple_simple",
|
||||||
text:"_2_simple",
|
text:"simple_simple",
|
||||||
x:80, y:0, w:800, h:160,
|
x:80, y:0, w:800, h:160,
|
||||||
align: "center"
|
align: "center"
|
||||||
},
|
},
|
||||||
|
|
@ -55,7 +55,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
id:"end",
|
id:"end",
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_2_simple_end",
|
text:"simple_simple_end",
|
||||||
x:660, y:440, w:300, h:100,
|
x:660, y:440, w:300, h:100,
|
||||||
hidden:true
|
hidden:true
|
||||||
}
|
}
|
||||||
|
|
@ -84,7 +84,7 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{type:"box", id:"_2_simple"}
|
{type:"box", id:"simple_simple"}
|
||||||
],
|
],
|
||||||
move:[
|
move:[
|
||||||
{type:"box", id:"ui", y:5},
|
{type:"box", id:"ui", y:5},
|
||||||
|
|
@ -93,13 +93,13 @@ SLIDES.push(
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_2_simple_2",
|
text:"simple_simple_2",
|
||||||
x:0, y:390, w:650, h:100,
|
x:0, y:390, w:650, h:100,
|
||||||
align: "right"
|
align: "right"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_2_simple_end",
|
text:"simple_simple_end",
|
||||||
x:660, y:440, w:300, h:90
|
x:660, y:440, w:300, h:90
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -113,8 +113,8 @@ SLIDES.push(
|
||||||
// Intro text
|
// Intro text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_2_cascade",
|
id:"simple_cascade",
|
||||||
text:"_2_cascade",
|
text:"simple_cascade",
|
||||||
x:80, y:0, w:800, h:100,
|
x:80, y:0, w:800, h:100,
|
||||||
align: "center"
|
align: "center"
|
||||||
},
|
},
|
||||||
|
|
@ -149,7 +149,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
id:"end",
|
id:"end",
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_2_cascade_end",
|
text:"simple_cascade_end",
|
||||||
x:330, y:460, w:300, h:100,
|
x:330, y:460, w:300, h:100,
|
||||||
hidden:true
|
hidden:true
|
||||||
},
|
},
|
||||||
|
|
@ -178,7 +178,7 @@ SLIDES.push(
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{type:"box", id:"_2_cascade"},
|
{type:"box", id:"simple_cascade"},
|
||||||
{type:"box", id:"end"}
|
{type:"box", id:"end"}
|
||||||
],
|
],
|
||||||
move:[
|
move:[
|
||||||
|
|
@ -188,13 +188,13 @@ SLIDES.push(
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_2_post_cascade",
|
text:"simple_post_cascade",
|
||||||
x:0, y:390, w:650, h:150,
|
x:0, y:390, w:650, h:150,
|
||||||
align: "right"
|
align: "right"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_2_post_cascade_end",
|
text:"simple_post_cascade_end",
|
||||||
x:660, y:450, w:300, h:90
|
x:660, y:450, w:300, h:90
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,8 @@ SLIDES.push(
|
||||||
// Intro text
|
// Intro text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_3_complex",
|
id:"complex_complex",
|
||||||
text:"_3_complex",
|
text:"complex_complex",
|
||||||
x:0, y:0, w:480, h:540
|
x:0, y:0, w:480, h:540
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -63,12 +63,12 @@ SLIDES.push(
|
||||||
|
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{type:"box", id:"_3_complex"}
|
{type:"box", id:"complex_complex"}
|
||||||
],
|
],
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_complex_2",
|
text:"complex_complex_2",
|
||||||
x:0, y:0, w:480, h:540
|
x:0, y:0, w:480, h:540
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -83,8 +83,8 @@ SLIDES.push(
|
||||||
// Intro text
|
// Intro text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_3_cascade",
|
id:"complex_cascade",
|
||||||
text:"_3_cascade",
|
text:"complex_cascade",
|
||||||
x:60, y:0, w:840, h:100,
|
x:60, y:0, w:840, h:100,
|
||||||
align: "center"
|
align: "center"
|
||||||
},
|
},
|
||||||
|
|
@ -119,7 +119,7 @@ SLIDES.push(
|
||||||
{
|
{
|
||||||
id:"end",
|
id:"end",
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_cascade_end",
|
text:"complex_cascade_end",
|
||||||
x:330, y:460, w:300, h:100,
|
x:330, y:460, w:300, h:100,
|
||||||
hidden:true
|
hidden:true
|
||||||
},
|
},
|
||||||
|
|
@ -149,7 +149,7 @@ SLIDES.push(
|
||||||
|
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{type:"box", id:"_3_cascade"},
|
{type:"box", id:"complex_cascade"},
|
||||||
{type:"box", id:"end"}
|
{type:"box", id:"end"}
|
||||||
],
|
],
|
||||||
move:[
|
move:[
|
||||||
|
|
@ -159,13 +159,13 @@ SLIDES.push(
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_post_cascade",
|
text:"complex_post_cascade",
|
||||||
x:0, y:390, w:650, h:150,
|
x:0, y:390, w:650, h:150,
|
||||||
align: "right"
|
align: "right"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_post_cascade_end",
|
text:"complex_post_cascade_end",
|
||||||
x:660, y:450, w:300, h:90
|
x:660, y:450, w:300, h:90
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -180,8 +180,8 @@ SLIDES.push(
|
||||||
// Intro text
|
// Intro text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
id:"_3_prevent",
|
id:"complex_prevent",
|
||||||
text:"_3_prevent",
|
text:"complex_prevent",
|
||||||
x:80, y:0, w:800, h:140,
|
x:80, y:0, w:800, h:140,
|
||||||
align: "center"
|
align: "center"
|
||||||
},
|
},
|
||||||
|
|
@ -216,7 +216,7 @@ SLIDES.push(
|
||||||
/*{
|
/*{
|
||||||
id:"end",
|
id:"end",
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_prevent_end",
|
text:"complex_prevent_end",
|
||||||
x:660, y:440, w:300, h:100,
|
x:660, y:440, w:300, h:100,
|
||||||
hidden:true
|
hidden:true
|
||||||
}*/
|
}*/
|
||||||
|
|
@ -276,7 +276,7 @@ SLIDES.push(
|
||||||
|
|
||||||
{
|
{
|
||||||
remove:[
|
remove:[
|
||||||
{type:"box", id:"_3_prevent"}
|
{type:"box", id:"complex_prevent"}
|
||||||
],
|
],
|
||||||
move:[
|
move:[
|
||||||
{type:"box", id:"ui", y:0},
|
{type:"box", id:"ui", y:0},
|
||||||
|
|
@ -285,13 +285,13 @@ SLIDES.push(
|
||||||
add:[
|
add:[
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_prevent_2",
|
text:"complex_prevent_2",
|
||||||
x:0, y:390, w:650, h:100,
|
x:0, y:390, w:650, h:100,
|
||||||
align: "right"
|
align: "right"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_prevent_end",
|
text:"complex_prevent_end",
|
||||||
x:660, y:450, w:300, h:90
|
x:660, y:450, w:300, h:90
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
@ -330,7 +330,7 @@ SLIDES.push(
|
||||||
// Text
|
// Text
|
||||||
{
|
{
|
||||||
type:"box",
|
type:"box",
|
||||||
text:"_3_groupthink",
|
text:"complex_groupthink",
|
||||||
x:460, y:0, w:500, h:540
|
x:460, y:0, w:500, h:540
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ SLIDES.push(
|
||||||
// CREDITS
|
// CREDITS
|
||||||
{
|
{
|
||||||
type:"box",
|
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
18
js/main.js
|
|
@ -28,7 +28,19 @@ window.onload = function(){
|
||||||
}
|
}
|
||||||
window.requestAnimationFrame(update);
|
window.requestAnimationFrame(update);
|
||||||
|
|
||||||
// First slide!
|
// Start Preloading!
|
||||||
slideshow.gotoChapter("Conclusion");
|
publish("prepreload");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
subscribe("START", function(){
|
||||||
|
|
||||||
|
// Music
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
|
||||||
|
// Introduction
|
||||||
|
slideshow.next();
|
||||||
|
|
||||||
|
});
|
||||||
287
js/sim/_Game.js
287
js/sim/_Game.js
|
|
@ -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();
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -26,7 +26,7 @@ function Slideshow(){
|
||||||
// GOTO and NEXT
|
// GOTO and NEXT
|
||||||
var _delay = 300;
|
var _delay = 300;
|
||||||
self.IS_TRANSITIONING = false;
|
self.IS_TRANSITIONING = false;
|
||||||
self.goto = function(index){
|
self.goto = function(index, forceClear){
|
||||||
|
|
||||||
// Wait for transition to finish!
|
// Wait for transition to finish!
|
||||||
if(self.IS_TRANSITIONING) return;
|
if(self.IS_TRANSITIONING) return;
|
||||||
|
|
@ -39,7 +39,7 @@ function Slideshow(){
|
||||||
|
|
||||||
// Clear?
|
// Clear?
|
||||||
var _delayNewSlide = 0;
|
var _delayNewSlide = 0;
|
||||||
if(slide.clear && !isFirstSlide){
|
if((slide.clear || forceClear) && !isFirstSlide){
|
||||||
_delayNewSlide = 800;
|
_delayNewSlide = 800;
|
||||||
self.scratch.scratchOut(); // Scratch out
|
self.scratch.scratchOut(); // Scratch out
|
||||||
$("#container").removeAttribute("sim_is_running"); // remove that UI
|
$("#container").removeAttribute("sim_is_running"); // remove that UI
|
||||||
|
|
@ -59,7 +59,9 @@ function Slideshow(){
|
||||||
var withFade = true;
|
var withFade = true;
|
||||||
switch(childConfig.type){
|
switch(childConfig.type){
|
||||||
case "box":
|
case "box":
|
||||||
self.boxes.removeChildByID(childConfig.id, withFade);
|
if(self.boxes.getChildByID(childConfig.id)){
|
||||||
|
self.boxes.removeChildByID(childConfig.id, withFade);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case "sim":
|
case "sim":
|
||||||
//self.simulations.removeChildByID(childConfig);
|
//self.simulations.removeChildByID(childConfig);
|
||||||
|
|
@ -108,7 +110,12 @@ function Slideshow(){
|
||||||
self.boxes.add(childConfig, withFade);
|
self.boxes.add(childConfig, withFade);
|
||||||
break;
|
break;
|
||||||
case "sim":
|
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;
|
break;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -143,7 +150,7 @@ function Slideshow(){
|
||||||
var index = SLIDES.findIndex(function(slide){
|
var index = SLIDES.findIndex(function(slide){
|
||||||
return slide.chapter == chapterID;
|
return slide.chapter == chapterID;
|
||||||
});
|
});
|
||||||
self.goto(index);
|
self.goto(index, true);
|
||||||
};
|
};
|
||||||
self.next = function(){
|
self.next = function(){
|
||||||
self.goto(self.slideIndex+1);
|
self.goto(self.slideIndex+1);
|
||||||
|
|
@ -159,8 +166,10 @@ function Slideshow(){
|
||||||
// Update
|
// Update
|
||||||
self.update = function(){
|
self.update = function(){
|
||||||
var slide = self.currentSlide;
|
var slide = self.currentSlide;
|
||||||
self.simulations.update();
|
if(slide){
|
||||||
if(slide.onupdate) slide.onupdate(self, self.currentState);
|
self.simulations.update();
|
||||||
|
if(slide.onupdate) slide.onupdate(self, self.currentState);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Draw
|
// Draw
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue