-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (133 loc) · 6.18 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Life-like Cellular Automaton</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="./fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="js/game.js"> </script>
<script src="js/rules.js"> </script>
</script>
</head>
<body>
<h3><span class="greenify"><i class="fa fa-leaf"></i> Life</span>-like Cellular Automaton</h3>
<div class="control-panel">
<div class="generations-counter">
Generation: <span id="generation-count"></span>
</div>
<div class="buttons-container">
<a href="#" onclick="startSimulation()" class="button-link">Start</a>
<a href="#" onclick="stopSimulation()" class="button-link">Stop</a>
<a href="#" onclick="stepSimulation()" class="button-link">Step</a>
<a href="#" onclick="resetSimulation()" class="button-link">Reset</a>
</div>
<div class="select-menu">Rules:
<select id="selectRules">
<option>Life B3/S23</option>
<option>Replicator B1357/S1357</option>
<option>Seeds B2/S</option>
<option>Diamoeba B35678/S5678</option>
<option>2x2 B36/S125</option>
<option>Day/Night B3678/S34678</option>
<option>Morley B368/S245</option>
<option>Anneal B4678/S35678</option>
</select>
</div>
<div class="slide-bars">
<label> Simulation speed:
<input type="range" min="1" max="9" value="3"
onchange="updateSpeedValue(this.value)" id="speed-control" />
<span id="simulation-speed">3 FPS</span>
</label>
<br />
<label> Seed probability:
<input type="range" min="0" max="100" value="10"
onchange="updateProbabilityValue(this.value)" id="seed-probability-control" />
<span id="seed-probability">10%</span>
</label>
</div>
<script type="text/javascript">
function updateProbabilityValue(newProbabilityValue)
{
document.getElementById("seed-probability").innerHTML=newProbabilityValue + "%";
seedPercent = parseInt(document.getElementById("seed-probability-control").value);
seedProbability = seedPercent / 100;
}
function updateSpeedValue(newSpeedValue)
{
document.getElementById("simulation-speed").innerHTML=newSpeedValue + " FPS";
speedFPS = parseInt(document.getElementById("speed-control").value);
clearInterval(interval);
delayTime = 1000 / speedFPS;
interval = setInterval(function () {
if (runState === true) {
newGame.computeNextGeneration();
generationCount += 1;
document.getElementById("generation-count").innerHTML = generationCount;
render();
}
}, delayTime);
}
</script>
</div>
<div class="display">
<script src="js/simulation.js"> </script>
<div class="explanation">
<p><b>Instructions:</b></p>
<ul>
<li>
<b>Start</b> to run the simulation.
</li>
<li>
<b>Stop</b> to pause the simulation.
</li>
<li>
<b>Step</b> to step one generation forward.
</li>
<li>
<b>Reset</b> to re-seed the cells and return to the 0th generation.
</li>
<li>
<b>Simulation speed</b> sets the frames per second.
</li>
<li>
<b>Seed probability</b> sets the probabilty that a cell is alive (orange) when the grid is reset.
</li>
<li>
<b>Rules</b> provides a select menu for different types of <a href="#content-div" class="fancybox">cellular automaton rules</a>.
</li>
<li>
<b>Click on the grid</b> to draw out your own initial pattern. Then, click start to watch it evolve!
</li>
</ul>
</div>
</div>
<div style="display: none">
<div id="content-div"><b>An explanation of cellular automaton rules:</b><br />This cellular automaton engine performs its calculations on an infinite two-dimensional grid of square cells, each of which is in one of two possible states, alive or dead. Every cell's mortality in the subsequent generation is determined by its Moore neighborhood, which are the eight cells that are horizontally, vertically, or diagonally adjacent. The rules that determine whether a cell is born, remains alive, or dies causes the cellular automaton to evolve in interesting ways. A popular example of these rules is <a href="http://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a>, also known simply as Life. Since Life's inception, new similar cellular automata have been developed. The standard Game of Life is symbolised as "B3/S23": a cell is "<b>B</b>orn" if it has exactly 3 neighbours, a cell "<b>S</b>tays alive" if it has 2 or 3 living neighbours, or the cell dies otherwise. Try different sets of rules to see different patterns emerge.</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'autoSize': false,
'width': 750,
'height': 300,
beforeShow: function () {
$(".fancybox-skin").css("backgroundColor", "#0d3c55");
}
});
svgPanZoom('.viz', {
panEnabled: false,
zoomEnabled: true,
controlIconsEnabled: true
});
});
</script>
</body>
</html>