diff --git a/audio/bg_music.mp3 b/audio/bg_music.mp3 new file mode 100644 index 0000000..5ffb7c7 Binary files /dev/null and b/audio/bg_music.mp3 differ diff --git a/css/index.css b/css/index.css index 71a8d3a..bf6afb6 100644 --- a/css/index.css +++ b/css/index.css @@ -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; diff --git a/index.html b/index.html index 2e02252..e720055 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ Cursor is allowed to flow EVERYWHERE though... +
@@ -120,8 +121,14 @@ Cursor is allowed to flow EVERYWHERE though...
+ + +
+
loading...
+
+ @@ -129,29 +136,43 @@ Cursor is allowed to flow EVERYWHERE though... - + + + + +
+ the +
+ WISDOM + and/or + MADNESS +
+ of +
+ CROWDS +
+ +
+ playing time: 30 min • by nicky case, april 2018 +
- - the -
- WISDOM and/or MADNESS -
- of CROWDS - - playing time: 30 min • by nicky case, april 2018 + + - + loading... - + let's play! → - + + +


@@ -173,7 +194,7 @@ Cursor is allowed to flow EVERYWHERE though...
- +

@@ -197,22 +218,22 @@ Cursor is allowed to flow EVERYWHERE though...
- + - + Let's draw a network! Each connection represents a friendship between two people: - + draw to connect - + scratch to   disconnect - + 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... - + 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... - + Draw/erase connections, and see what happens! → - + top-left: # of drinker friends / # of total friends     
@@ -246,11 +267,11 @@ Cursor is allowed to flow EVERYWHERE though...
(they'll glow if past threshold)      - + cool, got it - + However, networks can fool 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... - + PUZZLE TIME!
@@ -282,19 +303,19 @@ Cursor is allowed to flow EVERYWHERE though... (even though binge-drinkers are outnumbered 2-to-1) - + FOOLED: - + out of 9 people - + Congrats! You manipulated a group of students into believing in the prevalance of an incredibly unhealthy social norm! Good going! ...uh. thanks? - + 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... “Contagions!” → - - - + - + Below, we start with one person (img) who has some information. Some misinformation. "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 while the sim's running) - + 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. - + well that's depressing → - + Indeed it is. Anyway, PUZZLE TIME!
@@ -353,11 +369,11 @@ Cursor is allowed to flow EVERYWHERE though... (new rule: you can't cut the thick connections) - + fan-flipping-tastic → - + This madness-spreading is called an "information cascade". 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... - + “Complex Contagions!” → - + - + Truth may be stranger than fiction, but it doesn't sell as well. @@ -402,7 +418,7 @@ Cursor is allowed to flow EVERYWHERE though... - + CAUTION: @@ -434,17 +450,17 @@ Cursor is allowed to flow EVERYWHERE though... - + You did this before, but now, with a complex contagion (img), it'll be tougher... Try to "infect" everyone with complex wisdom! ↓ (feel free to just hit 'start' and try as many solutions as you want) - + HOT DANG → - + 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... - + ...yet another puzzle! → - + Now, let's do the opposite 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... draw a network to prevent the contagion from spreading to everyone! ↓ - + And that's the important difference between "simple" and "complex" contagion. While more connections always helps spread simple ideas, more connections can hurt the spread of complex 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... - + ...or death. → - + 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... - + ← Too few connections, and an idea can't spread. @@ -598,7 +614,7 @@ Cursor is allowed to flow EVERYWHERE though... The Sandbox Mode → - + NOTE: "Sandbox Mode" is totally optional! @@ -654,8 +670,7 @@ Cursor is allowed to flow EVERYWHERE though... [Space]: Drag     [Backspace]: Delete - - + @@ -761,9 +776,9 @@ Cursor is allowed to flow EVERYWHERE though... <3 - + - + CREDITS
CREDITS @@ -832,13 +847,14 @@ Cursor is allowed to flow EVERYWHERE though... + - + diff --git a/js/chapters/0_Preloader.js b/js/chapters/0_Preloader.js new file mode 100644 index 0000000..81eb38c --- /dev/null +++ b/js/chapters/0_Preloader.js @@ -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; + + } + +} + +); \ No newline at end of file diff --git a/js/chapters/1_Introduction.js b/js/chapters/1_Introduction.js index 8f962e6..87f450a 100644 --- a/js/chapters/1_Introduction.js +++ b/js/chapters/1_Introduction.js @@ -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" } ] } diff --git a/js/chapters/2_Networks.js b/js/chapters/2_Networks.js index 5f6d38c..e2b3617 100644 --- a/js/chapters/2_Networks.js +++ b/js/chapters/2_Networks.js @@ -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; diff --git a/js/chapters/3_Simple_Contagion.js b/js/chapters/3_Simple_Contagion.js index bc2d8ab..aeade7b 100644 --- a/js/chapters/3_Simple_Contagion.js +++ b/js/chapters/3_Simple_Contagion.js @@ -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 } ] diff --git a/js/chapters/4_Complex_Contagion.js b/js/chapters/4_Complex_Contagion.js index 4775845..79fa3ae 100644 --- a/js/chapters/4_Complex_Contagion.js +++ b/js/chapters/4_Complex_Contagion.js @@ -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 }, diff --git a/js/chapters/9_Credits.js b/js/chapters/9_Credits.js index ba21192..140b911 100644 --- a/js/chapters/9_Credits.js +++ b/js/chapters/9_Credits.js @@ -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" } ] diff --git a/js/main.js b/js/main.js index 955e470..fdbffc0 100644 --- a/js/main.js +++ b/js/main.js @@ -28,7 +28,19 @@ window.onload = function(){ } window.requestAnimationFrame(update); - // First slide! - slideshow.gotoChapter("Conclusion"); + // Start Preloading! + publish("prepreload"); -} \ No newline at end of file +} + +subscribe("START", function(){ + + // Music + + + // Navigation + + // Introduction + slideshow.next(); + +}); \ No newline at end of file diff --git a/js/sim/_Game.js b/js/sim/_Game.js deleted file mode 100644 index 47cca02..0000000 --- a/js/sim/_Game.js +++ /dev/null @@ -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(); - }); - -} - diff --git a/js/slideshow/Preloader.js b/js/slideshow/Preloader.js new file mode 100644 index 0000000..3333ea0 --- /dev/null +++ b/js/slideshow/Preloader.js @@ -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; + } + + }); + +} + + diff --git a/js/slideshow/Slideshow.js b/js/slideshow/Slideshow.js index ec76eee..cc8d768 100644 --- a/js/slideshow/Slideshow.js +++ b/js/slideshow/Slideshow.js @@ -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