From 29d396cd65daea4d712a8832af8a848aeaf3a7df Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Fri, 13 Apr 2018 16:58:04 -0400 Subject: [PATCH] even more words --- index.html | 261 ++++++++++++++++++-------- js/chapters/0_Introduction.js | 14 +- js/chapters/1_Networks.js | 6 +- js/chapters/3_Complex_Contagion.js | 3 +- js/chapters/4_Bonding_And_Bridging.js | 180 +++++++++++++++++- js/chapters/5_Sandbox.js | 22 ++- js/chapters/6_Conclusion.js | 33 +++- js/main.js | 2 +- js/sim/Simulations.js | 4 +- js/slideshow/SandboxUI.js | 8 +- 10 files changed, 425 insertions(+), 108 deletions(-) diff --git a/index.html b/index.html index d7584c1..38a3767 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@ Cursor is allowed to flow EVERYWHERE though...
5 - 5. Sandbox + 5. Sandbox Mode
6 @@ -115,23 +115,23 @@ Cursor is allowed to flow EVERYWHERE though... -the -
-WISDOM and/or MADNESS -
-of CROWDS + the +
+ WISDOM and/or MADNESS +
+ of CROWDS -playing time: 30 min • by nicky case, april 2018 + playing time: 30 min • by nicky case, april 2018 -loading... + loading... -let's play! → + let's play! → @@ -139,9 +139,9 @@ let's play! →


