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

WORDS

Browse source
This commit is contained in:
Nicky Case 2017-07-17 18:32:02 -04:00
parent 8ff91b8135
commit b2b46a5590
10 changed files with 326 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -56,10 +56,11 @@
<script src="js/slides/2_Slides_Iterated.js"></script>
<script src="js/slides/3_Slides_Tournament.js"></script>
<script src="js/slides/4_Slides_Evolution.js"></script>
<script src="js/slides/5_Slides_Noise.js"></script>
<script src="js/slides/6_Slides_Sandbox.js"></script>
<script src="js/slides/7_Slides_Conclusion.js"></script>
<script src="js/slides/8_Slides_Credits.js"></script>
<script src="js/slides/5_Slides_Distrust.js"></script>
<script src="js/slides/6_Slides_Noise.js"></script>
<script src="js/slides/7_Slides_Sandbox.js"></script>
<script src="js/slides/8_Slides_Conclusion.js"></script>
<script src="js/slides/9_Slides_Credits.js"></script>
<!--script src="js/slides/Slides_Sandbox.js"></script-->
<!-- Main Code -->

4
js/core/Scratcher.js
View file

@ -83,14 +83,14 @@ Scratcher.smallScratch = function(x,y,width,height,_onChange,_onComplete){
// Animate!
Scratcher.scratchAnim(scratcher, true)
.then(function(){
_onChange();
if(_onChange) _onChange();
})
.then(function(){
return Scratcher.scratchAnim(scratcher, false);
})
.then(function(){
slideshow.dom.removeChild(scratcher); // Destroy DOM
_onComplete();
if(_onComplete) _onComplete();
});
};

21
js/slides/4_Slides_Evolution.js
View file

