forked from ktranfaglia1/Celite
-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.html
636 lines (636 loc) · 65.3 KB
/
documentation.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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
<!--
File: documentation.html
Author: Kyle Tranfaglia
Purpose: HTML structure for the Documentation page to explain the features of the simulators
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> Documentation - 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/documentation.css"> <!-- Link to home specific CSS styles -->
<link rel="icon" href="images/Cellular_automata_icon.png"> <!-- Link page icon -->
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <!-- Connect to online Javascript library for sidebar functionality -->
<script type="module" src="js/documentation/documentation.js"> </script> <!-- Connect Javascript for documentation 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> Learn The Program! </h1> <hr>
</header>
<div class="doc_container">
<!-- Navigation sidebar -->
<div class="sidebar">
<ul class="main_menu">
<!-- category -->
<li class="menu_item">
<span class="menu_title"> General WNN </span>
<!-- headers -->
<ul class="submenu">
<li> <a href="#boundaryConditions" class="subtitle"> Boundary Conditions </a> </li>
<li> <a href="#logBox" class="subtitle"> Log Box </a> </li>
<li> <a href="#canvas1" class="subtitle"> Canvas </a> </li>
<li> <a href="#WNNalgorithm" class="subtitle"> Algorithm Rule </a> </li>
</ul>
</li>
<!-- category -->
<li class="menu_item">
<span class="menu_title"> Parallel WNN </span>
<!-- headers -->
<ul class="submenu">
<li> <a href="#primaryToolbar1" class="subtitle"> Primary Toolbar </a> </li>
<li> <a href="#secondaryToolbar1" class="subtitle"> Secondary Toolbar </a> </li>
<li> <a href="#options1" class="subtitle"> Options </a> </li>
</ul>
</li>
<!-- category -->
<li class="menu_item">
<span class="menu_title"> Sequential WNN </span>
<!-- headers -->
<ul class="submenu">
<li> <a href="#primaryToolbar2" class="subtitle"> Primary Toolbar </a> </li>
<li> <a href="#secondaryToolbar2" class="subtitle"> Secondary Toolbar </a> </li>
<li> <a href="#setupmode" class="subtitle"> Setup Mode </a> </li>
<li> <a href="#options2" class="subtitle"> Options </a> </li>
</ul>
</li>
<!-- category -->
<li class="menu_item">
<span class="menu_title"> Game of Life </span>
<!-- headers -->
<ul class="submenu">
<li> <a href="#primaryToolbar3" class="subtitle"> Primary Toolbar </a> </li>
<li> <a href="#canvas2" class="subtitle"> Canvas </a> </li>
<li> <a href="#GOLalgorithm" class="subtitle"> Algorithm Rule </a> </li>
</ul>
</li>
<!-- category -->
<li class="menu_item">
<span class="menu_title"> Insights & FAQS </span>
<!-- headers -->
<ul class="submenu">
<li> <a href="#faqs" class="subtitle"> FAQS </a> </li>
<li> <a href="#keyboardShortcuts" class="subtitle"> Keyboard Shortcuts </a> </li>
</ul>
</li>
</ul>
</div>
<!-- All documentation content -->
<div class="doc_content">
<h2 class="head"> Welcome to Celite </h2>
<h6> Overview </h6>
<div class="p3">
Celite is a collection of three cellular automaton simulators: Parallel Wolfram's Nearest Neighbor, Sequential Wolfram's Nearest Neighbor, and Game of Life. Each of these simulators serves as an educational and research tool to assist the exploration of emergent behaviors, computational universality, and mathematical insights within cellular automata. The program allows users to experiment with distinct rulesets, from Conway's Game of Life, which illustrates complex behavior through simple birth and survival rules, to Wolfram's Nearest Neighbor models that explore pattern formation and complexity using rule-based evolution. The Sequential Wolfram model updates cells one at a time, while the Parallel Wolfram model updates all cells simultaneously, showcasing the impact of synchronous versus asynchronous evolution. The goal of the program is to be an interactive platform for studying behavioral diversity in cellular automata, encouraging insights into the foundations of computation and the dynamics of self-organizing systems.
</div>
<h6> Parallel Wolfram's Nearest Neighbor </h6>
<div class="p3">
Wolfram's Nearest Neighbor cellular automata, developed by Stephen Wolfram, are simple rule-based systems where each cell in a 1D grid updates its state based on its current state and the states of its two immediate neighbors. The parallel model updates all cells simultaneously at each step, following a predetermined rule number (0-255) that dictates how states transition. These rules give rise to various patterns, ranging from stable, repeating forms to chaotic, complex behavior, making the Parallel Wolfram model an ideal tool for exploring fundamental concepts in pattern formation, symmetry, and computational complexity.
</div>
<h6> Sequential Wolfram's Nearest Neighbor </h6>
<div class="p3">
The Sequential Wolfram Nearest Neighbor model, like the parallel version, operates on a 1D grid where each cell's new state depends on its own state and those of its two neighbors according to a specific rule (0-255). However, in the sequential model, cells update one at a time in a configured order, creating a distinct dynamic as each update immediately affects subsequent cells. This asynchronous updating introduces unique patterns and transitional behavior that highlight the effects of sequential processing, making it useful for studying the role of update order in cellular automata and the emergence of complex, non-repetitive patterns.
</div>
<h6> Game of Life </h6>
<div class="p3">
Conway's Game of Life, created by mathematician John Conway in 1970, is a cellular automaton that simulates evolving cell patterns on a 2D grid through simple rules. Each cell is either alive or dead, and transitions based on the states of its neighbors: live cells survive with two or three live neighbors, while overpopulation or underpopulation leads to death, and dead cells with exactly three neighbors become alive. From simple initial configurations, the game produces complex and often unpredictable patterns, including static shapes, oscillators, and spaceships that move across the grid. The Game of Life, known for its Turing completeness, serves as a model for studying complexity, computation, and emergent behaviors, making it a popular tool for exploring mathematical and computational concepts.
</div> <br> <br>
<h2 class="head"> General Wolfram's Nearest Neighbor </h2>
<h6 id="boundaryConditions"> Boundary Conditions </h6>
<div class="p3">
<u>Infinite</u>: The lattice is conceptually, and in this simulation, visibly extended infinitely in horizontal direction. Upon iteration, the lattice expands to the left and right side in order to simulate an infinitely sized lattice, as in, a lattice with infinite dead cells (white, 0). Since a cells state depends on its left and right neighbor, the infinite simulation expands on the edges per iteration so that the edge cells always have a left and right neighbor.
</div>
<div class="p4">
<i> Note: </i> Infinite simulations are only available for Parallel Wolfram's Nearest Neighbor. <br>
<i> Warning: </i> Large lattice sizes and iteration amounts may result in performance issues or simulation issues upon iteration. Performances issues are computational or memory bottlenecks that may result in delay, lag, or application crashes. Simulation issues entail an appearance of an all black canvas that is caused by an abundance of alive cells (black, 0) and a small cell size. Handle both issues by lowering iteration amounts and/or lattice sizes.
</div>
<div class="p3">
<u>Finite</u>: The lattice has a fixed size such that the cells at the edges of the lattice do not have neighbors beyond the boundaries. Therefore, there must be a method to handle the edge cells such as a periodic or null boundary conditions.
</div>
<div class="p4">
<i> Periodic: </i> The lattice is treated as if it were wrapped around, forming a torus-like shape. When a cell reaches the edge of the lattice, its neighbors on the opposite side of the lattice are considered as its direct neighbors. This creates a seamless continuity in the behavior as if the lattice repeats itself indefinitely. <br>
<i> Null: </i> Imposes a fixed value zero for cells beyond the edges of the lattice. Thus, every edge cell with an out of bounds neighbor considers the neighbor to be dead (white, 0) and will use it in the next cell state calculation. This effectively creates a "wall" at the edges of the lattice.
</div>
<div class = p3>
Boundary conditions may be selected on the right side of the primary toolbar. For Parallel Wolfram's Nearest Neighbor, finite condition checkboxes appear and canvas will be reset upon toggle. <br>
<i> Keyboard Shortcut: </i> ALT + U (Parallel Wolfram's Nearest Neighbor)
</div>
<h6 id="logBox"> Log Box </h6>
<div class="p3">
<u>Loaded Information</u>: For all input boxes, including "Iterations," "Rule," and "Lattice," the log box will display the value stored once the submit button is clicked. An error messgae will be displayed if the input is not valid. The loaded information logs are designed to inform of input errors and document the input submissions. Users should utilize the log box to ensure the program is functioning properly and that correct information has been entered.
</div>
<div class="p3">
<u>Successful Actions</u>: All button clicks and toggles will display a log message upon success. This includes "Start," "Iterate," "Clear," "Download PDF," "Download PNG," "Lattice Fill," "Random Fill," "Cell Color," and all toggle bars. Additional messages are provided in Sequential Wolfram's Nearest Neighbor for setup mode. The log will include a specific message regarding the success of the action and what was completed. The success log may be useful in debugging simulation errors and tracking previous operations.
</div>
<div class="p3">
<u>Errors</u>: All error messages will be printed in red. Error messages are only produced during invalid input events for the "Iterations," "Rule," and "Lattice," input boxes. Additional error messages are provided in Sequential Wolfram's Nearest Neighbor for setup mode. Thus, any input that is not a number or outside of the range for the input box will produce an error message with the provided invalid input.
</div>
<div class="p3">
Only three log box messages will be displayed at a time and the most recent message is displayed at the top of the log box. Once the log box is full, a new message will push out the oldest message, such that the new message will appear at the top, the bottom message will be deleted, and the rest will slide down. All successful logs including loaded information logs will be printed in black text, while error logs will be printed in red text.
</div>
<h6 id="canvas1"> Canvas </h6>
<div class="p3">
<u>General Description</u>: The canvas is the gray region enclosed by a black border below the primary and secondary toolbars. It has a fixed width and a dynamic height. Changing the lattice size will not impact the width of the canvas. Rather, cells will be added until they reach the edge of the canvas, then the cells will be evenly resized to fit the fixed canvas width. As for the height, the canvas will dynamically extend downard as space is needed (as iterations occur). Upon using the "Iterate" button, the canvas will seemingly expand and simulate in the same instance, but using the "Start" will show a slower expansion prioir to the simulation.
</div>
<div class="p3">
<u>Cell State Toggle</u>: While inside the canvas, clicking cells will toggle them between dead (white, 0) and alive (balck, 1) states to set a starting position (index = 0) for the simulation. Only the starting state cells can be toggled. Cells can be toggled even if a simulation has already completed; clicking "Start" or "Iterate" will overwrite the canvas. Cell borders will automatically be removed on the starting lattice for lattice sizes over 200.
</div>
<div class="p3">
<u>Zoom</u>: While inside the canvas, using the scroll wheel on a mouse will zoom on a specified location. The x-axis mouse location determines the horizontal zoom focus and the y-axis mouse location determines the vertical zoom focus. When only the starting iteration is present on the canvas (index = 0), the y-axis mouse location has no impact on the zoom focus location; the vertical zoom focus, in this case, will always be on the starting lattice in the canvas. Scroll up to zoom in and scroll down to zoom out. The maximum outward zoom is set to the default zoom factor for the canvas.
</div>
<div class="p4">
<i> Warning: </i> The zoom feature may encounter performance issues with large lattice sizes and iteration amounts. Performances issues are computational or memory bottlenecks that may result in delay, lag, or application crashes.
</div>
<div class="p3">
An iteration counter that displays the current iteration index can be found above the top left border of the canvas.
</div>
<h6 id="WNNalgorithm"> Algorithm Rule </h6>
<div class="p3">
The Wolfram Nearest Neighbor algorithm works by updating the state of each cell, which can either be dead (0) or alive (1), in a one-dimensional lattice based on the state of that cell and its immediate neighbors (left and right). For each cell in the lattice, we consider it together with its left and right neighbors as a triplet. For example, if the left cell is 1, the current cell is 0, and the right cell is 1, the triplet is 101. The key idea is that each triplet of cells (left, current, right) forms a 3-bit binary number, which is used to determine the next state of the current cell according to a rule. The rule outcomes are determined by the binary conversion of the rule number such that the possible outcomes in a state change table (read top to bottom) stem from the binary digits of the 8-bit binary representation (read left-to-right). The 8-bit binary representation of the rule number allows for eight possible outcomes and also restricts rule numbers to be within 2^8 [0, 255]. The rule is essentially a lookup table that specifies the next state of the current cell based on the triplet. The algorithm determines the next state of the current cell by looking at the triplet with its neighbors and using the rule table to map that triplet to a new state. <br> <br>
For example, here is the state change table for rule 30: <br>
If the left cell is 1, the current cell is 1, and the right cell is 1 (111), the next state of the current cell is 0. <br>
If the left cell is 1, the current cell is 1, and the right cell is 0 (110), the next state of the current cell is 0. <br>
If the left cell is 1, the current cell is 0, and the right cell is 1 (101), the next state of the current cell is 0. <br>
If the left cell is 1, the current cell is 0, and the right cell is 0 (100), the next state of the current cell is 1. <br>
If the left cell is 0, the current cell is 1, and the right cell is 1 (011), the next state of the current cell is 1. <br>
If the left cell is 0, the current cell is 1, and the right cell is 0 (010), the next state of the current cell is 1. <br>
If the left cell is 0, the current cell is 0, and the right cell is 1 (001), the next state of the current cell is 1. <br>
If the left cell is 0, the current cell is 0, and the right cell is 0 (000), the next state of the current cell is 0. <br>
<i> *Notice that this example uses rule 30, which has an 8-bit binary number of 00011110. The binary number from left-to-right is the output of the state table above, read top down. This is the case for all possible rule numbers 0 - 255, as the 8-bit binary representation of the rule number determines the state change table output. </i> <br> <br>
The algorithm follows the steps: <br>
1. Initialize the lattice with an initial configuration. <br>
2. For each time step and cell in the lattice, identify the left neighbor, the current cell, and the right neighbor, form the triplet and convert it to a binary number, then use the rule table to determine the next state of the current cell. <br>
3. Update the lattice synchronously (all cells are updated simutaneously after each time step) for parallel simulation or asynchronously (cells are updated sequentially in a particular order after each time step) for sequential simulation. <br>
4. Repeat for the desired number of time steps (iteration amount). <br> <br>
For parallel simulation (synchronous updating), all the cells in the lattice are updated at the same time based on the current state of the system. This means that the next state for each cell is computed based on the neighbors' values before any updates happen. All cells are updated simultaneously in a single time step. For sequential simulation (asynchronous updating), the cells are updated one at a time in some configured sequence. This means that by the time a given cell is updated, some of its neighbors might have already been updated, while others have not. The next state of each cell is computed based on the most recent available states of its neighbors, which could include updated cells.
</div> <br> <br>
<h2 class="head" id="ParallelWNN"> Parallel Wolfram's Nearest Neighbor </h2>
<h6 id="primaryToolbar1"> Primary Toolbar </h6>
<div class="p3">
<u>Iteration Input Box</u>: Enter the number of iterations to complete. Manipulating the iteration amount will change emerging patterns by limiting or expanding the application of a rule. The iteration amount is inclusive such that it goes the entered number of iterations beyond the starting iteration (starting state, index = 0). Using the "Start" or "Iterate" buttons will simulate up to the entered iteration amount.
</div>
<div class="p4">
<i> Finite Input Restrictions: </i> Non-negative real numbers in range [0, 9000]. Decimal values will be truncated. <br>
<i> Infinite Input Restrictions: </i> Non-negative real numbers in range [0, 3500]. Decimal values will be truncated. <br>
<i> Keyboard Shortcut: </i> ALT + J
</div>
<div class="p3">
<u>Rule Input Box</u>: Enter a rule number to determine the behavior of the cellular automaton. The rule number encodes the transition rules for each cell based on its neighborhood configuration. Upon input, the rule numbers are converted into eight digit binary numbers, then the binary number is reversed and indexed. For a current time step, the cell and its direct neighbors are taken in as a binary representation (Dead - White - 0, Alive - Black - 1). The three binary numbers are read left-to-right and converted to decimal, and the decimal value (range [0,7]) corresponds to an index in the reversed binary number. The value at the given index is the new state of the cell. The rule is applied as a parallel update, meaning every cell in the lattice is updated simutaneously upon each iteration.
</div>
<div class="p4">
<i> Input Restrictions: </i> Non-negative real numbers in range [0, 255]. Decimal values will be truncated. <br>
<i> Keyboard Shortcut: </i> ALT + K
</div>
<div class="p3">
<u>Lattice Input Box</u>: Enter the lattice size set the number of cells in the lattice (row of cells). Manipulating the lattice size will impact the complexity of the system as it will change the interactions and possibilities for emergent patterns and may impact the affects of the boundary condition. The size of the individual cells will decrease as the lattice size increases to fit the lattice in the canvas region.
</div>
<div class="p4">
<i> Input Restrictions: </i> Non-negative real numbers in range [1, 1000]. Decimal values will be truncated. <br>
<i> Keyboard Shortcut: </i> ALT + L
</div>
<div class = p3>
Must click the "Submit" button to the right of each input box to apply the input. The canvas will be reset upon submit. <br>
<i> Keyboard Shortcut: </i> ENTER (submits input box in focus or submits all if none in focus)
</div>
<h6 id="secondaryToolbar1"> Secondary Toolbar </h6>
<div class="p3">
<u>Start/Stop Button</u>: Click "Start" to incrementally iterate up to the total iteration amount (x iterations beyond starting lattice, index = 0). The iterations will complete at the delay rate, defaulted to 750 ms. Upon green "Start" button click, the button will convert to a red "Stop" button. Clicking the "Stop" button will pause the simulation such that the iterations will stop. The button will then convert back to a "Start" button and, if clicked, will resume iterating until the total iteration amount. Upon completion of the total iteration amount, the button will be set back to a "Start" button.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + ENTER
</div>
<div class="p3">
<u>Iterate Button</u>: Click "Iterate" to immediately (in time of process completion) iterate up to the total iteration amount (x iterations beyond starting lattice, index = 0). The delay rate will not impact the iteration speed upon click of the "iterate" button.
</div>
<div class="p4">
<i> Recommendations: </i> In consideration of lattice size, process completion may be take long for large total iteration amounts. Consider limiting the total iteration amount or adjusting lattice size as needed. <br>
<i> Keyboard Shortcut: </i> ALT + I
</div>
<div class="p3">
<u>Clear/Reset Button</u>: Click "Clear" to refresh the canvas, as in, remove the results of the simulation and default the starting state. All iterations beyond the starting iteration (index = 0) will be deleted and the starting iteration will be set to all dead cells (white, 0). The currently stored values for "Iterations," "Rule," and "Lattice" will remain, as they are not impacted by the clear event. Upon Iteration beyond the starting lattice, the "Clear" button is converted to a "Reset" button. Click the "Reset" button to clear all iterations, except for the starting lattice. Thus, the simulation is cleared but the state of the initial starting lattice remains, acting as a simulation reset. Clicking the "Reset" button will convert it back to a "Clear" button.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + C
</div>
<div class="p3">
<u>About Button</u>: Click "About" to open an overlaying window to describe the simulator. The window contains information about the background of Wolfram's Nearest Neighbor Parallel, the purpose of its use and study, and a summary of its application. The window may be longer than the page, so a vertical scroll bar will be available to navigate the entire window. The window may be closed by clicking the "x" at the top right of the window or clicking anywhere outside the windows borders.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + A
</div>
<h6 id="options1"> Options </h6>
<div class="p3">
<u>Download PDF Button</u>: Click "Download PDF" to download a PDF file containing an extraction of the canvas. Even if the canvas, after a simulation, is very large, the pdf will contain the entire canvas in one scaled PDf page. The PDF file will be placed in the downloads folder on the local device.
</div>
<div class="p4">
<i> File Name: </i> "ParallelWNN" + "I" + Number of Iterations + "R" + Rule Number + "L" + Lattice Size + ".pdf" <br>
<i> Keyboard Shortcut: </i> ALT + N
</div>
<div class="p3">
<u>Download PNG Button</u>: Click "Download PNG" to download a PNG file containing an extraction of the canvas. Even if the canvas, after a simulation, is very large, the PNG will contain the entire canvas in one scaled PNG image. The PNG file will be placed in the downloads folder on the local device.
</div>
<div class="p4">
<i> File Name: </i> "ParallelWNN" + "I" + Number of Iterations + "R" + Rule Number + "L" + Lattice Size + ".png" <br>
<i> Keyboard Shortcut: </i> ALT + P
</div>
<div class="p3">
<u>Lattice Fill Button</u>: Click "Lattice Fill" to completely fill the starting lattice with alive cells (black, 1). Every cell in the starting lattice will be set to alive, despite the lattice size. Essentially, this acts as an inverse default starting position and may work well with some rules. The Canvas will reset upon click.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + G
</div>
<div class="p3">
<u>Random Fill Button</u>: Click "Random Fill" to randomly fill the starting lattice with alive cells (black, 1). Each cell in the starting lattice will have a 50% chance to be set to alive. In theory, as the lattice size increases, about half of the cells will be dead and about half will be alive. The Canvas will reset upon click.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + M
</div>
<div class="p3">
<u>Cell Position Toggle</u>: Click the toggle bar labeled "Cell Position" to toggle the hovering cell position box on and off. 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, and the cell index, starting at index 0. Lattice iteration and cell index are seperated by a colon (iteration number : cell index).
</div>
<div class="p4">
<i> Format </i>: Lattice Iteration : Cell Index <br>
<i> Keyboard Shortcut: </i> ALT + W
</div>
<div class="p3">
<u>Cell Border Toggle</u>: Click the toggle bar labeled "Cell Border" to toggle the black borders that enclose a cell. The border will only be toggled for cells in iterations beyond the starting state such that the starting state cells (index = 0) are not impacted by the toggle. This may be useful in improving the appearance of an image generated with a larger lattice size on the canvas and may help with pattern recognition and analysis. The Canvas will be updated upon click.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + X
</div>
<div class="p3">
<u>Delay Slider</u>: Click and hold the slider labeled "Delay" to alter the delay time (ms) between iterations when using the "Start" button. Alternatively, click the slider and use the left and right arrow keys to change the delay value. Larger delays may be useful in analysing the transitions between iterations. Smaller delays display transitions between iterations very rapidly and is useful for documenting more general change over long intervals.
</div>
<div class="p4">
<i> Input Restrictions: </i> Values are in milliseconds in range [0, 2000]. <br>
<i> Keyboard Shortcut: </i> ALT + Y, then Left Arrow to decrease and Right Arrow to increase the value.
</div>
<div class="p3">
<u>Cell Color Boxes</u>: Click any of the four color boxes labeled "Alive Cell," "Dead Cell," "Alive Border," and "Dead Border" to open a color picker window. In the window, depending on the web-browser, there is a color selector that allows for full color customization for the selected region. The color picker uses a RGB based GUI built into HTML that allows for precise color selection, then applies the color to the specified cell region.
</div> <br> <br>
<h2 class="head" id="SequentialWNN"> Sequential Wolfram's Nearest Neighbor </h2>
<h6 id="primaryToolbar2"> Primary Toolbar </h6>
<div class="p3">
<u>Iteration Input Box</u>: Enter the number of iterations to complete. Manipulating the iteration amount will change emerging patterns by limiting or expanding the application of a rule. The iteration amount is inclusive such that it goes the entered number of iterations beyond the starting iteration (starting state, index = 0). Using the "Start" or "Iterate" buttons will simulate up to the entered iteration amount.
</div>
<div class="p4">
<i> Input Restrictions: </i> Non-negative real numbers in range [0, 9000]. Decimal values will be truncated. <br>
<i> Keyboard Shortcut: </i> ALT + J
</div>
<div class="p3">
<u>Rule Input Box</u>: Enter a rule number to determine the behavior of the cellular automaton. The rule number encodes the transition rules for each cell based on its neighborhood configuration. Upon input, the rule numbers are converted into eight digit binary numbers, then the binary number is reversed and indexed. For a current time step, the cell and its direct neighbors are taken in as a binary representation (Dead - White - 0, Alive - Black - 1). The three binary numbers are read left-to-right and converted to decimal, and the decimal value (range [0,7]) corresponds to an index in the reversed binary number. The value at the given index is the new state of the cell. The rule is applied as a parallel update, meaning every cell in the lattice is updated simutaneously upon each iteration.
</div>
<div class="p4">
<i> Input Restrictions: </i> Non-negative real numbers in range [0, 255]. Decimal values will be truncated. <br>
<i> Keyboard Shortcut: </i> ALT + K
</div>
<div class="p3">
<u>Lattice Input Box</u>: Enter the lattice size set the number of cells in the lattice (row of cells). Manipulating the lattice size will impact the complexity of the system as it will change the interactions and possibilities for emergent patterns and may impact the affects of the boundary condition. The size of the individual cells will decrease as the lattice size increases to fit the lattice in the canvas region. Changing the lattice size will automatically switch from simulate mode to setup mode to allow for the new lattice be configured with a cell ordering.
</div>
<div class="p4">
<i> Input Restrictions: </i> Non-negative real numbers in range [1, 1000]. Decimal values will be truncated. <br>
<i> Keyboard Shortcut: </i> ALT + L
</div>
<div class = p3>
Must click the "Submit" button to the right of each input box to apply the input. The canvas will be reset upon submit. <br>
<i> Keyboard Shortcut: </i> ENTER (submits input box in focus or submits all if none in focus)
</div>
<h6 id="secondaryToolbar2"> Secondary Toolbar </h6>
<div class="p3">
<u>Start/Stop Button</u>: Click "Start" to incrementally iterate up to the total iteration amount (x iterations beyond starting lattice, index = 0). The iterations will complete at the delay rate, defaulted to 750 ms. Upon green "Start" button click, the button will convert to a red "Stop" button. Clicking the "Stop" button will pause the simulation such that the iterations will stop. The button will then convert back to a "Start" button and, if clicked, will resume iterating until the total iteration amount. Upon completion of the total iteration amount, the button will be set back to a "Start" button.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + ENTER
</div>
<div class="p3">
<u>Iterate Button</u>: Click "Iterate" to immediately (in time of process completion) iterate up to the total iteration amount (x iterations beyond starting lattice, index = 0). The delay rate will not impact the iteration speed upon click of the "iterate" button.
</div>
<div class="p4">
<i> Recommendations: </i> In consideration of lattice size, process completion may be take long for large total iteration amounts. Consider limiting the total iteration amount or adjusting lattice size as needed. <br>
<i> Keyboard Shortcut: </i> ALT + I
</div>
<div class="p3">
<u>Clear/Reset Button</u>: Click "Clear" to refresh the canvas, as in, remove the results of the simulation and default the starting state. All iterations beyond the starting iteration (index = 0) will be deleted and the starting iteration will be set to all dead cells (white, 0). The currently stored values for "Iterations," "Rule," and "Lattice" will remain, as they are not impacted by the clear event. Upon Iteration beyond the starting lattice, the "Clear" button is converted to a "Reset" button. Click the "Reset" button to clear all iterations, except for the starting lattice. Thus, the simulation is cleared but the state of the initial starting lattice remains, acting as a simulation reset. Clicking the "Reset" button will convert it back to a "Clear" button.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + C
</div>
<div class="p3">
<u>Setup Button</u>: Click "Setup" to switch out of simulate mode and into setup mode. In setup mode, the cell ordering for the sequential algorithm may be selected. Click, or click and drag, the cells to chronologically number the cells in a desired order. A library of presets is available for quick and convenient cell ordering. Exit setup mode and enter simulate mode by clicking the "Simulate" button. For more information, click the "Help" button in setup mode.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + U
</div>
<h6 id="setupmode"> Setup Mode </h6>
<div class="p3">
<u>Simulate Button</u>: Click "Simulate" to switch out of setup mode and into simulate mode. In simulate mode, the dead and alive cells for sequential simulation may be selected. Click, or click and drag, the cells to toggle them between dead and alive. After switching to simulate mode, the configured cell ordering will automatically save, meaning that starting a simulation will use the selected ordering for the sequential algorithm. Note that if all cells were not ordered in setup mode, the cell ordering will default to a left-to-right order.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + ENTER
</div>
<div class="p3">
<u>Clear Button</u>: Click "Clear" to refresh the canvas, as in, remove all cell orderings from the order lattice to produce the default starting state. Note that there is not a reset feature to retrieve the previously cleared ordering.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + C
</div>
<div class="p3">
<u>Library Button</u>: Click "Library" to open an overlaying window with selectable preset cell ordering that will apply to the lattice. The window will contain a list of images and descriptions of cell orderings for sequential simulation that help produce unique and intriguing patterns in concordance with the rule selected in simulate mode. Click any of the images in the library to load the preset ordering to the lattice. The current cell ordering in the lattice will be cleared before applying the preset ordering from the Library. The window may be longer than the page, so a vertical scroll bar will be available to navigate the entire window. The window may be closed by clicking the "x" at the top right of the window or clicking anywhere outside the windows borders.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + L
</div>
<div class="p3">
<u>Help Button</u>: Click "Help" to open an overlaying window with information about setup mode. The information includes four main sections that provide answers to common questions about setup mode. It outlines the purpose and functionality of setup mode, how it relates to sequential simulation, how to configure the cell ordering, and how to utilize the ordering preset library. The window may be longer than the page, so a vertical scroll bar will be available to navigate the entire window. The window may be closed by clicking the "x" at the top right of the window or clicking anywhere outside the windows borders.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + P
</div>
<h6 id="options2"> Options </h6>
<div class="p3">
<u>Download PDF Button</u>: Click "Download PDF" to download a PDF file containing an extraction of the canvas. Even if the canvas, after a simulation, is very large, the pdf will contain the entire canvas in one scaled PDf page. The PDF file will be placed in the downloads folder on the local device.
</div>
<div class="p4">
<i> File Name: </i> "SequentialWNN" + "I" + Number of Iterations + "R" + Rule Number + "L" + Lattice Size + ".pdf" <br>
<i> Keyboard Shortcut: </i> ALT + N
</div>
<div class="p3">
<u>Download PNG Button</u>: Click "Download PNG" to download a PNG file containing an extraction of the canvas. Even if the canvas, after a simulation, is very large, the PNG will contain the entire canvas in one scaled PNG image. The PNG file will be placed in the downloads folder on the local device.
</div>
<div class="p4">
<i> File Name: </i> "SequentialWNN" + "I" + Number of Iterations + "R" + Rule Number + "L" + Lattice Size + ".png" <br>
<i> Keyboard Shortcut: </i> ALT + P
</div>
<div class="p3">
<u>Lattice Fill Button</u>: Click "Lattice Fill" to completely fill the starting lattice with alive cells (black, 1). Every cell in the starting lattice will be set to alive, despite the lattice size. Essentially, this acts as an inverse default starting position and may work well with some rules. The Canvas will reset upon click.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + G
</div>
<div class="p3">
<u>Random Fill Button</u>: Click "Random Fill" to randomly fill the starting lattice with alive cells (black, 1). Each cell in the starting lattice will have a 50% chance to be set to alive. In theory, as the lattice size increases, about half of the cells will be dead and about half will be alive. The Canvas will reset upon click.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + M
</div>
<div class="p3">
<u>Cell Position Toggle</u>: Click the toggle bar labeled "Cell Position" to toggle the hovering cell position box on and off. 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, and the cell index, starting at index 0. Lattice iteration and cell index are seperated by a colon (iteration number : cell index).
</div>
<div class="p4">
<i> Format </i>: Lattice Iteration : Cell Index <br>
<i> Keyboard Shortcut: </i> ALT + W
</div>
<div class="p3">
<u>Cell Border Toggle</u>: Click the toggle bar labeled "Cell Border" to toggle the black borders that enclose a cell. The border will only be toggled for cells in iterations beyond the starting state such that the starting state cells (index = 0) are not impacted by the toggle. This may be useful in improving the appearance of an image generated with a larger lattice size on the canvas and may help with pattern recognition and analysis. The Canvas will be updated upon click.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + X
</div>
<div class="p3">
<u>Delay Slider</u>: Click and hold the slider labeled "Delay" to alter the delay time (ms) between iterations when using the "Start" button. Alternatively, click the slider and use the left and right arrow keys to change the delay value. Larger delays may be useful in analysing the transitions between iterations. Smaller delays display transitions between iterations very rapidly and is useful for documenting more general change over long intervals.
</div>
<div class="p4">
<i> Input Restrictions: </i> Values are in milliseconds in range [0, 2000]. <br>
<i> Keyboard Shortcut: </i> ALT + Y, then Left Arrow to decrease and Right Arrow to increase the value.
</div>
<div class="p3">
<u>Cell Color Boxes</u>: Click any of the four color boxes labeled "Alive Cell," "Dead Cell," "Alive Border," and "Dead Border" to open a color picker window. In the window, depending on the web-browser, there is a color selector that allows for full color customization for the selected region. The color picker uses a RGB based GUI built into HTML that allows for precise color selection, then applies the color to the specified cell region.
</div> <br> <br>
<h2 class="head" id="GameofLife"> Game of Life </h2>
<h6 id="primaryToolbar3"> Primary Toolbar </h6>
<div class="p3">
<u>Start/Stop Button</u>: Click "Start" to incrementally iterate, one iteration at a time, until stopped. The iterations will complete at the delay rate, defaulted to 250 ms. Upon green "Start" button click, the button will convert to a red "Stop" button. Clicking the "Stop" button will pause the simulation such that the iterations will stop. The button will then convert back to a "Start" button and, if clicked, will resume iterating by one until stopped.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + ENTER
</div>
<div class="p3">
<u>Iterate Button</u>: Click "Iterate" to immediately iterate a single time such that one application of the state change algorithm will be applied. The delay rate will not impact the iteration speed upon click of the "iterate" button.
</div>
<div class="p4">
<i> Recommendations: </i> In consideration of lattice size, process completion may be take long for large total iteration amounts. Consider limiting the total iteration amount or adjusting lattice size as needed. <br>
<i> Keyboard Shortcut: </i> ALT + I
</div>
<div class="p3">
<u>Clear/Reset Button</u>: Click "Clear" to refresh the canvas, as in, remove all alive cells (black, 1) from the canvas to produce the default starting state; all cells will be set to dead state (white, 0). Upon Iteration beyond the starting state (iteration count > 0), the "Clear" button is converted to a "Reset" button. Click the "Reset" button to revert back to the starting position prior to iterating, as in, the previous configuration of dead and alive cells. Thus, the resulting canvas from the simulation is cleared but the state of the initial starting position remains, acting as a simulation reset. Clicking the "Reset" button will convert it back to a "Clear" button.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + C
</div>
<div class="p3">
<u>Library Button</u>: Click "Library" to open an overlaying window with selectable starting positions that will apply to the canvas. The window will contain a list of images and descriptions of starting positions that produce unique and intriguing patterns for the Game of Life simulation. Click any of the images in the library to load that preset to the canvas. The current canvas position will be cleared before applying the preset position from the Library. The window may be longer than the page, so a vertical scroll bar will be available to navigate the entire window. The window may be closed by clicking the "x" at the top right of the window or clicking anywhere outside the windows borders.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + L
</div>
<div class="p3">
<u>About Button</u>: Click "About" to open an overlaying window to describe the simulator. The window contains information about the background of Conway's Game of Life, the purpose of its use and study, and a summary of its application. The window may be longer than the page, so a vertical scroll bar will be available to navigate the entire window. The window may be closed by clicking the "x" at the top right of the window or clicking anywhere outside the windows borders.
</div>
<div class="p4">
<i> Keyboard Shortcut: </i> ALT + A
</div>
<div class="p3">
<u>Delay Slider</u>: Click and hold the slider labeled "Delay" to alter the delay time (ms) between iterations when using the "Start" button. Alternatively, click the slider and use the left and right arrow keys to change the delay value. Larger delays may be useful in analyzing the transitions between iterations. Smaller delays display transitions between iterations very rapidly and is useful for documenting more general change over long intervals.
</div>
<div class="p4">
<i> Input Restrictions: </i> Values are in milliseconds in range [0, 500]. <br>
<i> Keyboard Shortcut: </i> ALT + Y, then Left Arrow to decrease and Right Arrow to increase the value.
</div>
<div class="p3">
<u>Zoom Slider</u>: Click and hold the slider labeled "Zoom" to alter the zoom factor measured by percentage. Moving the slider to the left will decrease the zoom percentage factor and zoom outward, and moving the slider to the right will increase the zoom percentage factor and zoom inward. Using the zoom slider will always center the zoom to the center of the canvas.
</div>
<div class="p4">
<i> Input Restrictions: </i> Values are percentages in range [1, 100]. <br>
<i> Keyboard Shortcut: </i> ALT + Z, then Left Arrow to decrease and Right Arrow to increase the value.
</div>
<h6 id="canvas2"> Canvas </h6>
<div class="p3">
<u>General Description</u>: The canvas is the gray region enclosed by a black border below the primary toolbar. It has a fixed width and height for a given screen size, designed to fit the screen after scrolling below the header. The cells will always be evenly resized to fit the canvas dimensions. Thus, the amount of cells displayed in the canvas grid for the default 50% zoom factor is relative to the hight and width determined by the screen size. To adequately simulate the Game of Life, a buffer region calculates cell states beyond the visable canvas boundaries. If the computational boundary of the buffer region is reahced, the simulation will be forced to a halt (the state is no longer iterable) in order to maintain an accurate Game of Life enviornment.
</div>
<div class="p3">
<u>Cell State Toggle</u>: While inside the canvas, clicking cells will toggle them between dead (white, 0) and alive (balck, 1) states to set a starting position (index = 0) for the simulation. Additionally, click and hold, then move the cursor in any direction on the canvas to toggle all hovered cells to alive. Cells can be toggled at any point before, during, or after a session of iterations. Thus, a cell that is toggled at any point will impact the following iteration such that it will be applied to the state change algorithm. Cell borders will automatically be removed upon a zoom out action if the cells become too small.
</div>
<div class="p3">
<u>Zoom</u>: While inside the canvas, using the scroll wheel on a mouse will zoom on a specified location. The x-axis mouse location determines the horizontal zoom focus and the y-axis mouse location determines the vertical zoom focus. Scroll up to zoom in and scroll down to zoom out. If scrolled to the maximum outward zoom, the canvas will stop zooming out and recenter the view point. Additionally, while inside the canvas and holding the SHIFT key, click and hold, then move the cursor in any direction to traverse the canvas in the specified direction.
</div>
<div class="p3">
An iteration counter that displays the current iteration index can be found above the top left border of the canvas.
</div>
<h6 id="GOLalgorithm"> Algorithm Rule </h6>
<div class="p3">
The Game of Life is represented on a 2D grid where each cell has eight neighbors (top, bottom, left, right, and the four diagonals). A cell on the grid can either be dead (0) or alive (1), and the state of the cells change over discrete time steps according to the states of neighboring cells. Specifically, the state of each cell at the next time step is determined by its current state of the cell and the number of alive neighbors. <br> <br>
The algorithm Update Rules: <br>
1. Underpopulation: A living cell with fewer than 2 alive neighbors dies (due to loneliness). <br>
2. Survival: A living cell with 2 or 3 alive neighbors remains alive (survival). <br>
3. Overpopulation: A living cell with more than 3 alive neighbors dies (due to overcrowding). <br>
4. Reproduction: A dead cell with exactly 3 alive neighbors becomes a live cell (a new cell is born). <br> <br>
The algorithm follows the steps: <br>
1. Initialize: Set up the grid with some configuration: some cells marked as alive (1) and others as dead (0). <br>
2. Count Neighbors: For each cell, count the number of live neighbors in its neighborhood grid (eight neighbors). <br>
3. Apply Rules: For each cell, apply the rules to determine whether the cell will be alive or dead in the next time step. <br>
4. Update Grid: Update the grid to reflect the new states after applying the rules. <br>
5. Repeat: Continue iterating for multiple time steps to observe how the patterns evolve. <br> <br>
For example, consider a 3x3 grid with the initial configuration [(0,1,0), (0,1,0), (0,1,0)] (Flattened 2D array.) <br>
In this case, cells (1,0), (1,1), and (1,2) are alive (1), and the rest are dead (0). <br> <br>
Results after algorithm application: <br>
Cell (0,0): Dead (0), with 2 alive neighbors (0,1) and (1,0). It remains dead. <br>
Cell (0,1): Alive (1), with 1 alive neighbor (1,1). It dies due to underpopulation. <br>
Cell (0,2): Dead (0), with 2 alive neighbors (0,1) and (1,2). It remains dead. <br>
Cell (1,0): Alive (1), with 1 alive neighbor (1,1). It dies due to underpopulation. <br>
Cell (1,1): Alive (1), with 2 alive neighbors (1,0) and (1,2). It survives. <br>
Cell (1,2): Alive (1), with 1 alive neighbor (1,1). It dies due to underpopulation. <br>
Cell (2,0): Dead (0), with 2 alive neighbors (1,0) and (2,1). It remains dead. <br>
Cell (2,1): Alive (1), with 2 alive neighbors (1,1) and (2,0). It survives. <br>
Cell (2,2): Dead (0), with 2 alive neighbors (1,2) and (2,1). It remains dead. <br> <br>
Updated grid after one iteration: [(0,0,0), (1,1,1), (0,0,0)]. <br>
In this case, cells (0,1), (1,1), and (2,1) are alive (1), and the rest are dead (0). <br>
In this new state, a horizontal line of living cells has formed, showing the transformation from a vertical line of alive cells to a horizontal line after one iteration.
</div> <br> <br>
<h2 class="head"> Insights & FAQS </h2>
<h6 id="faqs"> Frequently Asked Questions </h6>
<div class="p3">
<i>What is the difference between infinite and finite simulation and periodic and null boundary conditions? </i>
</div> <br>
<div class="p4">
Infinite simulation conceptually and visibly extends the lattice in a horizontal direction.Upon iteration, the lattice expands to the left and right side in order to simulate an infinitely sized lattice, as in, a lattice with infinite dead cells (white, 0). Since a cells state depends on its left and right neighbor, the infinite simulation expands on the edges per iteration so that the edge cells always have a left and right neighbor. For finite simulation, the lattice has a fixed size such that the cells at the edges of the lattice do not have neighbors beyond the boundaries. Therefore, there must be a method to handle the edge cells such as a periodic or null boundary conditions. Note that infinite simulation is only available in Sequential Wolfram's Nearest Neighbor. With the periodic boundary, the lattice is treated as if it were wrapped around, forming a torus-like shape. When a cell reaches the edge of the lattice, its neighbors on the opposite side of the lattice are considered as its direct neighbors. This creates a seamless continuity in the behavior as if the lattice repeats itself indefinitely. As for the null boundary condition, it imposes a fixed value zero for cells beyond the edges of the lattice. Thus, every edge cell with an out of bounds neighbor considers the neighbor to be dead (white, 0) and will use it in the next cell state calculation. This effectively creates a "wall" at the edges of the lattice.
</div> <br>
<div class="p3">
<i>Why does the Game of Life simulation abruptly terminate and disable the 'start' and 'iterate' buttons?</i>
</div> <br>
<div class="p4">
The Game of Life algorithm will come to a force halt and disable further iterations when the computational boundary is met by a dead cell (Black, 1). Since the Game of Life requires an infinite grid size, as in, no boundary, but there is a computational limit to what can be effectively simulated, a computational boundary was set. The computational boundary is located well beyond the visable canvas boundary and was implemented to allow for a seemingly infinite simulation space as objects can go off the visible grid and come back into the visible canvas region. Once the computational boundary for the grid is reached, further iterations can not occur, so to continue simulating the 'Reset' or 'Clear' button must be used to remove the dead cell from the computational boundary region and enable iterations.
</div> <br>
<div class="p3">
<i>What is the prupose of the 'setup' and 'simulate' buttons, and why are they distinguished colors?</i>
</div> <br>
<div class="p4">
'Setup' and 'Simulate' are mode switch buttons. They switch between the standard simulation mode where the algorithm is applied to the lattice upon iteration, and the pre-simulation (setup) mode where a cell ordering is configured to prepare for simulation. These buttons are different colors, compared to the standard feature buttons, as they are not features, but mode switches that change the available features. The distinguishing colors are used to indicate the significance of the buttons and to seperate them from the simulation/pre-simulation features.
</div> <br>
<div class="p3">
<i>Why is the application experiencing performance issues, such as slowness, lag, or crashes?</i>
</div> <br>
<div class="p4">
Performance issues can arise from computational or memory bottlenecks, particularly since this application is coded in JavaScript. JavaScript runs locally on the user's device rather than on a server, so the application's performance heavily depends on the device's processing power, available memory, and other local resources. If the device is underpowered, running multiple intensive processes, or lacks sufficient memory or computational power, it can lead to slowness, lag, or crashes. Consider lowering controllable simulation factors such as lattice size or iteration amounts to lessen memory and computational demands. Additionally, restarting the device or closing other applications or web-browser tabs may improve performance.
</div> <br>
<div class="p3">
<i>What is the difference between sequential and parallel for Wolfram's Nearest Neighbor?</i>
</div> <br>
<div class="p4">
In Wolfram's Nearest Neighbor, the parallel (synchronous) model updates all cells at once, creating patterns based on the entire grid's current state, which keeps each update consistent across cells. This parallel updating can produce symmetrical and often stable or repeating patterns. In contrast, the sequential (asynchronous) model updates cells one at a time in a set order, meaning each cell's update immediately influences the next. This can lead to unique, sometimes chaotic patterns that diverge from the parallel model due to the cumulative effect of each cell's change. Thus, parallel updating leads to consistent evolution, while sequential updating can introduce variations and complex transitions.
</div> <br>
<div class="p3">
<i>Why does the mode switch to 'Setup' when the button is not clicked?</i>
</div> <br>
<div class="p4">
The program automatically switches from 'Simulate' to 'Setup' mode whenever the lattice size changes. This is because altering the lattice size affects the number and arrangement of cells, and the sequential simulation requires a specific cell order. Without reconfiguring the cell order for the new lattice size, the program cannot correctly simulate the sequential algorithm. Therefore, switching to 'setup' mode ensures that a new configuration is established to support accurate simulation.
</div> <br>
<div class="p3">
<i>Why are the values written in the input boxes not being used?</i>
</div> <br>
<div class="p4">
The values entered in the input boxes may not be applied in the simulation for two reasons. First, they might fall outside the accepted range specified in the simulation documentation (found in the primary toolbar). More commonly, the issue arises if the 'Submit' button is not clicked after entering new values. For changes to take effect, either click the 'Submit' button or press the ENTER key. Pressing ENTER while an input box is selected will submit only that value, while pressing ENTER with no box selected will submit all entered values.
</div> <br>
<div class="p3">
<i>What are the rule numbers and why are there 256 rules?</i>
</div> <br>
<div class="p4">
The rule numbers (0-255) in Wolfram's Nearest Neighbor model represent the 256 possible rules for updating each cell based on its current state and the states of its two neighbors. Each rule defines a unique way for a cell to transition between alive and dead based on the neighbor combinations. Since there are three cells in each neighborhood (the cell itself and its two neighbors), there are 2^3 = 8 possible configurations of neighbor states, and each configuration can result in either a 0 (dead) or 1 (alive) outcome. This gives 2^8 = 256 possible rules in total, each represented by a unique number from 0 to 255.
</div> <br>
<div class="p3">
<i>Why is the canvas entirely black after simulation?</i>
</div> <br>
<div class="p4">
The canvas likely only appears to be entirely black as zooming in on the canvas may reveal the accurate simulation visualization. This can occur when the there is an abundance of alive cells (black, 0) and a small cell size. This may be the result of a large iteration amount and/or lattice size in combination with a rule number that tends to simulate large quantities of alive cells (black, 0), especially when using infinite simulation. This adverse event is not an incorrect simulation; it is a visual issue caused by the overwhelming contrast of numerous alive cells (black, 0) on a crowded canvas (many small cells).
</div> <br>
<div class="p3">
<i>Why is the cell order not saving?</i>
</div> <br>
<div class="p4">
The cell order configuration will only be saved when all cells in the lattice are fully ordered. For the sequential simulation to work accurately, each cell must have a specific position in the sequence. If the configuration leaves any cells unordered, clicking 'Simulate' will instead apply a default left-to-right ordering across the lattice. To ensure the custom order is saved, verify that every cell is assigned a position before starting the simulation.
</div> <br> <br>
<h6 id="keyboardShortcuts"> Keyboard Shortcuts </h6>
<div class="shortcut_container">
<div class="p3 flex_item">
<u>Sequential Wolfram's Nearest Neighbor</u> <br>
<b> Simulate Mode </b> <br>
<i> Submit: ENTER </i> <br>
<i> Iteration Input Box: ALT + J </i> <br>
<i> Rule Input Box: ALT + K </i> <br>
<i> Lattice Input Box: ALT + L </i> <br>
<i> Start/Stop Button: ALT + ENTER </i> <br>
<i> Iterate Button: ALT + I </i> <br>
<i> Clear Button: ALT + C </i> <br>
<i> Options Button: ALT + O </i> <br>
<i> Setup Button: ALT + U </i> <br>
<i> Download PDF Button: ALT + N </i> <br>
<i> Download PNG Button: ALT + P </i> <br>
<i> Lattice Fill Button: ALT + G </i> <br>
<i> Random Fill Button: ALT + M </i> <br>
<i> Iteration Toggle: ALT + W </i> <br>
<i> Border Toggle: ALT + X </i> <br>
<i> Delay Slider: ALT + Y </i> <br>
<b> Setup Mode </b> <br>
<i> Simulate Button: ALT + ENTER </i> <br>
<i> Clear Button: ALT + C </i> <br>
<i> Library Button: ALT + L </i> <br>
<i> Help Button: ALT + P </i> <br>
</div>
<div class="p3 flex_item">
<u>Parallel Wolfram's Nearest Neighbor</u> <br>
<i> Submit: ENTER </i> <br>
<i> Iteration Input Box: ALT + J </i> <br>
<i> Rule Input Box: ALT + K </i> <br>
<i> Lattice Input Box: ALT + L </i> <br>
<i> Start/Stop Button: ALT + ENTER </i> <br>
<i> Iterate Button: ALT + I </i> <br>
<i> Clear Button: ALT + C </i> <br>
<i> Options Button: ALT + O </i> <br>
<i> About Button: ALT + A </i> <br>
<i> Download PDF Button: ALT + N </i> <br>
<i> Download PNG Button: ALT + P </i> <br>
<i> Lattice Fill Button: ALT + G </i> <br>
<i> Random Fill Button: ALT + M </i> <br>
<i> Bound Toggle: ALT + U </i> <br>
<i> Iteration Toggle: ALT + W </i> <br>
<i> Border Toggle: ALT + X </i> <br>
<i> Delay Slider: ALT + Y </i> <br>
</div>
<div class="p3 flex_item" >
<u>Game of Life</u> <br>
<i> Submit: ENTER </i> <br>
<i> Start/Stop Button: ALT + ENTER </i> <br>
<i> Iterate Button: ALT + I </i> <br>
<i> Clear/Reset Button: ALT + C </i> <br>
<i> Library Button: ALT + L </i> <br>
<i> About Button: ALT + A </i> <br>
<i> Delay Slider: ALT + Y </i> <br>
<i> Zoom Slider: ALT + Z </i> <br>
</div>
</div>
</div>
</div>
<a href="#" class="hovering_button"> Top ▲ </a> <!-- Hovering back to top button -->
</body>
</html>