-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
259 lines (255 loc) · 13.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta name="description" content="With four colors and four rules, a picture can be drawn that computes anything." />
<meta name="keywords" content="wireworld, wireworld computer, cellular automaton, computronium" />
<meta property="og:title" content="Wireworld Player" />
<meta property="og:description" content="With four colors and four rules, a picture can be drawn that computes anything." />
<meta property="og:image" content="https://rezmason.github.io/wireworld-player/readme_assets/screenshot.png" />
<meta property="og:url" content="https://rezmason.github.io/wireworld-player/index.html" />
<meta name="twitter:card" content="https://rezmason.github.io/wireworld-player/readme_assets/screenshot.png" />
<meta property="og:site_name" content="Rezmason.net" />
<meta name="twitter:image:alt" content="A flickering circuitboard made out of pixels." />
<title>Wireworld Player : Computing With Pixels In the Browser</title>
<link rel="shortcut icon" href="assets/favicon.ico" />
<link rel="stylesheet" type="text/css" href="assets/wwgui.css" />
<link rel="stylesheet" type="text/css" href="assets/layout.css" />
<link rel="stylesheet" type="text/css" href="assets/wwicons.css" />
<script type="module" src="js/wireworld.js"></script>
<noscript>
<style>
popup-root {
display: grid;
}
popup.help {
display: flex;
flex-direction: column;
}
</style>
</noscript>
</head>
<body class="wwgui">
<drag-region class="wwdragregion">
<paper>
<canvas class="base"></canvas>
<canvas class="active"></canvas>
</paper>
</drag-region>
<bar class="top">
<bar-group class="left">
<wwgroup>
<button class="stop" title="Reset"><span class="wwcaption">Reset</span></button>
<button class="play-pause" title="Play / Pause"><span class="wwcaption">Play / Pause</span></button>
<button class="step" title="Step"><span class="wwcaption">Step</span></button>
</wwgroup>
<button class="heatmap" title="Toggle heat vision"><span class="wwcaption">Toggle heat vision</span></button>
<wwgroup class="tools">
<button class="hand-tool" title="Hand tool"><span class="wwcaption">Hand tool</span></button>
<button class="eraser-tool" title="Eraser tool"><span class="wwcaption">Eraser tool</span></button>
</wwgroup>
</bar-group>
<bar-group class="middle">
<wwgroup>
<button class="slow" title="Slow down"><span class="wwcaption">Slow down</span></button>
<input type="range" class="speed" min="0" max="1" value="1" step="any" title="Adjust speed" />
<button class="fast" title="Speed up"><span class="wwcaption">Speed up</span></button>
</wwgroup>
<input class="turbo" id="turbo-checkbox" type="checkbox" title="Switch turbo on/off" />
<label class="turbo-label" for="turbo-checkbox"><span class="wwcaption">Switch turbo on/off</span> <span class="wwguitext"></span></label>
</bar-group>
<bar-group class="right">
<button class="snapshot" title="Save picture"><span class="wwcaption">Save picture</span></button>
<button class="help" title="Help!"><span class="wwcaption">Help!</span></button>
<button class="about" title="About Wireworld player"><span class="wwcaption">About Wireworld player</span></button>
</bar-group>
</bar>
<bar class="bottom">
<bar-group class="left">
<wwgroup>
<button class="zoom-out" title="Zoom out"><span class="wwcaption">Zoom out</span></button>
<button class="reset-view" title="Reset view"><span class="wwcaption">Reset view</span></button>
<input type="range" class="zoom" min="0" max="1" value="0" step="any" title="Adjust zoom" />
<button class="zoom-in" title="Zoom in"><span class="wwcaption">Zoom in</span></button>
</wwgroup>
<label class="generation" title="Current generation"><span class="wwcaption">Current generation</span> <span class="wwguitext">0</span></label>
</bar-group>
<bar-group class="middle">
<wwgroup>
<button class="load" title="Load .MCL or .TXT"><span class="wwcaption">Load .MCL or .TXT</span></button>
<label class="file-name" title="Current file"><span class="wwcaption">Current file</span> <span class="wwguitext"></span></label>
</wwgroup>
</bar-group>
<bar-group class="right">
<select class="engine" title="Choose engine">
<option class="auto" value="auto" selected>Auto</option>
<option class="macrocell" value="macrocell">Macrocell</option>
<option class="flat" value="flat">Flat</option>
<option class="linked" value="linked">Linked</option>
<option class="neighbors" value="neighbors">Neighbors</option>
<option class="alive" value="alive">Alive</option>
<option class="naive" value="naive">Naive</option>
</select>
<label class="simulation-speed" title="Simulation Speed (generations per second)">
<span class="wwcaption">Simulation Speed (generations per second)</span> <span class="wwguitext"></span>
</label>
</bar-group>
</bar>
<popup-root>
<popup class="about">
<span class="title">Wireworld player <span class="beta-badge">beta</span></span>
<content>
Wireworld concept by
<a href="http://www.playfulinvention.com/emergence" target="_blank" rel="noopener noreferrer">Brian Silverman</a>
<p class="no-splash">
Say, if you like watching people code things,<br />
why not
<a href="https://www.twitch.tv/rezmason" rel="noopener noreferrer">watch me code this live</a>, or
<a href="http://youtube.com/user/rezmason" rel="noopener noreferrer">catch a rerun?</a>
</p>
<p>
wireworld computer by<br />
David Moore and Mark Owen<br />
© 2004-2021 all rights reserved.<br />
<a href="http://www.quinapalus.com/wi-index.html" target="_blank" rel="noopener noreferrer">http://www.quinapalus.com/wi-index.html</a>
</p>
</content>
<loading-bar class="splash-only"></loading-bar>
<bar>
<bar-group class="left">
<a href="https://www.rezmason.net" target="_blank" rel="noopener noreferrer" title="made by rezmason"><rm></rm></a>
</bar-group>
<bar-group class="right">
<button class="no-splash close-popup" title="OK">OK</button>
</bar-group>
</bar>
</popup>
<popup class="error">
<span class="title">An error occurred</span>
<span class="subtitle"></span>
<content></content>
<bar>
<bar-group class="left"></bar-group>
<bar-group class="right">
<button class="close-popup" title="OK">OK</button>
</bar-group>
</bar>
</popup>
<popup class="confirm-reset">
<span class="title">Confirm reset</span>
<content>Are you sure you wish to return this simulation to its original configuration?</content>
<bar>
<bar-group class="left"></bar-group>
<bar-group class="right">
<button class="close-popup" title="Cancel">Cancel</button>
<button class="reset-ok" title="OK">OK</button>
</bar-group>
</bar>
</popup>
<popup class="loading">
<span class="title"></span>
<content></content>
<loading-bar></loading-bar>
</popup>
<popup class="help">
<span class="title">Wireworld Player Help</span>
<content>
<noscript>
<p class="subtitle"><em>This app doesn't appear to be working.</em></p>
<p>
That's because the Wireworld Player relies on scripts, and your browser has scripts disabled. If you're concerned about running nontrivial scripts
in your browser, consider
<a href="https://github.com/Rezmason/wireworld-player" target="_blank" rel="noopener noreferrer">downloading the source</a>
and vetting it for yourself. Alternatively, you might take interest in
<a href="http://golly.sourceforge.net" target="_blank" rel="noopener noreferrer">Golly</a>, a GPLv2 program that offers the same functionality.
</p>
</noscript>
<p class="subtitle"><em>What is this thing?</em></p>
<p>
Wireworld is a type of
<a href="http://en.wikipedia.org/wiki/Cellular_automata" target="_blank" rel="noopener noreferrer">cellular automaton</a>, or "CA". A CA is a set of
rules you apply repeatedly to a grid of cells to evolve their states; these rules apply universally to each cell in the grid, depending on that
cell's current state and the state of its neighbors. Complex behaviors often emerge from these simple systems.
</p>
<p>
Most of the explored CAs have a reputation for being interesting, or relating to real-life phenomena. One of the most interesting properties a CA
can have is "<a href="http://en.wikipedia.org/wiki/Turing-complete" target="_blank" rel="noopener noreferrer">Turing completeness</a>".
Turing-complete CAs can be configured to compute anything a conventional computer can. Proving Turing completeness in a simple system lends credence
to the view that simple mechanics may underlie all the universe's observed complexity. But these proofs aren't always straightforward.
</p>
<p>
Wireworld is a CA developed by
<a href="https://www.playfulinvention.com/emergence" target="_blank" rel="noopener noreferrer">Brian Silverman</a>, and debuted in his 1987 program
for the Apple II, <span style="text-transform: uppercase">The Phantom Fish Tank</span>. Its rules are designed to imitate circuitry, bridge the
domains of CA research and circuit design, and simplify the creation and discovery of systems of computation. Proving that Wireworld is
Turing-complete, while still difficult, is much simpler than proving many of its CA counterparts.
<a href="http://quinapalus.com/wi-index.html" target="_blank" rel="noopener noreferrer">David Moore and Mark Owen</a>
demonstrate Wireworld's Turing-completeness with their programmable computer, built from functional modules that imitate their real-world
counterparts.
</p>
<p class="subtitle"><em>What is Wireworld's rule set?</em></p>
<p>
Wireworld cells can have one of four states. We call them
<span class="code dead">DEAD</span>, <span class="code wire">WIRE</span>, <span class="code head">HEAD</span> and
<span class="code tail">TAIL</span>.
</p>
<ul>
<li><span class="code dead">DEAD</span> cells forever remain <span class="code dead">DEAD</span> cells.</li>
<li><span class="code tail">TAIL</span> cells always become <span class="code wire">WIRE</span> cells.</li>
<li><span class="code head">HEAD</span> cells always become <span class="code tail">TAIL</span> cells.</li>
<li>
<span class="code wire">WIRE</span> cells touching one or two <span class="code head">HEAD</span> cells become
<span class="code head">HEAD</span> cells. A cell like this is said to be "excited". Otherwise they stay
<span class="code wire">WIRE</span> cells.
</li>
</ul>
<p>
Each simple rule serves an important role. The eternally
<span class="code dead">DEAD</span> cells typically enclose the others, which prevents the simulation from growing in size;
<span class="code head">HEAD</span>s becoming <span class="code tail">TAIL</span>s guarantees that a cell is only briefly excited, and
<span class="code tail">TAIL</span>s becoming <span class="code wire">WIRE</span>s ensures that information spreads only in one direction. Finally,
the conditions when <span class="code wire">WIRE</span>s become <span class="code head">HEAD</span>s are easy enough to induce that information can
be generated and broadcast through the CA quickly and in large amounts. All these help CA researchers design orderly, comprehensible CA
configurations.
</p>
<p>
Wireworld's excitation rule is not unique among CAs, but it is nonetheless crucial to the way Wireworld works. It allows information to spread
cheaply and quickly, but also controls the flow of information– whether it continues to spread or whether it stops. There are many examples of
simple Wireworld components that control information in useful ways; the Owen Moore computer makes use of several of these.
</p>
<p class="subtitle"><em>How do I make a Wireworld instance?</em></p>
<p>What, seriously? Good on you!</p>
<p>
The Wireworld Player supports two file types: .MCL, a common CA format which isn't very amateur-friendly, and .TXT, which you can modify in any text
editor.
<a href="examples/txt/test/simple.txt" target="_blank" rel="noopener noreferrer">Click here</a>
to see an example of a TXT file that the player supports.
</p>
<p>A built-in Wireworld editor might be added to the player in the future.</p>
<p class="subtitle"><em>Why did you build this?</em></p>
<p>
CAs make great test subjects for code optimization strategies, and Wireworld is a CA that is fairly simple to put together— most of its cells never
change, and the size of the grid never grows or shrinks.
</p>
<p>
I use the Wireworld Player as an ongoing test of performance optimization strategies, as a demonstration of the web's potential as a
high-performance creative and experimental platform, and as my playground for layout, styling, and accessibility solutions. Its source code is
<a href="https://github.com/Rezmason/wireworld-player" target="_blank" rel="noopener noreferrer">available here</a>.
</p>
<p>
If you have any questions,
<a href="https://rezmason.net/contact.html">contact me and I'll get back to you</a>.
</p>
</content>
<bar>
<bar-group class="left"></bar-group>
<bar-group class="right">
<button class="close-popup" title="OK">OK</button>
</bar-group>
</bar>
</popup>
<popup class="drag-and-drop"> Drop file to load </popup>
</popup-root>
</body>
</html>