refactor(demo/layer-stack): extract noise sampling logic to shared store

This change prepares the complete unification of noise controls across
demos. Frequency and timeScale are now managed in noiseSamplingStore,
enabling the consolidation of noise parameter handling across demos.

Author: toasted323

src/apps/demos/layer-stack/Controls.svelte

@@ -25,6 +25,7 @@
     fbmStore,
     turbulenceStore,
   } from "$apps/shared/stores/noise.js";
+  import { noiseSamplingStore } from "$apps/shared/stores/noise-sampling.js";
   import { typographyLayerStore } from "$apps/shared/stores/typography-layer.js";
   import {
     fontFamilyOptions,
@@ -363,16 +364,16 @@
         min={0.001}
         max={1}
         step={0.001}
-        value={$noiseLayerStore.frequency}
-        on:change={(e) => noiseLayerStore.setFrequency(e.detail.value)}
+        value={$noiseSamplingStore.frequency}
+        on:change={(e) => noiseSamplingStore.setFrequency(e.detail.value)}
       />
       <Slider
         label="Noise Time Scale"
         min={0.1}
         max={1000}
         step={0.1}
-        value={$noiseLayerStore.noiseTimeScale}
-        on:change={(e) => noiseLayerStore.setNoiseTimeScale(e.detail.value)}
+        value={$noiseSamplingStore.timeScale}
+        on:change={(e) => noiseSamplingStore.setTimeScale(e.detail.value)}
       />
     </Folder>
 

src/apps/demos/layer-stack/main.js

@@ -33,6 +33,10 @@ import {
   noiseTypeToStore,
   noiseDirtyFlagsStore,
 } from "$apps/shared/stores/noise.js";
+import {
+  noiseSamplingDirtyFlagsStore,
+  noiseSamplingStore,
+} from "$apps/shared/stores/noise-sampling.js";
 import {
   typographyLayerStore,
   typographyLayerDirtyFlagStore,
@@ -112,27 +116,34 @@ updateTypography();
 let noise = new NullNoise2DTime();
 
 const noiseLayerParams = get(noiseLayerStore);
+const noiseSamplingParams = get(noiseSamplingStore);
 const noiseLayer = new NoiseAdapter(
   noise,
   noiseLayerParams.enabled,
   noiseLayerParams.gain,
-  noiseLayerParams.frequency,
-  noiseLayerParams.noiseTimeScale
+  noiseSamplingParams.frequency,
+  noiseSamplingParams.timeScale
 );
 
 function updateNoise() {
   const noiseLayerParams = get(noiseLayerStore);
+
   noiseLayer.enabled = noiseLayerParams.enabled;
 
   if (noiseLayer.enabled) {
     // Layer
     if (get(noiseLayerDirtyFlagStore)) {
       noiseLayer.gain = noiseLayerParams.gain;
-      noiseLayer.frequency = noiseLayerParams.frequency;
-      noiseLayer.noiseTimeScale = noiseLayerParams.noiseTimeScale;
       noiseLayerDirtyFlagStore.clear();
     }
 
+    // Noise sampling parameters
+    const noiseSamplingParams = get(noiseSamplingStore);
+    if (get(noiseSamplingDirtyFlagsStore)) {
+      noiseLayer.frequency = noiseSamplingParams.frequency;
+      noiseLayer.noiseTimeScale = noiseSamplingParams.timeScale;
+    }
+
     // Noise
     const noiseType = get(noiseTypeStore);
     const noiseStore = noiseTypeToStore[noiseType];

src/apps/shared/stores/noise-layer.js

@@ -1,12 +1,9 @@
 import { writable } from "svelte/store";
 
-// --- Noise layer ---
 function createNoiseLayerStore() {
   const defaults = {
     enabled: true,
     gain: 1,
-    frequency: 0.05,
-    noiseTimeScale: 20.0,
   };
   const { subscribe, set, update } = writable({ ...defaults });
   return {
@@ -19,12 +16,6 @@ function createNoiseLayerStore() {
     setGain(gain) {
       update((state) => ({ ...state, gain }));
     },
-    setFrequency(frequency) {
-      update((state) => ({ ...state, frequency }));
-    },
-    setNoiseTimeScale(noiseTimeScale) {
-      update((state) => ({ ...state, noiseTimeScale }));
-    },
     reset() {
       set({ ...defaults });
     },

src/apps/shared/stores/noise-sampling.js

@@ -0,0 +1,36 @@
+import { writable } from "svelte/store";
+
+function createNoiseSamplingStore() {
+  const defaults = {
+    frequency: 0.05,
+    timeScale: 20.0,
+  };
+  const { subscribe, set, update } = writable({ ...defaults });
+  return {
+    subscribe,
+    set,
+    update,
+    setFrequency: (frequency) => update((obj) => ({ ...obj, frequency })),
+    setTimeScale: (timeScale) => update((obj) => ({ ...obj, timeScale })),
+    reset: () => set({ ...defaults }),
+  };
+}
+
+export const noiseSamplingStore = createNoiseSamplingStore();
+
+function createNoiseSamplingDirtyFlagStore() {
+  const { subscribe, set } = writable(true); // initially dirty
+
+  noiseSamplingStore.subscribe(() => set(true));
+
+  function clear() {
+    set(false);
+  }
+
+  return {
+    subscribe,
+    clear,
+  };
+}
+
+export const noiseSamplingDirtyFlagsStore = createNoiseSamplingDirtyFlagStore();