-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas.html
70 lines (68 loc) · 3.25 KB
/
canvas.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>The Game of Life</title>
<link rel="stylesheet" type="text/css" href="css/gof.css">
</head>
<body>
<div class="info">
<p> The game proceeds state by state according to the following rules:
<ul>
<li> If a cell is alive with two or three neighbors, it remains alive. Otherwise it dies</li>
<li> If a cell is dead with three neighbors, it becomes alive. Otherwise it remains dead </li>
</ul>
A neighborhood is defined as the 8 cells immediately surrounding a given cell.
</p>
<h2> Controls </h2>
<ul>
<li> Click on a cell to toggle it on/off.</li>
<li> The RLE text area can read RLE formatted game of life patterns. You can find RLE pattern files <a href="http://conwaylife.com/wiki/Category:Patterns">here</a>. Clicking read RLE will load
the RLE into the smaller canvas.</li>
<li> Shift click to copy the pattern in the smaller canvas.</li>
<li> The Go/Stop button will toggle iteration.</li>
<li> The soup button fills the board with a random configuration. </li>
<li> The save button saves a snapshot of the current state. The RLE button on a save generates the RLE for that snapshot. The LD button will reload the state to the main canvas. </li>
</ul>
</div>
<div class="wrapper">
<canvas id="gol-canvas" width="900" height="500"></canvas>
<button id="toggle_step_btn" class="controls">Go/Stop</button>
<button id="reset_btn" class="controls">Reset</button>
<button id="toggle_grid_btn" class="controls">Grid</button>
<button id="soup_btn" class="controls">Soup</button>
<button id="save_btn" class="controls">Save</button>
<label for="rate_slider" class="controls">Rate:</label>
<input class="controls" id="rate_slider" step="-1" type="range" max="1000" min="50" value="1000">
<label for="zoom_slider" class="controls">Zoom:</label>
<input class="controls" id="zoom-slider" step="-1" type="range" max="20" min="5" value="10">
<div class="saves">
<ol id="save-list">
</ol>
</div>
<div class="rle_area">
<textarea id="rle_textarea" rows="6" cols="70">Enter RLE here.</textarea>
<button id="rle_submit_btn">Read RLE</button>
<button id="rle_generate_btn">Generate RLE</button>
</div>
<div class="saved_pattern">
<canvas id="pattern_canvas" width="300" height="300"></canvas>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/patterns.js"></script>
<script src="js/utils.js"></script>
<script src="js/ids.js"></script>
<script src="js/observables.js"></script>
<script src="js/rate_controller.js"></script>
<script src="js/TDArray.js"></script>
<script src="js/gof.js"></script>
<script src="js/projection.js"></script>
<script src="js/grid.js"></script>
<script src="js/canvas_set.js"></script>
<script src="js/rle.js"></script>
<script src="js/state.js"></script>
<script src="js/save_list.js"></script>
<script src="js/control.js"></script>
</body>
</html>