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

all sounds and misc ui shtuff

Browse source
This commit is contained in:
Nicky Case 2017-07-24 16:56:59 -04:00
parent aa18ecb42b
commit 61682b3da9
33 changed files with 387 additions and 618 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
LICENSE Normal file
View file

@ -0,0 +1,116 @@
CC0 1.0 Universal
Statement of Purpose
The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator and
subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").
Certain owners wish to permanently relinquish those rights to a Work for the
purpose of contributing to a commons of creative, cultural and scientific
works ("Commons") that the public can reliably and without fear of later
claims of infringement build upon, modify, incorporate in other works, reuse
and redistribute as freely as possible in any form whatsoever and for any
purposes, including without limitation commercial purposes. These owners may
contribute to the Commons to promote the ideal of a free culture and the
further production of creative, cultural and scientific works, or to gain
reputation or greater distribution for their Work in part through the use and
efforts of others.
For these and/or other purposes and motivations, and without any expectation
of additional consideration or compensation, the person associating CC0 with a
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
and publicly distribute the Work under its terms, with knowledge of his or her
Copyright and Related Rights in the Work and the meaning and intended legal
effect of CC0 on those rights.
1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not limited
to, the following:
i. the right to reproduce, adapt, distribute, perform, display, communicate,
and translate a Work;
ii. moral rights retained by the original author(s) and/or performer(s);
iii. publicity and privacy rights pertaining to a person's image or likeness
depicted in a Work;
iv. rights protecting against unfair competition in regards to a Work,
subject to the limitations in paragraph 4(a), below;
v. rights protecting the extraction, dissemination, use and reuse of data in
a Work;
vi. database rights (such as those arising under Directive 96/9/EC of the
European Parliament and of the Council of 11 March 1996 on the legal
protection of databases, and under any national implementation thereof,
including any amended or successor version of such directive); and
vii. other similar, equivalent or corresponding rights throughout the world
based on applicable law or treaty, and any national implementations thereof.
2. Waiver. To the greatest extent permitted by, but not in contravention of,
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
and Related Rights and associated claims and causes of action, whether now
known or unknown (including existing as well as future claims and causes of
action), in the Work (i) in all territories worldwide, (ii) for the maximum
duration provided by applicable law or treaty (including future time
extensions), (iii) in any current or future medium and for any number of
copies, and (iv) for any purpose whatsoever, including without limitation
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
the Waiver for the benefit of each member of the public at large and to the
detriment of Affirmer's heirs and successors, fully intending that such Waiver
shall not be subject to revocation, rescission, cancellation, termination, or
any other legal or equitable action to disrupt the quiet enjoyment of the Work
by the public as contemplated by Affirmer's express Statement of Purpose.
3. Public License Fallback. Should any part of the Waiver for any reason be
judged legally invalid or ineffective under applicable law, then the Waiver
shall be preserved to the maximum extent permitted taking into account
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
is so judged Affirmer hereby grants to each affected person a royalty-free,
non transferable, non sublicensable, non exclusive, irrevocable and
unconditional license to exercise Affirmer's Copyright and Related Rights in
the Work (i) in all territories worldwide, (ii) for the maximum duration
provided by applicable law or treaty (including future time extensions), (iii)
in any current or future medium and for any number of copies, and (iv) for any
purpose whatsoever, including without limitation commercial, advertising or
promotional purposes (the "License"). The License shall be deemed effective as
of the date CC0 was applied by Affirmer to the Work. Should any part of the
License for any reason be judged legally invalid or ineffective under
applicable law, such partial invalidity or ineffectiveness shall not
invalidate the remainder of the License, and in such case Affirmer hereby
affirms that he or she will not (i) exercise any of his or her remaining
Copyright and Related Rights in the Work or (ii) assert any associated claims
and causes of action with respect to the Work, in either case contrary to
Affirmer's express Statement of Purpose.
4. Limitations and Disclaimers.
a. No trademark or patent rights held by Affirmer are waived, abandoned,
surrendered, licensed or otherwise affected by this document.
b. Affirmer offers the Work as-is and makes no representations or warranties
of any kind concerning the Work, express, implied, statutory or otherwise,
including without limitation warranties of title, merchantability, fitness
for a particular purpose, non infringement, or the absence of latent or
other defects, accuracy, or the present or absence of errors, whether or not
discoverable, all to the greatest extent permissible under applicable law.
c. Affirmer disclaims responsibility for clearing rights of other persons
that may apply to the Work or any use thereof, including without limitation
any person's Copyright and Related Rights in the Work. Further, Affirmer
disclaims responsibility for obtaining any necessary consents, permissions
or other rights required for any use of the Work.
d. Affirmer understands and acknowledges that Creative Commons is not a
party to this document and has no duty or obligation with respect to this
CC0 or use of the Work.
For more information, please see
<http://creativecommons.org/publicdomain/zero/1.0/>