@ -110,8 +110,8 @@ SLIDES.push({
var x = 510;
var y = 200;
var nextStep;
var textStep = 2;
// var textStep = 8;
// var textStep = 2;
var textStep = 8;
self.add({
id:"step_1", type:"Button", x:x, y:y,
text_id: "label_play_tournament", size:"long",
@ -205,8 +205,10 @@ SLIDES.push({
SLIDES.push({
onstart: function(self){
// Tournament
var o = self.objects;
// SCRATCH IN TOURNAMENT
Scratcher.smallScratch(0, 0, 480, 540, function(){
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"all_c", count:5},
@ -216,11 +218,11 @@ SLIDES.push({
{strategy:"prober", count:6}
];
o.tournament.reset();
_hide(o.tournament); _fadeIn(o.tournament, 10);
});
// The same with grudger & detetive!
o.text.setTextID("evo_10");
_hide(o.text); _fadeIn(o.text, 400);
_hide(o.text); _fadeIn(o.text, 1000);
// Button: start/stop
var isPlaying = false;
@ -239,7 +241,7 @@ SLIDES.push({
}
}
});
_hide(o.autoplay); _fadeIn(o.autoplay, 600);
_hide(o.autoplay); _fadeIn(o.autoplay, 1200);
// Listen...
var step = 0;
@ -284,7 +286,7 @@ SLIDES.push({
onstart: function(self){
var o = self.objects;
// Oh no
// TODO: FART SOUND
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"all_d", count:24},
@ -294,7 +296,7 @@ SLIDES.push({
// Text
o.text.setTextID("evo_11");
_hide(o.text); _fadeIn(o.text, 200);
//_hide(o.text); _fadeIn(o.text, 100);
// Next
self.add({
@ -302,12 +304,13 @@ SLIDES.push({
text_id:"evo_11_btn", size:"long",
message: "slideshow/next"
});
_hide(o.next); _fadeIn(o.next, 500);
//_hide(o.next); _fadeIn(o.next, 200);
},
onend: function(self){
self.remove("text");
self.remove("next");
_.clear();
}
});

41
js/slides/5_Slides_Distrust.js Normal file
View file

@ -0,0 +1,41 @@
SLIDES.push({
id: "distrust",
onjump: function(self){
// Tournament
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"tft", count:20},
{strategy:"all_d", count:1},
{strategy:"all_c", count:1},
{strategy:"grudge", count:1},
{strategy:"prober", count:1}
];
self.add({id:"tournament", type:"Tournament", x:-20, y:20});
},
onstart: function(self){
var o = self.objects;
// Reset Tournament
_.resetTournament = function(){
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"tft", count:20},
{strategy:"all_d", count:1},
{strategy:"all_c", count:1},
{strategy:"grudge", count:1},
{strategy:"prober", count:1}
];
o.tournament.reset();
};
_.resetTournament();
// Move tournament
o.tournament.dom.style.left = 480;
},
onend: function(self){
}
});

0
js/slides/5_Slides_Noise.js → js/slides/6_Slides_Noise.js
View file

0
js/slides/6_Slides_Sandbox.js → js/slides/7_Slides_Sandbox.js
View file

0
js/slides/7_Slides_Conclusion.js → js/slides/8_Slides_Conclusion.js
View file

0
js/slides/8_Slides_Credits.js → js/slides/9_Slides_Credits.js
View file

6
js/slides/X_Slides_Feetnotes.js Normal file
View file

@ -0,0 +1,6 @@
SLIDES.push({
id: "credits",
onstart: function(self){
self.add({ id:"bg", type:"Background", color:"#222" });
}
});

271
lang/en.html
View file

@ -3,6 +3,10 @@
<!-- - - - - - - - - - - - - - - - - -->
<!-- TODO: Focus ONLY on social trust, not governments -->
<!-- TODO: Also, strong early humor. -->
<!-- TODO: "You guys, it's time for some game theory". -->
<!-- TODO: "live and let live". -->
<!-- TODO: it's sometimes RATIONAL to distrust: loop of trust & trustworthiness. -->
<p id="intro">
During World War I, peace broke out.
@ -96,7 +100,7 @@ Wow, that's mean... and also the correct answer!
</p>
<p id="oneoff_2_cooperated">
Sure, seems like the right thing to do... <i>or is it?</i>
Sure, seems like the right thing to do... <i>OR IS IT??</i>
</p>
<p id="oneoff_2_top">
@ -289,7 +293,7 @@ Congrats, you placed your bet on the right horse.
</p>
<p id="tournament_winner_3">
<span class="tft">Copycat</span> goes by many names.
The Golden Rule, reciprocal altruism, tit for tat, or... <i>live and let live.</i>
The Golden Rule, reciprocal altruism, tit for tat, or... <b>live and let live.</b>
That's why "peace" could emerge in the trenches of World War I:
when you're forced to play the same game with the
same <i>specific people</i> (not just the same generic "enemy") over and over again --
@ -476,8 +480,9 @@ However...
There are jerks. Look around.
<br><br>
If <span class="tft">Copycat</span> is the strategy in this repeated game of trust that's so powerful --
that even soldiers in the trenches of World War I independently "evolved" a similar strategy --
why, then, are there so many un-trusting, un-trustworthy people around?
that even soldiers in World War I trenches independently "evolved" a similar strategy, called "live and let live" --
why, then, are there so many un-trusting, un-trustworthy people?
What's causing our epidemic of un-trust?
<br><br>
A clue's in that sentence itself. "In <i>this</i> repeated game of trust."
So far we've only talked about change in the players:
@ -489,9 +494,196 @@ What could lead to...
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - NOISE! - - - - - - -->
<!-- - - - - - DISTRUST - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="distrust_1">
Before everything goes to heck: let's start with something nice.
A world, mostly populated by nice <span class="tft">Copycats</span>,
with only one each of a
mean <span class="all_d">Always Cheat</span>,
naive <span class="all_c">Always Cooperate</span>,
unforgiving <span class="grudge">Grudger</span>, and
manipulative <span class="prober">Detective</span>.
<br><br>
Use the buttons on the right to <b>start</b> the simulation,
go through it <b>step-by-step</b>, or <b>restart</b> it. &rarr;
</p>
<p id="distrust_2">
Under our current rules, <span class="tft">Copycat</span> wins easily.
<br><br>
But that's under our <i>current</i> rules, which say that
players play against each other 10 rounds per match.
What if players had to play 20 rounds? 5 rounds? 3 rounds? 1 round?
Use the slider below to change this rule, <b>start</b> the simulation,
and see what happens – then repeat this for as many numbers as you'd like to experiment with:
</p>
<p id="distrust_2_end">
(when you're done, press:)
</p>
<p id="distrust_3">
As you just saw, if you play enough rounds, <span class="tft">Copycat</span> still wins...
but when people play with each other less and less... suddenly, // HOW MUCH?
<span class="all_d">ALWAYS CHEAT</span> dominates once again.
<br><br>
In 1985, when Americans were asked how many close friends they had,
the most common answer was "three". In 2004, the most common answer was <i>"zero"</i>.
Furthermore, we're also (relatively) less likely to
get married, volunteer, go to church, join organizations, or participate in local politics.
We're losing our "social capital".
And as you discovered for yourself just now,
<b>the fewer "repeat interactions" there are, the more distrust will spread.</b>
<br><br>
(and no, mass media doesn't count:
it has to be repeat <i>two-way</i> interactions between <i>specific individuals</i>.)
</p>
<p id="distrust_3_btn">
oh, it gets worse... &rarr;
</p>
<p id="distrust_4">
There's another way to breed distrust.
Here are the "payoffs" for a single round of the trust game:
</p>
<p id="distrust_4_end">
Note: although the reward for mutual trust (+2) is less than the temptation to exploit (+3),
with enough repeat interaction, trust can still win!
But now, <b>click the arrows above to change the reward from +2 to +1,
then click "start".</b>
Even though +1 is still more than the punishment for mutual distrust (0)...
what happens?
<br><br>
(<i>after</i> you try that, feel free to play around with different "payoff" combinations!
once you're done experimenting, hit:)
</p>
<p id="distrust_4_note">
(simulating: 5 rounds per match)
</p>
<p id="distrust_5">
So even if the reward for getting a "win-win" is still <i>more</i>
than the punishment for a "lose-lose"...
<b>if the reward for mutual trust is <i>too</i> low, distrust evolves.</b>
<br><br>
I think, as a culture, we're losing the value of finding "win-wins".
We're more interested in "win-lose", because viciousness gets views, conflict gets clicks.
We'd rather live and let die.
Maybe I'm just overthinking things, maybe I'm just old and shaking my fist at a cloud...
but don't you feel it? That we've forgotten something?...
</p>
<p id="distrust_5_btn">
...whatevs i dunno &rarr;
</p>
<p id="distrust_6">
Aaaaanyway, you can now play with both the number of rounds <i>and</i> the payoffs!
These two things interact with each other a lot.
For example, even though a low +1 reward creates distrust with 5 rounds per match,
trust can still win with <i>10</i> rounds per match! (Click <b>START</b> to simulate this)
</p>
<p id="distrust_6_end">
Once you're done experimenting,
(and there'll be a <i>much</i> bigger "sandbox" to play around with at the end)
let's take a look at our final, most interesting barrier to trust...
</p>
<p id="distrust_6_btn">
<strikethrough>Misteaks</strikethrough> Mistakes. &rarr;
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - NOISE! - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="noise_1">
As cool as <span class="tft">Copycat</span> is, it has a huge, fatal weakness I haven't mentioned yet.
To understand it, let's imagine two <span class="tft">Copycats</span> are playing against each other:
</p>
<p id="noise_1_end">
Being a nice player, both their first moves will be:
</p>
<p id="noise_2">
And normally, they'd just pay back each others' kindness and sing Kumbaya 'til the end of days.
</p>
<p id="noise_2_end">
But what if, while trying to reciprocate...
</p>
<p id="noise_3">
<b>OH NO</b>
<br>
Mistakes, miscommunication, misinterpretations -- accidents happen all the time in real life.
</p>
<p id="noise_3_end">
But if the other person doesn't <i>think</i> it was an accident...
</p>
<p id="noise_4">
<b>OH NO x2</b>
<br>
The other player, being a <span class="tft">Copycat</span>, <i>had<i> to retaliate...
</p>
<p id="noise_4_end">
...and you, being a <span class="tft">Copycat</span> as well, will <i>also</i> have to retaliate...
</p>
<p id="noise_5">
And like the Hatfields and McCoys, or the Crips and Bloods,
these two <span class="tft">Copycats</span> will spiral into an endless feud of vengeance...
</p>
<p id="noise_5_end">
...that started over a <i>single</i> mistake, long forgotten.
<br><br>
How tragic. But now, are there other characters, types of players, who can...
</p>
<p id="noise_5_btn">
...survive mistakes? &rarr;
</p>
<p id="noise_characters">
Let's meet some new faces!
</p>
<p id="character_tf2t">
<b>COPYKITTEN:</b>
Hello! I'm like <span class="tft">Copycat</span>,
except I Cheat back only after you Cheat me twice in a row.
After all, the first one could be a mistake! Purrrrr
</p>
<p id="character_pavlov">
<b>SIMPLETON:</b>
hi i try start cooperate. (unless i make mistake)
if you cooperate back => good thing => i do same thing as last move. (even if it was mistake)
if you cheat back => bad thing => i do opposite thing as last move. (even if it was mistake)
</p>
<p id="character_random">
<b>RANDOM:</b>
<i>Monkey robot! Ninja pizza tacos! lol i'm so random</i>
(Just plays Cheat or Cooperate randomly with a 50/50 chance)
</p>
<p id="noise_characters_end">
Alright, let's see how well these peeps do when they...
</p>
<p id="noise_characters_btn">
...play against each other &rarr;
</p>
<!-- fixed 5% chance: winner simpleton, then copykitten -->
<!-- Need to simulate first to write words, i dunno -->
<!-- (Recap distrust) nonlinear barrier: from 0% to 5% to etc etc... -->
<!-- MIS-COMMUNICATION & OVER-PUNISHMENT in real life -->
<!-- How's this all interact? Finally, the SANDBOX. -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - SANDBOX! - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
@ -532,7 +724,10 @@ In each round of a one-on-one game, there's a [N]% chance a player makes a mista
</p>
<p id="sandbox_end">
...once you're done playing around in Sandbox Mode, click:
...once you're done playing around, let's recap
</p>
<p id="sandbox_end_btn">
what we've learnt &rarr;
</p>
@ -541,15 +736,43 @@ In each round of a one-on-one game, there's a [N]% chance a player makes a mista
<!-- - - - - CONCLUSION! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="conclusion">
blah blah blah blah
blah blah blah blah<br>
blah blah blah blah
blah blah blah blah<br>
blah blah blah blah
blah blah blah blah<br>
blah blah blah blah
blah blah blah blah<br>
<p id="conclusion_1">
TRUST:
- repeated interaction:
- win-win:
- dealing with mistakes: forgive, and try to be clear and honest yourself
DISTRUST:
- loss of social capital
- win-lose, use versus them, zero-sum
- gleefully punishing even small mistakes
But above all, there's also...
</p>
<p id="conclusion_btn">
...the bigger lesson &rarr;
</p>
<p id="conclusion_2">
Don't hate the player, hate the game.
<br>
Game theory lesson.
<br>
Short term: game changes players. But don't be cynical
<br>
Long term: players change game, from the bottom up -- evolution.
<br>
So if we wanna cure our epidemic of distrust,
and rebuild a trusting &amp; trustworthy civic society, it's up to all of <i>us.</i>
Let's all learn and act to find win-wins,
to create repeated interactions,
(and...)
</p>
<p id="conclusion_2">
...to live and let live.
<!-- the christmas truce pic/photo(?) circular pic... words overlaid -->
</p>
<p id="conclusion_button">
@ -557,7 +780,12 @@ blah blah blah blah<br>
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - CREDITS! - - - - - - -->
<!-- - - - - - CREDITS! - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - FEETNOTES - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
@ -706,15 +934,18 @@ next &rarr;
<p id="chapter_evolution">
4. Repeated Tournament
</p>
<p id="chapter_distrust">
5. The Evolution of Distrust
</p>
<p id="chapter_noise">
5. Making Mistaeks
6. Making Mistaeks
</p>
<p id="chapter_sandbox">
6. Sandbox Mode
7. Sandbox Mode
</p>
<p id="chapter_conclusion">
7. Conclusion
8. Conclusion
</p>
<p id="chapter_credits">
Credits
9. Credits
</p>