From 9d1327e9c585f3f05089bc7e6975808ad868cb19 Mon Sep 17 00:00:00 2001 From: Florian Sylvain Date: Sun, 6 Apr 2025 04:27:15 +0200 Subject: [PATCH] feat: add compute interval slider for dynamic interval adjustment --- index.html | 15 +++++++++++++++ src/main.ts | 18 +++++++++++++++++- src/style.css | 4 ++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 153a597..6964d35 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,21 @@

FPS:

+
+ +
+ +
+
diff --git a/src/main.ts b/src/main.ts index faba201..1097dfb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -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 { const canvas = document.querySelector("#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() diff --git a/src/style.css b/src/style.css index 741704d..10041b7 100644 --- a/src/style.css +++ b/src/style.css @@ -18,3 +18,7 @@ body { canvas { image-rendering: pixelated; } + +#compute-interval-slider { + width: 100%; +}