feat: add compute interval slider for dynamic interval adjustment

2026-08-19 11:43:26 +02:00 · 2025-04-06 04:27:15 +02:00
parent 69f1e7cdd9
commit 9d1327e9c5
3 changed files with 36 additions and 1 deletions
@@ -9,6 +9,21 @@
 	<body>
 		<canvas id="canvas" width="1024" height="1024"></canvas>
 		<p id="fps">FPS:</p>
+		<div>
+			<label for="compute-interval-slider"
+				>Compute Interval (ms):
+				<span id="compute-interval-value">100</span></label
+			>
+			<div>
+				<input
+					id="compute-interval-slider"
+					type="range"
+					min="1"
+					max="200"
+					value="100"
+				/>
+			</div>
+		</div>
 		<script type="module" src="/src/main.ts"></script>
 	</body>
 </html>
@@ -1,7 +1,21 @@
 import "./style.css"

 const GRID_SIZE = 64
-const COMPUTE_MS_INTERVAL = 100
+let COMPUTE_MS_INTERVAL = 100
+
+function setupSliders() {
+	const computeIntervalSlider = document.getElementById(
+		"compute-interval-slider",
+	) as HTMLInputElement
+	const computeIntervalValue = document.getElementById(
+		"compute-interval-value",
+	) as HTMLElement
+
+	computeIntervalSlider.addEventListener("input", () => {
+		COMPUTE_MS_INTERVAL = parseInt(computeIntervalSlider.value)
+		computeIntervalValue.textContent = computeIntervalSlider.value
+	})
+}

 async function getCanvas(): Promise<HTMLCanvasElement> {
 	const canvas = document.querySelector<HTMLCanvasElement>("#canvas")
@@ -280,6 +294,8 @@ class Renderer {
 }

 async function init() {
+	setupSliders()
+
 	const device = await getDevice(await getAdapter())
 	const context = configureContext(await getCanvas(), device)
 	const canvasFormat = navigator.gpu.getPreferredCanvasFormat()
@@ -18,3 +18,7 @@ body {
 canvas {
 	image-rendering: pixelated;
 }
+
+#compute-interval-slider {
+	width: 100%;
+}