-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (114 loc) · 4.13 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>elixor - the universes of xor</title>
<style>
#header {
font-size: small;
}
@media all and (min-width: 1100px) {
#subheader {
float:right;
}
}
button, input {
background: black;
color: white;
border-width: 1px;
border-style: solid;
border-color: #ccc;
text-align: center;
}
button:focus, input:focus {
border-color: #666;
}
body {
background: #001;
color: white;
margin-left: 2em;
margin-right: 2em;
font-family: sans;
}
.container {
background: white;
display: inline-flex;
float: left;
}
.linebreak {
clear: left;
}
a {
color: #ccc;
}
#footer {
font-size: small;
font-family: monospace;
}
#ECA {
background: #ccc;
}
</style>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/Uri.min.js"></script>
<body>
<div id="header">
<span id="universeLabel">Universe</span>: <button id="prev" accesskey="J"><<</button> <input id="current" type="text" size="4"> <button id="next" accesskey="K">>></button>
FPS: <button id="slower"><<</button> <input id="fps" type="text" size="2"></input> <button id="faster">>></button>
<button id="pause" accesskey="p"><U>P</U>ause</button>
<button id="randomize" accesskey="r" title="Assign random numbers to each universe array"><U>R</u>andomize all</button>
<button id="reboot" accesskey="b">Re<u>b</u>oot</button>
<div id="subheader">
New universes: <label><input type="checkbox" checked id="1l"> 1L</label> <label><input type="checkbox" checked id="1r"> 1R</label> <label><input type="checkbox" checked id="2l"> 2L</label> <label><input type="checkbox" checked id="2r"> 2R</label>
<label title="Remove the four universe limit"><input type="checkbox" id="godmode" accesskey="g"><u>G</u>od mode</label>
</div>
</div>
<br clear="all">
<div id="universes">
</div>
<br clear="all">
<div id="text">
<h2> What's going on here? </h2>
<p>
There are no random numbers (unless you randomize!) or complex formulas involved.
Just 0, 1, XOR, and the universe size. You could do this in your head. :-)
<p>
The XOR operator converts two binary inputs into a single output. The output is
1 if <em>only</em> one of the two inputs is 1, otherwise it is 0. The operation
is irreversible because we cannot know which of the two inputs was 1.
<p>
If we apply this operator repeatedly in a ring-shaped data structure, we get
four different universe patterns for any ring size. Four because we can vary
movement direction and comparison direction. Note the symmetries -- any of the
four universes can be connected to copies of itself on all sides, ad infinitum.
<p>
The seed value of the ring is irrelevant -- it is set to 1 here; if it was set
to 0 we would have to use XNOR instead of XOR, but the result would be the same.
<p>
We display as many lines as our universe size, then refresh. But at any point in time,
the state of universe 249L1 is really just represented in 249 bits!
You can check its state by looking at the <code>multiverse</code>
variable in your developer console.
<p>
When you randomize, each of the universe arrays gets assigned a sequence of
random 0s and 1s. In some universes, this will put you in a state that's
otherwise unreachable -- in others it is just part of their natural cycle.
You may notice that large-scale patterns tend to disappear while small-scale
behavioral differences remain.
<p>
All universes repeat not just in space but also in time. When they start repeating varies. The contents of
the ring appear to repeat at minimum at <em>universe size</em><sup>2</sup> (for any universe with
a size that is a power of 2), and at maximum at 2<sup><em>universe size</em></sup>.
<p>
You can compare the results with an elementary cellular automaton of the same size by
adding <code>?ECA=<number between 0 and 255></code> to the URL, e.g.
<a href="index.html?ECA=60&2l">rule 60</a>. Rule 60 is the closest to the type 2
universes shown here, but has a typically much shorter cycle length.
</div>
<div id="footer">
<a href="http://github.com/eloquence/elixor">github</a>
</div>
<script src="elixor.js"></script>
</body>
</html>