forked from ncase/polygons-de
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·442 lines (374 loc) · 19.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Place this data between the <head> tags of your website -->
<title>Parabel der Polygone – eine spielbare Geschichte zur Form der Gesellschaft</title>
<meta name="description" content="Eine spielbare Geschichte darüber, wie zunächst harmlose Entscheidungen eine Welt dramatisch verändern können." />
<link rel="icon" type="image/png" href="favicon.png">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Parabel der Polygone">
<meta itemprop="description" content="Eine spielbare Geschichte darüber, wie zunächst harmlose Entscheidungen eine Welt dramatisch verändern können.">
<meta itemprop="image" content="http://ncase.me/polygons/social/thumbnail.png">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="Parabel der Polygone">
<meta name="twitter:description" content="Eine spielbare Geschichte darüber, wie zunächst harmlose Entscheidungen eine Welt dramatisch verändern können.">
<meta name="twitter:creator" content="@vihartvihart">
<meta name="twitter:image" content="http://ncase.me/polygons/social/thumbnail.png">
<!-- Open Graph data -->
<meta property="og:title" content="Parabel der Polygone">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/polygons">
<meta property="og:image" content="http://ncase.me/polygons/social/thumbnail.png">
<meta property="og:description" content="Eine spielbare Geschichte darüber, wie zunächst harmlose Entscheidungen eine Welt dramatisch verändern können.">
<meta property="og:site_name" content="Parabel der Polygone">
<!-- CSS -->
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- CARTOONS -->
<div id="cartoon_container">
<img id="cartoon" width="270" src=""/>
<div id="cartoon_arrow"></div>
</div>
<!-- SPLASH -->
<div id="intro_container">
<div id="intro">
<iframe src="play/intro/intro.html" id="intro_background" scrolling="no"></iframe>
</div>
</div>
<!-- CHAPTER -->
<div class="chapter">
<p><strong>Dies ist eine Geschichte darüber, wie zunächst harmlose Entscheidungen eine Welt dramatisch verändern können.</strong></p>
<p>
Diese putzigen Formen sind zu 50% Dreiecke, zu 50% Quadrate und zu 100% etwas „formistisch“.
Aber nur ein bisschen!
Tatsächlich <i>bevorzugt</i> jedes Polygon eine vielfältige Umgebung:
</p>
<iframe id="mini_intro" playable src="play/mini/mini_intro.html" width="800" height="385" scrolling="no" style="margin:0 auto;display:block" embedded></iframe>
<p>
Du kannst sie nur verschieben, wenn sie mit ihrer unmittelbaren Umgebung nicht glücklich sind.
Wenn sie sich an ihrem Platz wohlfühlen, <i>kannst du sie nicht bewegen bis sie wieder mit ihren Nachbar_innen unzufrieden sind</i>.
Sie haben nur eine einzige, einfache Regel:
</p>
<p style="text-align:center">
<b>
„Ich möchte umziehen, wenn weniger als 1/3 meiner Nachbar_innen so sind wie ich.“
</b>
</p>
<iframe playable src="play/mini/mini_unhappy.html" width="250" height="320" scrolling="no" style="float:left; margin:0; margin-left:10px; position:relative; left:-30px" embedded></iframe>
<iframe playable src="play/mini/mini_happy.html" width="250" height="320" scrolling="no" style="float:left; margin:0; margin-left:10px" embedded></iframe>
<iframe playable src="play/mini/mini_bored.html" width="250" height="320" scrolling="no" style="float:left; margin:0; margin-left:10px; position:relative; left:30px" embedded></iframe>
<div style="clear:both;height: 0;position: relative;top:-20px;">
<div style="width: 4px; height: 290px; background: #bbb;position: absolute;top: -292px;left: 245px;"></div>
<div style="width: 4px; height: 290px; background: #bbb;position: absolute;top: -292px;left: 537px;"></div>
</div>
<br>
<p>
Harmlos, oder?
Jede Form würde sich in einer gemischten Nachbarschaft wohlfühlen.
Ihr kleines Vorurteil kann eine größere Gesellschaft sicherlich nicht beeinflussen?
Naja …
</p>
<div class="instruction">
Verschiebe unglückliche Formen bis keine mehr unglücklich ist:<br>
<span style="font-size:18px">(Bewege sie einfach auf zufällige freie Stellen – ohne viel nachzudenken.)</span>
</div>
</div>
<!-- PLAYABLE -->
<div class="playable">
<iframe playable src="play/manual/manual.html" width="550" height="650"></iframe>
</div>
<!-- CHAPTER -->
<div class="chapter">
<p>
Und … unsere Form-Gesellschaft ist auf einmal extrem gespalten. Mist!
</p>
<p>
Manchmal wird eine Nachbarschaft eben „viereckig“
und es ist nicht ihr Fehler, wenn keine Dreiecke mehr dort hin wollen.
Und eine „dreieckige“ Nachbarschaft würde sich über ein Viereck freuen, aber
sie kann ja nichts dafür, wenn die Vierecke nicht interessiert sind.
</p>
<iframe id="mini_neighborhood" playable src="play/mini/mini_neighborhood.html" width="730" height="240" scrolling="no" style="margin:0 auto;display:block" embedded></iframe>
<p>
Im nächsten Beispiel werden unglückliche Formen automatisch auf freie Stellen verschoben.
Es gibt auch eine Grafik, die anzeigt, wie sich die Abgrenzung im Laufe der Zeit verändert.
</p>
<div class="instruction">
Lass die Simulation einige Male laufen. Was passiert?
</div>
</div>
<!-- PLAYABLE -->
<div class="playable">
<iframe playable src="play/automatic/automatic.html" style="position:relative;left:10px" width="1050" height="600"></iframe>
</div>
<!-- CHAPTER -->
<div class="chapter">
<p>
Was ist hier los? Es sind doch liebe Formen, nette Formen.
Und trotzdem, obwohl jede einzelne nur ein kleines Vorurteil hat, wird die ganze Form-Gesellschaft auseinander gerissen.
</p>
<iframe id="mini_checkerboard" playable src="play/mini/mini_checkerboard.html" width="730" height="240" scrolling="no" style="margin:0 auto;display:block" embedded></iframe>
<p>
<strong>Kleine individuelle Vorurteile können zu einem großen gesellschaftlichen Vorurteil führen.</strong>
</p>
<p>
Gleichheit ist ein instabiles Gleichgewicht.
Das kleinste Vorurteil kann eine ganze Gesellschaft zum Umkippen bringen.
Nun, wie wäre es, wenn wir diesen Formen beibrächten keine Vorurteile zu haben?
(Oder, falls du dich heute extrem böse fühlst, mehr Vorurteile?)
</p>
<div class="instruction">
Benutze den Regler um die Vorurteile der Formen einzustellen:
</div>
</div>
<!-- PLAYABLE -->
<div class="playable">
<iframe playable src="play/automatic/automatic2.html" style="position:relative;left:10px" width="1050" height="600"></iframe>
</div>
<!-- CHAPTER -->
<div class="chapter">
<p>
Beobachte wie die Trennung zunimmt, wenn die Vorurteile auf über 33% erhöht werden.
Was, wenn die Grenze bei 50% wäre?
Es erscheint vernünftig, wenn eine Form es bevorzugt, nicht in der Minderheit zu sein …
</p>
<br>
<iframe id="mini_bias_1" playable src="play/mini/mini_bias_1.html" width="310" height="440" scrolling="no" style="float:left; margin:0; margin-left:50px" embedded></iframe>
<iframe id="mini_bias_2" playable src="play/mini/mini_bias_2.html" width="310" height="440" scrolling="no" style="float:right; margin:0; margin-right:50px" embedded></iframe>
<div style="clear:both;height: 0;position: relative;top:-20px;">
<div style="width: 6px; height: 400px; background: #bbb;position: absolute;top: -420px;left: 397px;"></div>
</div>
<p>
Alles klar, einfach jedermanns Vorurteile auf Null setzen, richtig?
Haha, nichts da. Die reale Welt startet nicht täglich neu mit einer zufälligen Anordnung der Einwohner_innen.
Schließlich ziehst du nicht jeden Tag um!
</p>
<div class="instruction">
Die Welt startet getrennt. Was passiert, wenn du die Vorurteile verringerst?
</div>
</div>
<!-- PLAYABLE -->
<div class="playable">
<iframe playable src="play/automatic/automatic3.html" style="position:relative;left:10px" width="1050" height="600"></iframe>
</div>
<!-- CHAPTER -->
<div class="chapter">
<p>
Siehst du, was <i>nicht</i> stattfindet? Veränderung.
Keine gemischte Neuverteilung.
In einer Welt, in der es einmal Vorurteile gab, reicht es nicht alle Vorurteile zu verlieren.
Wir müssen aktiv werden!
Wie wäre es, wenn sich die Formen nach einem kleinen Bisschen mehr Abwechslung sehnen würden?
</p>
<iframe id="mini_nonconform" playable src="play/mini/mini_nonconform.html" width="400" height="440" scrolling="no" style="margin:0 auto;display:block" embedded></iframe>
<p>
WOW! Obwohl jedes Polygon mit bis zu 90% ihm gleichen Nachbar_innen zufrieden wäre,
vermischen sich alle.
Lass uns das im größeren Maßstab betrachten,
wenn wir das Ausmaß an Vorurteilen und Vorlieben für alle Formen ändern.
</p>
<div class="instruction">
Die Welt startet getrennt. Was passiert, wenn die Formen nur ein wenig Vielfalt verlangen?
</div>
</div>
<!-- PLAYABLE -->
<div class="playable">
<iframe playable src="play/automatic/automatic4.html" style="position:relative;left:10px" width="1050" height="600"></iframe>
</div>
<!-- CHAPTER -->
<div class="chapter">
<p>
Alles was wir brauchen ist eine Änderung in der Vorstellung, wie eine akzeptable Umgebung auszusehen hat.
Also, liebe Formen, erinnert euch daran, dass es nicht um „Dreiecke gegen Vierecke“ geht;
es geht darum zu entscheiden wie unsere Welt aussehen soll – und uns nicht mit weniger zufrieden zu geben.
</p>
<p style="text-align:center">
<b>
BRINGE SIE ALLE IN DIE KISTE DER
<span style="color:hsl(0,90%,60%)">F</span>
<span style="color:hsl(30,90%,60%)">R</span>
<span style="color:hsl(60,90%,45%)">E</span>
<span style="color:hsl(90,90%,60%)">U</span>
<span style="color:hsl(120,90%,60%)">N</span>
<span style="color:hsl(150,90%,60%)">D</span>
<span style="color:hsl(180,90%,60%)">S</span>
<span style="color:hsl(210,90%,60%)">C</span>
<span style="color:hsl(240,90%,60%)">H</span>
<span style="color:hsl(270,90%,60%)">A</span>
<span style="color:hsl(300,90%,60%)">F</span>
<span style="color:hsl(330,90%,60%)">T</span>
<br>
<span style="font-size:18px">(Tipp: Bewege sie nicht direkt in die Kiste, halte die Paare nahe beieinander.)</span>
</b>
</p>
<iframe playable src="play/mini/mini_cooperate.html" width="810" height="290" scrolling="no" style="margin:0 auto;display:block" embedded></iframe>
<p>
Ganz alleine loszuziehen kann einsam machen …
aber gemeinsam, Schritt für Schritt, schaffen wir es.
</p>
<div class="instruction">
Endlich, eine gemütliche alte Kiste zum darin Herumspielen.
</div>
</div>
<!-- PLAYABLE -->
<div class="playable">
<iframe playable src="play/automatic/automatic_sandbox.html" style="position:relative;left:10px" width="1050" height="600"></iframe>
</div>
<!-- CHAPTER -->
<div class="chapter">
<div class="instruction" style="font-size:50px; line-height:50px">
ZUSAMMENFASSUNG:
</div>
<p>
<b>1. Kleine individuelle Vorurteile → große gesellschaftliche Vorurteile.</b>
<br>
<!--Mikromotive, Makroverhalten...-->
Wenn eine Gesellschaft „formistisch“ ist, sagt man nicht, dass die <i>Individuen</i> in ihr Formist_innen sind.
Persönlich greift man dich nicht an.
</p>
<p>
<b>2. Die Vergangenheit spukt noch in der Gegenwart.</b>
<br>
Dein Schlafzimmerboden hört nicht auf schmutzig zu sein, nur weil du aufgehört hast Essen auf den Teppich zu werfen.
Gleichheit zu schaffen ist wie Putzen: Es ist Arbeit. Und man ist niemals damit fertig.
</p>
<p>
<b>3. Verlange Vielfalt in deiner Nähe.</b>
<br>
Wenn kleine Vorurteile den Schlamassel, in dem wir leben, verursacht haben,
können kleine Anti-Vorurteile ihn möglicherweise wieder beheben.
Schau dich um. Deine Freundinnen und Freunde, deine Kolleginnen und Kollegen, die Konferenz, an der du gerade teilnimmst.
Wenn ihr alle Dreiecke seid, verpasst ihr in eurem Leben ein paar interessante Vierecke –
das ist unfair gegenüber allen. Streck’ die Hand aus, über deine unmittelbare Umgebung hinaus.
</p>
<iframe playable src="play/mini/mini_ending.html" width="600" height="80" scrolling="no" style="margin:0 auto;display:block" embedded></iframe>
</div>
<!-- References & Remixes (Writing|Professor|Infographic|Video|Music -->
<div style="width: 100%; background: #222; overflow: hidden; color:#ddd">
<div class="chapter">
<div class="instruction">
Danke, dass du diese Geschichte gespielt hast!
</div>
<br>
<div style="font-size:16px; line-height:18px">
Unser niedlicher, liebenswerter Abgrenzungs-Simulator basiert auf der Arbeit des Nobelpreisträgers und Spieletheoretikers
Thomas Schelling – insbesondere seinem mathematischen Modell der Rassenabgrenzung in der wissenschaftlichen Veröffentlichung
<a target="_blank" href="http://www.stat.berkeley.edu/~aldous/157/Papers/Schelling_Seg_Models.pdf">
Dynamic Models of Segregation</a>, erschienen 1971.
Darauf aufbauend haben wir gezeigt, wie selbst kleine Forderungen nach kultureller Vielfalt helfen können,
die Abgrenzung in einer Nachbarschaft aufzuheben. Kurz gesagt: Wir gaben seinem Modell ein Happy End.
<br><br>
Schellings Modell gibt die Grundidee wieder, aber natürlich ist das echte Leben wesentlich nuancierter.
Falls dich echte Daten interessieren, lies beispielsweise
W.A.V. Clarks Publikation <a target="_blank" href="http://smg.media.mit.edu/library/Clark.ResidentialSegregation.pdf">
Residential Preferences and Neighborhood Racial Segregation: A Test of the Schelling Segregation Model</a>
von 1991.
<br><br>
Es gibt noch weitere mathematische Modelle für gesellschaftliche Vorurteile!
<a target="_blank" href="http://www.ruf.rice.edu/~lane/papers/male_female.pdf">
Male-Female Differences: A Computer Simulation</a>
zeigt, wie kleine Geschlechtsvorurteile entlang der Karriereleiter zu großen werden.
<a target="_blank" href="http://iangent.blogspot.com/2013/10/the-petrie-multiplier-why-attack-on.html">
The Petrie Multiplier</a>
zeigt, warum ein Angriff auf Sexismus im Technologiesektor kein Angriff auf Männer ist.
<br><br>
Die Moral von der Geschichte™ ist, dass die Forderung nach etwas mehr Vielfalt in deiner
Umgebung insgesamt einen riesigen Unterschied macht. Nimm nur
<a target="_blank" href="http://plzdiversifyyourpanel.tumblr.com/">Plz Diversify Your Panel</a>,
eine Initiative, bei der überrepräsentierte Redner sich verpflichten,
nicht an unausgewogen besetzten Diskussionsrunden teilzunehmen.
<br><br>
Unsere „spielbare Geschichte“ wurde inspiriert von Bret Victors
<a target="_blank" href="http://worrydream.com/ExplorableExplanations/">
Explorable Explanations</a> und Ian Bogosts
<a target="_blank" href="http://bogost.com/books/persuasive_games/">
procedural rhetoric</a>.
<br><br>
<div style="border-bottom: 2px dashed #666"></div>
<span style="font-size:20px; line-height:30px">
<br>
<b style="font-size:25px;">Spende und engagiere Dich für Vielfalt!</b>
<br>
<a target="_blank" href="https://www.cybermentor.de">CyberMentor</a>
– E-Mentoring für Mädchen in MINT
<br>
<a target="_blank" href="http://roberta-home.de">Roberta</a>
– Geschlechter-gerechte Technikbildung in Schulen
<br>
<a target="_blank" href="http://railsgirlsberlin.de">Rails Girls Berlin</a>
– Ruby on Rails-Workshops für Mädchen und junge Frauen in Berlin
<br>
<a target="_blank" href="http://railsgirls.com">Rails Girls</a>
– Ruby on Rails-Workshops für Mädchen und junge Frauen, weltweit
<br>
<a target="_blank" href="http://www.blackgirlscode.com/">Black Girls Code</a>
– Programmierkurse für schwarze Mädchen
<br>
<a target="_blank" href="http://girlswhocode.com/">Girls Who Code</a>
– Programmierkurse für Schülerinnen
<br>
<a target="_blank" href="http://code2040.org/">Code 2040</a>
– hilft Schwarzen & Latin@s, in den Tech-Sektor zu kommen
<br>
<a target="_blank" href="http://codeliberation.org/">Code Liberation</a>
– kostenlose Workshops für Frauen zum Videospiele-Programmieren
<br>
<a target="_blank" href="http://adainitiative.org/">Ada Initiative</a>
– unterstützt Frauen in Open Source & Open Culture
<br>
<a target="_blank" href="http://www.patreon.com/ncase">Nickys Patreon</a>
– baut gemeinfrei Spielbares (so wie dieses!)
</span>
<br><br>
<div style="border-bottom: 2px dashed #666"></div>
<span style="font-size:18px; line-height:22px">
<br>
<b>Danke an unsere Beta-Leser_innen:</b><br>
Andrea, Astrid, Catherine, Chris, Emily, Glen, Jocelyn, Laura, Marc, Marko, Zak
<br><br>
<b>Presseberichte:</b><br>
<a target="_blank" href="http://www.wired.com/2014/12/empzeal-parable-polygons/">WIRED</a>,
<a target="_blank" href="http://www.washingtonpost.com/blogs/wonkblog/wp/2014/12/09/how-tiny-individual-biases-have-huge-cumulative-effects-on-racial-segregation/">Washington Post</a>,
<a target="_blank" href="http://boingboing.net/2014/12/08/parable-of-the-polygons-segre.html">BoingBoing</a>,
<a target="_blank" href="http://ccthing.tumblr.com/post/104764760336/parable-of-the-polygons-vi-hart-and-nicky-case">Creative Commons</a>,
<a target="_blank" href="http://killscreendaily.com/articles/parable-polygons-teaches-us-danger-and-power-individual-bias/">KillScreen</a>,
<a target="_blank" href="http://jayisgames.com/archives/2014/12/parable_of_the_polygons.php">JayIsGames</a>,
<a target="_blank" href="https://news.ycombinator.com/item?id=8716538">Hacker News</a>,
<a target="_blank" href="http://www.metafilter.com/145147/Parable-of-the-Polygons">MetaFilter</a>,
<a target="_blank" href="http://nymag.com/scienceofus/2014/12/these-cartoon-shapes-are-adorable-but-racist.html">New York Magazine</a>,
<a target="_blank" href="http://www.citylab.com/design/2014/12/an-immersive-game-shows-how-easily-segregation-arisesand-how-we-might-fix-it/383586/">The Atlantic's CityLab</a>,
<a target="_blank" href="http://www.salon.com/2014/12/10/sweet_little_shapes_teach_an_important_lesson_about_segregation/">Salon</a>,
<a target="_blank" href="http://www.polygon.com/2014/12/11/7361201/parable-of-the-polygons-bias">Polygon</a>
<br><br>
<b>Übersetzungen:</b><br>
<a target="_blank" href="http://ncase.me/polygons">Englisch</a> (das Original),
<a target="_blank" href="http://ncase.me/polygons-es">Spanisch</a>,
<a target="_blank" href="http://ncase.me/polygons-fr">Französisch</a>,
<a target="_blank" href="http://ncase.me/polygons-de">Deutsch</a>,
<a target="_blank" href="http://ncase.me/polygons-pt-br">Portugiesisch (Brasilianisch)</a>,
<a target="_blank" href="http://ncase.me/polygons-ja">Japanisch</a>,
<a target="_blank" href="http://ncase.me/polygons-zh">Chinesisch (vereinfacht)</a>,
<a target="_blank" href="http://booschie.github.io/polygons-pl">Polnisch</a>,
<a target="_blank" href="http://ncase.me/polygons-it">Italienisch</a>
<br><br>
<b>Dinge, abgeleitet von diesem Ding:</b><br>
<a target="_blank" href="http://ncase.me/polygons-pentagons/play/automatic/automatic_sandbox_frame.html">Polygone mit Fünfecken</a>,
<a target="_blank" href="https://youtu.be/v02DTSSTc5k">Playthrough Video</a>
</span>
</div>
</div>
</div>
<!-- SPLASH -->
<div id="outro_container">
<div id="outro">
<iframe src="play/outro/outro.html" id="outro_background" scrolling="no"></iframe>
</div>
</div>
</body>
<script src="js/Mouse.js"></script>
<script src="js/intro.js"></script>
</html>