- Sir Isaac Newton was pretty sure he was one smart cookie. + Sir Isaac Newton was pretty sure he was a smart cookie. I mean, after inventing calculus and a theory of gravity, - he should be smart enough to do some financial investing, right? + he should be clever enough to do some financial investing, right? Anyway, long story short, he lost $4,600,000 (in today's dollars) in the nationwide speculation frenzy known as the South Sea Bubble of 1720. @@ -164,7 +164,7 @@ let's play! → the madness of crowds. And yet, just when you lose hope in humanity, you see citizens rescuing each other in hurricanes, - communities creating solutions after tragedy, + communities creating solutions to problems, movements of ordinary people fighting for a better world: the wisdom of crowds! @@ -286,18 +286,22 @@ let's play! →

+ (BONUS BOX: a response to the books) + +

+ But ideas/behaviors aren't just passively observed, they actively spread. So now, let's look at something network scientists call... “Contagions!” → - ← bonus challenge: make everyone think - less than half of their friends are binge-drinkers + - + @@ -339,10 +343,10 @@ let's play! → This madness-spreading is called an "information cascade". Mr. Newton fell for such a cascade in 1720. - The world's markets fell for such a cascade in 2008. + The world's financial institutions fell for such a cascade in 2008. But so what? You already knew ideas spread. - However, network scientists recently found a new kind of contagion, - one that spreads strangely. And they're called... + However, network scientists recently found a new, strange kind of contagion. + And they're called... @@ -373,7 +377,7 @@ let's play! →

- On the right, a person needs at least 25% of their friends to + On the right, a person needs AT LEAST 25% of their friends to adopt a complex fact (img) before they do. Try "infecting" them all with wisdom! → @@ -473,92 +477,197 @@ let's play! →

- So, too connected, and ideas are crushed. - But, too disconnected, and ideas can't even spread. - So, how can we "design" a crowd, a group, a society with... + So, that's how to get crowd madness. + But how can we "design" for crowd wisdom? + In short, two words: - ...the right balance? + Bonding & Bridging → + + ← Too few connections, and an idea can't spread. +
+ Too many connections, and you get groupthink. → + + + + + Find the sweet spot, and draw a group that's just connected enough + to spread a complex idea! ↓ + + + + + This is called bonding social capital, + the strength of the connections within a single group. + But what about the connections... + ...between groups? + + + + As you might have guessed, bridging social capital + is the strength of the connections between groups. + This is important, because it helps groups break out of their insular echo chambers! +
+ Try to "infect" everyone with wisdom: + + + + Like bonding, bridging social capital has a sweet spot. + (optional challenge: draw a bridge so thick that the complex contagion + can't pass through it!) +

+ Now that we know how to "design" connections within and between groups, let's... + ...do BOTH. → + + + + + FINAL PUZZLE! +
+ Draw connections within groups (bonding) and between groups (bridging) + however you want, to spread wisdom to everyone: + + + + + derp derp + derp derp → + + // "SMALL WORLD" + // e pluribus unum + // unity in diversity? + // examples + // JFK story in footnote + + + + + + + NOTE: "Sandbox Mode" is totally optional. + Feel free to skip it, or play around!(*) + When you're done, let's recap... + + + what we learnt today! + + + + Contagion: + + + simple + + + complex + + + The Contagion's Color: + + + Select a tool... + + + + Draw Network + + + Add Person + + + Add "Infected" + + + Drag Person + + + Delete Person + + + CLEAR IT ALL + + + + (...or, use keyboard shortcuts!) + + + + [1]: Add Person     [2]: Add "Infected" +
+ [Space]: Drag     [Backspace]: Delete + + + + IN CONCLUSION: + Contagion & Connections. + derp + + + +
+ in the final circle + recap all stories, + HUMAN BRAIN. + derp +
+ + + +
+ GOOD OMENS QUOTE. + derp +
+ + -FWEEEEEE + CREDITS +
+ CREDITS +
+ CREDITS +
+ CREDITS +
+ CREDITS -WIN + WIN -> start + > start ->> next + >> next -↺ reset - - -Contagion: - - -simple - - -complex - - -The Contagion's Color: - - -Select a tool... - - - -Draw Network - - -Add Person - - -Add "Infected" - - -Move Person - - -Delete Person - - -CLEAR IT ALL - - - -(...or, use keyboard shortcuts!) - - -[1]: Add Person -
-[2]: Add "Infected" Person -
-[Space]: Move Person -
-[Backspace]: Delete Person + ↺ reset + + HERP DERP diff --git a/js/chapters/0_Introduction.js b/js/chapters/0_Introduction.js index becb1d2..903434a 100644 --- a/js/chapters/0_Introduction.js +++ b/js/chapters/0_Introduction.js @@ -1,4 +1,12 @@ // 0 - INTRODUCTION + +// FOR REUSE: +var SPLASH_NETWORK = { + "contagion":0, + "peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]], + "connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]] +}; + SLIDES.push( { @@ -12,11 +20,7 @@ SLIDES.push( type:"sim", x:960/2, y:540/2, fullscreen: true, - network: { - "contagion":0, - "peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]], - "connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]] - }, + network: SPLASH_NETWORK, options:{ splash: true, randomStart: 20 diff --git a/js/chapters/1_Networks.js b/js/chapters/1_Networks.js index d3ebfda..5f6d38c 100644 --- a/js/chapters/1_Networks.js +++ b/js/chapters/1_Networks.js @@ -294,13 +294,14 @@ SLIDES.push( id:"_1_post_puzzle", text:"_1_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! - }, + },*/ ], + /* onupdate:function(slideshow, state){ // How many peeps passed? @@ -322,6 +323,7 @@ SLIDES.push( } } + */ } diff --git a/js/chapters/3_Complex_Contagion.js b/js/chapters/3_Complex_Contagion.js index 4592ec2..9186dba 100644 --- a/js/chapters/3_Complex_Contagion.js +++ b/js/chapters/3_Complex_Contagion.js @@ -331,8 +331,7 @@ SLIDES.push( { type:"box", text:"_3_groupthink", - x:460, y:0, w:500, h:540, - lineHeight:"1.4em" + x:460, y:0, w:500, h:540 }, diff --git a/js/chapters/4_Bonding_And_Bridging.js b/js/chapters/4_Bonding_And_Bridging.js index 862fb22..5b19c9f 100644 --- a/js/chapters/4_Bonding_And_Bridging.js +++ b/js/chapters/4_Bonding_And_Bridging.js @@ -6,22 +6,87 @@ SLIDES.push( clear:true, add:[ + // Sim + // DRAWING FOR SOFT CONSTRAINTS... { type:"sim", x:0, y:130, fullscreen: true, network: { "contagion":0.25, - "peeps":[[92,52,1],[178,54,0],[25,131,0],[83,213,0],[174,213,0],[233,135,0],[421,50,1],[365,141,0],[423,230,0],[527,228,0],[586,135,0],[522,54,0],[772,50,1],[711,128,0],[770,211,0],[864,210,0],[933,126,0],[858,52,0]], - "connections":[[13,12,0],[12,17,0],[16,15,0],[15,14,0],[14,13,0],[13,16,0],[16,14,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0]] + "peeps":[ + [90,-67,1],[181,-71,0],[36,21,0],[107,98,0],[206,92,0],[244,6,0], + [416,106,1],[352,181,0],[415,267,0],[528,268,0],[595,186,0],[532,107,0], + [769,-68,1],[701,6,0],[753,96,0],[855,110,0],[928,35,0],[867,-59,0] + ], + "connections":[[13,12,0],[12,17,0],[16,15,0],[14,13,0],[13,16,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0],[15,14,0],[14,16,0]] }, options:{ infectedFrame: 3, scale: 1 } }, - ] + + // UI for the simulation + { + type:"box", + id:"ui", + x:370, y:445, + sim_ui:"blue" + }, + + // Words + { + type:"box", + text:"bonding_1", + x:230, y:0+15, w:500, h:70, + align:"center" + }, + + // Words 2 + { + type:"box", + text:"bonding_2", + x:300, y:70+15, w:360, h:100, + align:"center" + }, + + // Words End + { + id:"end", + type:"box", + text:"bonding_end", + x:660, y:290, w:300, h:250, + hidden:true + } + + ], + + onupdate:function(slideshow, state){ + + // If Peeps[6] to Peep[11] pass.. + var sim = slideshow.simulations.sims[0]; + var peepCount = 0; + for(var i=6; i<=11; i++){ + var peep = sim.peeps[i]; + if(peep.infected) peepCount++; + } + + // Win + if(!state.ended){ + if(peepCount==6){ + var boxes = slideshow.boxes; + boxes.showChildByID("end", true); + state.ended = true; + sim.win({ + x:330+5, y:160-120+5, + width:280, height:280 + }); + } + } + + } }, @@ -30,15 +95,16 @@ SLIDES.push( clear:true, add:[ + // Sim { type:"sim", - x:0, y:0, + x:-70, y:-30, fullscreen: true, network: { "contagion":0.25, - "peeps":[[314,58,1],[418,87,0],[234,139,0],[277,234,0],[386,264,0],[460,180,0],[538,390,0],[617,309,0],[719,333,0],[766,432,0],[680,514,0],[572,491,0]], - "connections":[[7,6,0],[6,11,0],[11,10,0],[9,8,0],[8,7,0],[6,10,0],[6,9,0],[9,11,0],[11,7,0],[7,10,0],[9,7,0],[8,10,0],[10,9,0],[6,8,0],[8,11,0],[0,1,0],[2,5,0],[4,3,0]] + "peeps":[[182,92,1],[300,106,0],[107,196,0],[151,300,0],[301,309,0],[354,213,0],[441,384,0],[500,290,0],[644,304,0],[691,422,0],[621,510,0],[491,488,0]], + "connections":[[6,7,1],[7,8,1],[8,9,1],[9,10,1],[10,11,1],[11,6,1],[6,9,1],[9,11,1],[11,8,1],[8,10,1],[10,7,1],[7,9,1],[11,7,1],[6,10,1],[6,8,1],[0,1,1],[1,5,1],[5,4,1],[4,3,1],[2,3,1],[2,0,1],[3,1,1]] }, options:{ infectedFrame: 3, @@ -46,7 +112,53 @@ SLIDES.push( startUncuttable: true } }, - ] + + // UI for the simulation + { + type:"box", + id:"ui", + x:95, y:390, + sim_ui:"blue" + }, + + // Words + { + type:"box", + text:"bridging_1", + x:340, y:30, w:620, h:120 + }, + + // Words End + { + id:"end", + type:"box", + text:"bridging_end", + x:660, y:180, w:300, h:360, + hidden:true + } + + ], + + onupdate:function(slideshow, state){ + + // If ALL infected... + var sim = slideshow.simulations.sims[0]; + var peepCount = 0; + sim.peeps.forEach(function(peep){ + if(peep.infected) peepCount++; + }); + + // Win + if(!state.ended){ + if(peepCount==sim.peeps.length){ + var boxes = slideshow.boxes; + boxes.showChildByID("end", true); + state.ended = true; + sim.win(); + } + } + + } }, @@ -55,15 +167,16 @@ SLIDES.push( clear:true, add:[ + // Sim // use a DRAWING to impose SOFT CONSTRAINTS { type:"sim", - x:0, y:0, + x:150, y:0, fullscreen: true, network: { "contagion":0.25, - "peeps":[[474,46,1],[578,100,0],[388,94,0],[568,195,0],[392,190,0],[486,233,0],[273,318,0],[183,363,0],[183,447,0],[256,498,0],[355,376,0],[347,469,0],[630,367,0],[696,308,0],[791,360,0],[784,442,0],[725,495,0],[637,450,0]], + "peeps":[[485,50,1],[581,97,0],[389,101,0],[579,200,0],[399,193,0],[487,243,0],[290,312,0],[201,358,0],[196,446,0],[278,509,0],[381,374,0],[367,469,0],[596,370,0],[680,315,0],[778,354,0],[784,454,0],[700,506,0],[604,459,0]], "connections":[] }, options:{ @@ -72,7 +185,54 @@ SLIDES.push( startUncuttable: true } }, - ] + + // UI for the simulation + { + type:"box", + id:"ui", + x:70, y:190, + sim_ui:"blue" + }, + + + // Words + { + type:"box", + text:"bb_1", + x:0, y:10, w:350, h:170 + }, + + // Words + { + id:"end", + type:"box", + text:"bb_2", + x:0, y:310, w:300, h:230, + //hidden: true + } + + ], + + onupdate:function(slideshow, state){ + + // If ALL infected... + var sim = slideshow.simulations.sims[0]; + var peepCount = 0; + sim.peeps.forEach(function(peep){ + if(peep.infected) peepCount++; + }); + + // Win + if(!state.ended){ + if(peepCount==sim.peeps.length){ + var boxes = slideshow.boxes; + boxes.showChildByID("end", true); + state.ended = true; + sim.win(); + } + } + + } }, diff --git a/js/chapters/5_Sandbox.js b/js/chapters/5_Sandbox.js index 01c0b34..8648128 100644 --- a/js/chapters/5_Sandbox.js +++ b/js/chapters/5_Sandbox.js @@ -12,10 +12,10 @@ SLIDES.push( x:0, y:0, fullscreen: true, network: { - "contagion":0, - "peeps":[[443,213,1],[570,309,0],[686,194,0]], + "contagion":0.25, + "peeps":[[506,195,1],[621,270,0],[724,194,0]], "connections":[[0,1,0],[1,2,0]] - } + }, }, // The Sandbox UI @@ -28,9 +28,21 @@ SLIDES.push( // Simulation UI { type:"box", - x:35, y:450, + x:35, y:365, sim_ui:"red" - } + }, + + // Words + { + type:"box", + text:"sandbox_caption", + x:70, y:470, w:550, h:70 + }, + { + type:"box", + text:"sandbox_next", + x:605, y:455, w:300, h:100 + }, ] diff --git a/js/chapters/6_Conclusion.js b/js/chapters/6_Conclusion.js index f0b8cf4..431da98 100644 --- a/js/chapters/6_Conclusion.js +++ b/js/chapters/6_Conclusion.js @@ -1,7 +1,36 @@ // 0 - INTRODUCTION SLIDES.push( -{ +/*{ chapter: "Conclusion", clear:true -} +}*/ + +{ + chapter: "Conclusion", + clear:true, + + add:[ + + // Splash + { + type:"sim", + x:960/2, y:540/2, + fullscreen: true, + network: SPLASH_NETWORK, + options:{ + splash: true, + randomStart: 20 + } + }, + + // Words + { + type:"box", + text:"conclusion_2", x:210, y:0, w:540, h:540, align:"center" + }, + + ] + +}, + ); \ No newline at end of file diff --git a/js/main.js b/js/main.js index 9a5352d..119a17e 100644 --- a/js/main.js +++ b/js/main.js @@ -29,6 +29,6 @@ window.onload = function(){ window.requestAnimationFrame(update); // First slide! - slideshow.gotoChapter("Complex-Groupthink"); + slideshow.gotoChapter("Sandbox"); } \ No newline at end of file diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js index 06ac02c..4a66be4 100644 --- a/js/sim/Simulations.js +++ b/js/sim/Simulations.js @@ -315,7 +315,7 @@ function Sim(config){ self.confetti = []; self.winWord = {x:0, y:0, ticker:-1}; - self.win = function(){ + self.win = function(bounds){ // ONLY ONCE if(self.wonBefore) return; @@ -324,7 +324,7 @@ function Sim(config){ // Get center of peeps var fullscreenOffsetX = config.x + simOffset.x; var fullscreenOffsetY = config.y + simOffset.y; - var bounds = getBoundsOfPoints(self.peeps); + bounds = bounds || getBoundsOfPoints(self.peeps); // OPTIONAL BOUNDS var cx = bounds.x + bounds.width/2; var cy = bounds.y + bounds.height/2; cx += fullscreenOffsetX; diff --git a/js/slideshow/SandboxUI.js b/js/slideshow/SandboxUI.js index 39accec..23e6827 100644 --- a/js/slideshow/SandboxUI.js +++ b/js/slideshow/SandboxUI.js @@ -44,9 +44,11 @@ function SandboxUI(container){ // Choose Color of Peeps // /////////////////////////// + var GAP = "0.5em"; + var colorChooserLabel = document.createElement("div"); colorChooserLabel.innerHTML = getWords("sandbox_color_chooser"); - colorChooserLabel.style.marginTop = "1em"; + colorChooserLabel.style.marginTop = GAP; var colorChooser = new ChooseOne({ options:[ 1, // red @@ -75,7 +77,7 @@ function SandboxUI(container){ var toolChooserLabel = document.createElement("div"); toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser"); - toolChooserLabel.style.marginTop = "1em"; + toolChooserLabel.style.marginTop = "0.25em"; //GAP; var tools = [ "pencil", "add", @@ -122,7 +124,7 @@ function SandboxUI(container){ var shortcutsLabel = document.createElement("div"); shortcutsLabel.innerHTML = getWords("sandbox_shortcuts_label"); shortcutsLabel.id = "sandbox_shortcuts_label"; - shortcutsLabel.style.marginTop = "1em"; + shortcutsLabel.style.marginTop = GAP; var shortcuts = document.createElement("div"); shortcuts.innerHTML = getWords("sandbox_shortcuts"); shortcuts.id = "sandbox_shortcuts";