-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsample.html
144 lines (124 loc) · 5.61 KB
/
sample.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>bartificer.ca.Automaton Demo - Conway's Game of Life</title>
<!-- Load jQuery 3 from the official CDN -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- load the bartificer.ca API -->
<script type="text/javascript" src="./lib/bartificer.ca.js"></script>
<!-- Add the JavaScript code to initialise a Cellular Automaton -->
<script type="text/javascript">
// a globally scoped variable to hold the automaton object
let sampleCA;
// state objects to represent alive and dead
const alive = new bartificer.ca.State(true, 'Alive');
const dead = new bartificer.ca.State(false, 'Dead');
// a render function to render live cells green and dead cells red
function renderRedGreen($td, s){
// render a true state as green, and false as red
if(s && s.value() == true){
$td.css('background-color', 'Green');
}else{
$td.css('background-color', '#ff9999');
}
}
// an initialisation function to randomly set each cell to alive or dead
function randomState(){
return Math.random() < 0.5 ? alive : dead;
}
// a step function that implements Conway's game of life
function lifeStep(currentState, neighbourStates){
// calcualte the number of live neighbours
let numLiveNeighbours = 0;
neighbourStates.forEach(function(s){
if(s !== null && s.value() == true) numLiveNeighbours++;
});
// apply the rules based on the current state
if(currentState.value() == true){
// currently alive - apply rules 1 to 3
// rule 1
if(numLiveNeighbours < 2) return dead;
// rule 3
if(numLiveNeighbours > 3) return dead;
}else{
// currently dead - apply rule 4
if(numLiveNeighbours === 3) return alive;
}
// default to no change (incorporates rule 2)
return currentState;
}
// add a document ready event handler
$(function(){
// use the constructor to build an automaton
sampleCA = new bartificer.ca.Automaton(
$('#game_of_life_container'), // use the div as the container
100, 200, // make it a 200x100 grid
lifeStep, // pass the game of life step function
{
renderFunction: renderRedGreen, // pass our red/green render function
initialState: randomState // initialise each cell to a random boolean
}
);
// log the geneated automaton object so we can have a look inside
// it in the JavaScript console if we want
console.log(sampleCA);
// add a click handler to the respawn button
$('#respawn_btn').click(function(){
sampleCA.setState(randomState);
});
// add a click handler to the step button
$('#step1_btn').click(function(){
sampleCA.step();
});
// add a click handler to the play and stop buttons
$('#start_btn').click(function(){
sampleCA.start();
});
$('#stop_btn').click(function(){
sampleCA.stop();
});
// add a change handler to the speed slider
$('#speed_rng').change(function(){
var fps = $(this).val(); // read the frames per sec from the slider
var ms = Math.round(1000 / fps); // convert fps to milliseconds delay
sampleCA.autoStepIntervalMS(ms); // save the new step into the CA
}).change();
// add a generation change event handler to update the counter
sampleCA.generationChange(function(){
$('#game_of_life_generation > tt').text(sampleCA.generation());
}).generationChange();
});
</script>
<!-- Stype the Automaton -->
<style type="text/css">
/* style the cells in the automaton */
table.bartificer-ca-automaton{
border-collapse: collapse;
border: 1px solid black;
margin: 3px;
}
td.bartificer-ca-cell{
width: 5px;
height: 5px;
}
</style>
</head>
<body>
<header><h1>A Sample Cellular Automaton - Conway's Game of Life</h1></header>
<main>
<form action="javascript:void(0);">
<nav>
<label id="game_of_life_generation">Generation: <tt></tt></label>
<button type="button" id="respawn_btn">Respawn</button>
<button type="button" id="step1_btn">Step Forward 1x</button>
<button type="button" id="start_btn">Start Auto Run</button>
<button type="button" id="stop_btn">Stop Auto Run</button>
<label>Speed <input type="range" id="speed_rng" min=1 max=10 step="0.01"></label>
</nav>
</form>
<div id="game_of_life_container"></div>
<p>For more information on Conway's Game of Life <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" target="_blank" rel="noopener">see this Wikipedia article</a>.</p>
</main>
</body>
</html>