-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathant.html
334 lines (292 loc) · 12.8 KB
/
ant.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
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Langton's Ant</title>
<meta name="description" content="A customizable implementation of Langton's Ant" />
<meta property="og:title" content="Langton's Ant" />
<meta property="og:description" content="A customizable implementation of Langton's Ant" />
<meta property="og:image" content="https://josephpetitti.com/images/basic_ant.png" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://josephpetitti.com/ant" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/images/favicon-96.png" sizes="96x96" type="image/png">
<link rel="icon" href="/images/favicon-192.png" sizes="192x192" type="image/png">
<link rel="icon" href="/images/favicon-32.png" sizes="32x32" type="image/png">
<meta name="theme-color" content="#1f0053">
<link rel="stylesheet" href="webfonts/fonts.css" type="text/css">
<link rel="stylesheet" href="styles/fontawesome.min.css" type="text/css">
<link rel="stylesheet" href="styles/brands.css" type="text/css">
<link rel="stylesheet" href="styles/solid.min.css" type="text/css">
<link rel="stylesheet" href="styles/dark.css?v=1.0.8" type="text/css">
<link rel="stylesheet" href="styles/ant.css?v=2.2" type="text/css">
<script src="scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<input type="checkbox" id="toggle-menu">
<label for="toggle-menu" id="mobile-nav" title="Navigation">
<i class="fas fa-bars"></i> Menu
</label>
<!-- Nav -->
<nav id="nav">
<label for="toggle-menu" id="mobile-nav-close" title="Close">
<i class="fas fa-times"></i> Close
</label>
<ul>
<li><a href="index">Home</a></li>
<li><a href="resume">Resume</a></li>
<li><a href="projects">Projects</a>
<ul>
<li><a href="afterlight-caves">Afterlight Caves</a></li>
<li><a href="kyoto-ar-tour-guide-app">
Kyoto AR <br> Tour Guide App
</a></li>
<li><a href="traffic-classifier">Traffic Classifier</a></li>
<li><a href="hong-kong-historic-conservation">
Hong Kong Historic <br> Conservation
</a></li>
<li><a href="meeting-scheduler">Algol Meeting Scheduler</a></li>
<li><a href="this-website">This Website</a></li>
<li><a href="tic-tac-toe">Tic-Tac-Toe</a></li>
</ul>
</li>
<li><a href="blog">Blog</a>
<li><a href="other">Other</a>
<ul>
<li><a href="dice">Dice</a></li>
<li><a href="ant">Langton's Ant</a></li>
<li><a href="rps">RPS Automaton</a></li>
<li><a href="type">Typing Game</a></li>
<li><a href="minesweeper">Minesweeper</a></li>
<li><a href="snake">Snake</a></li>
<li><a href="match">Color Match</a></li>
<li><a href="klotski">Klotski</a></li>
<li><a href="sliding-tetris">Sliding Tetris</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- Main -->
<main id="main">
<h1 class="title">LANGTON'S ANT</h1>
<div id="main-inputs">
<div>
<label for="height">Height</label>
<input type="number" id="height" value="100">
</div>
<div>
<label for="width">Width</label>
<input type="number" id="width" value="100">
</div>
<div>
<label for="square-size">Square size</label>
<input type="number" id="square-size" value="4">
</div>
<div>
<label for="wrap">Wrap</label>
<input type="checkbox" id="wrap">
</div>
<div id="button-holder">
<button id="start">Start</button>
<button id="pause" style="display: none;">Pause</button>
<button id="resume" style="display: none;">Resume</button>
<button id="reset">Reset</button>
</div>
</div>
<div id="canvas-holder" width="100%">
</div>
<p id="iteration"></p>
<div id="input-container">
<div id="rule-box" class="box">
<h2>Rules</h2>
<div id="rules">
</div>
<button id="add-rule">Add Rule</button>
</div>
<div id="ant-box">
<div id="ants-inner"></div>
<div id="ant-header">
<button id="add-ant">Add Ant</button>
</div>
</div>
</div>
<div class="box">
<p style="margin-block-start: .5em; margin-block-end: .5em;">
Copy this magic link to share this set of rules with a friend
</p>
<div id="url-box">
<button id="copy-url">Copy</button>
<textarea id="url-text" rows="4" cols="90" readonly></textarea>
</div>
</div>
<h2 id="about">About</h2>
<p>
This page is a customizable implementation of
<a href="https://en.wikipedia.org/wiki/Langton's_ant" target="_blank" rel="noreferrer noopener">Langton's Ant</a>,
a cellular automaton invented by Chris Langton in 1986. Langton's Ant is
interesting because its very simple set of rules can lead to very
complex emergent behavior. The simulation deals with computerized "ants"
whose movements are controlled by a set of rules decided by the user. In
its most basic form the simulation creates a single ant, which follows
these rules:
</p>
<ul>
<li>
At a white square, turn 90° right, change the color of the square to
black, then move forward one square
</li>
<li>
At a black square, turn 90° left, change the color of the square to
white, then move forward one square
</li>
</ul>
<figure class="float right">
<img src="images/basic-ant.png" alt="Image of a single ant after 11,669 iterations"></img>
<figcaption>
The ant will always eventually get caught in a loop, making a
"highway" off the board
</figcaption>
</figure>
<p>
At first, the ant's movement appears to be essentially random, retracing
its steps many times and turning in unpredictable ways. However, after
about 10,000 iterations the ant begins moving in a pattern. It
constructs a repeating "highway" in one direction, eventually reaching
the edge of the grid. This is the really fascinating aspect of Langton's
Ant: order arising out of chaos.
</p>
<h2>Extensions</h2>
<p>
The basic implementation of Langton's Ant is cool, but it does the same
thing every time, which gets boring. Several ways to extend the
functionality of the ant have been suggested over the years. For
example, multiple ants can be simulated by pressing the "Add Ant"
button, each with a unique starting position and direction. This can
show how multiple ants interact with each other and give rise to
different ordered patterns.
</p>
<figure class="float left">
<img src="images/advanced-ant.png" alt="Image of a 4 ants with advanced rules after 3,973 iterations"></img>
<figcaption>
This image is the result of four ants following 20 different rules for
3,973 iterations
</figcaption>
</figure>
<p>
Another way to extend Langton's Ant is to add more colors, and more
rules. By clicking the "Add Rule" button you can define any number of
rules for the ants to obey. In addition to the basic "turn right" (R)
and "turn left" (L), ants can also continue straight ahead (C) or turn
180° around (U).
</p>
<p>
The combination of these extensions can lead to some very interesting
and unpredictable outcomes. Sometimes ordered patterns arise out of
chaos, and sometimes symmetry and repetition degenerates into
randomness. Unpredictable patterns often emerge from these simple
rules.
</p>
<p>
The point of this page is to make it easy to experiment and play with
different combinations of rules and ants. The next section explains how
to use the provided options to do just that.
</p>
<h2 id="limitations">Limitations</h2>
<p>
You can't remove rules while the simulation is running. This is
impossible because what should happen to an ant sitting on a square that
is the color of a removed rule? You can change the color of rules while
it's running, but this doesn't retroactively replace the old color.
Instead, squares with the old color are just treated as if they were the
new color.
</p>
<figure class="float right">
<img src="images/very-advanced-ant.png" alt="A very advanced ant">
<figcaption>
Four ants and six rules after 129,000 iterations
</figcaption>
</figure>
<h2 id="interesting-patterns">Interesting Patterns</h2>
<p>
<a href="https://josephpetitti.com/ant?r=////AAAA-Q&a=ByDkByCuBWCtBWDn&m=BkBkAE">Here</a>
is an interesting configuration I found that repeats infinitely while
occupying a finite amount of space.
</p>
<p>
<a href="https://josephpetitti.com/ant?r=0d7Ss9dgRGpC7E8TCcOnf2Py-ER&a=BkC1BuDKBkDcBaDL&m=BkBkAE&p=">This</a>
set of rules leads to several different patterns, including multiple
spirals and highways (see image). Duplicating it four times leads to
an even more interesting <a href="https://josephpetitti.com/ant?r=s9moLkjF/0RIMygBzOcCsHpt-ER&a=BkC1BuDKBkDcBaDLEsC1E2DKEsDcEiDLEsJFE2JaEsJsEiJbBkJFBuJaBkJsBaJb&m=DIDIAE&p=">
pattern</a>, which repeats after 165,000 iterations.
</p>
<h1 id="haskell-ant">Haskell Ant</h1>
<p>
I reimplemented Langton's Ant in the Haskell programming language for
practice while I was learning that language. You can see that
implementation and try it out for yourself at my
<a href="https://github.com/jojonium/langtons-ant-haskell" target="_blank" rel="noreferrer noopener">GitHub</a>.
It's not as pretty or interactive as the web version, but it's way
faster because it doesn't display every step along the way, only the
final board after a given number of iterations.
</p>
<p>
Haskell Ant is configured through a command line interface, which can be
hard to visualize. Instead, you can use the web version on this page to
design an ant configuration and then just copy this conveniently
auto-formatted command to try it in Haskell:
</p>
<div class="box">
<div id="haskell-box">
<button id="copy-haskell">Copy</button>
<textarea id="haskell-text" rows="4" cols="90" readonly></textarea>
</div>
</div>
<p>
Just change the <code>-n</code> argument to specify a different number
of iterations to do before printing the result
</p>
</main>
<!-- Footer -->
<footer id="footer">
<section class="about">
<h2>License</h2>
<p>
All text on this site is released under the
<a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noreferrer noopener">CC BY 3.0</a>
license. Scripts are released under various free and open source
<a href="/licenses" rel="jslicense">licenses</a>. Source code is
available on
<a href="https://github.com/jojonium/josephpetitti.com">GitHub</a>.
</p>
</section>
<section class="contact">
<h2>Contact Information</h2>
<dl>
<dt>Email</dt>
<dd>
<a href="mailto:[email protected]">[email protected]</a>
<span class="gpg">(<a href="gpg">GPG Key</a>)</span>
</dd>
</dl>
<ul class="icons">
<li>
<a href="https://github.com/jojonium" target="_blank" rel="noreferrer noopener">
<span class="fab fa-github" title="GitHub"></span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/joseph-petitti/" target="_blank" rel="noreferrer noopener">
<span class="fab fa-linkedin" title="LinkedIn"></span>
</a>
</li>
</ul>
</section>
</footer>
</body>
<script src="scripts/ant.js?v=2.5"></script>
</html>