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%; +}