Forest-Fire-Simulation/index.html at main · DLQuake/Forest-Fire-Simulation · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="./img/icon.jpg" type="image/x-icon">
	<title>Projekt: Pożar lasu</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/style.css">
</head>

<body>
	<div class="big-container">
		<div class="jumbotron mt-4 text-center">
			<div class="d-flex align-items-center justify-content-center">
				<img src="./img/icon.jpg" alt="Icon of forest fire simulation" width="50" class="ml-2">
				<h1 class="display-4"><b>Symulacja Pożar Lasu</b></h1>
				<img src="./img/icon.jpg" alt="Icon of forest fire simulation" width="50" class="ml-2">
			</div>
			<p class="lead"><b>Autor: Dominik Lewczyński</b></p>
			<p class="lead"><b>Numer indeksu: 155099</b></p>
		</div>

		<div class="row mb-4">
			<div class="col-md-6">
				<div>
					<h2>Opis projektu</h2>
					<p style="text-align: justify;">
						Projekt "Symulacja Pożaru Lasu" to interaktywna symulacja automatu komórkowego, który modeluje
						rozprzestrzenianie się pożaru w lesie. Automat reprezentuje poszczególne komórki, które mogą
						przyjmować różne stany: drzewo, płonące drzewo, spalone drzewo lub pusta komórka. Symulacja
						rozpoczyna się losowym rozmieszczeniem drzew na planszy, a użytkownik ma możliwość zainicjowania
						pożaru poprzez kliknięcie w wybrane miejsce. Celem jest obserwacja, jak pożar rozprzestrzenia
						się w zależności od zdefiniowanych reguł.
					</p>
				</div>

				<div>
					<h2>Instrukcja</h2>
					<p>
						<b>1. Dostosuj parametry symulacji:</b>
						<ul>
							<li>Użyj formularza po prawej stronie, aby zmienić rozmiar komórki, szerokość i wysokość siatki
								oraz gęstość drzew, prawdopodobieństwo spalenia sąsiedniego drzewa i szybkość animacji.</li>
							<li>Kliknij przycisk "Zatwierdź zmiany", aby zatwierdzić nowe ustawienia.</li>
						</ul>
					</p>

					<p>
						<b>2. Zainicjuj pożar:</b>
						<ul>
							<li>Na planszy kliknij na wybrane drzewo (zielone kwadraty), aby zainicjować pożar.</li>
							<li>Pożar rozprzestrzenia się zgodnie z zdefiniowanymi regułami.</li>
						</ul>
					</p>

					<p>
						<b>3. Obserwuj i analizuj:</b>
						<ul>
							<li>Śledź rozwój pożaru na planszy.</li>
							<li>Statystyki nad planszą informują o ilości żywych drzew i spalonych drzew.</li>
						</ul>
					</p>

					<p>
						<b>4. Komunikat o spaleniu lasu:</b>
						<ul>
							<li>Po całkowitym spaleniu lasu pojawi się komunikat o spaleniu.</li>
						</ul>
					</p>
				</div>
			</div>

			<div class="col-md-6">
				<div id="controls-container">
					<h2>Ustawienia Symulacji</h2>

					<div class="form-group">
						<label for="cell-size">Rozmiar pojedynczej komórki (w pikselach):</label>
						<input type="number" class="form-control" id="cell-size" value="0">
					</div>

					<div class="form-group">
						<label for="grid-width">Szerokość siatki (w pikselach):</label>
						<input type="number" class="form-control" id="grid-width" value="0">
					</div>

					<div class="form-group">
						<label for="grid-height">Wysokość siatki (w pikselach):</label>
						<input type="number" class="form-control" id="grid-height" value="0">
					</div>

					<div class="form-group">
						<label for="tree-density">Gęstość drzew:</label>
						<input type="range" class="form-control-range" id="tree-density" min="0" max="100" step="1" value="0">
						<output for="tree-density" id="tree-density-output">0 %</output>
					</div>

					<div class="form-group">
						<label for="fire-prob">Prawdopodobieństwo spalenia:</label>
						<input type="range" class="form-control-range" id="fire-prob" min="0" max="100" step="1" value="0">
						<output for="fire-prob" id="fire-prob-value">0 %</output>
					</div>

					<div class="form-group">
						<label for="animation-speed">Szybkość animacji:</label>
						<input type="range" class="form-control-range" id="animation-speed" min="0" max="60" step="1" value="0">
						<output for="animation-speed" id="animation-speed-value">0 FPS</output>
					</div>

					<button class="btn btn-primary" onclick="applyChanges()">Zatwierdź zmiany</button>
				</div>
			</div>


		</div>

	</div>

	<div id="statistics-container" class="mb-4"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<script src="./js/jquery.scrollTo.min.js"></script>
	<script src="./js/scrollto.js"></script>
	<script src="./js/app.js"></script>
	<script src="./js/Move_Statistic_To_Canvas.js"></script>
</body>

</html>