79 lines
3.1 KiB
HTML
79 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>
|
||
|