6
MORE WORDS.md
View file

@ -1,6 +0,0 @@
THE CORE WHY: WHY TEACH THIS?
To create a trustful world
therefore, understand the conditions of trust, its mechanisms
---

0
README.md Normal file
View file

20
TODO.md
View file

@ -1,20 +0,0 @@
MAJOR SHTUFF
1. Create Sandbox
2. Re-create Repeated Game w/ params exposed
3. Re-create Splash, with cool outro
4. Integrate & Write EVERYTHING
5. Final round of playtesting
6. Credits, Footnotes, Rewards
7. Polish the whole dang thing
MINOR SHTUFF
- Word box class less annoying
- Refactoring, ugh
- Draw: Pavlov, TF2T, Random
- a better handwritten font, with REAL bold & italics???
- rename Tit For Tat, so it FEELS nicer??? also block peeps who already know the answer... // Copycat Copykitten
- rename all of 'em, really?
- unsubscribe
- slides: can have func() logic IN the slides.

509
WORDS.md
View file

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

BIN
assets/sounds/bonk.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/button1.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/button2.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/button3.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/drumroll.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/fart.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/machine_start.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/squeak.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/thump.mp3 Normal file
View file

Binary file not shown.

BIN
assets/sounds/whoosh.mp3 Normal file
View file

Binary file not shown.

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

71
css/slides.css
View file

