josch/ncase.me-trust
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

heck yeah nice splash

Browse source
This commit is contained in:
Nicky Case 2017-07-10 11:38:20 -04:00
parent c718a6b5fd
commit dd5f0f4184
18 changed files with 960 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

532
WORDS.html Normal file
View file

@ -0,0 +1,532 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WORDS</title>
</head>
<body>
<p>During the trench warfare of World War I, peace broke out.</p>
<p>It was Christmas 1914. Despite specific orders not to hang out &amp; chill with the enemy, British and German soldiers left their trenches, crossed No Man&#39;s Land, and gathered together to bury their dead, exchange gifts, and sing. This wasn&#39;t unique. Even long <em>before</em> Christmas, soldiers in trenches had already created an unspoken system of &quot;live and let live&quot; – a small peace in a Great War.</p>
<p>...</p>
<p>Meanwhile, the West has now been at peace for decades, and wow, we hate each other more than ever. Since 1970, people have lost a lot of trust in their governments, their media, and even <em>themselves</em>. So here&#39;s our two-part question:</p>
<p><strong>Why, even in the best of times, do friends become enemies?<br>
And why, even in the worst of times, do enemies become friends?</strong></p>
<p>It&#39;s a complex question, but there&#39;s a simple idea from game theory can shed a lot of light on this! So, to understand our epidemic of distrust...</p>
<p>...let&#39;s play a game.</p>
<hr>
<p><strong>THE GAME OF TRUST:</strong> (Note: also known as &quot;The Prisoner&#39;s Dilemma&quot;)</p>
<p>There&#39;s a machine. If one player puts a coin in the machine, the <em>other</em> player gets three coins. A player can either choose to COOPERATE (put in one coin), or CHEAT (keep their coin).</p>
<p>But there&#39;s a problem. Think about it: if the other player CHEATS, what should you do?</p>
<hr>
<p>Fair enough – if the other player won&#39;t cooperate, why should you?</p>
<p>Alas, turning the other cheek just gets you slapped on that cheek.</p>
<p>Cooperating while the other person cheats means you lose a coin while they get three. (-1 vs +3) However, both of you cheating means you both neither gain nor lose anything. (0 vs 0) Therefore, you should CHEAT.</p>
<p>But if the other player COOPERATES, what should you do now?</p>
<hr>
<p>Wow, that&#39;s mean. And also the correct answer!</p>
<p>Yeah, seems like the right thing to do... but is it the <em>correct</em> thing to do?</p>
<p>Because, if you both cooperate, you both lose one coin and gain three (+2 vs +2). But you can do <em>even better</em> – if you cheat while they cooperate, <em>you</em> can gain three coins at no cost, while they lose a coin. (+3 vs -1) Therefore, you should <em>still</em> CHEAT.</p>
<p>So, even though you&#39;d be better off both cooperating (+2 vs +2) than both cheating (0 vs 0), both of you <em>always</em> have the incentive to cheat. (Note: In game theory, games without win-wins are called &quot;zero-sum games&quot;, and games where win-wins are possible, even if not likely, are called &quot;non-zero-sum games&quot;)</p>
<p>(well, so what? &gt;)</p>
<hr>
<p>Now, now – this game may seem contrived, but, like a street map, it&#39;s only by getting <em>rid</em> of details, can we find our way around a complex topic!</p>
<p>And here, our simple game captures the dilemma of trust:</p>
<p><strong>we&#39;d be better off if everybody trusted each other, but trust makes you vulnerable to being taken advantage of.</strong></p>
<p>But what if...</p>
<p>(...we play more than once?)</p>
<hr>
<p>Now, you&#39;ll be playing this game against five different characters. With each character, you&#39;ll play anywhere between 3 to 10 rounds. (neither of you will know when the last round is, and that&#39;s important)</p>
<p>Will they take advantage of you? Will you take advantage of <em>them</em>? Let&#39;s find out. Choose your first move:</p>
<hr>
<p>Alright, let&#39;s try a new character: (#2 of 5)</p>
<p>And yet another character: (#3 of 5)</p>
<p>How about this guy? (#4 of 5)</p>
<p>And finally... (#5 of 5)</p>
<hr>
<p>Pretty good: you scored ____!</p>
<p>Not too bad: you scored ____!</p>
<p>Well, uh, you tried: you scored _____.</p>
<p>(lowest possible score: ///. highest possible score: ///)</p>
<p>Now, who were these strange characters?</p>
<p>COPYCAT: I start with Cooperate, and then, I just copy whatever move you did last time. Meow</p>
<p>ALWAYS CHEAT: i hate you</p>
<p>ALWAYS COOPERATE: I love you! &lt;3</p>
<p>GRUDGER: &quot;Listen y&#39;all – I start Cooperatin&#39;, and I&#39;ll keep on Cooperatin&#39;... but if you ever Cheat me once, pardner, I AIN&#39;T EVER FORGIVIN&#39; YOU.&quot;</p>
<p>DETECTIVE: &quot;First: I analyze you. I start: Cooperate, Cheat, Cooperate, Cooperate. Then: if you retaliated with a Cheat, I switch to playing Copycat. But: if you never fight back, I switch to Always Cheat. My dear Watson: elementary.&quot;</p>
<p>now what if these characters...</p>
<p>(...were to play against each other?)</p>
<hr>
<p>It&#39;s tournament time! These five characters will now play against each other – 10 paired games, 10 rounds per game.</p>
<p>Place your bets: who do you think will get the highest <em>total</em> score?</p>
<hr>
<p>Alright, you placed your bet on _____! Let&#39;s see how each pair plays against each other, one by one...</p>
<p>(first pair &gt;)</p>
<p>/////// [+score] - [-score] ///////</p>
<p>how they played: [payoff] [payoff] [payoff] [payoff] [payoff] </p>
<p>(next pair &gt;)</p>
<p>(and the winner is... &gt;)</p>
<hr>
<p>COPYCAT! (Note: this play-style is also known in game theory as &quot;Tit For Tat&quot;)</p>
<p>Congrats, you placed your bet on the right horse.</p>
<p>Sorry, //////.</p>
<p>Now, here&#39;s the strange thing: Copycat can <em>never</em> beat another player in the trust game (because it never tries to take advantage of others), it can only ever do <em>as well as</em> the other player. And yet overall, Copycat wins! This, despite being simpler than Detective, nicer than Always Cheat, and more forgiving than Grudger. It almost seems to imply that the Golden Rule is not just a moral truth, but a <em>mathematical</em> truth:</p>
<p><em>Do unto others as you would have them do unto you.</em> ~Copycat</p>
<p>And <em>that&#39;s</em> why &quot;peace&quot; broke out in the trenches of World War I. Each side was playing a deadly game of trust with each other, but because the nature of trench warfare means they have to face the same group of soldiers over and over again, that allowed a Copycat-like strategy – the unspoken law of &quot;live and let live&quot; – to evolve.</p>
<p>(...but does Copycat <em>always</em> win?)</p>
<hr>
<p>Let&#39;s go one step further. On top of playing repeated <em>rounds</em> of the trust game, let&#39;s play repeated <em>tournaments</em> of the trust game. Here&#39;s what will happen:</p>
<ol>
<li><p>Play a tournament: everyone plays against everyone.</p></li>
<li><p>Eliminate the bottom 5 players. (if there&#39;s a tie, choose between them randomly)</p></li>
<li><p>Reproduce the top 5 players! (if there&#39;s a tie, choose between them randomly)</p></li>
</ol>
<p>(Note: This method is called &quot;evolutionary game theory&quot;. Of course, in real life, behavior doesn&#39;t <em>have</em> to spread by people reproducing &amp; dying. The important thing is simply that successful strategies spread, and unsuccessful ones go away. This could just be done by people imitating more successful people. Also important: &quot;evolution&quot; happens from the bottom up, not the top down!)</p>
<p>Here&#39;s our starting &quot;population&quot; of players: 15 Always Cooperates. 5 Always Cheats. 5 Copycats. (Let&#39;s ignore Detective &amp; Grudger for now) Who do you think will win in the first tournament?</p>
<hr>
<p>Makes sense, Copycat won in the last tournament, maybe they&#39;ll win again.</p>
<p>Makes sense, the Always Cooperates <em>do</em> vastly outnumber everyone else now, maybe they have the advantage?</p>
<p>Makes sense, Always Cheat has a <em>lot</em> of Always Cooperate suckers to take advantage of.</p>
<p>Let&#39;s put it to the test:</p>
<p>(1. play tournament)</p>
<p>(2. eliminate bottom 5)</p>
<p>(3. reproduce top 5)</p>
<hr>
<p>Alas, Copycat lost this time! </p>
<p>Alas, Always Cooperate <em>still</em> got preyed upon!</p>
<p>Sadly, you were correct!</p>
<p>Always Cheat won in this &quot;population&quot; of players, and what&#39;s worse, because they won, they now make up an even bigger part of the population. Will this continue?</p>
<p>(1. play tournament)</p>
<p>(2. eliminate bottom 5)</p>
<p>(3. reproduce top 5)</p>
<hr>
<p>Yes, yes it continues. But if we keep going...</p>
<p>(1. play tournament)</p>
<p>(2. eliminate bottom 5)</p>
<p>(3. reproduce top 5)</p>
<hr>
<p>...eventually Always Cheat becomes a victim of their own success: they run out of Always Cooperate suckers to exploit, letting Copycat be able to &quot;invade&quot; the majority Always Cheat population – and the meek Copycats inherit the earth. (or, inherit this small simulation, anyway) Which reminds me of my favorite quote:</p>
<p><em>&quot;We are not punished for our sins, but by them.&quot;</em> ~Elbert Hubbard</p>
<p>(Note on &quot;invasion&quot;: a <em>single</em> Copycat can&#39;t &quot;invade&quot; an Always Cheat world. You&#39;d need at least a few Copycats who can cooperate with each other, in order to out-compete Cheaters. And nothing can &quot;invade&quot; a Copycat world, although if someone else ties with Copycat, random elimination &amp; reproduction could cause &quot;population drift&quot; towards that someone else.)</p>
<p>Now, will Copycat still win even if we bring back...</p>
<p>(...Detectives &amp; Grudgers?)</p>
<hr>
<p>(play!)</p>
<hr>
<p>Yes, the Golden Rule-abiding Copycats can still win, in the long run, under a wide variety of circumstances! But there&#39;s, uh, a problem with this idea.</p>
<p>Look around. The world is <em>full</em> of f@%$ers.</p>
<p>So even though fairness can thrive even in the trenches, nastiness can propagate even in peacetime. What gives? Let&#39;s now look at what can cause...</p>
<p>(...the evolution of <em>distrust</em>)</p>
<hr>
<p>Here&#39;s a Copycat world, with just a few Always Cheaters. Normally, these Always Cheaters will be unable to invade, and get punished pretty quickly:</p>
<p>(play simulation)</p>
<hr>
<p>But let&#39;s change the rules of the tournament: instead of playing 10 rounds per paired game, you only played 5? Or 3? 2? 1?</p>
<p>(slider)</p>
<p>(play | stop)</p>
<p>...(and voila &gt;)</p>
<hr>
<p>Without <em>a high number of repeat interactions,</em> the Cheaters win, and the Copycats die.</p>
<p>And that&#39;s why during World War I, &quot;live and let live&quot; kept popping up in the trenches, <em>but not anywhere else</em>. It&#39;s not because of the people in the trench, but because of <em>the trench itself:</em> it forces lots of repeat interactions between the <em>same</em> two groups of soldiers, something that doesn&#39;t usually happen in war.</p>
<p>This may also be why trust is declining now, in peacetime. In the last few decades, there&#39;s been a huge drop in &quot;social capital&quot;: people are making fewer friendships across political, racial, and class lines – because people are making fewer friendships, period. And with fewer repeated interactions, the easier it is for distrust to invade our population.</p>
<p>(Note: <em>Depth</em> of relationships &gt; <em>Breadth</em> of relationships. You get more trust having lots of interactions with a few people, than having few interactions with lots of people. The internet has made us better at breadth, but not depth.)</p>
<p>But wait...</p>
<p>(...it gets worse for Copycat &gt;)</p>
<hr>
<p>Let&#39;s have the same thing as before, but this time each pair only plays 5 rounds. That&#39;s still enough for Copycat to win, as you can see...</p>
<p>(play)</p>
<hr>
<p>But now, let&#39;s see what happens if we just <em>slightly</em> change the rewards &amp; punishments. (Note: in game theory, this is called a &quot;payoff matrix&quot;. Payoff = reward/punishment. Matrix = fancy word meaning &quot;a grid of numbers&quot;.)</p>
<p>Change the +2 reward to a +1:</p>
<p>So, both players cooperating (+1 vs +1) is <em>still</em> better than both players cheating (0 vs 0). There&#39;s still a win-win, and it&#39;s better than the lose-lose. But watch what happens now:</p>
<p>(play)</p>
<hr>
<p>Oh no. Cheaters win again.</p>
<p>The exact numbers for the rewards/punishments aren&#39;t important, what&#39;s important is the <em>relative amount</em> between them. That&#39;s why trust could evolve in the trenches: the win-win scenario was just nothing happening, but the lose-lose scenario was <em>dying in a ditch</em>.</p>
<p>And as for nowadays, I don&#39;t know, maybe there&#39;s relatively less reward for achieving a win-win. In this age of political polarization, working with &quot;the other side&quot; isn&#39;t praised as being a bridge-builder, but being a traitor, a sell-out. (Not to mention: win-lose conflict gets more media attention than win-win cooperation.) Maybe a lack of win-wins is both the cause <em>and</em> effect of our growing distrust.</p>
<p>But wait...</p>
<p>(it gets <em>even worse</em> for Copycat &gt;)</p>
<hr>
<p>Copycat has a huge weakness. To see this weakness, let&#39;s go back to the two-player repeated game.</p>
<p>Let&#39;s say you&#39;re a Copycat playing against another Copycat. Copycats start off being nice, so that&#39;s why your first move is:</p>
<p>(cooperate)</p>
<hr>
<p>Everything&#39;s going hunky-dory at first, both of you cooperating, but then...</p>
<p>(cooperate)</p>
<hr>
<p>[Copycat TRIPS]</p>
<p>Oh no! You made a mistake, and accidentally &quot;Cheated&quot; when you meant to Cooperate. Well, the other Copycat won&#39;t take that lying down...</p>
<p>(cooperate)</p>
<hr>
<p>The other Copycat retaliates against what they perceived to be a Cheat...</p>
<p>which seems unfair to you, so <em>you&#39;ve</em> got to retaliate...</p>
<p>(cheat)</p>
<hr>
<p>...and so <em>they&#39;ve</em> got to retaliate, so <em>you&#39;ve</em> got to retaliate, and so on, and so on.</p>
<p>[auto-play]</p>
<p>So, when you allow for the possibility of mistakes, Copycat turns into a <em>disaster</em>. Like the Hatfields vs the McCoys, it&#39;s a permanent cycle of revenge.</p>
<p>But now, let&#39;s introduce three more types of players, who might be able to thrive in a bit of randomness...</p>
<p>(meet the new players &gt;)</p>
<hr>
<p>COPYKITTEN: Hi, I&#39;m like Copycat! But I only return a Cheat after you Cheat me twice in a row because, well, the first one might just be an honest mistake! :3</p>
<p>SIMPLETON: &quot;i try start Cooperate. u cooperate = good = i do what i do in last round, even if mistaek. u cheat = bad = i do opposite of what i do in last round, even if mistaek.&quot;</p>
<p>LOL SO RANDOM: monkey tacos! robot ninja bacon pirate! i randomly play cheat or cooperate with 50-50 chance coz lol i&#39;m so random</p>
<p>(wow, nice lineup &gt;)</p>
<hr>
<p>Now, let&#39;s consider this starting population of players: 13 Always Cooperates, and 3 each of Copycat, Copykitten, Simpleton, and Random.</p>
<p>Each paired game plays for 10 rounds. And in each round, there&#39;s a 5% chance a player makes a mistake, and does the opposite of what they intended to.</p>
<p>Place your bets: who do you think will win?</p>
<hr>
<p>You bet on ///////. Alright, let&#39;s give it a whirl:</p>
<hr>
<p>And the winner is... SIMPLETON! (congrats, you guessed correct!) (sorry, /////.)</p>
<p>This is because Simpleton (also known as &quot;Pavlov&quot; or &quot;Win-Stay Lose-Shift&quot;) is capable of taking advantage of Always Cooperates: if Simpleton mistakenly Cheats an Always Cooperate, because Always Cooperate doesn&#39;t Cheat back, Simpleton keeps on Cheating.</p>
<p>(now, let&#39;s try a tougher population &gt;)</p>
<hr>
<p>This population is the same as before, but all the Always Cooperates are now Always Cheats. A much less forgiving environment. (Same rules: 10 rounds per paired game, 5% chance of mistake per round)</p>
<p>Place your bets: who do you think will win now?</p>
<hr>
<p>You bet on ///////. Let&#39;s see what happens this time...</p>
<hr>
<p>And the winner is... COPYKITTEN! (congrats, you guessed correct!) (sorry, /////.)</p>
<p>This is because Copykitten (also known as &quot;Tit For Two Tats&quot;) does much better than Simpleton against Always Cheat. Copykitten, after being cheated twice, will keep returning cheats to Always Cheat. But Simpleton changes moves <em>every</em> time it&#39;s cheated, so when playing against Always Cheat, it keeps switching between cooperate &amp; cheat. (Note: Copykitten is so nice that it doesn&#39;t even wipe out Copycat, it <em>shares</em> the world with them!)</p>
<p>So the good news is, with a little bit of &quot;random noise&quot; (likelihood of mistakes), a <em>more forgiving, generous version</em> of Copycat can win!</p>
<p>(and the bad news is... &gt;)</p>
<hr>
<p>This isn&#39;t true for <em>all</em> levels of &quot;random noise&quot;. Let&#39;s start 5 of each: Always Defect, Copycat, Copykitten, Simpleton, and Random. Who will win at 0% Noise? 10% Noise? 20% Noise? 50% Noise? (it only goes up to 50% because that&#39;s <em>entirely</em> random: every move is a coin flip between Cheat &amp; Cooperate)</p>
<p>Make your prediction <em>before</em> hitting the &quot;play simulation&quot; button! Once you see the result for one level of random noise, hit &quot;reset&quot;, and try again with a different level of random noise.</p>
<p>(what just happened? &gt;)</p>
<hr>
<p>Whoof, we have a <em>very</em> wide range of results.</p>
<p>At 0% Randomness: Copycat dominates most of the population, but shares with Copykitten &amp; Simpleton. (due to random elimination &amp; reproduction, the population may &quot;drift&quot; towards fully Copycat)</p>
<p>At 10% Randomness: Copycat seems to win at first... but wait, then Copykitten takes over! (and shares a bit with Copycat)</p>
<p>At 20% Randomness: Good loses the battle between good and evil. Always Cheat takes over <em>everything</em>.</p>
<p>At 50% Randomness: There <em>is no difference</em> between good and evil. Nobody wins, it&#39;s an amoral nightmare where nothing means anything to nobody. (Groups growing &amp; shrinking are due entirely to population drift.)</p>
<p>(in other words... &gt;)</p>
<hr>
<p>A little randomness: more forgiveness and cooperation</p>
<p>A lot of randomness: no forgiveness <em>or</em> cooperation</p>
<p>Entirely randomness: ¯\_(ツ)_/¯</p>
<p>Remember, &quot;randomness&quot; here just means the probability of making a mistake, or miscommunication. Now, think about how often in mass media or on the internet people take things out of context (intentionally or not) and misinterpret each others&#39; motives and messages – in contrast with face-to-face in-person interactions, where miscommunication is less likely.</p>
<p>That&#39;s pure speculation on my part, but maybe that&#39;s another reason...</p>
<p>(...why trust is falling these days&gt;)</p>
<hr>
<p>So to wrap up, (finally!) here are the three conditions needed for <strong>the evolution of trust</strong> – and if you&#39;re missing <em>any</em> of them, you&#39;ll get what we&#39;re seeing today: <strong>the evolution of distrust.</strong></p>
<p><strong>1. REPEATED INTERACTIONS</strong></p>
<p>When you play with the same people over and over, you can build trust! But if you have few repeated interactions – or none at all – cheaters go unpunished, and trust-building goes unrewarded.</p>
<p><strong>2. WIN-WIN REWARDS</strong></p>
<p>On the upside, even if the win-win reward is <em>smaller</em> than the temptation to cheat, fairness can still win in the long run! But on the downside, if the win-win reward is <em>too</em> small (relatively), cooperation will fall apart.</p>
<p><strong>3. LOW NOISE</strong></p>
<p>When there&#39;s a chance for miscommunication, it pays to be <em>more</em> forgiving! But this is only true up to a point: if there&#39;s <em>too much</em> &quot;random noise&quot;, then you just can&#39;t trust anybody.</p>
<p>And of course, all these interact with each other in complex ways, ways I know <em>I</em> don&#39;t fully understand! Maybe you can even discover something completely new, by playing with...</p>
<p>(The Sandbox Mode! &gt;)</p>
<hr>
<p>you can change <em>all the rules</em> here in the sandbox mode.
once when you&#39;re done playing, (click here to move on &gt;)</p>
<hr>
<p>The world right now seems like a scary place. A bitter, distrustful, conflict-filled place. Deep inside these trenches, in this No Man&#39;s Land – how can you, a single person, change all this?</p>
<p>(and the answer is... &gt;)</p>
<hr>
<p>...you can&#39;t.</p>
<p>...</p>
<p>...</p>
<p>(however... &gt;)</p>
<hr>
<p>There <em>is</em> one person you can always change: you.</p>
<p><em>You</em> can create more <strong>repeated interactions</strong> with individual people outside your tribe...</p>
<p>find <strong>win-wins</strong>, when the world just seems to want a win-lose fight...</p>
<p>and strive for <strong>low noise</strong> not just by communicating clearly, but also forgiving others&#39; mistakes, and humbly owning up to your own.</p>
<p>(and then... &gt;)</p>
<hr>
<p>Through your low-noise, win-win, repeated interactions with people, you may convince a few others to do the same...</p>
<p>(and then... &gt;)</p>
<hr>
<p>Your small group&#39;s strategy can &quot;invade&quot; a distrustful world – not engineered from the top-down, but evolved from the bottom-up...</p>
<p>(and then... &gt;)</p>
<hr>
<p>Maybe, just maybe...</p>
<p>We can all learn to live and let live.</p>
<p>[picture of Christmas Truce]</p>
<p>(<3 >)</p>
<hr>
<p>CREATED BY NICKY CASE<br>
(full credits for code &amp; sounds)</p>
<p>BASED OFF &quot;THE EVOLUTION OF COOPERATION&quot; (1984) BY ROBERT AXELROD<br>
(other footnotes)</p>
<p>this explorable explanation is open source &amp; public domain: feel free to use it in your classroom, or remix the source code!</p>
<p>WANNA PLAY MORE INTERACTIVE EXPLANATIONS LIKE THIS ONE? TRY:</p>
<ul>
<li>Parable of the Polygons</li>
<li>Neurotic Neurons</li>
<li>Explorable Explanations</li>
</ul>
<p>WANNA HELP ME MAKE MORE SHTUFF LIKE THIS? THROW COINS INTO THIS TRUST MACHINE: (patreon)</p>
<p>. . .</p>
<p>&quot;The Evolution of Trust&quot; (July 2017) was created with the trust &amp; support of my many Patreon backers:</p>
<p>[scroll for patreon &amp; playtesters]</p>
<hr>
<p>// MORE HUMOR??? CONVERSATIONAL? &quot;I&quot;?</p>
<p>// MORE QUOTES???</p>
<p>// or... CUT DOWN CUT DOWN CUT DOOOOWWWWWWWN.</p>
</body>
</html>

27
assets/splash/connection.json Normal file
View file

@ -0,0 +1,27 @@
{"frames": {
"connection0000":
{
"frame": {"x":10,"y":10,"w":100,"h":5},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":100,"h":5},
"sourceSize": {"w":100,"h":5}
},
"connection0001":
{
"frame": {"x":10,"y":25,"w":100,"h":5},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":100,"h":5},
"sourceSize": {"w":100,"h":5}
}},
"meta": {
"app": "Adobe Animate",
"version": "15.2.0.66",
"image": "connection.png",
"format": "RGBA8888",
"size": {"w":128,"h":128},
"scale": "1"
}
}

BIN
assets/splash/connection.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 205 B

19
assets/splash/splash_peep.json Normal file
View file

@ -0,0 +1,19 @@
{"frames": {
"splash_peep0000":
{
"frame": {"x":10,"y":10,"w":302,"h":402},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":302,"h":402},
"sourceSize": {"w":302,"h":402}
}},
"meta": {
"app": "Adobe Animate",
"version": "15.2.0.66",
"image": "splash_peep.png",
"format": "RGBA8888",
"size": {"w":512,"h":512},
"scale": "1"
}
}

BIN
assets/splash/splash_peep.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
assets/ui/scratch.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 687 KiB

28
css/slides.css
View file

@ -4,6 +4,11 @@
src: url('FuturaHandwritten.ttf') format('truetype'); src: url('FuturaHandwritten.ttf') format('truetype');
} }
html,body{
width: 100%;
height: 100%;
}
body{ body{
margin:0; margin:0;
@ -65,6 +70,12 @@ body{
.textbox > div{ .textbox > div{
position: absolute; position: absolute;
} }
/* fake bold */
.textbox b{
font-weight: normal;
text-shadow:1px 0 0 currentColor;
}
.label{ .label{
position: absolute; position: absolute;
@ -223,6 +234,22 @@ body{
left: 50px; left: 50px;
} }
/*************************/
/******* SCRATCHER *******/
/*************************/
#scratcher{
position: absolute;
top:0; left:0;
width: 100%; height: 100%;
background: url(../assets/ui/scratch.png);
background-size: 200% 2000%;
display: none;
z-index: 1000;
}
/*************************/ /*************************/
/***** SLIDE SELECT ******/ /***** SLIDE SELECT ******/
/*************************/ /*************************/
@ -244,3 +271,4 @@ body{
#select .dot[selected]{ #select .dot[selected]{
background: #fff; background: #fff;
} }

8
index.html
View file

@ -7,6 +7,7 @@
<body> <body>
<div id="main"> <div id="main">
<div id="slideshow"></div> <div id="slideshow"></div>
<div id="scratcher"></div>
</div> </div>
<div id="footer"> <div id="footer">
<div id="select"></div> <div id="select"></div>
@ -33,15 +34,18 @@
<script src="js/core/Words.js"></script> <script src="js/core/Words.js"></script>
<script src="js/core/IncDecNumber.js"></script> <script src="js/core/IncDecNumber.js"></script>
<script src="js/core/Slider.js"></script> <script src="js/core/Slider.js"></script>
<script src="js/core/Scratcher.js"></script>
<!-- Simulations --> <!-- Simulations -->
<script src="js/sims/Splash.js"></script>
<script src="js/sims/PD.js"></script> <script src="js/sims/PD.js"></script>
<script src="js/sims/Iterated.js"></script>
<script src="js/sims/Tournament.js"></script> <script src="js/sims/Tournament.js"></script>
<script src="js/sims/SandboxUI.js"></script> <script src="js/sims/SandboxUI.js"></script>
<script src="js/sims/Iterated.js"></script>
<!-- Slides --> <!-- Slides -->
<!--script src="js/slides/Slides_Iterated.js"></script--> <script src="js/slides/Slides_Intro.js"></script>
<script src="js/slides/Slides_Iterated.js"></script>
<script src="js/slides/Slides_Sandbox.js"></script> <script src="js/slides/Slides_Sandbox.js"></script>
<!-- Main Code --> <!-- Main Code -->

4
js/core/Button.js
View file

@ -24,6 +24,10 @@ function Button(config){
// Customize DOM // Customize DOM
button.style.left = config.x+"px"; button.style.left = config.x+"px";
button.style.top = config.y+"px"; button.style.top = config.y+"px";
if(config.fontSize){
text.style.fontSize = config.fontSize;
text.style.top = 14+(20-config.fontSize);
}
config.upperCase = (config.upperCase===undefined) ? true : config.upperCase; config.upperCase = (config.upperCase===undefined) ? true : config.upperCase;
self.setText = function(text_id){ self.setText = function(text_id){
var words = Words.get(text_id); var words = Words.get(text_id);

46
js/core/Scratcher.js Normal file
View file

@ -0,0 +1,46 @@
(function(exports){
var Scratcher = {};
exports.Scratcher = Scratcher;
Scratcher.scratch = function(){
var dom = $("#scratcher");
dom.style.display = "block";
Scratcher.scratchAnim(true)
.then(function(){
publish("slideshow/next");
})
.then(function(){
return Scratcher.scratchAnim(false);
})
.then(function(){
dom.style.display = "none";
});
};
subscribe("slideshow/scratch", Scratcher.scratch);
Scratcher.scratchAnim = function(scratchIn){
var dom = $("#scratcher");
var deferred = Q.defer();
var frame = 0;
var interval = setInterval(function(){
frame++;
if(frame>19){
clearInterval(interval);
deferred.resolve();
}else{
Scratcher.gotoFrame(scratchIn, frame);
}
},40);
return deferred.promise;
};
Scratcher.gotoFrame = function(scratchIn, frame){
var dom = $("#scratcher");
dom.style.backgroundPosition = (scratchIn?0:-100)+"% "+(frame*-100)+"%";
};
})(window);

12
js/core/Slideshow.js
View file

@ -19,9 +19,21 @@ function Slideshow(config){
}; };
self.reset(); self.reset();
// Remove ALL
self.removeAll = function(INSTANT){
for(var id in self.objects){
self.removeObject({id:id}, INSTANT);
}
};
// Go to next slide // Go to next slide
self.nextSlide = function(INSTANT){ self.nextSlide = function(INSTANT){
// removeAllOnKill?
if(self.currentSlide && self.currentSlide.removeAllOnKill){
self.removeAll(true);
}
// Update the information // Update the information
if(self.slideIndex >= self.slides.length-1) return; if(self.slideIndex >= self.slides.length-1) return;
self.slideIndex++; self.slideIndex++;

9
js/core/TextBox.js
View file

@ -1,3 +1,6 @@
/*
*/
function TextBox(config){ function TextBox(config){
var self = this; var self = this;
@ -10,7 +13,7 @@ function TextBox(config){
self.dom.classList.add("textbox"); self.dom.classList.add("textbox");
// All the text boxes, yo // All the text boxes, yo
self.boxes = config.boxes; self.boxes = config.boxes ? config.boxes : [config.box];
// Create each textbox... // Create each textbox...
for(var i=0; i<self.boxes.length; i++){ for(var i=0; i<self.boxes.length; i++){
@ -27,6 +30,10 @@ function TextBox(config){
textbox.style.height = box.height+"px"; textbox.style.height = box.height+"px";
textbox.innerHTML = Words.get(box.text_id); textbox.innerHTML = Words.get(box.text_id);
// Optional params
if(box.align) textbox.style.textAlign = box.align;
if(box.size) textbox.style.fontSize = box.size;
} }
// Add... // Add...

204
js/sims/Splash.js Normal file
View file

@ -0,0 +1,204 @@
Loader.addToManifest(Loader.manifest,{
splash_peep: "assets/splash/splash_peep.json",
connection: "assets/splash/connection.json"
});
function Splash(config){
var self = this;
self.id = config.id;
// Dimensions, yo
var width = $("#main").clientWidth;
var height = $("#main").clientHeight;
var x = -(width-960)/2;
var y = -(height-540)/2;
// DOM
self.dom = document.createElement("div");
self.dom.className = "object";
self.dom.style.left = x+"px";
self.dom.style.top = y+"px";
// APP
var app = new PIXI.Application(width, height, {transparent:true, resolution:2});
app.view.style.width = width;
app.view.style.height = height;
self.dom.appendChild(app.view);
// CONTAINERS
var edgesContainer = new PIXI.Container();
var peepsContainer = new PIXI.Container();
app.stage.addChild(edgesContainer);
app.stage.addChild(peepsContainer);
// PEEPS
var peeps = [];
self.addPeep = function(x, y){
var peep = new SplashPeep({ x:x, y:y, app:app });
peeps.push(peep);
peepsContainer.addChild(peep.graphics);
};
// EDGES
var edges = [];
self.addEdge = function(from, to){
var edge = new SplashEdge({ from:from, to:to });
edges.push(edge);
edgesContainer.addChild(edge.graphics);
};
// Create RINGS
var _createRing = function(xRadius, count){
yRadius = xRadius*(350/400);
var increment = (Math.TAU/count)+0.0001;
for(var angle=0; angle<Math.TAU; angle+=increment){
var a = angle-(Math.TAU/4);
var x = width/2 + Math.cos(a)*xRadius;
var y = height/2 + Math.sin(a)*yRadius;
self.addPeep(x,y);
}
};
_createRing(400, 20);
_createRing(520, 25);
_createRing(640, 30);
_createRing(760, 35);
// Connect all within a radius
var _connectAllWithinRadius = function(radius){
var r2 = radius*radius;
for(var i=0;i<peeps.length;i++){
var peep1 = peeps[i];
for(var j=i+1;j<peeps.length;j++){
var peep2 = peeps[j];
// Are they close enough?
var dx = peep2.x-peep1.x;
var dy = peep2.y-peep1.y;
if(dx*dx+dy*dy < r2){
self.addEdge(peep1, peep2);
}
}
}
};
_connectAllWithinRadius(250);
// Animiniminimination
var update = function(delta){
Tween.tick();
for(var i=0;i<peeps.length;i++) peeps[i].update(delta);
for(var i=0;i<edges.length;i++) edges[i].update(delta);
};
app.ticker.add(update);
update(0);
///////////////////////////////////////////////
///////////// ADD, REMOVE, KILL ///////////////
///////////////////////////////////////////////
// Add...
self.add = function(INSTANT){
return _add(self);
};
// Remove...
self.remove = function(INSTANT){
return _remove(self);
};
}
function SplashPeep(config){
var self = this;
self.config = config;
// Graphics!
var g = _makeMovieClip("splash_peep", {scale:0.3});
self.graphics = g;
if(Math.random()<0.5) g.scale.x*=-1; // Flip?
// Them variables...
self.app = config.app;
self.x = config.x;
self.y = config.y;
var initX = config.x;
var initY = config.y;
var initRotation = (Math.random()-0.5)*(Math.PI-0.4);
var radius = 5+Math.random()*20;
var swing = 0.05+Math.random()*0.45;
var angle = Math.random()*Math.TAU;
var speed = (0.05+Math.random()*0.95)/60;
self.update = function(delta){
// Them variables...
angle += speed*delta;
var x = initX + Math.cos(angle)*radius;
var y = initY + Math.sin(angle)*radius;
var r = initRotation + Math.cos(angle)*swing;
// NEAR MOUSE?
var Mouse = self.app.renderer.plugins.interaction.mouse.global;
var dx = Mouse.x-x;
var dy = Mouse.y-y;
var rad = 200;
var bulgeX = 0;
var bulgeY = 0;
var dist2 = dx*dx+dy*dy;
if(dist2 < rad*rad){
var bulge = Math.sin(((rad-Math.sqrt(dist2))/rad)*Math.TAU/4)*50;
var bulgeAngle = Math.atan2(-dy,-dx);
bulgeX = Math.cos(bulgeAngle)*bulge;
bulgeY = Math.sin(bulgeAngle)*bulge;
}
// Graphics!
g.x = x + bulgeX;
g.y = y + bulgeY;
g.rotation = r;
};
}
function SplashEdge(config){
var self = this;
self.config = config;
// Graphics!
var g = _makeMovieClip("connection");
g.anchor.x = 0;
g.anchor.y = 0.5;
g.height = 1;
self.graphics = g;
// Them variables...
self.from = config.from;
self.to = config.to;
self.update = function(delta){
// Just update graphics!
var f = self.from.graphics;
var t = self.to.graphics;
var dx = t.x-f.x;
var dy = t.y-f.y;
var a = Math.atan2(dy,dx);
var dist = Math.sqrt(dx*dx+dy*dy);
g.x = f.x;
g.y = f.y;
g.rotation = a;
g.width = dist;
};
}

29
js/slides/Slides_Intro.js Normal file
View file

@ -0,0 +1,29 @@
SLIDES.push({
id: "intro",
add:[
// Splash in background
{ id:"splash", type:"Splash" },
// Circular Wordbox
{
id:"intro_text", type:"TextBox",
box:{
x:160, y:10, width:640, height:500,
align:"center", size:19,
text_id:"intro"
}
},
// Button
{
id:"intro_button", type:"Button", x:385, y:466,
text_id:"intro_button", fontSize:16, upperCase:false,
message:"slideshow/scratch"
}
],
removeAllOnKill: true
});

2
js/slides/Slides_Iterated.js
View file

@ -1,6 +1,6 @@
SLIDES.push({ SLIDES.push({
id: "sim", id: "iterated",
add:[ add:[
// The Iterated simulation // The Iterated simulation

0
js/slides/Slides_OneOff.js Normal file
View file

2
js/slides/Slides_Sandbox.js
View file

@ -1,6 +1,6 @@
SLIDES.push({ SLIDES.push({
id: "sim", id: "sandbox",
add:[ add:[
// The tournament simulation // The tournament simulation

88
lang/en.html
View file

@ -1,3 +1,37 @@
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - INTRO! - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="intro">
During the trench warfare<br>of World War I, peace broke out.
<br><br>
It was Christmas 1914.
Despite strict orders not to chill<br>
with the enemy, British and German soldiers left their trenches,<br>
and gathered to bury their dead, exchange gifts, and sing.
This wasn't unique. Even long before Christmas,
soldiers already had an unspoken system of "live and let live" --
a small peace in a Great War.
<br><br>
Meanwhile, the West is now at peace, and yet,
we distrust our governments, media, and <i>each other</i> more and more.
So, we gotta ask:
<b>
Why, even in the best of times, do friends become enemies?
But also why, even in the worst of times, why do enemies become friends?
</b>
<br><br>
These are complex questions, but a simple idea from game<br>
theory can help shed some light! So, to understand<br>our epidemic of distrust...
</p>
<p id="intro_button">
...let's play a game. &rarr;
</p>
<!-- - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - SANDBOX! - - - - - - - --> <!-- - - - - - SANDBOX! - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - -->
@ -43,36 +77,24 @@ In each round of a one-on-one game, there's a [N]% chance a player makes a mista
<!-- - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - -->
<p id="label_tft"> <p id="label_tft">
Tit For Tat Copycat
</p> </p>
<p id="label_short_tft"> <p id="label_short_tft">
copycat copycat
</p> </p>
<p id="desc_tft">
I Cooperate on the first round.
Then, I just do whatever you did the last round.
If you Cheat me, I'll Cheat you back &em;
but if you Cooperate, I'll forgive you immediately!
</p>
<p id="label_all_d"> <p id="label_all_d">
Always Cheat Always Cheat
</p> </p>
<p id="label_short_all_d"> <p id="label_short_all_d">
sinner cheater
</p>
<p id="desc_all_d">
Ain't I a stinker?
</p> </p>
<p id="label_all_c"> <p id="label_all_c">
Always Cooperate Always Cooperate
</p> </p>
<p id="label_short_all_c"> <p id="label_short_all_c">
saint cooperater
</p>
<p id="desc_all_c">
💖 💖 💖
</p> </p>
<p id="label_grudge"> <p id="label_grudge">
@ -81,50 +103,26 @@ Grudger
<p id="label_short_grudge"> <p id="label_short_grudge">
grudger grudger
</p> </p>
<p id="desc_grudge">
I'll always Cooperate... until you Cheat me even once.
Then, I'll <i>always</i> Cheat you back. NO FORGIVENESS.
</p>
<p id="label_prober"> <p id="label_prober">
Prober Detective
</p> </p>
<p id="label_short_prober"> <p id="label_short_prober">
detective detective
</p> </p>
<p id="desc_prober">
First: I analyze you.
I start: Cooperate, Cheat, Cooperate, Cooperate.
Then: if you retaliated with a Cheat, I switch to playing Tit For Tat.
But: if you never fight back, I Cheat the heck out of you.
My dear Watson: elementary.
</p>
<p id="label_tf2t"> <p id="label_tf2t">
Tit For Two Tats Copykitten
</p> </p>
<p id="label_short_tf2t"> <p id="label_short_tf2t">
copykitten copykitten
</p> </p>
<p id="desc_tf2t">
I Cooperate on the first round.
After that, if you Cheat me... well, I'll forgive you once.
However, if you Cheat me twice in a row, <i>then</i> I'll Cheat back.
(But again, if you Cooperate, I'll forgive you immediately!)
</p>
<p id="label_pavlov"> <p id="label_pavlov">
Pavlov's Dog Simpleton
</p> </p>
<p id="label_short_pavlov"> <p id="label_short_pavlov">
pavlov simpleton
</p>
<p id="desc_pavlov">
I Cooperate on the first round.
After that, if you Cooperated in the previous round,
I'll just do what I did last time (even if it was a mistake).
But if you Cheated in the previous round,
I'll do the <i>opposite</i> of what I did last time (even if it was a mistake).
</p> </p>
<p id="label_random"> <p id="label_random">
@ -133,10 +131,6 @@ Lol So Random
<p id="label_short_random"> <p id="label_short_random">
random random
</p> </p>
<p id="desc_random">
monkey tacos! robot ninja bacon pirate!
i randomly play Cheat or Cooperate coz lol i'm so random
</p>
<!-- - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - -->