IT'S FUCKING DONE

README.md

@@ -0,0 +1,5 @@
+\[README IN PROGRESS\]
+
+\[ARGH I'M PULLING EVERYTHING TOGETHER SO LAST MINUTE\]
+
+\["LICENSE": THIS THING IS PUBLIC DOMAIN, DO WHATEVER YOU WANT\]

css/slides.css

@@ -500,3 +500,26 @@ s{
 	background: #fff;
 }
 
+/*************************/
+/***** CREDITS ******/
+/*************************/
+
+.credits{
+	color: #888;
+}
+.credits .big{
+	font-size:40px;
+	line-height: 42px;
+	color:#fff;
+}
+.credits .divider{
+	display: block;
+	height: 45px;
+}
+.credits a{
+	color:#dd4040;
+}
+.credits a:hover{
+	color:#ee5151;
+}
+

js/core/IncDecNumber.js

@@ -48,6 +48,7 @@ function IncDecNumber(config){
 	up.onclick = function(){
 		self.setValue(self.value+1);
 		self.onchange(self.value);
+		Loader.sounds.button2.play(); // higher pitch
 	};
 	dom.appendChild(up);
 
@@ -57,6 +58,7 @@ function IncDecNumber(config){
 	down.onclick = function(){
 		self.setValue(self.value-1);
 		self.onchange(self.value);
+		Loader.sounds.button1.play(); // lower pitch
 	};
 	dom.appendChild(down);
 

js/main.js

@@ -4,7 +4,7 @@ window.onload = function(){
 	// PRELOADER
 	Q.all([
 		Loader.loadAssets(Loader.manifestPreload),
-		Words.convert("lang/en.html")
+		Words.convert("words.html")
 	]).then(function(){
 
 		// CHANGE DOM
@@ -29,7 +29,7 @@ window.onload = function(){
 
 			// [FOR DEBUGGING]
 			publish("slideshow/next");
-			//publish("slideshow/scratch", ["conclusion"]);
+			//publish("slideshow/scratch", ["credits"]);
 
 		});
 

js/sims/Iterated.js

@@ -123,7 +123,7 @@ function Iterated(config){
 	});
 	self.introMachine = function(){
 		_introMachine = 40;
-		Loader.sounds.machine_start.volume(0.8).play();
+		Loader.sounds.machine_start.volume(0.65).play();
 	};
 
 	///////////////////////////////////////////////

js/slides/1_Slides_OneOff.js

@@ -50,8 +50,8 @@ SLIDES.push({
 
 	},
 	onend: function(self){
-		self.remove("labelYou");
+		//self.remove("labelYou");
-		self.remove("labelThem");
+		//self.remove("labelThem");
 	}
 
 },{

js/slides/2_Slides_Iterated.js

@@ -7,6 +7,20 @@ SLIDES.push({
 		// Iterated Simulation
 		self.add({id:"iterated", type:"Iterated", x:130, y:133});
 		self.objects.iterated.dehighlightPayoff();
+
+		// Labels
+		self.add({
+			id:"labelYou", type:"TextBox",
+			x:211, y:201, width:50, height:50,
+			align:"center", color:"#aaa", size:17,
+			text_id:"label_you"
+		});
+		self.add({
+			id:"labelThem", type:"TextBox",
+			x:702, y:189, width:50, height:50,
+			align:"center", color:"#aaa", size:17,
+			text_id:"label_them"
+		});
 		
 	},
 
@@ -54,6 +68,8 @@ SLIDES.push({
 	onend: function(self){
 		self.remove("topWords");
 		self.remove("btmWords");
+		self.remove("labelYou");
+		self.remove("labelThem");
 	}
 
 });
@@ -87,7 +103,7 @@ SLIDES.push({
 		//////////////////////////
 
 		// Move it
-		self.objects.iterated.dom.style.top = 183;
+		o.iterated.dom.style.top = 183;
 
 		// Scoreboard!
 		self.add({id:"scoreboard", type:"IteratedScoreboard", x:378, y:85});

js/slides/3_Slides_Tournament.js

@@ -209,7 +209,7 @@ SLIDES.push({
 		});
 
 		// DRUMROLL
-		Loader.sounds.drumroll.play();
+		Loader.sounds.drumroll.volume(0.8).play();
 		_hide(o.text);
 		_hide(o.button);
 		setTimeout(function(){

js/slides/6_Slides_Noise.js

@@ -9,7 +9,8 @@ SLIDES.push({
 
 		// Iterated Simulation
 		self.add({id:"iterated", type:"Iterated", x:130, y:133});
-		self.objects.iterated.dehighlightPayoff();
+		o.iterated.dehighlightPayoff();
+		o.iterated.playerA.chooseHat("tft");
 
 		// Words on top & bottom
 		self.add({

js/slides/7_Slides_Sandbox.js

@@ -13,12 +13,12 @@ SLIDES.push({
 		// Label & Button for next...
 		self.add({
 			id:"label_next", type:"TextBox",
-			x:40, y:481, width:550, align:"right",
+			x:55, y:481, width:535, align:"right",
 			text_id: "sandbox_end"
 		});
 		self.add({
 			id:"button_next", type:"Button",
-			x:605, y:465, size:"long",
+			x:605, y:485, size:"long",
 			text_id:"sandbox_end_btn",
 			message: "slideshow/scratch"
 		});

js/slides/9_Slides_Credits.js

@@ -6,8 +6,8 @@ SLIDES.push({
 		// Circular Wordbox
 		self.add({
 			id:"text", type:"TextBox",
-			x:160, y:70, width:640, height:500, align:"center",
+			x:0, y:35, width:960, height:400, align:"center",
-			text_id:"credits_beta", color:"#fff"
+			text_id:"credits", color:"#fff"
 		});
 	}
 });

notes/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+	<meta charset="utf-8">
+	<title>The Evolution of Trust: Feetnotes</title>
+	<link rel="icon" type="image/png" href="favicon.png">
+	<link rel="stylesheet" href="notes.css">
+
+</head>
+
+<body>
+<div id="notes">
+
+<h1>NOTES:</h1>
+
+<h3>"The Evolution of Trust"</h3>
+
+<p>This interactive guide is heavily based off Robert Axelrod's groundbreaking 1984 book, <a href="https://www.amazon.com/Evolution-Cooperation-Revised-Robert-Axelrod/dp/0465005640">The Evolution of Cooperation</a>! I was also heavily inspired by his 1997 sequel, <a href="http://press.princeton.edu/titles/6144.html">The Complexity of Cooperation</a>, and Robert Putnam's 2000 book on America's declining "social capital", <a href="http://bowlingalone.com/">Bowling Alone</a>.</p>
+
+<p>yes i'm a bookworm nerd, plz don't bully me</p>
+
+<h3>"Fewer and fewer people say they trust each other"</h3>
+
+<p>To see a thorough statistical take on this, check out <a href="https://ourworldindata.org/trust">Our World In Data</a>. Mmmm stats</p>
+
+<h3>"The Game of Trust"</h3>
+
+<p>This game is also known in game theory as the infamous <em>Prisoner's Dilemma</em>. The Prisoner's Dilemma is named after a story where two suspects can either squeal on their partner-in-crime ("cheat"), or stay silent ("cooperate"). I chose not to do this story because 1) in this case, both players "cooperating" would be bad for society, and 2) it's unrealistic, everyone knows that snitches get stitches</p>
+
+<h3>"You won't know in advance when the last round is"</h3>
+
+<p>In the repeated game of trust (also known as <em>Iterated Prisoner's Dilemma</em>), it's important that neither player knows <em>when</em> the last round is. Why? Think about it - on the last round, both players would know their action has no consequence, so they'd both cheat. But that means in the second-last round, their actions can't change the next round, so they'd also both cheat. But that means in the third-last round... etc etc.</p>
+
+<h3>"Copycat"</h3>
+
+<p>This strategy is better known in game theory as <em>Tit For Tat</em>. It was created by Anatol Rapoport in 1980, for Robert Axelrod's game theory tournament. I chose not to use the name "Tit For Tat" because 1) it <em>sounds</em> mean, although it's a nice &amp; fair strategy, and 2) a lot of the public have already heard about Tit For Tat, so if I used that name, players might just place their bets on this character because they've already heard of "Tit For Tat".</p>
+
+<h3>"You may be skeptical about the Christmas Truce"</h3>
+
+<p>There was another guy who was skeptical, too. During the truce, a German corporal remarked with disgust, <a href="http://time.com/3643889/christmas-truce-1914/">"Such a thing should not happen in wartime. Have you no German sense of honor?"</a></p>
+
+<p>That man was Adolf Hitler.</p>
+
+<p>You can't make this sh*t up.</p>
+
+<h3>"For culture to evolve"</h3>
+
+<p>There's a new, super-young interdisciplinary field that I'm really <em>excited</em> by, called <em>Cultural Evolution</em>. Admittedly, it's a bad name, not least because it sounds uncomfortably close to "Social Darwinism". Which it's not. Pinky promise.</p>
+
+<p>One core part of Cultural Evolution Theory is culture evolves the same way life does: through variation &amp; selection. Variation: people differ in beliefs &amp; behaviors, and invent new ones almost every day. Selection: people try to imitate their heroes &amp; elders, and adopt their beliefs/behaviors.</p>
+
+<p>(Note: this is <em>not</em> quite Richard Dawkin's "meme" theory. "Meme" implies, that, like genes, ideas come in discrete chunks &amp; replicate with high fidelity. This is obviously untrue. Also you can't say "meme" with a straight face these days, so whatever)</p>
+
+<p>The reason why I think Cultural Evolution is so promising, is that it could integrate <em>all</em> the human sciences: psychology, sociology, economics, anthropology, political science, neuroscience, biology. The greatest problems of our time do not obey conventional academic boundaries -- so, it's about dang time we created a common language between the sciences and humanities.</p>
+
+<p>If you want to learn more about Cultural Evolution Theory, I highly recommend Joseph Heinlich's 2015 book, <a href="http://press.princeton.edu/titles/10543.html">The Secret of Our Success</a>!</p>
+
+<h3>"[Always Cheat's] exploitativeness was its downfall"</h3>
+
+<p>You may have heard that someone found a player strategy that can "exploit evolution". From the <a href="https://www.scientificamerican.com/article/game-theory-calls-cooperation-into-question1/">Scientific American</a>: "[Press &amp; Dyson's results] suggested the best strategies were selfish ones that led to extortion, not cooperation."</p>
+
+<p>Press &amp; Dyson's findings <em>are</em> really important, but Scientific American confused two different uses of the word "evolutionary". The first use, the way this interactive guide used it, was to mean that the <em>tournament's population</em> changes over time. The second use, the way P&amp;D meant it, was that the <em>player's rules</em> changes over time. For example: Detective is "evolutionary" since it changes its own rules, while Copycat is <em>not</em> "evolutionary" since it sticks to its principles.</p>
+
+<p>So, P&amp;D found strategies that could exploit "evolutionary" <em>players</em> like Detective, but their strategies <em>still could not exploit the evolution of the tournament</em>, because in the long run, fair &amp; nice strategies still win. </p>
+
+<h3>"We have fewer friends -- period."</h3>
+
+<p>Seriously, go read Robert Putnam's 2000 book, <a href="http://bowlingalone.com/">Bowling Alone</a>. Yeah it's a bit outdated by now, 17 years later, but its core findings and lessons are still true as ever -- probably even more so.</p>
+
+<h3>"Non-zero-sum game" / "Win-Win"</h3>
+
+<p>This is kinda cheesy, but I still adore the 1989 book, <a href="https://www.amazon.com/Habits-Highly-Effective-People-Powerful/dp/0743269519">The Seven Habits of Highly Effective People</a> -- especially Habit #4: Think Win-Win.</p>
+
+<p>Because, contrary to popular belief, coming up with Win-Win solutions is hard, takes lots of effort, and is emotionally painful. Heck, I'd go even further – I'd say our culture's default stance of Win-Lose "us versus them" is the easy path, the lazy path, the equivalent of activism junk food.</p>
+
+<p>Anyway. Exaggerations aside, I strongly believe "Win-Win" / "Non-Zero-Sum" is something we all urgently need -- in our personal lives, social lives, and <em>definitely</em> political lives.</p>
+
+<h3>"Copykitten"</h3>
+
+<p>Just like how Copycat's original name was Tit For Tat, Copykitten's original name is <em>Tit For Two Tats</em>. Same rule: Cooperate, unless the other players cheats <em>twice</em> in a row.</p>
+
+<p>There's another forgiving variant of Tit For Tat called <em>Generous Tit For Tat</em>. It's got a similar but slightly different rule: Cooperate, but when the other player cheats, forgive them with a X% chance. This design, with the variable "X", lets you set different "forgiveness" levels for the player.</p>
+
+<h3>"Simpleton"</h3>
+
+<p>Also known as Pavlov, or Win-Shift-Lose-Stay.</p>
+
+<h3>"Our modern media [...] has increased our miscommunication"</h3>
+
+<p>I'm only in my twenties, I don't know why I always sound like an old grump shaking my fist at a cloud. But, yeah, anyway, go read Neil Postman's 1985 book, <a href="https://www.amazon.com/Amusing-Ourselves-Death-Discourse-Business/dp/014303653X">Amusing Ourselves To Death</a>. It's about how the communications technology we use subtly shapes our culture ("the medium is the message") and how technology that is biased towards quick &amp; fast information (TV in 1985, social media now) turns us all into trivial, short-term thinkers.</p>
+
+<p>Although I don't agree with <em>everything</em> in his book, it's a real eye-opener, and surprisingly prescient for 1985. His rant against Sesame Street is kinda weird, though.</p>
+
+<h3>"Build relationships. Find win-wins. Communicate clearly."</h3>
+
+<p>Giving advice can come off as condescending, so let me be perfectly honest: I do <em>not</em> have any of this figured out, personally. I'm bad at developing friendships, especially with people of different political views than me. I occasionally forget about win-wins, and lapse into "us versus them" thinking. And judging by this rambling, I'm also still terrible at communicating clearly.</p>
+
+<p>But I want to get better. This stuff is <em>hard</em>. Building peace &amp; trust in the world, from the bottom up, is <em>hard</em>.</p>
+
+<p>And that's why it's worth it. &lt;3</p>
+
+
+</div>
+</body>
+
+</html>

notes/notes.css

@@ -0,0 +1,30 @@
+@font-face{
+	font-family: 'FuturaHandwritten';
+	font-style: normal;
+	src: url('../css/FuturaHandwritten.ttf') format('truetype');
+}
+
+body{
+	background: #fff;
+	font-family: "FuturaHandwritten";
+	font-size: 20px;
+	color: #222;
+	margin: 0;
+}
+
+/* fake bold */
+b, strong{
+	font-weight: normal;
+	text-shadow:1px 0 0 currentColor;
+}
+
+#notes{
+	width: 800px;
+	margin: 80px auto;
+	line-height: 1.7em;
+}
+
+h3{
+	margin-top: 2.5em;
+	margin-bottom: -0.2em;
+}

notes/notes.md

@@ -0,0 +1,85 @@
+**"The Evolution of Trust"**
+
+This interactive guide is heavily based off Robert Axelrod's groundbreaking 1984 book, [The Evolution of Cooperation](https://www.amazon.com/Evolution-Cooperation-Revised-Robert-Axelrod/dp/0465005640)! I was also heavily inspired by his 1997 sequel, [The Complexity of Cooperation](http://press.princeton.edu/titles/6144.html), and Robert Putnam's 2000 book on America's declining "social capital", [Bowling Alone](http://bowlingalone.com/).
+
+yes i'm a bookworm nerd, plz don't bully me
+
+**"Fewer and fewer people say they trust each other"**
+
+To see a thorough statistical take on this, check out [Our World In Data](https://ourworldindata.org/trust). Mmmm stats~
+
+**"The Game of Trust"**
+
+This game is also known in game theory as the infamous *Prisoner's Dilemma*. The Prisoner's Dilemma is named after a story where two suspects can either squeal on their partner-in-crime ("cheat"), or stay silent ("cooperate"). I chose not to do this story because 1) in this case, both players "cooperating" would be bad for society, and 2) it's unrealistic, everyone knows that snitches get stitches
+
+**"You won't know in advance when the last round is"**
+
+In the repeated game of trust (also known as *Iterated Prisoner's Dilemma*), it's important that neither player knows *when* the last round is. Why? Think about it - on the last round, both players would know their action has no consequence, so they'd both cheat. But that means in the second-last round, their actions can't change the next round, so they'd also both cheat. But that means in the third-last round... etc etc.
+
+**"Copycat"**
+
+This strategy is better known in game theory as *Tit For Tat*. It was created by Anatol Rapoport in 1980, for Robert Axelrod's game theory tournament. I chose not to use the name "Tit For Tat" because 1) it *sounds* mean, although it's a nice & fair strategy, and 2) a lot of the public have already heard about Tit For Tat, so if I used that name, players might just place their bets on this character because they've already heard of "Tit For Tat".
+
+**"You may be skeptical about the Christmas Truce"**
+
+There was another guy who was skeptical, too. During the truce, a German corporal remarked with disgust, ["Such a thing should not happen in wartime. Have you no German sense of honor?"](http://time.com/3643889/christmas-truce-1914/)
+
+That man was Adolf Hitler.
+
+You can't make this sh\*t up.
+
+**"For culture to evolve"**
+
+There's a new, super-young interdisciplinary field that I'm really *excited* by, called *Cultural Evolution*. Admittedly, it's a bad name, not least because it sounds uncomfortably close to "Social Darwinism". Which it's not. Pinky promise.
+
+One core part of Cultural Evolution Theory is culture evolves the same way life does: through variation & selection. Variation: people differ in beliefs & behaviors, and invent new ones almost every day. Selection: people try to imitate their heroes & elders, and adopt their beliefs/behaviors.
+
+(Note: this is *not* quite Richard Dawkin's "meme" theory. "Meme" implies, that, like genes, ideas come in discrete chunks & replicate with high fidelity. This is obviously untrue. Also you can't say "meme" with a straight face these days, so whatever)
+
+The reason why I think Cultural Evolution is so promising, is that it could integrate *all* the human sciences: psychology, sociology, economics, anthropology, political science, neuroscience, biology. The greatest problems of our time do not obey conventional academic boundaries – so, it's about dang time we created a common language between the sciences and humanities.
+
+If you want to learn more about Cultural Evolution Theory, I highly recommend Joseph Heinlich's 2015 book, [The Secret of Our Success](http://press.princeton.edu/titles/10543.html)!
+
+**"[Always Cheat's] exploitativeness was its downfall"**
+
+You may have heard that someone found a player strategy that can "exploit evolution". From the [Scientific American](https://www.scientificamerican.com/article/game-theory-calls-cooperation-into-question1/): "[Press & Dyson's results] suggested the best strategies were selfish ones that led to extortion, not cooperation."
+
+Press & Dyson's findings *are* really important, but Scientific American confused two different uses of the word "evolutionary". The first use, the way this interactive guide used it, was to mean that the *tournament's population* changes over time. The second use, the way P&D meant it, was that the *player's rules* changes over time. For example: Detective is "evolutionary" since it changes its own rules, while Copycat is *not* "evolutionary" since it sticks to its principles.
+
+So, P&D found strategies that could exploit "evolutionary" *players* like Detective, but their strategies _still could not exploit the evolution of the tournament_, because in the long run, fair & nice strategies still win. 
+
+**"We have fewer friends -- period."**
+
+Seriously, go read Robert Putnam's 2000 book, [Bowling Alone](http://bowlingalone.com/). Yeah it's a bit outdated by now, 17 years later, but its core findings and lessons are still true as ever -- probably even more so.
+
+**"Non-zero-sum game" / "Win-Win"**
+
+This is kinda cheesy, but I still adore the 1989 book, [The Seven Habits of Highly Effective People](https://www.amazon.com/Habits-Highly-Effective-People-Powerful/dp/0743269519) -- especially Habit #4: Think Win-Win.
+
+Because, contrary to popular belief, coming up with Win-Win solutions is hard, takes lots of effort, and is emotionally painful. Heck, I'd go even further – I'd say our culture's default stance of Win-Lose "us versus them" is the easy path, the lazy path, the equivalent of activism junk food.
+
+Anyway. Exaggerations aside, I strongly believe "Win-Win" / "Non-Zero-Sum" is something we all urgently need -- in our personal lives, social lives, and _definitely_ political lives.
+
+**"Copykitten"**
+
+Just like how Copycat's original name was Tit For Tat, Copykitten's original name is *Tit For Two Tats*. Same rule: Cooperate, unless the other players cheats *twice* in a row.
+
+There's another forgiving variant of Tit For Tat called *Generous Tit For Tat*. It's got a similar but slightly different rule: Cooperate, but when the other player cheats, forgive them with a X% chance. This design, with the variable "X", lets you set different "forgiveness" levels for the player.
+
+**"Simpleton"**
+
+Also known as Pavlov, or Win-Shift-Lose-Stay.
+
+**"Our modern media [...] has increased our miscommunication"**
+
+I'm only in my twenties, I don't know why I always sound like an old grump shaking my fist at a cloud. But, yeah, anyway, go read Neil Postman's 1985 book, [Amusing Ourselves To Death](https://www.amazon.com/Amusing-Ourselves-Death-Discourse-Business/dp/014303653X). It's about how the communications technology we use subtly shapes our culture ("the medium is the message") and how technology that is biased towards quick & fast information (TV in 1985, social media now) turns us all into trivial, short-term thinkers.
+
+Although I don't agree with _everything_ in his book, it's a real eye-opener, and surprisingly prescient for 1985. His rant against Sesame Street is kinda weird, though.
+
+**"Build relationships. Find win-wins. Communicate clearly."**
+
+Giving advice can come off as condescending, so let me be perfectly honest: I do *not* have any of this figured out, personally. I'm bad at developing friendships, especially with people of different political views than me. I occasionally forget about win-wins, and lapse into "us versus them" thinking. And judging by this rambling, I'm also still terrible at communicating clearly.
+
+But I want to get better. This stuff is *hard*. Building peace & trust in the world, from the bottom up, is *hard*.
+
+And that's why it's worth it. <3

peeps/index.html

@@ -0,0 +1,350 @@
+<!doctype html>
+<html>
+<head>
+
+    <!-- META -->
+	<title>The Evolution of Trust: Supporters!</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+	<meta content="utf-8" http-equiv="encoding">
+	<meta charset="utf-8">
+	<link rel="icon" type="image/png" href="favicon.png">
+
+	<!-- Styles -->
+	<link href="peeps.css" rel="stylesheet"/>
+
+</head>
+<body>
+	<div id="credits">
+
+		<!-- Created by Nicky Case, & patreon link -->
+		<div class="credit_intro">
+			<p>
+			“The Evolution of Trust” was created thanks to the generosity
+			of my supporters <a target="_blank" href="https://www.patreon.com/ncase">on Patreon!</a>
+			Speaking of whom, here they are. THE COOLEST PEEPS:
+			</p>
+		</div>
+
+		<hr>
+
+		<!-- peep patreons -->
+		<div class="credits_peeps">
+			<div>
+				<img src="peep/aimee.png"/>
+				<img src="polygon/aimee-j.png"/>
+				<span>Aimee Jarboe</span>
+			</div>
+			<div>
+				<img src="peep/alex-d.png"/>
+				<img src="polygon/alex-d.png"/>
+				<span>Alex Dytrych</span>
+			</div>
+			<div>
+				<img src="peep/andy.png"/>
+				<img src="polygon/andy-e.png"/>
+				<span>Andy Ellis</span>
+			</div>
+			<div>
+				<img src="peep/chad.png"/>
+				<img src="polygon/chad-s.png"/>
+				<span>Chad Sansing</span>
+			</div>
+			<div>
+				<img src="peep/dylan-f.png"/>
+				<img src="polygon/dylan-f.png"/>
+				<span>Dylan Field</span>
+			</div>
+			<div>
+				<img src="peep/jared-c.png"/>
+				<img src="polygon/jared-c.png"/>
+				<span>Jared Cosulich</span>
+			</div>
+			<div>
+				<img src="peep/josef.png"/>
+				<img src="polygon/josef-k.png"/>
+				<span>Josef Komenda</span>
+			</div>
+			<div>
+				<img src="peep/kate.png"/>
+				<img src="polygon/kate-f.png"/>
+				<span>Kate Fractal</span>
+			</div>
+			<div>
+				<img src="peep/ljt.png"/>
+				<img src="polygon/ljt.png"/>
+				<span>LJ Teitelbaum</span>
+			</div>
+			<div>
+				<img src="peep/mark.png"/>
+				<img src="polygon/mark-m.png"/>
+				<span>Mark McCartney</span>
+			</div>
+			<div>
+				<img src="peep/matt.png"/>
+				<img src="polygon/matt-h.png"/>
+				<span>Matt Hughes</span>
+			</div>
+			<div>
+				<img src="peep/michael_duke.png"/>
+				<img src="polygon/michael-d.png"/>
+				<span>Michael Duke</span>
+			</div>
+			<div>
+				<img src="peep/michael_huff.png"/>
+				<img src="polygon/michael-h.png"/>
+				<span>Michael Huff</span>
+			</div>
+			<div>
+				<img src="peep/natalie.png"/>
+				<img src="polygon/natalie-s.png"/>
+				<span>Natalie Sun</span>
+			</div>
+			<div>
+				<img src="peep/noel.png"/>
+				<img src="polygon/noel-l.png"/>
+				<span>Noel Lehmann</span>
+			</div>
+			<div>
+				<img src="peep/pablo.png"/>
+				<img src="polygon/pablo-m.png"/>
+				<span>Pablo Molins</span>
+			</div>
+			<div>
+				<img src="peep/phil.png"/>
+				<img src="polygon/phil-d.png"/>
+				<span>Phil Dougherty</span>
+			</div>
+			<div>
+				<img src="peep/sean-r.png"/>
+				<img src="polygon/sean-r.png"/>
+				<span>Sean Riley</span>
+			</div>
+			<div>
+				<img src="peep/serena.png"/>
+				<img src="polygon/serena-c.png"/>
+				<span>Serena Casanova</span>
+			</div>
+			<div>
+				<img src="peep/toph-t.png"/>
+				<img src="polygon/toph-t.png"/>
+				<span>Toph Tucker</span>
+			</div>
+			<div>
+				<img src="peep/travis.png"/>
+				<img src="polygon/travis-r.png"/>
+				<span>Travis Ross</span>
+			</div>
+			<div>
+				<img src="peep/yu-han.png"/>
+				<img src="polygon/yuhan-k.png"/>
+				<span>Yu-Han Kuo</span>
+			</div>
+		</div>
+
+		<!-- polygon patreons -->
+		<div class="credits_polygons">
+			<div><img src="polygon/bob-w.png"/><span>Bob Wise</span></div>
+			<div><img src="polygon/brianna-b.png"/><span>Brianna Bergen</span></div>
+			<div><img src="polygon/cedric-r.png"/><span>Cedric Rossi</span></div>
+			<div><img src="polygon/chris-h.png"/><span>Chris Hallacy</span></div>
+			<div><img src="polygon/david-m.png"/><span>David McMullin</span></div>
+			<div><img src="polygon/dominopivot.png"/><span>DominoPivot</span></div>
+			<div><img src="polygon/eli-j.png"/><span>Eli Jeschke</span></div>
+			<div><img src="polygon/eli-l.png"/><span>Eli Levine</span></div>
+			<div><img src="polygon/fred-t.png"/><span>Fred Tschepp</span></div>
+			<div><img src="polygon/freddie-f.png"/><span>Freddie Firth</span></div>
+			<div><img src="polygon/glen-i.png"/><span>Glen E. Ivey</span></div>
+			<div><img src="polygon/green.png"/><span>Green</span></div>
+			<div><img src="polygon/iago-c.png"/><span>Iago Medeiros Cordeiro</span></div>
+			<div><img src="polygon/jack.png"/><span>Jack</span></div>
+			<div><img src="polygon/joe-s.png"/><span>Joe Shumaker</span></div>
+			<div><img src="polygon/karen-c.png"/><span>Karen Cooper</span></div>
+			<div><img src="polygon/klemen-s.png"/><span>Klemen Slavic</span></div>
+			<div><img src="polygon/kuerqing1024.png"/><span>kuerqing1024</span></div>
+			<div><img src="polygon/leslie-r.png"/><span>Leslie Robinson</span></div>
+			<div><img src="polygon/linda-l.png"/><span>Linda Liukas</span></div>
+			<div><img src="polygon/macdiva.png"/><span>MacDiva</span></div>
+			<div><img src="polygon/mark-p.png"/><span>Mark Poko</span></div>
+			<div><img src="polygon/matt.png"/><span>Matt</span></div>
+			<div><img src="polygon/nelson-c.png"/><span>Nelson Crespo</span></div>
+			<div><img src="polygon/nimrod-k.png"/><span>Nimrod Kimhi</span></div>
+			<div><img src="polygon/olivia-b.png"/><span>Olivia Brode-Roger</span></div>
+			<div><img src="polygon/peter-k.png"/><span>Peter Kadlot</span></div>
+			<div><img src="polygon/philippe-v.png"/><span>Philippe Vallotti</span></div>
+			<div><img src="polygon/rob-n.png"/><span>Rob Napier</span></div>
+			<div><img src="polygon/the-a.png"/><span>The Arkadia</span></div>
+			<div><img src="polygon/thomas-r.png"/><span>Thomas de Rego</span></div>
+			<div><img src="polygon/tom-l.png"/><span>Tom Lieber</span></div>
+			<div><img src="polygon/william-o.png"/><span>William O'Hanley</span></div>
+			<div><img src="polygon/zach-s.png"/><span>Zach Smith</span></div>
+		</div>
+		
+		<!-- name patreons -->
+		<div class="credits_names">
+			3Blue1Brown <br>
+			Adam M. Smith<br>
+			Andrew <br>
+			Andy <br>
+			Ansh Patel<br>
+			Aria Minaei<br>
+			Artemiy Solopov<br>
+			Aschelon <br>
+			ben fei<br>
+			Benjamin Wasty<br>
+			Bill <br>
+			Billy Madison<br>
+			Boondoggle <br>
+			Brandon <br>
+			Brent Werness<br>
+			Brian Wu<br>
+			Brie Code<br>
+			Bruno Chagas Macedo Carvalho<br>
+			Bruno Guerrero<br>
+			Buster Benson<br>
+			Casey Ross<br>
+			Charlie McIlwain<br>
+			Christopher <br>
+			Colin <br>
+			Colin #2<br>
+			Cort Stratton<br>
+			Craig Protzel<br>
+			Craig Steele<br>
+			Daniel Horowitz<br>
+			Daniel Shiffman<br>
+			Dave Tu<br>
+			David Smit<br>
+			Dylan Meconis<br>
+			emily hutchison<br>
+			Eric Willisson<br>
+			Fabio Utzig<br>
+			Fahrstuhl <br>
+			Forrest Oliphant<br>
+			Frank Leon Rose<br>
+			Grimy <br>
+			Heather Weaver<br>
+			Hed Bar-Nissan<br>
+			Henry Reich<br>
+			iphenox <br>
+			J. Hu<br>
+			Jacob Christian Munch-Andersen<br>
+			Jacques Frechet<br>
+			James Hogan<br>
+			Jamie Gilyazetdinov<br>
+			Jan Kölling<br>
+			Janusz Leidgens<br>
+			Jason Brennan<br>
+			Jeanne Kramer-Smyth<br>
+			Jeff Lindsay<br>
+			Jeff Long<br>
+			JMyong <br>
+			Joel <br>
+			Johannes Wärn<br>
+			John Hergenroeder<br>
+			John Stout<br>
+			John_Ca <br>
+			Johnny Owens<br>
+			Jonathan <br>
+			Joshua Horowitz<br>
+			Julia Karmo<br>
+			Justin <br>
+			Karishma Bhatia<br>
+			Kat Suricata<br>
+			Kathryn Long<br>
+			Keith Olson<br>
+			Kevin McGillivray<br>
+			Kevin <br>
+			Landy Manderson<br>
+			Lawrence <br>
+			Linda Booth Sweeney<br>
+			Luming Hao<br>
+			Maic Lopez Saenz<br>
+			Malcolm Ocean<br>
+			Margaret Monahan<br>
+			Mark Trexler<br>
+			Mark Wilson<br>
+			Matt ""Kupo" Roszak"<br>
+			May-Li Khoe<br>
+			Mekki MacAulay<br>
+			Memo Akten<br>
+			Michael Sargent<br>
+			Miguel Sicart<br>
+			Milan Pingel<br>
+			Monika Denes<br>
+			Mustafa Alic<br>
+			Nick Ketter<br>
+			Nick Schrag<br>
+			Nikita <br>
+			Noah Swartz<br>
+			Orta Therox<br>
+			Pat Mächler<br>
+			Peter McEvoy<br>
+			Piotr Migdal<br>
+			Rachel Nabors<br>
+			Rajen Savjani<br>
+			Raphael D'Amico<br>
+			Rebecca Niles<br>
+			Richard Hackathorn<br>
+			Roland Tanglao<br>
+			Ryan Barker<br>
+			SailEars <br>
+			Sam Anderson<br>
+			Sam Maynard<br>
+			Sam Thompson<br>
+			Samira Nedungadi<br>
+			Sarah Barbour<br>
+			sarah mathys<br>
+			SB Sigma<br>
+			Seanny123 <br>
+			Serguei Filimonov<br>
+			Shaun Lee<br>
+			Shawn Douglas<br>
+			Sigpipe <br>
+			Sina Khanifar<br>
+			Slava Romanovsky<br>
+			Sylvain Francis<br>
+			Syria Carys Sirlay<br>
+			Tara Zuber<br>
+			Thembers <br>
+			Thibaut Renaux<br>
+			Tony Onodi<br>
+			Traci Lawson<br>
+			Vanessa <br>
+			Wick Perry<br>
+			Woo-Kyeong Choi<br>
+			Yona <br>
+			Zack Thornton<br>
+			Zoe Bogner
+		</div>
+
+		<hr>
+
+		<!-- Playtesters -->
+		<div>
+			<p style="text-align:center; font-size:25px; line-height:1.5em; margin-top:45px;">
+				and a special thanks to my friends who let me pester them to do playtests...
+			</p>
+			<div class="credits_names">
+				Alex Dytrych<br>
+				Amit Patel<br>
+				Dan Cook<br>
+				Dan Salz<br>
+				Dan Zajdband<br>
+				EmilyKate McDonough<br>
+				Hamish Todd<br>
+				Jack Schaedler<br>
+				Jessie Salz<br>
+				Kayle Sawyer<br>
+				Kiara Vincent<br>
+				Pat Rowan<br>
+				Pietro Passarelli<br>
+				Scarlett Shiloh<br>
+				Toph Tucker<br>
+				Tanya Short<br>
+				Vanessa Shen<br>
+				Yohan John
+			</div>
+		</div>
+
+	</div>
+</body>
+</html>

peeps/peeps.css

@@ -0,0 +1,106 @@
+@font-face{
+	font-family: 'FuturaHandwritten';
+	font-style: normal;
+	src: url('../css/FuturaHandwritten.ttf') format('truetype');
+}
+
+body{
+	background: #222;
+	font-family: "FuturaHandwritten";
+	font-size: 22px;
+	color: #222;
+	margin: 0;
+}
+
+/********************************/
+/********************************/
+
+#credits{
+	width: 600px;
+	margin: 50px auto;
+	font-weight: 100;
+	color: #fff;
+	font-size: 20px;
+}
+
+.credit_intro{
+	font-size: 25px;
+}
+.credit_intro a{
+	color: #dd3939;
+}
+.credit_intro a:hover{
+	color: #ee6060;
+}
+
+#credits hr{
+	border:none;
+	border-bottom: 4px dashed #444;
+	margin-top: 30px;
+}
+
+.credits_peeps{
+	overflow: hidden;
+	padding-bottom: 20px;
+	text-align: center;
+}
+.credits_peeps > div{
+	position: relative;
+	width: 150px;
+	height: 210px;
+	text-align: center;
+	display: inline-block;
+	margin-right: -6px;
+}
+.credits_peeps > div > img:nth-child(1){
+	position: absolute;
+	left: 0;
+	width: 150px;
+	bottom: 30px;
+}
+.credits_peeps > div > img:nth-child(2){
+	position: absolute;
+	width: 50px;
+	right: 5px;
+	bottom: 30px;
+}
+.credits_peeps > div > span{
+	display: block;
+	position: absolute;
+	bottom:0;
+	width: 150px;
+	height: 20px;
+	text-transform: lowercase;
+}
+
+.credits_polygons{
+	margin-top: 15px;
+	overflow: hidden;
+	color: #ddd;
+	font-size: 18px;
+	padding-bottom: 20px;
+	text-align: center;
+}
+.credits_polygons > div{
+	display: inline-block;
+}
+.credits_polygons > div > img{
+	width: 40px;
+	position: relative;
+	top:10px;
+}
+.credits_polygons > div > span{
+	text-transform: lowercase;
+}
+
+.credits_names{
+	margin-top: 30px;
+	overflow: hidden;
+	color: #bbb;
+	font-size: 16px;
+	padding-bottom: 20px;
+	text-align: center;
+	-webkit-columns: 150px 3;
+	   -moz-columns: 150px 3;
+	        columns: 150px 3;
+}