@ -50,6 +50,61 @@ s{
text-decoration: line-through;
}
/*************************/
/******* SOUND *******/
/*************************/
#sound{
position: absolute;
left:13px;
top:5px;
width: 100px;
height: 50px;
cursor: pointer;
}
#sound > div{
position: absolute;
}
#sound #sound_icon{
background: url(../assets/ui/sound.png);
background-size: auto 100%;
width: 40px;
height: 40px;
top: 5px;
left:2px;
}
#sound #sound_on, #sound #sound_off{
left: 52px;
font-size: 30px;
line-height: 55px;
}
#sound #sound_on{
color:#fff;
}
#sound #sound_off{
color:#595959;
}
#sound[sound=off] #sound_icon{
background-position: -40px 0;
}
#sound[sound=on] #sound_on, #sound[sound=off] #sound_off{
display: block;
}
#sound[sound=off] #sound_on, #sound[sound=on] #sound_off{
display: none;
}
.sharing{
position: absolute;
width:120px;
height:40px;
top:10px;
right:13px;
}
.sharing img{
width: 40px;
height: 40px;
}
/*************************/
/******* SLIDESHOW *******/
/*************************/
@ -100,18 +155,18 @@ s{
/********* Button ********/
.no-select{
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.button{
z-index: 0;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform-origin: 97.5px 27.5px;
transition: transform 0.1s ease-out;

78
index.html
View file

@ -2,20 +2,21 @@
<html>
<head>
<!-- TRANSLATE: 'title' -->
<!-- META -->
<title>The Evolution of Trust</title>
<meta name="description" content="an interactive guide to the game theory of why &amp; how we trust each other"/>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<meta name="viewport" content="width=640">
<!--meta name="viewport" content="width=640"-->
<link rel="icon" type="image/png" href="favicon.png">
<!-- TRANSLATE: 'name' and 'description' -->
<!-- Facebook Shtuff -->
<meta itemprop="name" content="The Evolution of Trust">
<meta itemprop="description" content="an interactive guide to the game theory of why &amp; how we trust each other">
<meta itemprop="image" content="http://ncase.me/trust/social/thumbnail.png">
<!-- TRANSLATE: 'twitter:title' and 'twitter:description' -->
<!-- Twitter Shtuff -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="The Evolution of Trust">
@ -23,7 +24,7 @@
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/trust/social/thumbnail.png">
<!-- TRANSLATE: 'og:title' and 'og:description' -->
<!-- Shmoogle Shtuff -->
<meta property="og:title" content="The Evolution of Trust">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/trust/">
@ -44,7 +45,14 @@
</div>
</div>
<div style="display:none" id="footer">
<div id="sound" sound="on" class="no-select">
<div id="sound_icon"></div>
<div id="sound_on">ON</div>
<div id="sound_off">OFF</div>
</div>
<div id="select"></div>
<sharing text="People no longer trust each other. Why? And how can we fix it? An interactive guide to the game theory of trust:"
link="http://ncase.me/trust/"></sharing>
</div>
</body>
</html>
@ -60,6 +68,7 @@
<script>var createjs = window;</script>
<script src="js/lib/tweenjs-0.6.2.min.js"></script>
<script>Ticker.framerate=60; Ticker.paused=true;</script>
<script src="js/lib/sharing.js"></script>
<!-- Core Engine -->
<script src="js/core/Loader.js"></script>
@ -93,63 +102,6 @@
<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 -->
<script>
var slideshow, slideSelect;
window.onload = function(){
// PRELOADER
Q.all([
Loader.loadAssets(Loader.manifestPreload),
Words.convert("lang/en.html")
]).then(function(){
// CHANGE DOM
document.body.removeChild($("#preloader"));
$("#main").style.display = "block";
$("#footer").style.display = "block";
// Slideshow
slideshow = new Slideshow({
dom: $("#slideshow"),
slides: SLIDES
});
// Slide Select
slideSelect = new SlideSelect({
dom: $("#select"),
slides: SLIDES
});
slideSelect.dom.style.display = "none";
subscribe("start/game", function(){
slideSelect.dom.style.display = "block";
// [FOR DEBUGGING]
publish("slideshow/next");
//publish("slideshow/scratch", ["conclusion"]);
});
// DEBUGGING
//Howler.mute(true);
// LOAD REAL THINGS
Loader.loadAssets(
Loader.manifest,
function(){
publish("preloader/done");
},
function(ratio){
publish("preloader/progress", [ratio]);
}
);
// First slide!
slideshow.nextSlide();
});
};
</script>
<script src="js/main.js"></script>

24
js/core/Button.js
View file

@ -1,3 +1,12 @@
Loader.addToManifest(Loader.manifest,{
// SFX
button1: "assets/sounds/button1.mp3",
button2: "assets/sounds/button2.mp3",
button3: "assets/sounds/button3.mp3"
});
function Button(config){
var self = this;
@ -45,10 +54,25 @@ function Button(config){
// On click...
hitbox.onclick = function(){
if(parseFloat(getComputedStyle(self.dom).opacity)<0.5) return; // DON'T CLICK INVISIBLE BUTTONS
if(self.active){
// Sound!
if(config.sound){
Loader.sounds[config.sound].play();
}else{
var num = Math.ceil(Math.random()*3);
Loader.sounds["button"+num].play();
}
// Actual Logic
if(config.onclick) config.onclick();
if(config.message) publish(config.message);
}
};
// Activate/Deactivate

3
js/lib/helpers.js
View file

@ -70,6 +70,9 @@ var _s = function(seconds){
var _hide = function(object){
object.dom.style.opacity = 0;
};
var _show = function(object){
object.dom.style.opacity = 1;
};
var _fadeIn = function(object, time){
setTimeout(function(){
object.dom.classList.add("fader");

22
js/lib/sharing.js Normal file
View file

@ -0,0 +1,22 @@
window.addEventListener("load",function(){
// Find the "sharing" dom
var sharingDOM = document.body.querySelector("sharing");
// URL encodeable
var text = sharingDOM.getAttribute("text");
var link = sharingDOM.getAttribute("link");
text = encodeURIComponent(text);
link = encodeURIComponent(link);
// Create full html
var sharing = document.createElement("div");
sharing.className = "sharing";
sharing.innerHTML = '<a href="https://www.facebook.com/sharer/sharer.php?u='+link+'&t='+text+'" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="social/facebook.png"></a>'+
'<a href="https://twitter.com/intent/tweet?source='+link+'&text='+text+'%20'+link+'" target="_blank" title="Tweet"><img alt="Tweet" src="social/twitter.png"></a>'+
'<a href="mailto:?subject='+text+'&body='+link+'" target="_blank" title="Send email"><img alt="Send email" src="social/email.png"></a>';
// Replace it in the dom
sharingDOM.parentNode.replaceChild(sharing, sharingDOM);
});

60
js/main.js Normal file
View file

@ -0,0 +1,60 @@
var slideshow, slideSelect;
window.onload = function(){
// PRELOADER
Q.all([
Loader.loadAssets(Loader.manifestPreload),
Words.convert("lang/en.html")
]).then(function(){
// CHANGE DOM
document.body.removeChild($("#preloader"));
$("#main").style.display = "block";
$("#footer").style.display = "block";
// Slideshow
slideshow = new Slideshow({
dom: $("#slideshow"),
slides: SLIDES
});
// Slide Select
slideSelect = new SlideSelect({
dom: $("#select"),
slides: SLIDES
});
slideSelect.dom.style.display = "none";
subscribe("start/game", function(){
slideSelect.dom.style.display = "block";
// [FOR DEBUGGING]
publish("slideshow/next");
//publish("slideshow/scratch", ["conclusion"]);
});
// SOUND
var _soundIsOn = true;
$("#sound").onclick = function(){
_soundIsOn = !_soundIsOn;
Howler.mute(!_soundIsOn);
$("#sound").setAttribute("sound", _soundIsOn?"on":"off");
};
// LOAD REAL THINGS
Loader.loadAssets(
Loader.manifest,
function(){
publish("preloader/done");
},
function(ratio){
publish("preloader/progress", [ratio]);
}
);
// First slide!
slideshow.nextSlide();
});
};

17
js/sims/Iterated.js
View file

@ -9,6 +9,9 @@ Loader.addToManifest(Loader.manifest,{
coin_insert: "assets/sounds/coin_insert.mp3",
coin_get: "assets/sounds/coin_get.mp3",
evil_laugh: "assets/sounds/evil_laugh.mp3",
whoosh: "assets/sounds/whoosh.mp3",
thump: "assets/sounds/thump.mp3",
machine_start: "assets/sounds/machine_start.mp3"
});
@ -120,6 +123,7 @@ function Iterated(config){
});
self.introMachine = function(){
_introMachine = 40;
Loader.sounds.machine_start.volume(0.8).play();
};
///////////////////////////////////////////////
@ -407,6 +411,10 @@ function IteratedPeep(config){
})
.to({rotation:Math.TAU/4.9, y:-11}, _s(0.05), Ease.quadIn)
.call(function(){
Loader.sounds.thump.stereo(-0.9).volume(0.9).play();
Loader.sounds.squeak.stereo(-0.9).volume(0.9).play();
self.eyebrows.visible = false;
_faceTripped = true;
self.coin.visible = false;
@ -460,6 +468,15 @@ function IteratedPeep(config){
if(self.payoff==PD.PAYOFFS.P) self.face.gotoAndStop(7); // Punishment Face
if(self.payoff==PD.PAYOFFS.T) self.face.gotoAndStop(10); // Temptation Face!
// WHOOSH SOUND
if(config.opponent){
setTimeout(function(){
Loader.sounds.whoosh.stereo(0.9).volume(0.8).play();
},50);
}else{
Loader.sounds.whoosh.stereo(-0.9).volume(0.8).play();
}
// EVIL LAUGH
if(self.payoff==PD.PAYOFFS.T){
setTimeout(function(){

3
js/sims/Splash.js
View file

@ -1,6 +1,7 @@
Loader.addToManifest(Loader.manifestPreload,{
splash_peep: "assets/splash/splash_peep.json",
connection: "assets/splash/connection.json"
connection: "assets/splash/connection.json",
cssAsset13: "assets/ui/sound.png"
});
function Splash(config){

16
js/sims/Tournament.js
View file

@ -41,7 +41,12 @@ subscribe("rules/turns",function(value){
// REGULAR LOAD
Loader.addToManifest(Loader.manifest,{
tournament_peep: "assets/tournament/tournament_peep.json",
connection_flower: "assets/tournament/connection_flower.json"
connection_flower: "assets/tournament/connection_flower.json",
// SFX
squeak: "assets/sounds/squeak.mp3",
bonk: "assets/sounds/bonk.mp3"
});
function Tournament(config){
@ -408,14 +413,23 @@ function Tournament(config){
// PLAY A TOURNAMENT
self._startPlay = function(){
if(!self.isAutoPlaying){
Loader.sounds.coin_get.volume(0.1).play();
}
self.STAGE=STAGE_PLAY;
};
listen(self, "tournament/play", self._startPlay);
self._startEliminate = function(){
if(!self.isAutoPlaying){
Loader.sounds.squeak.volume(0.4).play();
}
self.STAGE=STAGE_ELIMINATE;
};
listen(self, "tournament/eliminate", self._startEliminate);
self._startReproduce = function(){
if(!self.isAutoPlaying){
Loader.sounds.bonk.volume(0.3).play();
}
self.STAGE=STAGE_REPRODUCE;
};
listen(self, "tournament/reproduce", self._startReproduce);

2
js/slides/0_Slides_Intro.js
View file

@ -80,7 +80,7 @@ SLIDES.push({
o.loading_button.activate();
o.loading_button.config.onclick = function(){
publish("start/game");
Loader.sounds.bg_music.volume(0.8).loop(true).play(); // play music!
Loader.sounds.bg_music.volume(0.75).loop(true).play(); // play music!
};
});

16
js/slides/3_Slides_Tournament.js
View file

@ -1,3 +1,8 @@
Loader.addToManifest(Loader.manifest,{
// SFX
drumroll: "assets/sounds/drumroll.mp3"
});
// round-robin tournament, place your bets
SLIDES.push({
id: "tournament",
@ -203,9 +208,14 @@ SLIDES.push({
message: "slideshow/scratch"
});
// FADE
_hide(o.text); _fadeIn(o.text, 100);
_hide(o.button); _fadeIn(o.button, 100+500);
// DRUMROLL
Loader.sounds.drumroll.play();
_hide(o.text);
_hide(o.button);
setTimeout(function(){
_show(o.text);
_show(o.button);
},2000);
},
onend: function(self){

10
js/slides/4_Slides_Evolution.js
View file

@ -1,3 +1,8 @@
Loader.addToManifest(Loader.manifest,{
// SFX
fart: "assets/sounds/fart.mp3"
});
// Evolution Intro
SLIDES.push({
id: "evolution",
@ -287,7 +292,10 @@ SLIDES.push({
onstart: function(self){
var o = self.objects;
// TODO: FART SOUND
// FART SOUNDS
Loader.sounds.fart.play();
// New tournament...
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"all_d", count:24},

2
js/slides/8_Slides_Conclusion.js
View file

@ -40,7 +40,7 @@ SLIDES.push({
});
self.add({
id:"text8", type:"TextBox",
x:94, y:440, width:500, align:"right",
x:74, y:440, width:520, align:"right",
text_id:"conclusion_4"
});

30
lang/en.html
View file

@ -1,3 +1,24 @@
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - META STUFF - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
<p id="meta_title">
The Evolution of Trust
</p>
<p id="meta_desc">
an interactive guide to the game theory of why &amp; how we trust each other
</p>
<p id="meta_loading">
loading...
</p>
<p id="meta_on">
ON
</p>
<p id="meta_off">
OFF
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - - - TITLE! - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - -->
@ -8,7 +29,7 @@ EVOLUTION<br>
<span style="font-size:0.75em">OF TRUST</span>
</p>
<p id="subtitle">
playing time: 20 min &#8226; by nicky case, july 2017
playing time: 30 min &#8226; by nicky case, july 2017
</p>
<p id="loading">
@ -276,7 +297,7 @@ Yes, the truce was dramatic, but it was <i>neither unique, nor unusual</i>.
</p>
<p id="tournament_4">
Not <i>every</i> trench joined in the peace, but it was pretty widespread.
Many front-lines came up with the idea independently, and again: <i>despite</i> strict orders.
Many front-lines came up with the idea independently, and again: <i>despite</i> specific, strict orders not to.
</p>
<p id="tournament_5">
And in fact, even <i>before</i> Christmas, several front-lines already <i>had</i>
@ -368,6 +389,7 @@ Say we start with the following population of players:
<br><br>
We're going to do the tournament-eliminate-reproduce dance a dozen times or so.
Let's make another bet! Who do you think will win the <i>first</i> tournament?
<b>PLACE YOUR BETS, AGAIN:</b>
</p>
<p id="evo_2_all_c">
@ -857,8 +879,8 @@ The level of miscommunication can't be <i>too</i> high.
And when there's a little bit of miscommunication, it pays to be <i>more</i> forgiving.
</p>
<p id="conclusion_4">
Of course, real-world trust is affected by a lot more than this.
there's reputation, moral values, contracts, cultural markers, etc, etc.
Of course, real-world trust is affected by much more than this.
There's reputation, shared values, contracts, cultural markers, blah blah blah.
And let's not forget...
</p>
<p id="conclusion_btn">

BIN
social/email.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 403 B

BIN
social/facebook.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 316 B

BIN
social/twitter.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 372 B