-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgame_of_life.html
93 lines (78 loc) · 3.55 KB
/
game_of_life.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> The Game of Life </title>
<link rel="stylesheet" href="style.css">
<script defer src="navbar.js"></script>
<script type="text/javascript" src="scripts/webgl_utils.js"></script>
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield; /* For Firefox */
}
</style>
</head>
<body>
<header>
<nav-bar></nav-bar>
</header>
<section class="main-content">
<h1> The Game of Life </h1>
<div class="game-of-life">
<p>
The Game of Life was devised by the mathematician John Conway.
The rules are simple. At a given moment in time, a cell is
either alive or dead. A cell interacts with its 8 neighbors at
every time step. If a live cell has fewer than two live
neighbors, it dies. If a live cell has two or three live
neighbors, it survives. If it has more than three, it dies. If
a dead cell has exactly three live neighbors, it comes alive.
</p>
<p>
The default board contains a single glider. You can randomize
the board, or you can click a cell to switch it to/from alive
from/to dead.
</p>
<canvas id="gameOfLifeCanvas" width="1024" height="512" style="border:1px solid #000000;"></canvas>
<button id="gameOfLifePause"> Run </button>
<button id="gameOfLifeReset"> Reset </button>
<p>
The randomize button will run through all the cells,
turning them alive with a probability you can set with
the input field. It defaults to 0.5.
<p>
<button id="gameOfLifeRandomize"> Randomize </button>
<input id="gameOfLifeRandomProb" type="number" placeholder="Random Probability"
min="0" max="1" style="width: 30px;"
>
<div>
<script src ="scripts/game_of_life.js"></script>
</div>
<p>
The program works by rendering back and forth between two
textures. Upon CPU updates, the board is buffered to the
currently active framebuffer. The value in the red channel of
the texture represents a cell's status. A good next step would
be to utilize the other 4 channels, and try to map each
quadrant of the board to a particular channel.
</p>
The fragment shader runs a 3x3 kernel over the board. The
perimeter of the kernel is all 1s, and there's an 9 in the
middle. The 1s count the number of surrounding alive cells,
and the 9 bumps that sum if the current cell is alive. The
9 is an idea I got from Inigo Quilez. Initially, I had nested
branches in the shader - one to check if the current cell was
alive or dead, and then nested update rules. This is correct,
but by inflating the sum for living cells, you can
unambiguously map the convolution sum in a single level of
branching.
</div>
</section>
</body>
</html>