-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (106 loc) · 5.76 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
<!doctype html>
<!--
Wildland fire spread dynamics simulator based on:
Almeida, Rodolfo Maduro and Macau, Elbert E N, "Stochastic cellular automata
model for wildland fire spread dynamics," Journal of physics. Conference
series, vol. 285, p. 012038, 2011, doi: 10.1088/1742-6596/285/1/012038.
Copyright (C) 2020 Ramon Novoa [email protected]
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wildland Fire Spread Dynamics Simulator</title>
<meta name="description" content="Stochastic cellular automata model for wildland fire spread dynamics simulation">
<meta name="author" content="Ramon Novoa">
<link rel="stylesheet" href="https://nramon.github.io/FireDynamicsAutomata/css/styles.css?v=1.0">
</head>
<body>
<script src="https://nramon.github.io/FireDynamicsAutomata/js/fire_dynamics_simulator.js"></script>
<!-- Start the simulator. -->
<script>
window.onload = function() {
// Read the width of the grid from the querystring part of the URL.
let width = window.location.search.split('?size=')[1] || 200;
// Instantiate the simulator.
window.simulator = new FireDynamicsSimulator(
"wildland", // Canvas ID.
70, // Vegetation density.
40, // Probability of burning a cell in the Moore neighborhood.
10, // Probability of transitioning from burning to burnt.
width, // Grid width.
2, // Canvas scale factor.
5 // Simulation speed.
);
}
</script>
<div id="simulator">
<h1>Wildland Fire Spread Dynamics Simulator</h1>
<p>Click on the canvas to start fires. Click on <i>Run</i> to start the simulation.</p>
<p><i>Burn probability</i> is the probability of fire burning a neighboring cell.</p>
<p><i>Burnt probability</i> is the probability of a burning cell becoming burnt.</p>
<!-- Simulation control buttons. -->
<div id="buttons">
<button id="reset" title="Reset the simulation" onclick="window.simulator.reset()">Reset</button>
<button id="zoom_in" title="Zoom in by a factor of x2" onclick="window.simulator.zoom_in()">Zoom +</button>
<button id="zoom_out" title="Zoom out by a factor of x2" onclick="window.simulator.zoom_out()">Zoom -</button>
<button id="step" title="Run a single simulation step" onclick="window.simulator.step()">Step</button>
<button id="run" title="Run a continuous simulation" onclick="window.simulator.run(); document.getElementById('step').disabled=true;">Run</button>
<button id="stop" title="Stop a running simulation" onclick="window.simulator.stop(); document.getElementById('step').disabled=false;">Stop</button>
</div>
<!-- Simulation control sliders. -->
<div id="sliders">
<!-- Vegetation density. -->
<div>
<label for="vegetation_prob">Vegetation density</label>
<input type="range" min="0" max="100" value="70" class="slider"
oninput="this.nextElementSibling.value = this.value / 100.0"
onpointerup="window.simulator.set_vegetation_prob(this.value); window.simulator.reset(true);"/>
<output for="vegetation_prob">0.7</output>
</div>
<!-- Probability of burning a cell in the Moore neighborhood. -->
<div>
<label for="burning_prob">Burn probability </label>
<input id="burning_prob" type="range" min="0" max="100" value="40" class="slider"
oninput="this.nextElementSibling.value = this.value / 100.0"
onpointerup="window.simulator.set_burning_prob(this.value);" />
<output for="burning_prob">0.4</output>
</div>
<!-- Probability of transitioning from burning to burnt. -->
<div>
<label for="burnt_prob">Burnt probability </label>
<input id="burnt_prob" type="range" min="0" max="100" value="10" class="slider"
oninput="this.nextElementSibling.value = this.value / 100.0"
onpointerup="window.simulator.set_burnt_prob(this.value);" />
<output for="burnt_prob">0.1</output>
</div>
<!-- Simulation speed. -->
<div>
<label for="sim_speed">Simulation speed </label>
<input id="sim_speed" type="range" min="1" max="10" value="5" class="slider"
oninput="this.nextElementSibling.value = this.value"
onpointerup="window.simulator.set_sim_speed(this.value);" />
<output for="sim_speed">5</output>
</div>
</div>
<!-- Step counter. -->
<div>
<label>Step:</label>
<output id="step_count">0</output>
</div>
<!-- Wildland canvas. -->
<div id="canvas">
<canvas id="wildland"></canvas>
</div>
</div>
</body>
</html>