Untitled

<!DOCTYPE html>

<html lang="pl">
	<head>
		<meta charset="utf-8" >
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
		<link rel="icon" href="media/swarm.jpg">
		<title>PSO</title>
	</head>

	<body>
		<header onclick="openNav()">
			<span style="font-size:30px;cursor:pointer">&#9776; Menu</span>
		</header>
		<div id="myNav" class="overlay">
		  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
		  <div class="overlay-content">
		    <a href="#" onclick="viewPage(1)">Opis</a>
		    <a href="#" onclick="viewPage(2)">Symulacja</a>
		  </div>
		</div>

		<div id="div1">
			<p class="descriptionTitle">Particle Swarm Optimization - o co tak właściwie chodzi?</p>
			<div class="descriptionContent">
			Algorytm roju cząstek jest przykładem algorytmu optymalizacji, którego działanie zaczerpnięte jest z „podglądania” natury. Tym razem do czynienia mamy z zachowaniami stadnymi (czy rojowymi) zwierząt, w tym ludzi. Esencja działania polega na tym, iż podczas wspólnie zdobywanego doświadczenia cząstki będące osobnikami pewnej populacji zdobywają własne doświadczenie i wzajemnie na siebie oddziałują. Taki rój cząstek podąża mniej więcej w jednym kierunku, ale każda cząstka nie traci pełni indywidualności. Daje to taki efekt, iż członkowie populacji przenoszą się stopniowo w coraz lepsze obszary przestrzeni rozwiązań.<br><br>
			Problem można zamknąć do pewnego obszaru przeszukiwań, w której cząstki określają dwie składowe: ich położenie i prędkość. Algorytm rojowy dla takiego problemu wygląda następująco:
			<ul>
				<li>Tworzymy populację rozwiązań \(x_1, x_2, ..., x_{pop}\);</li>
				<li>Wyznaczamy losowe prędkości \(v_1, v_2, ..., v_{pop}\);</li>
				<li>W każdej iteracji:
					<ul>
						<li>Wyznaczamy wartość przystosowania każdej cząstki: \(f(x_1), f(x_2), ..., f(x_{pop})\);</li>
						<li>Wyznaczamy nową wartość prędkości: \(v_i = v_i + U(0, c_1)(p_{best_i} - x_i) + U(0, c_2)(g_{best_i} - x_i)\);</li>
						<li>Uaktualniamy położenie: \(x_i = x_i + v_i\).</li>
					</ul>
				</li>
			</ul>
			\(p_{best}\) i \(g_{best}\) to odpowiednio najlepsze znalezione rozwiązanie danej cząstki i najlepsze znaleznione rozwiązanie spośród wszystkich cząstek. pop jest licznością populacji, \(c_1\) i \(c_2\) – współczynnikami akceleracji. \(U(0, c_1)\) i \(U(0, c_2)\) to losowanie liczby z odpowiednio podanego przedziału.<br><br>
			Do algorytmu warto dodać warunki sprawdzające, czy rój nie uciekł poza obszar rozwiązań, który z góry został wyznaczony oraz czy cząstki nie nabrały zbyt wielkich prędkości (podróżowanie cząstki z prędkością większą od wielkości przedziału nie ma sensu). Jeśli taki warunek jest spełniony – należy położenie przywrócić do miejsca w obszarze przeszukiwać, a prędkość odpowiednio zmniejszyć.<br><br>
			Algorytm ten można ulepszać na różne sposoby. Jednym z nich jest dodanie tzw. współczynnika ścisku, który dba o to, by nie trzeba było warunku na maksymalną prędkość wprowadzać i sam kontroluje tę prędkość. Wzór na współcznynnik ścisku nie jest skomplikowany i wygląda następująco:
			$${v}_{i}  = ω ( {v}_{i} + U(0,  {c}_{1} )( {p}_{best_i}-{x}_{i} ) + U(0,  {c}_{2} )({g}_{best_i}-{x}_{i} )),$$
			gdzie:
			$$ω={{2} \over {2+ \sqrt{{φ}^{2}-4φ}}},$$
			$$φ={c}_{1} +  {c}_{2}, φ≥4.$$
			</div>

			<p class="descriptionTitle">Opis programu</p>
			<div class="descriptionContent">
			Na stronie użytkownik może zobaczyć, jak od strony wizualnej wygląda działanie samego algorytmu.<br><br>
			Może on nie tylko uruchomić symulację działania opisanego wyżej algorytmu PSO, ale też ją skonfigurować ustawiając:
			<ul>
				<li><strong>Liczność populacji</strong>, z jaką będzie działał algorytm.</li>
				<li><strong>Współczynniki</strong> \(c_1\) i \(c_2\).</li>
				<li>Wartość <strong>omegi</strong>, którą również może łatwo przeliczyć wg wzoru na <strong>współczynnik ścisku</strong>, jeśli to możliwe.</li>
				<li><strong>Prędkość rysowania</strong>, a właściwie odświeżania ekranu w <i>ms</i> pomiędzy kolejnymi iteracjami.</li>
				<li><strong>Funkcję</strong>, której minimum algorytm będzie szukał.</li>
				<li><strong>Zakres</strong> funkcji na obu osiach.</li>
				<li><strong>Wymiary okna podglądu</strong>, na których symulacja będzie animowana.</li>
				<li><strong>Dodatkowe opcje</strong> wizualne symulacji.</li>
			</ul>
			Użytkownik ma również szansę na szybkie wprowadzenie ustawień wybierając jeden z dwóch zaproponowanych zestawów.
			</div>
		</div>

		<div id="div2">
			<div class="simulationOptions">
				<p><strong>Ustaw parametry symulacji</strong></p>
				<div id="populationTextInput">Liczba populacji: (10)</div>
				<p><input type="range" id="populationCount" value="10" min="1" max="60" step="1" onchange="updatePopulationTextInput(this.value);"></p>
				<p>Liczba iteracji:<br>
				<input type="number" id="numOfIterations" value="1000">
				</p>
				<p>Współczynnik c1:<br>
				<input type="number" step="0.05" id="c1" value="0.05">
				</p>
				<p>Współczynnik c2:<br>
				<input type="number" step="0.05" id="c2" value="0.000005">
				</p>
				<p>Omega: <a style="cursor: pointer;" onclick="calculateOmega()"><strong>(oblicz wsp. ścisku)</strong></a>
				<br>
				<input type="number" step="0.1" id="omega" value="1">
				</p>
				<p>Prędkość rysowania (w ms):<br>
				<input type="number" id="sleepTime" value="10">
				</p>
			</div>
			<div class="simulationOptions">
				<p><strong>Wybór funkcji</strong></p>
				<form>
					<input type="radio" name="funOption" value="1">\(f(x, y) = {x^2 + y^2}\)<br>
					<input type="radio" name="funOption" value="2" checked>\(f(x, y) = {x^2 + y^2 - 20(cos(πx) + cos(πy))}\)
				</form>
				<p><strong>Zakres</strong></p>
				<p>
				\(x_{min}\) <input type="number" id="xMin" class="funRange" value="-10">
				\(x_{max}\) <input type="number" id="xMax" class="funRange" value="10">
				<br><br>
				\(y_{min}\) <input type="number" id="yMin" class="funRange" value="-10">
				\(y_{max}\) <input type="number" id="yMax" class="funRange" value="10">
				</p>
			</div>
			<div class="simulationOptions">
				<p><strong>Wymiary okna podglądu</strong></p>
				<p>Szerokość:
				<input type="number" id="canvasWidth" value="400" style="width: 40px" onchange="changeCanvasWidth()">
				</p>
				<p>Wysokość:
				<input type="number" id="canvasHeight" value="400" style="width: 40px"  onchange="changeCanvasHeight()">
				</p>
			</div>
			<div class="simulationOptions" style="width: 300px">
				<p><strong>Ustawienia podglądu symulacji</strong></p>
				<p><input type="checkbox" id="showGlobalBest" checked>Pokaż najlepsze rozwiązanie</p>
				<p><input type="checkbox" id="showPersonalBest" onclick="updateLineParticleWithPersonalBestStatus()">Pokaż najlepsze rozwiązanie każdej cząsteczki</p>
				<p><input type="checkbox" id="lineParticleWithPersonalBest" disabled>Połącz linią cząsteczkę z jej najlepszym rozwiązaniem</p>
			</div>
			<div class="simulationOptions">
				<p><strong>Proponowane ustawienia</strong></p>
				<p><button type="submit" id="settingsSet1" onclick="setSettingsSet1()">Zestaw 1</button></p>
				<p><button type="submit" id="settingsSet2" onclick="setSettingsSet2()">Zestaw 2</button></p>
			</div>
			<div class="simulationOptions" id="simulationCanvas">
				<fieldset style="border-color: #d1eeff;">
					<legend><strong>Symulacja</strong></legend>
					<p><button type="submit" id="submitSettings" onclick="validateAndSimulate()">Start</button></p>
					<div id="psoCanvasDiv">
						<canvas id="psoCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
					</div>
					<div id="psoStatistics">

					</div>
				</fieldset>
			</div>
		</div>

	<script src="scripts/pso.js"></script>
	<script src="scripts/form.js"></script>
	<script src="scripts/menu.js"></script>

	</body>
</html>