-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·887 lines (834 loc) · 32.1 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
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
<!doctype>
<html>
<head>
<!-- Meta -->
<title>Simulating The World (In Emoji)</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Simulating The World (In Emoji)">
<meta itemprop="description" content="An interactive guide to thinking in systems">
<meta itemprop="image" content="http://ncase.me/simulating/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="Simulating The World (In Emoji)">
<meta name="twitter:description" content="An interactive guide to thinking in systems">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/simulating/social/thumbnail.png">
<!-- Open Graph data -->
<meta property="og:title" content="Simulating The World (In Emoji)">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/simulating/">
<meta property="og:image" content="http://ncase.me/simulating/social/thumbnail.png">
<meta property="og:description" content="An interactive guide to thinking in systems">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/index.css">
</head>
<body>
<!-- SPLASH SCREEN -->
<div class="splash" style="background: hsla(72, 87%, 11%, 1);">
<div id="splash_iframe_container">
<iframe id="splash_iframe" src="model?local=splash/intro&bg=0&play=0&edit=0"></iframe>
</div>
<div id="splash_shadow"></div>
<div id="splash_title">
<div style="font-size: 180px; line-height: 150px;">
SIMULATING
</div>
<div style="font-size: 88px; line-height: 88px;">
THE WORLD
(IN EMOJI<span id="splash_kiss">😘</span>)
</div>
<div style="margin:0 auto; width:920px; text-align:right; font-size:25px">
nicky case, jan 2016
</div>
</div>
<div id="splash_hand_container">
<img src="styles/images/click_me.png" id="splash_hand"></div>
</div>
</div>
<!-- 0: INTRODUCTION - THINK IN SYSTEMS, WITH SIMS -->
<div class="words">
<div id="emoji_warning" class="dark" style="padding:20px; font-size:16px">
Note: It looks like your browser doesn't support emoji,
but don't worry! I switched this page over to a fallback font,
so you can still enjoy it.
It's not 🌟full-color🌟 emoji, but oh well.
Such is life.
</div>
<p>
So, I used to live in California.
Back then, it was going through a rough season of droughts, water shortages, and wildfires.
It's still going on, actually.
These problems involve a messy mix of
environmental, economic, and political systems...
all of which came together to create the
perfect lack-of-rain-let-alone-a-storm.
</p>
<p>
Point is, our world is run by complex systems.
We may feel helpless to change them or understand them...
but I believe all of us can — and <i>must</i> — learn to
<b>think in systems</b>.
</p>
<p>
That’s where simulations come in!
It’s easier to understand a system if you can <i>see</i> the system,
or better yet, <i>play</i> with the system.
So today, I’d like to share with you some simple simulations of the world...
made in emoji. 🌲🌲🌲
</p>
</div>
<!-- 0: GETTING USED TO THE SIM INTERFACE -->
<div class="example">
<div id="title">
<b>A Tiny Forest</b> For Tiny Trees
</div>
<iframe src="model?local=forest/0_growth&play=0&edit=1"></iframe>
<div id="example_link"></div>
</div>
<!-- 1: INTRODUCTION - SYSTEMS THEORY, PREDICT CHANGE -->
<div class="words">
<p>
As it turns out, forest firefighters <i>already</i> use computer simulations
to tackle wildfires, <i>in real time</i>!
And it’s not just firefighters.
With the help of simulations, a growing group of scientists
from different disciplines have discovered a few strange things about the systems of our world.
</p>
<p>
First, <b>emergence</b>:
complex systems can arise from simple rules.
This is how a few chess rules can give us infinite play,
and how these tiny emoji sims can capture real complexity.
</p>
<p>
Second, <i>all complex systems have things in common</i>.
So in a way... Financial crises are like forest fires.
Terrorist groups are like termite colonies.
Pandemics are like a GIF people won't stop spreading.
Since you can learn a few core lessons about <i>all</i> systems from <i>any</i> system,
let’s stick with our forest sim, and add one more rule:
</p>
<p style="text-align:center">
🌲→🔥 Trees sometimes get hit by lightning & catch on fire.
</p>
<p>
Sims can help <i>explain</i> a system,
but they're also great for <i>exploring</i> systems.
Experimentation.
Asking, <i>“what if?”</i>
</p>
<p>
For example, <i>what</i> do you think would happen now,
<i>if</i> you increased tree growth? (empty→🌲)
What behavior would <i>emerge?</i>
Don’t worry, you're not being judged or graded,
this is only for you to express your prediction:
</p>
<p>
<form name="predict_fire" class="reader_choice">
<label>
<input type="radio" name="prediction" value="more" checked>
🌲📈→🌲📈: More trees lead to more trees, duh.
</label>
<label>
<input type="radio" name="prediction" value="less">
🌲📈→🌲📉: More trees lead to fewer trees.
</label>
<label>
<input type="radio" name="prediction" value="none">
Neither.
</label>
<label>
<input type="radio" name="prediction" value="both">
Both... somehow.
</label>
</form>
</p>
<p>
And now, you get to run that experiment.
</p>
</div>
<!-- 1: WHAT IF, HIGHER GROWTH? -->
<div class="example">
<div id="title">
<b>A Forest</b> With Thunderbolt & Lightning, Very Very Frightening
</div>
<iframe src="model?local=forest/1_fire&play=1&edit=1"></iframe>
<div id="example_link"></div>
</div>
<!-- 2: REFLECT, AND FEEDBACK LOOPS -->
<div class="words">
<p name="predict_fire" class="reader_reflect">
<span value="more">
Ah, you predicted that higher tree growth would lead to more trees.
That’s an intuitive and obvious choice,
so of course, it’s wrong.
That’s because more trees → fire can spread further → <i>fewer</i> trees...
but <i>then</i>, fewer trees → fire spreads less → trees can grow back → more trees, repeat.
And the more growth, the faster this birth-death-rebirth cycle spins.
</span>
<span value="less">
Ah, you predicted that more trees would lead to <i>fewer</i> trees!
Clever. However, that’s only half-true!
I assume you figured out that more trees → fire can spread further → fewer trees...
but you forgot that <i>afterwards</i>,
fewer trees → fire spreads less → trees can grow back → more trees, repeat.
And the more growth, the faster this birth-death-rebirth cycle spins.
</span>
<span value="none">
Heh, you must’ve thought I was giving you a trick question.
I mean, I was, but still.
Anyway, more trees → fire can spread further → fewer trees...
but <i>then</i>, fewer trees → fire spreads less → trees can grow back → more trees, repeat.
And the more growth, the faster this birth-death-rebirth cycle spins.
</span>
<span value="both">
You predicted that you’d get both more trees <i>and</i> fewer trees?
That doesn’t make sense, it’s a contradiction,
so of course, you’re totally right!
More trees → fire can spread further → <i>fewer</i> trees...
but then, fewer trees → fire spreads less → trees can grow back → <i>more</i> trees, repeat.
And the more growth, the faster this birth-death-rebirth cycle spins.
</span>
</p>
<p style="text-align:center">
🌲📈→🔥📈→🌲📉→🔥📉→🌲📈⟲
</p>
<p>
This is <i>thinking in systems</i>.
See, we’re so used to thinking in linear cause-and-effect, A-changes-B.
But most of the world is filled with what scientists call <b>feedback loops</b>,
where A-changes-B-changes-A-changes-B, and so on.
</p>
<p>
One kind of feedback loop is the <b>reinforcing loop</b>,
when more gets you even more.
For example, in our simulation, fire creates more fire.
This kind of loop tends to create <i>tipping points</i>,
where a small change gets amplified over and over until it
completely alters the whole system.
</p>
<p style="text-align:center">
more leads to more:<br>
🔥📈→🔥📈
</p>
<p>
Another kind of loop is the <b>balancing loop</b>,
when more leads to <i>less</i>.
Balancing loops stop reinforcing loops from growing to infinity.
Like how fire makes more fire, but can’t go on forever,
because it'll run out of trees to burn, and so, results in less fire.
This kind of loop leads to <i>stability</i>,
because it tends to undo change.
</p>
<p style="text-align:center">
more leads to less:<br>
🔥📈→🌲📉→🔥📉
</p>
<p>
This is why we’re so bad at handling complex issues.
Everyone’s looking for the root cause,
but if causality is not linear, but <i>loopy</i>,
then there <i>is</i> no root cause!
</p>
<p>
That doesn’t mean we can’t still solve problems.
Simulations let us do experiments that would be impractical or impossible to try out for realsies.
For example, in this next experiment,
you're going to help trees grow,
<i>by killing trees</i>.
Stop.
Think for a moment.
How could that even be possible?
Now.
Let's do it.
</p>
</div>
<!-- 2: CREATE A TREE-KILLING SOLUTION -->
<div class="example">
<div id="title">
<b>A Forest</b> Where You Show Trees No Mercy
</div>
<iframe src="model?local=forest/2_firebreak&edit=1&paused=1"></iframe>
<div id="example_link"></div>
</div>
<!-- 3: CHANGING LOOPS, AND PLANTS -->
<div class="words">
<p>
Think about how counterintuitive that is,
helping trees by killing trees.
Well, forest firefighters actually do this!
They make “firebreaks” by removing small trees, underbrush, and other flammable shtuff,
to stop wildfires from spreading through.
This breaks the reinforcing loop of 🔥📈→🔥📈,
and reduces the balancing loop of 🌲📈→🔥📈→🌲📉.
</p>
<p>
<i>That</i> is how you change a system.
Not by fighting symptoms or pushing numbers,
but by <i>changing the core loops.</i>
</p>
<p>
Now that you've gotten a taste of thinking in systems,
let's do a couple final experiments.
A forest wouldn’t be an ecosystem with just one species,
so let’s simulate a forest with these two plants:
</p>
<p>
🌳 <b>Strong Tree:</b>
Invincible to fire, but if it’s surrounded by four or more Jerk Trees,
it'll be choked of nutrients and die.
</p>
<p>
🌱 <b>Jerk Tree:</b>
Invasive species.
Flammable & grows twice as fast as the Strong Tree.
Also sometimes bursts into flames.
</p>
<p>
I’ve balanced it so that, normally,
these plants would get a 50/50 split of the land.
But <i>after you create firebreaks</i>,
what do you think will happen?
(think <i>loopy</i>: what feedback loops do you change?
what would emerge from those changes?)
</p>
<p>
<form name="predict_plants_1" class="reader_choice">
<label>
<input type="radio" name="prediction" value="same" checked>
🌳=🌱: They’ll still have an even split.
</label>
<label>
<input type="radio" name="prediction" value="strong">
🌳>🌱: Strong Trees will beat out the Jerk Trees.
</label>
<label>
<input type="radio" name="prediction" value="jerk">
🌳<🌱: Strong Trees will be overrun by Jerk Trees.
</label>
<label>
<input type="radio" name="prediction" value="what">
Something completely different.
</label>
</form>
</p>
<p>
And just for kicks, let’s also do the complete opposite.
Instead of firebreaks, what would happen if you
<i>kept setting random parts of the forest on fire?</i>
</p>
<p>
<script>
window.SMOKEY_JOKE = function(){
document.getElementById("smokey_joke_radio").setAttribute("disabled",true);
document.getElementById("smokey_joke_span").style.textDecoration = "line-through";
document.getElementById("smokey_joke_label").style.cursor = "default";
window.SMOKEY_JOKE = function(){ /*nothing*/ };
};
</script>
<form name="predict_plants_2" class="reader_choice">
<label>
<input type="radio" name="prediction" value="same" checked>
🌳=🌱: They’ll still have an even split.
</label>
<label>
<input type="radio" name="prediction" value="strong">
🌳>🌱: Strong Trees will beat out the Jerk Trees.
</label>
<label>
<input type="radio" name="prediction" value="jerk">
🌳<🌱: Strong Trees will be overrun by Jerk Trees.
</label>
<label id="smokey_joke_label" onmouseover="SMOKEY_JOKE()">
<span id="smokey_joke_span">
<input id="smokey_joke_radio" type="radio" name="prediction" value="what">
<span style="letter-spacing:-4px; margin-right:4px; font-size:20px">🐻💥😩</span>: Smokey Bear will roundhouse kick me in the face.
</span>
</label>
</form>
</p>
<p>
And here we go again...
</p>
</div>
<!-- 3: JERK PLANTS -->
<div class="example">
<div id="title">
<b>A Forest</b> Where Some Trees Are, Like, Total Jerks
</div>
<iframe src="model?local=forest/3_plants&edit=1"></iframe>
<div id="example_link"></div>
</div>
<!-- 4: REFLECT, SELF-ORG, AND REAL LIFE FORESTS -->
<div class="words">
<p>
Did you notice how, in the normal case, the plants formed clusters
even though <i>no rule told them to?</i>
Scientists call this <b>self-organization.</b>
This is when order emerges from the <i>bottom up,</i>
contrary to the popular belief
that order must always come from the <i>top down.</i>
Self-organization also means a system
automatically <b>adapts</b> to new scenarios,
for better or worse.
Which brings us to your predictions...
</p>
<p name="predict_plants_1" class="reader_reflect">
<span value="same">
PREDICTION #1: you thought your firebreaks would <i>not</i> affect the ratio of plants, which is an understandable guess! However, in an interconnected system, changing one part usually changes all the others, thanks to self-organization. Here, walls limit fire, fire limits Jerks, and Jerks limit Strongs.
</span>
<span value="strong">
PREDICTION #1: you thought your firebreaks would help the Strong Tree win. I assume you guessed that if firebreaks made the <i>forest</i> more fireproof, it should make the <i>trees</i> more fireproof, too. However, thanks to self-organization, the whole is <i>completely different</i> from the sum of its parts. So while your walls <i>did</i> lead to less fire, less fire means more Jerks, and more Jerks mean less Strongs.
</span>
<span value="jerk">
PREDICTION #1: you thought your firebreaks would let the Jerk Tree win. And you were totally correct! Your walls limit fire, fire limits Jerks, and Jerks limit Strongs. Let’s stop to appreciate that you held <i>three different system relationships in your head</i>, and accurately predicted how they would self-organize!
</span>
<span value="what">
PREDICTION #1: you thought the plants would do something nuts. Maybe you thought they’d cycle back and forth, like an earlier sim did. However, because the Strong Tree doesn’t affect fire <i>or</i> Jerks, there’s no loop there, and thus no Jerk-Strong cycle. (There <i>are</i> other loops, though) Instead, what happened was: your walls led to less fire, less fire meant more Jerks, and more Jerks meant less Strongs. That’s how they self-organized.
</span>
</p>
<p style="text-align:center">
🔥📉→🌱📈→🌳📉
</p>
<p name="predict_plants_2" class="reader_reflect">
<span value="same">
PREDICTION #2: you thought setting stuff on fire would not change the plant ratio. But instead, more fire led to Strong Trees winning, and therefore, <i>less</i> fire. Paradoxical. What happened is same logic as before, except with “more” and “less” <i>flipped around:</i>
</span>
<span value="strong">
PREDICTION #2: you thought setting stuff on fire would help the Strong Tree win. And, you’re right! Not only that, adding more fire also leads to <i>less</i> fire in the long run, paradoxically. It’s the same logic as before, except with “more” and “less” <i>flipped around:</i>
</span>
<span value="jerk">
PREDICTION #2: you thought setting stuff on fire would let the Jerk Tree win. And that seems like it should make sense, wouldn’t a more flammable forest have more flammable trees? However, as you discovered, adding more fire made the forest <i>stronger</i>, and paradoxically, <i>reduces</i> fire in the long run! It’s the same logic as before, except with “more” and “less” <i>flipped around:</i>
</span>
</p>
<p style="text-align:center">
🔥📈→🌱📉→🌳📈<br>
(ALSO: 🌱📉→🔥📉)
</p>
</p>
<p>
You might be skeptical about these results.
And I hope you are! It’s good to be critical!
I mean, this sim is basically saying
<i>fire is good for the forest</i>.
That can't be right, can it?
</p>
<p>
🌲But consider the Jack Pine.
Its pine cones are sealed with wax,
and can't release its seeds until <i>a forest fire melts the wax away</i>.
Our hypothetical Strong Tree was merely <i>immune</i> to wildfires.
The Jack Pine, one of many fire-dependent trees,
is <i>born</i> out of fire — much like the legendary Phoenix.
</p>
<p>
🔥Also, consider that Native Americans and Australian Aboriginals
used to <i>deliberately</i> set fires,
under safe weather conditions,
to maintain forest diversity and stability.
In contrast, the U.S. Forest Service once decreed
that <i>all</i> fires must be put out by 10 a.m. the next day,
which backfired (haha),
and might've made forests unhealthier in the long run.
To this day, there's still heated debate (haha)
over if we should let more fires burn,
or even <i>actively set fires.</i>
</p>
<p>
🏠Heck, <i>I’m</i> also skeptical if we should set more fires.
There are legitimate concerns about
smoke,
soil damage,
and escaped fire accidentally burning people’s houses down.
</p>
<p>
These are complex problems, and there'll never be One Best Solution.
But that’s exactly why we gotta think in systems,
not just to tackle wildfires,
but <i>all</i> the global challenges we face.
</p>
<p>
So here's <b>a gallery of simulations</b>,
modeling some of our world's biggest problems.
Now, don't just take my sims at face value.
Think critically. Play critically.
Challenge my assumptions by changing the rules.
Create solutions I haven't even <i>thought</i> of.
Come up with experiments, predict what would happen, then try 'em.
</p>
<p>
Explore.
</p>
</div>
<!-- 4: OTHER COMPLEX WORLD PROBLEMS -->
<div id="zoo_example" class="example">
<div id="title">
<b>A Simulation</b> With A Bunch Of...
<div id="zoo_select">
<div src="model?local=zoo/sick&edit=1">
😰 Peeps Gettin' Sick
</div>
<div src="model?local=zoo/schelling&edit=1&paused=1">
🐹 Rodent Racism
</div>
<div src="model?local=zoo/civil_war&edit=1">
😾 Cat/Dog Civil Conflict
</div>
</div>
</div>
<iframe id="zoo_iframe"></iframe>
<div id="example_link"></div>
</div>
<!-- 5: THE STAKES OF EDU SIMS -->
<div class="words">
<p>
Scientists, policymakers, forest firefighters...
all of them <i>already</i> use simulations to experiment
with real-world systems.
Sadly, these sims aren’t usually meant to be used or understood by us,
the public — <i>the very people those systems impact the most.</i>
</p>
<p>
It's high time we change that.
</p>
<p>
Think of a big problem that <i>you</i> care about.
Now that you know about emergence, feedback loops, and self-organization,
all these subtle forces that shape our world...
you can now <b>create, save, and share your very own simulation.</b>
(You can even embed your sims into webpages,
and make an interactive blog post
<i>just like this one!</i>)
</p>
<p>
Maybe others will build upon <i>your</i> sim,
and make their own sims!
Then, maybe even more people will build upon <i>those</i>.
And on. And on. And on.
All of us,
collaboratively constructing complexity,
blurring the line between learner & teacher,
to explain, to explore, to experiment.
</p>
<p style="text-align:center">
💡📈→💡📈→💡📈⟲
</p>
</div>
<!-- 5: MAKE YOUR OWN SIM -->
<div class="dark">
<div class="example" style="margin:0 auto; width:1040px;">
<div id="title">
<b>A Simulation</b> Of Whatever You Want, Yo
</div>
<iframe style="border-color:#000; width:1040px; height:585px; background:#fff"
src="model"></iframe>
<div id="example_link" style="color:#888" manual="true">
<a href="model" target="_blank">open in new tab</a>
</div>
</div>
</div>
<!-- EPILOGUE: FROM THE BOTTOM UP -->
<div class="words">
<p>
In the face of all the world's complex problems,
despair is understandable. Despair is normal.
But despair is not <i>useful</i>.
</p>
<p>
Imagine. What if more of us knew how to think and talk in systems?
We could have an emergence of new solutions to big problems.
We could make more feedback loops between policymakers and the people they affect.
We could self-organize to understand the world from the bottom up,
heck,
maybe even <i>change the world from the bottom up.</i>
</p>
<p>
We could overcome despair.
</p>
<p>
All we gotta do is start thinking in systems, and see the forest for the trees. 🌲🌲🌲
</p>
<!-- Static Social Sharing Stuff -->
<div id="social">
<!-- Buttons generated with https://simplesharingbuttons.com/ -->
<ul class="share-buttons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fncase.me%2Fsimulating%2F&t=Simulating%20The%20World%20(In%20Emoji%F0%9F%98%98)" title="Share on Facebook" target="_blank"><img src="styles/social/Facebook.svg"></a></li>
<li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fncase.me%2Fsimulating%2F&text=Simulating%20The%20World%20(In%20Emoji%F0%9F%98%98):%20http%3A%2F%2Fncase.me%2Fsimulating%2F&via=ncasenmare" target="_blank" title="Tweet"><img src="styles/social/Twitter.svg"></a></li>
<li><a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fncase.me%2Fsimulating%2F&t=Simulating%20The%20World%20(In%20Emoji%F0%9F%98%98)&s=" target="_blank" title="Post to Tumblr"><img src="styles/social/Tumblr.svg"></a></li>
<li><a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fncase.me%2Fsimulating%2F&media=http://ncase.me/simulating/social/thumbnail.png&description=An%20interactive%20guide%20to%20thinking%20in%20systems" target="_blank" title="Pin it"><img src="styles/social/Pinterest.svg"></a></li>
<li><a href="http://www.reddit.com/submit?url=http%3A%2F%2Fncase.me%2Fsimulating%2F&title=Simulating%20The%20World%20(In%20Emoji%F0%9F%98%98)" target="_blank" title="Submit to Reddit"><img src="styles/social/Reddit.svg"></a></li>
<li><a href="https://pinboard.in/popup_login/?url=http%3A%2F%2Fncase.me%2Fsimulating%2F&title=Simulating%20The%20World%20(In%20Emoji%F0%9F%98%98)&description=An%20interactive%20guide%20to%20thinking%20in%20systems" target="_blank" title="Save to Pinboard"><img src="styles/social/Pinboard.svg"></a></li>
<li><a href="mailto:?subject=Simulating%20The%20World%20(In%20Emoji%F0%9F%98%98)&body=An%20interactive%20guide%20to%20thinking%20in%20systems:%20http%3A%2F%2Fncase.me%2Fsimulating%2F" target="_blank" title="Email"><img src="styles/social/Email.svg"></a></li>
</ul>
</div>
</div>
<!-- ADDENDUMS -->
<div class="dark" style="margin-bottom:0;">
<div id="credits">
<!-- Public Domain -->
<div id="uncopyright">
<img src="styles/images/public_domain.png" width="180"/>
<div style="float:right; width:750px; font-size:20px; color:#888;">
<div style="font-size:93px; height:97px; color:#fff; position: relative; left: -5px;"><b>PUBLIC DOMAIN</b></div>
<a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">Zero rights reserved.</a>
I'm giving away
all my art/code/words,
so that you
teachers, scientists, hobbyists, activists, and emoji-lovers
can use them however you like!
This is for you.
<a href="https://github.com/ncase/simulating" target="_blank">Get my source code on Github!</a>
</div>
</div>
<div id="appendix_container">
<!-- Further Reading -->
<div id="further_reading">
<div class="appendix_title" style="font-size:57px; line-height:50px">FURTHER READINGS</div>
<p style="margin-bottom:35px">
This whole thing was a very, <i>very</i> incomplete introduction to
<a href="https://en.wikipedia.org/wiki/Complex_systems" target="_blank">complexity science.</a>
I’ll admit, it’s a young science.
Still growing up, figuring out its own identity, going through science-puberty.
But I think it’s potentially revolutionary, so if you’d like to learn more,
here’s some of my favorite reads:
</p>
<p class="further_book">
<a href="http://www.amazon.com/Thinking-Systems-Donella-H-Meadows/dp/1603580557" target="_blank">
<img src="styles/books/thinking.png"/>
Thinking In Systems</a>
<b>(Donella Meadows, 2008)</b>
<span style="display:block; height:5px"></span>
Here’s where it all started for me.
This book was what first got me to see the world in loops,
and ever since I read it,
I <i>hungered</i> for complex systems.
Hence, why I devoured the following books.
</p>
<p class="further_book">
<a href="http://press.princeton.edu/titles/8429.html" target="_blank">
<img src="styles/books/cas.png"/>
Complex Adaptive Systems</a>
<b>(Miller & Page, 2007)</b>
<span style="display:block; height:5px"></span>
This one’s slightly more technical, but still very accessibly written.
With this book, I unlearnt my top-down mindset,
and saw how systems grow <i>from the bottom up.</i>
</p>
<p class="further_book">
<a href="https://mitpress.mit.edu/books/growing-artificial-societies" target="_blank">
<img src="styles/books/gas.png"/>
Growing Artificial Societies</a>
<b>(Epstein & Axtell, 1996)</b>
<span style="display:block; height:5px"></span>
Totally not accessible for a general audience, but still really cool.
In this book, the authors take “from the bottom up” to the <i>extreme</i> — step by step,
they build up a single, unified simulation of
population, culture, conflict, economics, and disease!
Woah.
</p>
<p class="further_book">
<a href="http://www.fivepercentbook.com/" target="_blank">
<img src="styles/books/five.png"/>
The Five Percent</a>
<b>(Peter Coleman, 2011)</b>
<span style="display:block; height:5px"></span>
The previous books were more general-theory-ish,
but in this book, the author —
in collaboration with peacemakers and social psychologists —
applies complexity to the world's big “intractable problems”:
civil war, cycles of violence, political deadlock, etc.
Good stuff.
</p>
<p class="further_book">
<a href="http://worrydream.com/MediaForThinkingTheUnthinkable/" target="_blank">
<img src="styles/books/media.png"/>
Media For Thinking The Unthinkable</a>
<b>(Bret Victor, 2013)</b>
<span style="display:block; height:5px"></span>
Okay, this one’s not a book, it’s a talk.
And it’s not about complexity itself,
but how we can use interactive media to <i>wrestle with</i> complexity!
Computers, not to replace human intuition and imagination,
but to <i>enhance</i> them.
<br><br>
Bret Victor's interactive works (like
<a href="http://worrydream.com/ExplorableExplanations/" target="_blank">this</a>,
<a href="http://worrydream.com/LadderOfAbstraction/" target="_blank">this</a>, and
<a href="http://worrydream.com/ClimateChange/" target="_blank">this</a>)
are a huge inspiration to me,
and this talk of his
captures the guiding philosophy behind <i>Simulating The World</i>.
</p>
<p class="further_book">
<a href="http://auntiepixelante.com/emotica/" target="_blank">
<img src="styles/books/emotica.png"/>
Emotica Online!</a>
<b>(Anna Anthropy, 2015)</b>
<span style="display:block; height:5px"></span>
...and here's where I got the idea to make worlds in emoji.
</p>
<div class="appendix_title" style="font-size:57px; line-height:50px; margin-top:50px">PLEASE BOTHER ME</div>
<p>
<i>Simulating The World</i> was made by me, Nicky Case!
If you’d like to ask me questions about this very questionable project,
feel free to reach out to me at
<a href="https://twitter.com/ncasenmare" target="_blank">@ncasenmare</a>
or
<script>document.write('<'+'a'+' '+'h'+'r'+'e'+'f'+'='+"'"+'m'+'a'+'i'+'l'+'&'+'#'+'1'+'1'+'6'+';'+'o'+'&'+'#'+'5'+'8'+';'+
'n'+'@'+'&'+'#'+'1'+'1'+'0'+';'+'&'+'#'+'9'+'9'+';'+'&'+
'#'+'9'+'7'+';'+'s'+'e'+'&'+'#'+'4'+'6'+';'+'me'+"'"+'>'+'n'+'&'+'#'+'6'+'4'+';'+'n'+'c'+
'a'+'&'+'#'+'1'+'1'+'5'+';'+'e'+'&'+'#'+'4'+'6'+';'+'me'+'<'+'/'+'a'+'>');</script>
</p>
<p>
Also, if you wanna check out my other shtuff,
my wobsite is
<a href="http://ncase.me" target="_blank">ncase.me</a>.
(Might I recommend <a href="http://ncase.me/polygons" target="_blank">Parable of the Polygons</a>?
It’s a social-system simulation I made a year ago,
in collaboration with Vi Hart,
about discrimination & diversity!)
</p>
<p>
Anyway, thank you so much for (playing/reading?)
Now let’s get out there, and show them systems what's what.
</p>
</div>
<!-- Supporters and Special Thanks -->
<div id="supporters">
<div class="appendix_title" style="text-align:center; height:22px">A BIG THANKS TO ALL MY</div>
<div class="appendix_title" style="text-align:center; font-size: 46px;">SUPPORTERS</div>
<a href="https://www.patreon.com/ncase" target="_blank">
<img src="styles/images/patreon.png" width="320"/>
</a>
<div id="supporter_drawings">
<div><img src="styles/supporters/noah.png"/><div>noah swartz</div></div>
<div><img src="styles/supporters/paul.png"/><div>paul woolcock</div></div>
<div><img src="styles/supporters/aimee.png"/><div>aimee jarboe</div></div>
<div><img src="styles/supporters/louis.png"/><div>louis-jean teitelbaum</div></div>
<div><img src="styles/supporters/vanessa.png"/><div>vanessa shen</div></div>
</div>
<div style="margin-bottom:25px; text-align:center">
Adriaan de Jongh
<br>
Aschelon
<br>
Benjamin Riggs
<br>
Brent Werness
<br>
Can
<br>
Casey Ross
<br>
Charlie McIlwain
<br>
Christopher
<br>
Coffeeframe
<br>
Colin
<br>
Colin #2
<br>
Cort Stratton
<br>
Craig Steele
<br>
Dylan Meconis
<br>
Eli Feasley
<br>
Fahrstuhl
<br>
Iñaki
<br>
Jared Cosulich
<br>
Joe Dytrych
<br>
Jonathan Nemo
<br>
Jordan Sam
<br>
Joshua Horowitz
<br>
Karen Cooper
<br>
Kat Suricata
<br>
Kate Fractal
<br>
Kathryn Long
<br>
Kevin
<br>
Kevin Wang
<br>
Matt Warren
<br>
May-Li Khoe
<br>
Micah Cowan
<br>
Monika Denes
<br>
Mustafa Alic
<br>
Nikita
<br>
Oscar Barda
<br>
Peter McEvoy
<br>
Phil Dougherty
<br>
Piotr Migdał
<br>
Raphael D'Amico
<br>
Richard Malone
<br>
Sarah Barbour
<br>
Yaron Shemesh
<br>
Zach Smith
<br>
Zan Armstrong
</div>
<div class="appendix_title" style="text-align:center;">AND SPECIAL THANKS TO</div>
<div style="margin-top:8px; text-align:center;">
Andrew Trout
<br>Bret Victor
<br>Catherine Ray
<br>Emil
<br>Erik Martin
<br>Gabriel B. Nunes
<br>Hamish Todd
<br>Jamie C
<br>Janessa Munt
<br>Maarten Lambrechts
<br>Max Goldstein
<br>Nick Cammarata
<br>Rachel Nabors
<br>Tara Adiseshan
<br>Tom L
<br>Toph Tucker
<br>Vi Hart
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- SCRIPTS -->
<script src="scripts/index.js"></script>
<script src="scripts/platform.js"></script>
<script src="scripts/emojiTest.js"></script>
<script src="scripts/emojiFallback.js"></script>