-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwolframPR.html
309 lines (309 loc) · 17.6 KB
/
wolframPR.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
<!--
File: wolframPR.html
Author: Kyle Tranfaglia
Purpose: HTML structure for the Wolfram's Nearest Neighbor Parallel Simulation Page
Last Updated: 11/13/24
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Set the character encoding to UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Define the viewport for responsive design -->
<title> Parallel WNN - Celite </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- Link to online library for icons -->
<link rel="stylesheet" type="text/css" href="styles/global.css"> <!-- Link to global CSS styles -->
<link rel="stylesheet" type="text/css" href="styles/wolframPR.css"> <!-- Link to home specific CSS styles -->
<link rel="icon" href="images/Cellular_automata_icon.png"> <!-- Link page icon -->
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"> </script> <!-- Connect online Javascript library to capture canvas as a PDF -->
<script type="module" src="js/wolframPR/generateLattice.js" crossorigin="anonymous"> </script> <!-- Connect Javascript for lattice calculation -->
<script type="module" src="js/wolframPR/cellClass.js"> </script> <!-- Connect Javascript for cell creation -->
<script type="module" src="js/wolframPR/displayLattice.js"> </script> <!-- Connect Javascript for lattice display -->
<script type="module" src="js/wolframPR/UIFunctionality.js"> </script> <!-- Connect Javascript for user interface -->
<script type="module" src="js/wolframPR/logClass.js"> </script> <!-- Connect Javascript for logbox functionality -->
<body>
<!-- Navigation Bar-->
<header>
<div class="navbar">
<a href="index.html" class="logo">
<img src="images/Cellular_automata_logo.png" alt="Logo" width="70" height="70">
</a>
<a href="index.html"> Home </a> <!-- Link to the home page -->
<!-- Dropdown menu for simulators -->
<div class="dropdown">
<button class="drop_button"> Simulators <i class="fa fa-caret-down"> </i> </button>
<!-- Dropdown items -->
<div class="dropdown_item">
<a href="wolframPR.html"> Parallel WNN </a> <!-- Link to Wolfram's Nearest Neighbor Parallel Simulation Page -->
<a href="wolframSQ.html"> Sequential WNN </a> <!-- Link to Wolfram's Nearest Neighbor Sequential Simulation Page -->
<a href="conway.html"> Game of Life </a> <!-- Link to Conway's Game of Life Simulation Page -->
</div>
</div>
<a href="documentation.html"> Documentation </a> <!-- Link to the documentation page -->
<a href="about.html"> Collaborators </a> <!-- Link to the about page -->
<a href="https://github.com/ktranfaglia1/Celite" target="_blank"> Source </a> <!-- Link to the source code page -->
</div>
<h1> Wolfram's Nearest Neighbor Parallel </h1> <hr>
</header>
<!-- Primary tool bar containing input boxes and options to manipulate the simulation -->
<div class="primary_toolbar">
<!-- Container for iteration input box -->
<div class="input_container1">
<label for="iterationInputBox" class="input_label"> Iterations:</label>
<input type="text" id="iterationInputBox" class="simulation_input" placeholder="Enter # of iterations...">
<button id="iterationSubmit" class="submit_button"> Enter </button>
</div>
<!-- Container for rule input box -->
<div class="input_container1">
<label for="ruleInputBox" class="input_label"> Rule: </label>
<input type="text" id="ruleInputBox" class="simulation_input" placeholder="Enter rule # (0-255)...">
<button id="ruleSubmit" class="submit_button"> Enter </button>
</div>
<!-- Container for lattice size input box -->
<div class="input_container1">
<label for="latticeSizeBox" class="input_label"> Lattice: </label>
<input type="text" id="latticeSizeBox" class="simulation_input" placeholder="Enter lattice size...">
<button id="latticeSizeSubmit" class="submit_button"> Enter </button>
</div>
<!-- Container for finite/infinite toggle bar -->
<div class="input_container1">
<!-- Create Toggle bar and use Javascript function to handle click -->
<label class="toggle_label"> Infinite </label>
<div class="toggle_bar" id="boundToggle">
<div class="toggle_button"> </div>
</div>
<label class="toggle_label"> Finite </label>
</div>
<!-- Create periodic checkbox -->
<div class="checkbox_container" id="periodicCheckBox">
<input type="checkbox" class="checkbox_select">
<label class="checkbox_label"> Periodic </label>
</div>
<!-- Create null checkbox -->
<div class="checkbox_container" id="nullCheckBox">
<input type="checkbox" class="checkbox_select">
<label class="checkbox_label"> Null </label>
</div>
</div>
<!-- Secondary tool bar containing main buttons and log box for simulation -->
<div class="secondary_toolbar">
<button id="startStopButton" class="start_button"> Start </button>
<button id="iterateButton" class="simulation_button"> Iterate </button>
<button id="clearResetButton" class="simulation_button"> Clear </button>
<button id="optionsButton" class="simulation_button"> Options </button>
<button id="aboutButton" class="simulation_button"> About </button>
<canvas id="logRegion" class="log_box"> </canvas> <!-- Display region for the logs -->
</div>
<div id="iterationOutput" class="iteration_output"> </div> <!-- Output region for iteration count -->
<!-- Canvas region for lattice display and overlapping canvas for iteration tickmark -->
<div class="center_canvas">
<canvas id="latticeRegion" class="lattice_region"> </canvas>
<canvas id="tickmarkRegion" class="tickmark_region"> </canvas>
</div>
<!-- Options window to provide advanced options for simulator -->
<div id="optionsContainer" class="options_container">
<div id="optionsContent" class="options_content">
<span class="close"> × </span>
<h4> Options </h4>
<!-- Buttons -->
<hr>
<button id="downloadPDFButton" class="options_button"> Download PDF </button>
<button id="downloadPNGButton" class="options_button"> Download PNG </button>
<hr>
<button id="latticeFillButton" class="options_button"> Lattice Fill </button>
<button id="randomFillButton" class="options_button"> Random Fill </button>
<hr>
<!-- Toggles -->
<div class="p1"> Cell Position: </div>
<div class="input_container1">
<label class="toggle_label"> Off </label>
<div class="options_toggle_bar" id="iterationToggle">
<div class="toggle_button"> </div>
</div>
<label class="toggle_label"> On </label>
</div>
<div class="p1"> Cell Border: </div>
<div class="input_container1">
<label class="toggle_label"> Off </label>
<div class="options_toggle_bar" id="borderToggle">
<div class="toggle_button"> </div>
</div>
<label class="toggle_label"> On </label>
</div>
<hr>
<!-- Speed Slider -->
<div class="slider_container">
<div class="p1"> Delay: <span id="iterationSpeedValue"> </span> ms </div>
<input type="range" min="0" max="2000" value="750" class="slider" id="iterationSpeedSlider">
</div>
<hr>
<!-- Color Picker -->
<div class="color_wrapper">
<div class="color_container">
<label class="color_label"> Dead Cell </label>
<input type="color" class="color_picker" id="deadCell" name="deadCell" value="#ffffff">
</div>
<div class="color_container">
<label class="color_label"> Alive Border </label>
<input type="color" class="color_picker" id="aliveBorder" name="aliveBorder" value="#000000">
</div>
</div>
<div class="color_wrapper">
<div class="color_container">
<label class="color_label"> Alive Cell </label>
<input type="color" class="color_picker" id="aliveCell" name="aliveCell" value="#000000">
</div>
<div class="color_container">
<label class="color_label"> Dead Border </label>
<input type="color" class="color_picker" id="deadBorder" name="deadBorder" value="#777777">
</div>
</div>
</div>
</div>
<!-- About window to provide information on Wolfram's Nearest Neighbor -->
<div id="aboutContainer" class="about_container">
<div id="aboutContent" class="about_content">
<span class="close">× </span>
<h2> About Parallel Wolfram's Nearest Neighbor Simulator </h2>
<h3> User Guide </h3>
<p> Visit the Documentation page: <a href="documentation.html#ParallelWNN"> Go to Documentation! </a> </p>
<h3> Background </h3>
<p>
This simulator was developed to explore Stephen Wolfram's work on 1-dimensional cellular automata, in particular, his
Nearest Neighbor rules that use simple computational systems to produce complex emergent behaviors. Stephan Wolfram,
born August 29, 1959, is a highly regarded computer scientist, mathematician, and entrepreneur, and also the founder
and CEO of Wolfram Research, the company behind Mathematica, Wolfram|Alpha, and other computational tools. Wolfram's
Nearest Neighbor refers to how each cell in a 1-dimensional array interacts with its adjacent neighbors based on certain
rules. In 1-dimensional cellular automata, there is a row of cells, each of which can be in one of a finite number of
states. At each time step, the state of each cell evolves according to a rule based on its current state and the states
of its neighboring cells.
</p>
<h3> Purpose </h3>
<p>
The study of 1-dimensional cellular automata, particularly nearest neighbor interactions, has the following purposes:
</p>
<ul>
<li>
Understanding Emergent Behavior
</li>
<ul>
<li>
One primary purpose is to understand how complex patterns and behavior emerge from simple local interactions. By
studying how individual cells in a cellular automaton interact with their nearest neighbors, researchers can uncover
fundamental principles of self-organization and emergent phenomena. Beyond mathematics and computer science, this has
wide-ranging applications in biology, physics, sociology, and economics.
</li>
</ul>
<li>
Exploring Computational Universality
</li>
<ul>
<li>
Stephen Wolfram's research in this area has demonstrated that even simple cellular automata rules can
exhibit computational
universality, meaning they can perform any computation that a Turing machine can compute. A Turing machine
is a theoretical
mathematical model of computation proposed by Alan Turing in 1936. It consists of an infinite tape divided
into cells, each capable
of storing a symbol (0 or 1) and a read/write head that can move left or right along the tape. The
machine operates based on
a finite set of states and transition rules. The machine can perform three
actions based on the current state: write a symbol, move
the head, and transition to a new state. Turing machines serve as a theoretical model of computation because
they can simulate any
algorithmic process, prove theorems about computability and complexity, and provide a foundation for
understanding the limits and
capabilities of algorithms. Overall, Wolfram's insight has profound implications for theoretical computer
science and the nature of computation.
</li>
</ul>
<li>
Educational Tool
</li>
<ul>
<li>
Cellular automata, in this case, 1-dimensional simulations, serve as excellent educational tools for teaching
complex systems and computational
thinking. They provide a tangible way for students to explore pattern formation, rule-based
systems, and emergent behavior. By
experimenting with different rules and initial conditions, students can gain intuitive insights into how
simple rules can lead to complex outcomes.
Wolfram's Nearest Neighbor is especially useful because of its simplicity as a 1-dimensional simulation that
only considers adjacent neighbors. Yet,
it produces a large variation of complex systems, many of which resemble the pattern of Pascal's Triangle.
</li>
</ul>
<li>
Research Tool
</li>
<ul>
<li>
Researchers use cellular automata as models for studying various phenomena, such as pattern formation,
biological processes, and physical systems.
The simplicity of the rules and the ability to simulate large-scale systems make cellular automata valuable
tools for exploring theoretical questions
and generating hypotheses for further study. In particular, Wolfram's Nearest Neighbor predominantly aids
mathematical and computational studies.
However, it has some applications in applicable biological research and analysis of physical systems.
</li>
</ul>
<li>
Mathematical Insights
</li>
<ul>
<li>
While cellular automata are not inherently mathematical objects, they provide insights into mathematical
concepts such as chaos theory, fractals,
and computational complexity. Studying the behavior of cellular automata can lead to new mathematical
insights and conjectures, particularly in the
realm of dynamical systems and discrete mathematics. Specifically, Wolfram's Nearest Neighbor provides
insight into pattern recognition, dimensionality
reduction of the data while preserving its local and global structure, cluster analysis (partitioned data
points into groups based on their similarity
or proximity), data interpolation and extrapolation (missing or incomplete data points are estimated based
on the nearest neighbors), and topological
analysis (topological properties of the space: connectivity, compactness, and dimensionality). Ultimately,
Wolfram's Nearest Neighbor provides immense
mathematical insight through its vast applications in data analytics, categorization, continuity, and
predictions.
</li>
</ul>
</ul>
<h3> Summary </h3>
<p>
In the context of cellular automaton, Wolfram's Nearest Neighbor algorithm can be applied to determine the state
transition
rules for each cell based on the states of its neighboring cells in the lattice. A cell, in mathematics, is a
basic unit
within a lattice, or rather, a rectangular grid consisting of discrete cells arranged in rows and columns,
forming a
multi-dimensional grid that acts as a spatial framework for cellular automaton evolution. Each cell typically
has a finite number of possible states, and the evolution of the cellular automaton is determined by rules
that govern cell state change over time by using neighboring cell states. A cell state refers explicitly to
the
condition or value associated with a cell within a cellular automaton, commonly represented in binary states
(dead/alive),
which is used for this simulation. The grid structure allows for the simulation of dynamic systems and the
emergence of
complex behaviors from simple local rules, such as rules 0-255 (2^8 rules). The rules change how the
neighboring cells
(left and right) determine the next cell state. The simulation can be completed with varying rule sets, lattice
sizes, and
iterations and each alteration will produce a unique result. Additionally, the Nearest Neighbor algorithm
can be done with
a finite or infinite lattice, such that an infinite lattice is unbounded with respect to neighbors
where out-of-bound neighbors
are 0 and become bounded. A finite lattice must be handled with null boundaries (cells outside of the
lattice bounds have
no influence on the evolution of the system) or periodic boundaries (edges of the lattice wrap around to connect
with the opposite edge).
In this case, the parallel algorithm enforces that the current lattice of cells is used to determine the cell
states within the entire following lattice; there is one uniform computation that acts as a parallel transition from
one iteration to another. Overall, cellular automata are discrete computational models composed of a grid of cells
that iteratively evolve using a set mathematical rule.
</p>
</div>
</div>
<div class="Dustin"></div>
</body>
</html>