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

NOISE SORT OF

Browse source
This commit is contained in:
Nicky Case 2017-07-19 18:49:53 -04:00
parent b44b7fcfe9
commit f95474d2c2
5 changed files with 543 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -88,7 +88,7 @@ window.onload = function(){
// First slide!
//slideshow.nextSlide();
slideshow.gotoSlide("distrust");
slideshow.gotoSlide("noise");
});

32
js/sims/Tournament.js
View file

@ -320,7 +320,7 @@ function Tournament(config){
_nextStep();
setTimeout(function(){
if(self.isAutoPlaying) _startAutoPlay();
},500);
},150);
};
var _stopAutoPlay = function(){
self.isAutoPlaying = false;
@ -342,24 +342,33 @@ function Tournament(config){
// PLAY!
if(self.STAGE == STAGE_PLAY){
if(_playIndex>0) self.agents[_playIndex-1].dehighlightConnections();
if(_playIndex<self.agents.length){
self.agents[_playIndex].highlightConnections();
_playIndex++;
}else{
/*if(self.isAutoPlaying){
self.playOneTournament(); // FOR REAL, NOW.
_playIndex = 0;
_tweenTimer = 0;
self.STAGE = STAGE_REST;
publish("tournament/step/completed", ["play"]);
}
}else{*/
if(_playIndex>0 && _playIndex<self.agents.length+1) self.agents[_playIndex-1].dehighlightConnections();
if(_playIndex>1 && _playIndex<self.agents.length+2) self.agents[_playIndex-2].dehighlightConnections();
if(_playIndex<self.agents.length){
self.agents[_playIndex].highlightConnections();
_playIndex += self.isAutoPlaying ? 2 : 1;
}else{
self.playOneTournament(); // FOR REAL, NOW.
_playIndex = 0;
_tweenTimer = 0;
self.STAGE = STAGE_REST;
publish("tournament/step/completed", ["play"]);
}
//}
}
// ELIMINATE!
if(self.STAGE == STAGE_ELIMINATE){
self.eliminateBottom(Tournament.SELECTION);
_tweenTimer++;
if(_tweenTimer==_s(0.3)){
if(_tweenTimer==_s(0.3) || self.isAutoPlaying){
_tweenTimer = 0;
self.STAGE = STAGE_REST;
publish("tournament/step/completed", ["eliminate"]);
@ -375,6 +384,7 @@ function Tournament(config){
}
// Middle...
_tweenTimer += self.isAutoPlaying ? 0.15 : 0.05;
for(var i=0;i<self.agents.length;i++){
var a = self.agents[i];
a.tweenAngle(_tweenTimer);
@ -382,7 +392,6 @@ function Tournament(config){
}
self.sortAgentsByDepth();
for(var i=0;i<self.connections.length;i++) self.connections[i].updateGraphics();
_tweenTimer += 0.05;
// End
if(_tweenTimer>=1){
@ -636,15 +645,16 @@ function TournamentAgent(config){
// INSTA-KILL ALL CONNECTIONS
self.clearConnections();
scoreText.visible = false;
// Tween -- DIE!
scoreText.visible = false;
var duration = self.tournament.isAutoPlaying ? 0.13 : 0.3;
Tween_get(g).to({
alpha: 0,
x: g.x+Math.random()*20-10,
y: g.y+Math.random()*20-10,
rotation: Math.random()*0.5-0.25
}, _s(0.3), Ease.circOut).call(self.kill);
}, _s(duration), Ease.circOut).call(self.kill);
};

4
js/slides/5_Slides_Distrust.js
View file

@ -140,7 +140,7 @@ SLIDES.push({
self.add({
id:"continueButton", type:"Button",
x:x+215, y:y, size:"short",
text_id:"distrust_2_btn",
text_id:"label_continue",
message: "slideshow/next"
});
_hide(o.continueLabel); _fadeIn(o.continueLabel, 100);
@ -228,7 +228,7 @@ SLIDES.push({
self.add({
id:"continueButton", type:"Button",
x:340, y:471, size:"short",
text_id:"distrust_2_btn",
text_id:"label_continue",
message: "slideshow/next"
});
_hide(o.continueLabel); _fadeIn(o.continueLabel, 100);

451
js/slides/6_Slides_Noise.js
View file

@ -1,16 +1,455 @@
// One-off
// One-off with noise
SLIDES.push({
id: "noise",
onstart: function(self){
onstart: function(self){
var o = self.objects;
// Iterated Simulation
self.add({id:"iterated", type:"Iterated", x:130, y:133});
self.objects.iterated.dehighlightPayoff();
// Words on top & bottom
self.add({
id:"topWords", type:"TextBox", text_id:"noise_1",
x:130, y:35, width:700, height:100, align:"center"
});
self.add({
id:"btmWords", type:"TextBox", text_id:"noise_1_end",
x:130, y:410, width:700, height:100, align:"center"
});
// STAGES
var STAGES = [
{button:"cooperate", message:"cooperate"},
{button:"cooperate", message:"cheat"},
{button:"cooperate", message:"cooperate"},
{button:"cheat", message:"cheat"}
];
var STAGE_INDEX = 0;
// ONE Button
self.add({
id:"button", type:"Button",
x:383, y:463, text_id:"label_cooperate", uppercase:true,
onclick: function(){
// Make sim go
var s = STAGES[STAGE_INDEX];
publish("iterated/"+s.message);
o.button.deactivate();
// Hide words
_hide(o.topWords);
_hide(o.btmWords);
}
});
// Re-activate...
var _foreverWar = false;
var _foreverMove = "cheat";
listen(self, "iterated/round/end", function(){
if(_foreverWar){
publish("iterated/"+_foreverMove);
if(_foreverMove=="cheat") _foreverMove="cooperate";
else if(_foreverMove=="cooperate") _foreverMove="cheat";
}else{
STAGE_INDEX++;
// New words
o.topWords.setTextID("noise_"+(STAGE_INDEX+1));
o.btmWords.setTextID("noise_"+(STAGE_INDEX+1)+"_end");
_fadeIn(o.topWords, 100);
_fadeIn(o.btmWords, 300);
// Next stage
if(STAGE_INDEX>=STAGES.length){
publish("iterated/cooperate");
_foreverWar = true;
// The FINAL buttons... remove the button & put it back in.
self.remove("button");
self.add({
id:"button", type:"Button",
x:304, y:463, text_id:"noise_5_btn", size:"long",
message: "slideshow/scratch"
});
}else{
// Reactivate buttons
var s = STAGES[STAGE_INDEX];
o.button.setText("label_"+s.button);
o.button.activate();
}
}
});
},
onend: function(self){
unlisten(self);
self.clear();
}
});
// New characters
SLIDES.push({
// Tournament
onstart: function(self){
// Tournament #2
// WORDS
self.add({
id:"score1", type:"TextBox",
x:160, y:20, width:640,
text_id:"noise_characters"
});
// Tournament: adjust noise
// CHARS
self.add({
id:"char_tf2t", type:"CharacterTextBox",
x:160, y:70, width:640,
character: "tf2t"
});
self.add({
id:"char_pavlov", type:"CharacterTextBox",
x:160, y:190, width:640,
character: "pavlov"
});
self.add({
id:"char_random", type:"CharacterTextBox",
x:160, y:320, width:640,
character: "random"
});
// Teaser...
// Next...
self.add({
id:"next", type:"TextBox",
x:160, y:420, width:640, align:"right",
text_id: "noise_characters_end"
});
// Next Button!
self.add({
id:"next_button", type:"Button", x:460, y:460, size:"long",
text_id:"noise_characters_btn",
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
}
});
// Tournament: simpleton wins
SLIDES.push({
id: "noise",
onstart: function(self){
var o = self.objects;
// Tournament
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"tf2t", count:3},
{strategy:"pavlov", count:3},
{strategy:"random", count:3},
{strategy:"tft", count:3},
{strategy:"all_c", count:13}
];
PD.NOISE = 0.05;
self.add({id:"tournament", type:"Tournament", x:-20, y:20});
// Words to the side
self.add({
id:"text", type:"TextBox",
x:510, y:30, width:450, height:500,
text_id:"noise_evo_1"
});
// BETS
var _addButton = function(character, x, y){
(function(character, x, y){
self.add({
id:"bet_"+character, type:"Button", x:x, y:y,
text_id: "icon_"+character,
onclick:function(){
_.answer = character;
publish("slideshow/next");
}
});
})(character, x, y);
};
var x = 510;
var y = 295;
var dx = 200;
var dy = 70;
_addButton("tf2t", x, y); _addButton("pavlov", x+dx, y);
_addButton("random", x, y+dy); _addButton("tft", x+dx, y+dy);
_addButton("all_c", x, y+dy*2);
},
onend: function(self){
self.remove("bet_all_c");
self.remove("bet_tft");
self.remove("bet_tf2t");
self.remove("bet_pavlov");
self.remove("bet_random");
}
});
SLIDES.push({
onstart: function(self){
var o = self.objects;
// Words
o.text.setTextID("noise_evo_2");
_hide(o.text); _fadeIn(o.text, 100);
/////////////////////////////////////////
// BUTTONS for playing //////////////////
/////////////////////////////////////////
var x = 135;
var y = 175;
var dy = 70;
self.add({
id:"playButton", type:"Button",
x:x, y:y, text_id:"label_start",
onclick: function(){
if(o.tournament.isAutoPlaying){
publish("tournament/autoplay/stop");
}else{
publish("tournament/autoplay/start");
}
}
});
listen(_, "tournament/autoplay/stop",function(){
o.playButton.setText("label_start");
});
listen(_, "tournament/autoplay/start",function(){
o.playButton.setText("label_stop");
});
self.add({
id:"stepButton", type:"Button",
x:x, y:y+dy, text_id:"label_step", message:"tournament/step"
});
self.add({
id:"resetButton", type:"Button",
x:x, y:y+dy*2, text_id:"label_reset", message:"tournament/reset"
});
/////////////////////////////////////////
// SHOW THE NEXT WORDS, and a NEXT
// NEXT
var reproduceSteps = 0;
_.misc = {};
listen(_.misc, "tournament/step/completed", function(step){
if(step=="reproduce"){
reproduceSteps++;
if(reproduceSteps==6){
publish("slideshow/next");
}
}
});
},
onend: function(self){
unlisten(_.misc);
}
});
SLIDES.push({
onstart: function(self){
var o = self.objects;
// Words
o.text.setTextID("noise_evo_3");
_hide(o.text); _fadeIn(o.text, 100);
// Tournament
Tournament.resetGlobalVariables();
Tournament.INITIAL_AGENTS = [
{strategy:"tf2t", count:3},
{strategy:"pavlov", count:3},
{strategy:"random", count:3},
{strategy:"tft", count:3},
{strategy:"all_d", count:13}
];
PD.NOISE = 0.05;
o.tournament.reset();
// HIDE PLAYER
_hide(o.playButton); o.playButton.deactivate();
_hide(o.stepButton); o.stepButton.deactivate();
_hide(o.resetButton); o.resetButton.deactivate();
// BETS
var _addButton = function(character, x, y){
(function(character, x, y){
self.add({
id:"bet_"+character, type:"Button", x:x, y:y,
text_id: "icon_"+character,
onclick:function(){
_.answer = character;
publish("slideshow/next");
}
});
})(character, x, y);
};
var x = 510;
var y = 295;
var dx = 200;
var dy = 70;
_addButton("tf2t", x, y); _addButton("pavlov", x+dx, y);
_addButton("random", x, y+dy); _addButton("tft", x+dx, y+dy);
_addButton("all_c", x, y+dy*2);
},
onend: function(self){
self.remove("bet_all_c");
self.remove("bet_tft");
self.remove("bet_tf2t");
self.remove("bet_pavlov");
self.remove("bet_random");
}
});
SLIDES.push({
onstart: function(self){
var o = self.objects;
// SHOW PLAYER
_fadeIn(o.playButton,1); o.playButton.activate();
_fadeIn(o.stepButton,1); o.stepButton.activate();
_fadeIn(o.resetButton,1); o.resetButton.activate();
o.playButton.setText("label_start");
// Words
o.text.setTextID("noise_evo_4");
_hide(o.text); _fadeIn(o.text, 100);
/////////////////////////////////////////
// SHOW THE NEXT WORDS, and a NEXT
// NEXT
var reproduceSteps = 0;
_.misc = {};
listen(_.misc, "tournament/step/completed", function(step){
if(step=="reproduce"){
reproduceSteps++;
if(reproduceSteps==8){
publish("slideshow/next");
}
}
});
},
onend: function(self){
unlisten(_.misc);
}
});
// TODO: SMALLER SANDBOX-PLAY BUTTONS
SLIDES.push({
onstart: function(self){
var o = self.objects;
// Words
o.text.setTextID("noise_evo_5");
_hide(o.text); _fadeIn(o.text, 100);
// Tournament
o.tournament.reset();
// Slider!
var x = 510;
var y = 100;
self.add({
id:"noiseLabel", type:"TextBox",
x:x, y:y, width:450, noSelect:true
});
self.add({
id:"noiseSlider", type:"Slider",
x:x, y:y+55, width:450,
min:0.00, max:0.50, step:0.01,
message: "rules/noise"
});
_.misc = {};
var _updateLabel = function(value){
value = Math.round(value*100);
var words = Words.get("sandbox_rules_3");
words = words.replace(/\[N\]/g, value+""); // replace [N] with the number value
o.noiseLabel.setText(words);
};
listen(_.misc, "rules/noise", function(value){
_updateLabel(value);
o.tournament.reset();
});
o.noiseSlider.setValue(0.05);
_updateLabel(0.05);
// Continue whenever you want to...
var x = 510;
var y = 300;
self.add({
id:"continueLabel", type:"TextBox",
x:x, y:y+5, width:200, height:50,
align:"right", color:"#aaa", size:17,
text_id:"noise_evo_6_continue"
});
self.add({
id:"continueButton", type:"Button",
x:x+215, y:y, size:"short",
text_id:"label_continue",
message: "slideshow/next"
});
},
onend: function(self){
unlisten(_.misc);
self.remove("noiseLabel");
self.remove("noiseSlider");
self.remove("continueLabel");
self.remove("continueButton");
}
});
SLIDES.push({
onstart: function(self){
var o = self.objects;
// Words
o.text.setTextID("noise_evo_6");
_hide(o.text); _fadeIn(o.text, 100);
// Next button
self.add({
id:"button", type:"Button", x:510, y:466,
text_id:"noise_evo_6_btn", size:"long",
message:"slideshow/scratch"
});
},
onend: function(self){
self.clear();
unlisten(self);
unlisten(_);
unlisten(_.misc);
}
});

111
lang/en.html
View file

@ -522,9 +522,6 @@ Feel free to experiment as much as you'd like!
<p id="distrust_2_end">
once you're done playing around, click:
</p>
<p id="distrust_2_btn">
continue
</p>
<p id="distrust_3">
As you saw, when people play below some number of rounds,
@ -598,14 +595,14 @@ let's look at our final barrier to trust...
<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:
To understand it, let's say 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:
Being "nice" players, 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.
And normally, they'd just pay back each others' kindness and sing Kumbaya until the end of time.
</p>
<p id="noise_2_end">
But what if, while trying to reciprocate...
@ -621,25 +618,24 @@ But if the other person doesn't <i>think</i> it was an accident...
</p>
<p id="noise_4">
<b>OH NO x2</b>
<b>OH NO AGAIN</b>
<br>
The other player, being a <span class="tft">Copycat</span>, <i>had<i> to retaliate...
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...
Thus, like the Hatfields and McCoys,
these two <span class="tft">Copycats</span> will spiral into an endless cycle of vengeance...
that started over a single mistake, long, long ago.
</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...
Tragic. But now, are there <i>other</i> types of players who can...
</p>
<p id="noise_5_btn">
...survive mistakes? &rarr;
...deal with mistakes? &rarr;
</p>
<p id="noise_characters">
@ -647,22 +643,22 @@ Let's meet some new faces!
</p>
<p id="character_tf2t">
<b>COPYKITTEN:</b>
<b>COPYKITTEN:</b><br>
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)
<b>SIMPLETON:</b><br>
hi i try start cooperate.
if you cooperate back, i do <i>same thing</i> as last move, even if it mistake.
if you cheat back, i do <i>opposite thing</i> as last move, even if it mistake.
</p>
<p id="character_random">
<b>RANDOM:</b>
<i>Monkey robot! Ninja pizza tacos! lol i'm so random</i>
<b>RANDOM:</b><br>
<i>Monkey robot! Ninja pizza tacos! lol i'm so random</i><br>
(Just plays Cheat or Cooperate randomly with a 50/50 chance)
</p>
@ -670,17 +666,42 @@ if you cheat back => bad thing => i do opposite thing as last move. (even if it
Alright, let's see how well these peeps do when they...
</p>
<p id="noise_characters_btn">
...play against each other &rarr;
...play in a tournament &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. -->
<p id="noise_evo_1">
Noise Evolution, place your bets.
At <b>5% noise</b>
</p>
<p id="noise_evo_2">
Try it, controls to the left
</p>
<p id="noise_evo_2_2">
Simpleton wins, but let's try...
</p>
<p id="noise_evo_3">
...different scenario, place your bets again.
</p>
<p id="noise_evo_4">
Try it, controls to the left, again
</p>
<p id="noise_evo_4_2">
Ooh, surprising... but is that true if there's a LOT of noise?
</p>
<p id="noise_evo_5">
GIVE A SLIDER FOR NOISE.
</p>
<p id="noise_evo_6">
Explain nonlinear barrier, and real life. Also sandbox.
</p>
<p id="noise_evo_6_continue">
Explain nonlinear barrier, and real life. Also sandbox.
</p>
<p id="noise_evo_6_btn">
Teaser for sandbox
</p>
<!-- - - - - - - - - - - - - - - - - -->
@ -847,26 +868,38 @@ detective
</span>
</p>
<p id="label_tf2t">
Copykitten
</p>
<p id="label_tf2t">Copykitten</p>
<p id="label_short_tf2t">
copykitten
</p>
<p id="label_pavlov">
Simpleton
<p id="icon_tf2t">
<span class="tf2t">
<span class="icon"></span>
<span class="icon_label">Copykitten</span>
</span>
</p>
<p id="label_pavlov">Simpleton</p>
<p id="label_short_pavlov">
simpleton
</p>
<p id="label_random">
Lol So Random
<p id="icon_pavlov">
<span class="pavlov">
<span class="icon"></span>
<span class="icon_label">Simpleton</span>
</span>
</p>
<p id="label_random">Random</p>
<p id="label_short_random">
random
</p>
<p id="icon_random">
<span class="random">
<span class="icon"></span>
<span class="icon_label">Random</span>
</span>
</p>
<!-- - - - - - - - - - - - - - - - - -->
@ -917,6 +950,10 @@ rules
next &rarr;
</p>
<p id="label_continue">
continue
</p>
<!-- - - - - - - - - - - - - - - - - -->
<!-- - - - NAVIGATING CHAPTERS - - - -->