-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
364 lines (281 loc) · 10.7 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
<!doctype>
<html>
<head>
<!-- TRANSLATE: 'title' -->
<title>萤火虫</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<meta name="viewport" content="width=640">
<link rel="icon" type="image/png" href="favicon.png">
<!-- TRANSLATE: 'name' and 'description' -->
<meta itemprop="name" content="萤火虫">
<meta itemprop="description" content="一群小萤火虫的小模拟">
<meta itemprop="image" content="http://ncase.me/fireflies/social/thumbnail.png">
<!-- TRANSLATE: 'twitter:title' and 'twitter:description' -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="萤火虫">
<meta name="twitter:description" content="一群小萤火虫的小模拟">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/fireflies/social/thumbnail.png">
<!-- TRANSLATE: 'og:title' and 'og:description' -->
<meta property="og:title" content="萤火虫">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/fireflies/">
<meta property="og:image" content="http://ncase.me/fireflies/social/thumbnail.png">
<meta property="og:description" content="一群小萤火虫的小模拟">
<!-- Styles -->
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/widgets.css">
</head>
<body>
<!-- The firefly simulation -->
<div id="game"></div>
<!-- The WORDS! -->
<div id="words">
<h1>“萤火虫”</h1>
<span id="credits" style="font-size:15px">
翻译：<a href="https://github.com/snie2012/" target="_blank">聂少良</a> |
<a href="http://ncase.me/fireflies/">原始英文版本</a></span>
<p>
就像圣诞节的灯光温柔和缓地漂浮在半空中，萤火虫也为它们居住的森林带来一丝魔力。
</p>
<div style="overflow:hidden;">
<img src="ui/chaos.png" width="150" style="float: left;"/>
<div style="width: 185px; float: right;">
<span style="font-size:1.6em; line-height:1.1em;">点击 & 拖拽</span>
<br>
给萤火虫们
<br>
创造一些混乱 →
</div>
</div>
<p>
有些萤火虫种类甚至可以带来 <em>更多</em> 的魔力。在东南亚，如果你在深夜去到河岸边，便会被赐予一场绝妙的灯光秀 – 这是来自泰国萤火虫的馈赠：
</p>
<iframe width="350" height="197" src="https://www.youtube-nocookie.com/embed/ZGvtnE1Wy6U?rel=0&start=64" frameborder="0" allowfullscreen></iframe>
<p>
一整片红树森林，一瞬间被全部点亮，一瞬间陷入黑暗，然后又被点亮 – 每一瞬间的明与暗都发生得近乎完全同步。几千只的萤火虫如何彼此协作来产生如此效果？谁是这寂静交响乐的指挥家？
</p>
<p>
这是一个持续了近一个世纪的谜团。1992年，一队美国科学家启程决心解开它。有点忧伤但是并不令人惊讶的是，媒体们嘲笑了这队科学家。一个小报上写道：<em>“ 政府砸纳税人的钱去婆罗洲研究萤火虫可不是一个聪明的主意！ ”</em> 但是科学家们不屈不挠，带着摄像和计算仪器毅然踏上了征程。
</p>
<p>
那么，几千种萤火虫如何挑选一位带头大哥，同时也是一位节奏大师，以便跟随它的节奏从而同步闪动呢？科学家们发现的答案很简单：
</p>
<p>
它们没有带头大哥。
</p>
<p>
每只萤火虫都有 <em>自己</em> 的单独的内置时钟。每当这个时钟“敲击”到十二点，萤火虫便发光。
</p>
<p>
<img src="ui/clock.png" width="350"/>
</p>
<p>
每只萤火虫并不将时钟和一位中央领袖同步，它们遵循的是以下几个步骤：
</p>
<p>
步骤一：当看到附近的萤火虫亮了，你就把自己的时钟往前推一点点。
</p>
<p>
<img src="ui/nudge.png" width="350"/>
</p>
<p>
步骤二：没了。
</p>
<p>
一个如此小的、窄范围内的互动真的可以导致遍布全森林的萤火虫和谐地同步闪动吗？通往真相的路只有一条...
</p>
<hr/>
<!-- TRANSLATE: 'label', 'label-on', and 'label-off' -->
<widget type="toggle"
id="neighborNudgeRule"
background="#000" color="#fff"
background-on="#FEE27F" color-on="#000"
label="推推你邻居:<br>(点击生效→)"
label-on="开" label-off="关">
</widget>
<hr/>
<p>
等等。仔细看。
</p>
<p>
你看到了什么？
</p>
<p>
一开始，没什么。萤火虫的闪动看起来还没什么秩序。
</p>
<p>
但是过一会儿，你会注意到小片小片的萤火虫开始一起闪动 – 但是每片与每片之间依然不同步。
</p>
<p>
再过一会儿，你开始看到萤火虫的表演像“波浪”，跟棒球比赛中看台上激动的球迷一样。
</p>
<p>
最后，除了寥寥几只，所有萤火虫都开始一起闪动 – 而且最终，那几只拖后腿的也加入了萤火虫们共同的舞蹈。
</p>
<p>
还有什么更奇妙的吗？如果你制造一些混乱来干扰这些萤火虫...
</p>
<div style="overflow:hidden;">
<img src="ui/chaos.png" width="150" style="float: left;"/>
<div style="width: 185px; float: right;">
<span style="font-size:1.6em; line-height:1.1em;">点击 & 拖拽</span>
<br>
再次扰乱这些
<br>
萤火虫 →
</div>
</div>
<p>
...是的，这可以导致它们短时间的行为分散，但是慢慢地而且毫无疑虑地，它们的行为将再次集中，然后同步闪动，就像只有一只萤火虫。
</p>
<p>
这里提供更多的几个按钮 & 滑动条供你使用，你可以和虚拟萤火虫们随意玩耍：
</p>
<hr/>
<!-- TRANSLATE: 'label', 'label-min', and 'label-max' -->
<widget type="slider"
id="numFireflies"
background="#FEE27F" color="#fff"
min=10 max=500 step=1
label="萤火虫数量:"
label-min="10" label-max="500">
</widget>
<!-- TRANSLATE: 'label', 'label-on', and 'label-off' -->
<widget type="toggle"
id="showClocks"
background="#000" color="#fff"
background-on="#FEE27F" color-on="#000"
label="显示时钟:"
label-on="开" label-off="关">
</widget>
<!-- TRANSLATE: 'label', 'label-min', and 'label-max' -->
<widget type="slider"
id="clockSpeed"
background="#FEE27F" color="#fff"
min="0.2" max="2" step="0.05"
label="萤火虫时钟速度:"
label-min="慢" label-max="快">
</widget>
<!-- TRANSLATE: 'label', 'label-on', and 'label-off' -->
<widget type="toggle"
id="neighborNudgeRule"
background="#000" color="#fff"
background-on="#FEE27F" color-on="#000"
label="推动邻居萤火虫的时钟:"
label-on="开" label-off="关">
</widget>
<!-- TRANSLATE: 'label', 'label-min', and 'label-max' -->
<widget type="slider"
id="nudgeAmount"
background="#FEE27F" color="#fff"
min="0.01" max="0.10" step="0.001"
label="推多少:"
label-min="少" label-max="多">
</widget>
<!-- TRANSLATE: 'label', 'label-min', and 'label-max' -->
<widget type="slider"
id="neighborRadius"
background="#FEE27F" color="#fff"
min=50 max=500 step=10
label="邻居的距离:"
label-min="近" label-max="远">
</widget>
<!-- TRANSLATE: 'label' -->
<widget type="button"
id="resetFireflies"
background="#000" color="#fff"
background-hover="#FEE27F" color-hover="#000"
label="重置萤火虫们">
</widget>
<!-- TRANSLATE: 'label' -->
<widget type="button"
id="resetEverything"
background="#000" color="#fff"
background-hover="#FEE27F" color-hover="#000"
label="重置所有">
</widget>
<hr/>
<p>
这便是我们萤火虫宝宝的魔术戏法背后的秘密：
</p>
<div style="overflow:hidden; text-align:center">
<img src="ui/emergence.png" width="350" style="margin-bottom:25px"/>
<div style="width:170px; float:left;">
<span style="font-size:33px; line-height:10px">小规模</span><br><span style="font-size:27px">互动</span>
</div>
<div style="width:10px; float:left; position:relative; left:-5px; top:7px">→</div>
<div style="width:170px; float:left;">
<span style="font-size:33px; line-height:10px">大规模</span><br><span style="font-size:27px">秩序</span>
</div>
</div>
<p>
人们后来发现，萤火虫并不是唯一的从下而上来同步自己的事物。你的神经元产生脑波。你的心脏起博细胞同步发动和运作。<a target="_blank" href="https://www.youtube.com/watch?v=5v5eBf2KwF8">甚至一堆放在摇摇晃晃的平台上的没有生命的节拍器也开始同步行进。</a>除了这些，对自同步的理解帮助我们搭建了更好的激光，电脑和通讯技术！
</p>
<p>
现在想想，自同步系统的数学在部分程度上是由几个单纯喜欢萤火虫的科学家发现的。看来嘲笑他们的项目 <em>“不是一个好主意”</em> 并不是一个好主意。
</p>
<p>
. . .
</p>
<p>
你漂浮着，轻柔地，寂静中，偶尔用一点亮光给黑夜留下注脚。若只有你自己，可看的并不多。
</p>
<p>
但你一闪亮，便会激起身旁的小伙伴们一起闪亮，他们闪亮的时间就会比本来的要早一点点。而你旁边的，相应地会激发他们旁边的。
</p>
<p>
然后，旁边的旁边的，如此以往。
</p>
<p>
首先，小簇小簇开始一起闪动。然后，一束光浪扫过整个集群。最后，你们整体一同闪动，这耀眼灯束，全然和谐，并驾齐驱 – 全然同步。
</p>
<p>
你今天会制作怎样的小规模互动系统呢，小萤火虫？
</p>
<hr class="footer"/>
<div id="credits">
<p>
灵感来源于 Steven Strogatz 的书,<br>
<a href="http://www.powells.com/book/sync-how-order-emerges-from-chaos-in-the-universe-nature-daily-life-9780786887217" target="_blank">
SYNC: How Order Emerges From Chaos In the Universe, Nature, and Daily Life
</a>
</p>
<p>
作者
<a href="http://ncase.me/" target="_blank">Nicky Case</a>，带着我的赞助者的爱 & 支持
<a href="credits" target="_blank">(全部赞助者的名单)</a>
</p>
<p>
“萤火虫”项目全部开源，贡献给 public domain。
<a href="https://github.com/ncase/fireflies" target="_blank">(来Github看源码!)</a>
</p>
<p>
<a href="https://www.patreon.com/ncase" target="_blank">
<span id="patreon" >来这里支持我 patreon <3</span>
</a>
</p>
<p> </p>
<p>
分享到你的社区：<br>
<!-- TRANSLATE: 'text' -->
<sharing text="萤火虫，以及关于所有事情，它们能教给我们什么。一个交互式模拟："
link="http://ncase.me/fireflies-zh/"></sharing>
</p>
</div>
</div>
</body>
</html>
<!-- Library code -->
<script src="js/pixi.min.js"></script>
<script src="js/howler.js"></script>
<script src="js/minpubsub.src.js"></script>
<script src="js/helpers.js"></script>
<script src="js/Mouse.js"></script>
<script src="js/widgets.js"></script>
<script src="js/sharing.js"></script>
<!-- Main code -->
<script src="js/index.js"></script>