forked from ktranfaglia1/Celite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwolframSQ.html
299 lines (299 loc) · 19.9 KB
/
wolframSQ.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
<!--
File: wolframSQ.html
Author: Kyle Tranfaglia
Purpose: HTML structure for the Wolfram's Nearest Neighbor Sequential 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> Sequential 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/wolframSQ.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/wolframSQ/generateLattice.js" crossorigin="anonymous"> </script> <!-- Connect Javascript for lattice calculation -->
<script type="module" src="js/wolframSQ/cellClass.js"> </script> <!-- Connect Javascript for cell creation -->
<script type="module" src="js/wolframSQ/displayLattice.js"> </script> <!-- Connect Javascript for lattice display -->
<script type="module" src="js/wolframSQ/UIFunctionality.js"> </script> <!-- Connect Javascript for user interface -->
<script type="module" src="js/wolframSQ/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 class="head"> Wolfram's Nearest Neighbor Sequential </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>
<label class="input_label"> Boundary: </label>
<!-- Create periodic checkbox -->
<div class="visible_checkbox_container" id="periodicCheckBox">
<input type="checkbox" class="checkbox_select">
<label class="checkbox_label"> Periodic </label>
</div>
<!-- Create null checkbox -->
<div class="visible_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="setupButton" class="mode_button simulation_button"> Setup </button>
<button id="simulateButton" class="mode_button setup_button"> Simulate </button>
<button id="voidButton" class="setup_button"> Clear </button>
<button id="libraryButton" class="setup_button"> Library </button>
<button id="helpButton" class="setup_button"> Help </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>
<!-- Library for Algorithm Presets -->
<div id="libraryContainer" class="library_container">
<div id="libraryContent" class="library_content">
<span class="close">× </span>
<h2> Algorithm Configuration Library </h2>
<div class="library_box">
<h3> Random </h3>
<p> Cells are ordered in a numerically random configuration. </p>
<div class="center_img">
<button id="random" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> Left to Right </h3>
<p> Cells are ordered in a chronological sequence beginning from the leftmost cell (left/start lattice edge) and progressing towards the rightmost cell (right/end lattice edge). This is the default sequential ordering. </p>
<div class="center_img">
<button id="left2right" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> Right to Left </h3>
<p> Cells are ordered in a chronological sequence beginning from the rightmost cell (right/end lattice edge) and progressing towards the leftmost cell (left/start lattice edge). </p>
<div class="center_img">
<button id="right2left" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> Center Outward </h3>
<p> Cells are ordered in a alternating chronological structure beginning at the lattice center and progressing towards the edges. For even lattice sizes, the first cell is the left center cell in the lattice, the second cell is the right center cell, and this alternating sequence continues outward. </p>
<div class="center_img">
<button id="centerOutward" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> Edges Inward </h3>
<p> Cells are ordered in a alternating chronological structure beginning at the lattice edges and progressing towards the center. The first cell is the leftmost cell in the lattice, the second cell is the rightmost cell, and this alternating sequence continues inward. </p>
<div class="center_img">
<button id="edgesInward" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> Center Outward - Reversed </h3>
<p> Cells are ordered in a center outward structure where for even lattice sizes, the first cell is the right center cell, the second cell is the left center cell, and this alternating sequence continues outward. </p>
<div class="center_img">
<button id="centerOutwardR" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> Edges Inward - Reversed </h3>
<p> Cells are ordered in a edges inward structure where the first cell is the rightmost cell in the lattice, the second cell is the leftmost cell, and this alternating sequence continues inward. </p>
<div class="center_img">
<button id="edgesInwardR" class="library_img"> </button>
</div>
</div>
<div class="library_box">
<h3> N-Skip </h3>
<p> Cells are ordered in a modular pattern based on an interval of N. This creates a weaving sequence, where every Nth cell is chronologically ordered, forming a repeated pattern. Enter an N-value below to set the modularity for the weaving sequence. Invalid inputs will default to N = 2. N is restricted to the following range: 2 <= N <= Lattice Size. </p>
<div class="center_img">
<button id="nSkip" class="library_img"> </button>
</div>
<!-- Container for n input box -->
<div class="input_container1">
<label for="nInputBox" class="input_label"> N-value: </label>
<input type="text" id="nInputBox" class="simulation_input" placeholder="Enter modular value...">
<button id="nSubmit" class="submit_button"> Enter </button>
</div>
</div>
</div>
</div>
<div id="helpContainer" class="about_container">
<div id="helpContent" class="about_content">
<span class="close">× </span>
<h2> Algorithm Configuration Assistance </h2>
<h3> User Guide </h3>
<p> Visit the Documentation page: <a href="documentation.html#SequentialWNN"> Go to Documentation! </a> </p>
<h3> What is Setup Mode? </h3>
<p> Setup mode is an interface unique to the Sequential Wolfram Nearest Neighbor Simulator. It is activated
upon page load (opening the simulator), changing the lattice size, and clicking the "setup" button. In
setup mode, simulation is not possible as this mode is designed to prepare and configure the algorithm
for sequential simulation. By default, setup mode applies a left-to-right configuration for sequential
simulation, but the user has complete control of algorithm configuration at any point. Selecting a cell
ordering is significant to the sequential simulator as it greatly expands the capabilities and uniqueness of
the simulation; it dramatically surpasses the uniqueness and complexity of the Parallel Wolfram Nearest Neighbor
Simulator. Selecting an order is not mandatory nor necessary as a default order will be applied, yet it is
strongly recommended to configure an ordering in setup mode and explore the vast capabilities of the program.
</p>
<h3> What is sequential simulation? </h3>
<p> In the sequential implementation of the Wolfram nearest neighbor algorithm, the state of each cell in a lattice is
updated one at a time, with each update using the results from previous cells in the same iteration. This causes a
cascading effect, where the outcome for a cell depends on the already updated state of its neighbors, which may have
been changed earlier in the same iteration. The algorithm examines each cell in the lattice one at a time, updating
it based on its nearest neighbors' states. However, unlike a parallel version where all cells are updated simultaneously,
the state of each cell is altered as the algorithm proceeds across the lattice in the configured order. Since the state
of a cell is modified before moving to another cell, it may be influenced by the newly updated state of the previous cell,
leading to a dependency chain within the same iteration. In each iteration, the algorithm performs updates sequentially,
meaning that the effect of earlier updates propagates forward, and the end of the lattice may look quite different from
the start, depending on the order in which cells were updated. This can lead to more complex, evolving behavior
within a single iteration due to the cascading updates, making it more natural for modeling processes where local changes
propagate gradually.
</p>
<h3> How to configure cell ordering? </h3>
<p> In setup mode, clicking a cell does not toggle it between dead and alive states, but rather, it sets the chronological
ordering such that a number will be set to the cell. The numbers are stored in a stack in descending order from
one to the lattice size. Clicking a cell will set it to the number at the top of the stack, so if an order was already half
selected and the cell set as six was selected again, it would be removed and, six would be put back in the stack, meaning that
the next cell clicked would be ordered at six. Keep in mind that the configuration has no limitations as long as each cell is
given an order in the sequence. For instance, it is not required that the sequence follows a particular pattern, nor do
a cell and its neighbor need to be close in order. Ordering the cells with a number simply communicates to the algorithm
which cell to first apply the algorithm and then what cell to proceed, up until the final ordered cell in which the iteration
is complete. Cells may be numbered by clicking them individually or by clicking and dragging, which will chronologically
order the cells that were clicked during the event. Note that the cell ordering can be changed anytime by clearing with
the "Clear" button or clicking an already ordered cell in setup mode. If changing the ordering while in simulate mode
is desired, click the "setup" button to view the current cell ordering and alter it as desired. Additionally, cell
ordering can be skipped (simulate without selecting order) as it will default to a left-to-right ordering.
</p>
<h3> What is the Library? </h3>
<p> The library in setup mode is a collection of sequential ordering presets, designed for quick and convenient ordering.
The presets provided are common orderings that produce interesting outputs in concordance with the rule number selected in
simulate mode. While the presets are relatively basic and patterned (except for random ordering), they produce complex
models. The library allows users to efficiently apply these presets by clicking a preset image button. The current cell
ordering in the lattice will be cleared before applying the preset ordering from the library. The ordering will be displayed
in setup mode, and then the 'Simulate' button must be clicked in order to proceed to simulation mode, which will use the
selected ordering. Before entering simulate mode, the cell ordering displayed with the library preset may be altered as
desired, ensuring users can maintain their efficiency while using the library.
</p>
<h3> How to identify a cell index? </h3>
<p> When selecting an order with a large lattice size, it may be difficult to determine which cell is the 120th or 300th in
the lattice. In order to identify the cell without tediously counting all the cells before it, use the "Cell Position" feature.
The cell position is a hovering iteration number and cell index calculator that follows the mouse inside the canvas. Anytime the
mouse is on a lattice within the canvas, the box will update with the lattice iteration that is being hovered (which is always 0
in setup mode) and the cell index, starting at index 0. Lattice iteration and cell index are seperated by a colon (iteration number
: cell index). Thus, with the cell position toggled on, hover over the cell in need of identification and reference the value after
the colon (rightmost value). Since the cell position toggle is located in the options window, which is not accessable in setup mode,
it must be toggled by either using the keyboard shortcut ALT + 'W' or by clicking the cell position toggle bar within the options
window in simulate mode. Alternatively, use a preset ordering in the library to conveniently ensure all cells are ordered.
</p>
</div>
</div>
<div class="Dustin"></div>
</body>
</html>