107 lines
3.1 KiB
HTML
107 lines
3.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Flocking Boids - WASM</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<div id="container">
|
||
<canvas id="canvas"></canvas>
|
||
<aside id="controls" aria-expanded="true">
|
||
<div id="controlsHeader">
|
||
<h2 id="controlsTitle">Flocking Controls</h2>
|
||
<button
|
||
id="controlsToggle"
|
||
type="button"
|
||
aria-controls="controlsBody"
|
||
aria-expanded="true"
|
||
aria-label="Collapse controls"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
<div id="controlsBody">
|
||
<div class="control-group">
|
||
<label for="alignSlider">Alignment</label>
|
||
<input
|
||
type="range"
|
||
id="alignSlider"
|
||
min="0"
|
||
max="5"
|
||
step="0.1"
|
||
value="1.0"
|
||
/>
|
||
<div class="value-display">
|
||
<span class="stat-label">Weight:</span>
|
||
<strong id="alignValue">1.00</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="cohesionSlider">Cohesion</label>
|
||
<input
|
||
type="range"
|
||
id="cohesionSlider"
|
||
min="0"
|
||
max="5"
|
||
step="0.1"
|
||
value="0.9"
|
||
/>
|
||
<div class="value-display">
|
||
<span class="stat-label">Weight:</span>
|
||
<strong id="cohesionValue">0.90</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="separationSlider">Separation</label>
|
||
<input
|
||
type="range"
|
||
id="separationSlider"
|
||
min="0"
|
||
max="5"
|
||
step="0.1"
|
||
value="1.4"
|
||
/>
|
||
<div class="value-display">
|
||
<span class="stat-label">Weight:</span>
|
||
<strong id="separationValue">1.40</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="control-group">
|
||
<label for="addBtn">Boid Count (Step: 10)</label>
|
||
<div class="button-group">
|
||
<button id="removeBtn" type="button">−10 Remove</button>
|
||
<button id="addBtn" type="button">+10 Add</button>
|
||
</div>
|
||
<div class="value-display">
|
||
<span class="stat-label">Total:</span>
|
||
<strong id="boidCount">250</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<div class="stats">
|
||
<div class="stat-item">
|
||
<span class="stat-label">Canvas:</span>
|
||
<span class="stat-value" id="canvasSize">0x0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">FPS:</span>
|
||
<span class="stat-value" id="fps">60</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<script type="module" src="script.js"></script>
|
||
</body>
|
||
</html>
|