feat(kampos): turbulence

wix-playground · Aug 22, 2024 · 1ed41f6 · 1ed41f6
1 parent 00db15b
commit 1ed41f6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/kampos/src/core/kampos-effects.ts b/kampos/src/core/kampos-effects.ts
@@ -1,4 +1,4 @@
-import { effects } from "kampos";
+import { effects, noise } from "kampos";
 import { loadImage, loadVideo } from "../utils/media-utils";
 
 const mediaResolutionCache = new Map();
@@ -61,6 +61,15 @@ const effectConfigResolvers ={
             y: scaleY,
         },
     }),
+    'turbulence': ({noise: noiseParam, frequencyX, frequencyY, output, ...effectConfig}) => ({
+        ...effectConfig,
+        noise: noise[noiseParam],
+        output: effects.turbulence[output],
+        frequency: {
+            x: frequencyX,
+            y: frequencyY,
+        },
+    }),
 };
 function getEffectConfigResolver(effectName: string) {
     const fallbackResolver = (effectConfig) => effectConfig;
@@ -92,6 +101,7 @@ const EffectsPropsHasToBeOnInit: Record<string, string[]> = {
     alphaMask: ['isLuminance'],
     blend: ['image'],
     displacement: ['wrap', 'scale'],
+    turbulence: ['noise', 'output'],
 };
 
 export function splitEffectConfigToInitialsAndSetters(effectName: string, effectConfig: any) {
@@ -116,9 +126,12 @@ export const onEffectApplied = (willBeAppliedEffects: any, effectName: string) =
             willBeAppliedEffects[effectName].textures[0].update = true
         },
         displacement: () => {
-            console.log("displacement effect applied");
             willBeAppliedEffects[effectName].textures[0].update = true
-        }
+        },
+        // turbulence: () => {
+        //     console.log("turbulence after effect applied");
+        //     willBeAppliedEffects[effectName].textures[0].update = true
+        // },
     };
     onEffectAppliedMapper[effectName]?.();
 }
diff --git a/kampos/src/core/pane.ts b/kampos/src/core/pane.ts
@@ -17,8 +17,6 @@ pane.registerPlugin(CamerakitPlugin);
 
 window.state = structuredClone(DEFAULT_STATE);
 const isDevQuery = window.location.search.includes("dev");
-const disabledButNotForDev = !isDevQuery;
-console.log("isDevQuery", disabledButNotForDev);
 
 export function initPane() {
     pane.addButton({ title: "Reset" }).on("click", () => {
@@ -111,45 +109,37 @@ export function initPane() {
     });
 
     // Turbulence Effect
-    const turbulenceFolder = pane.addFolder({ title: "Turbulence Effect (WIP)", expanded: false });
+    const turbulenceFolder = pane.addFolder({ title: "Turbulence Effect", expanded: false });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "active", {
-        disabled: disabledButNotForDev,
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "noise", {
-        disabled: disabledButNotForDev,
         options: {
+            perlinNoise: "perlinNoise",
             simplex: "simplex",
-            perlin: "perlin",
-            worley: "worley",
+            cellular: "cellular",
         },
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "output", {
-        disabled: disabledButNotForDev,
         options: {
             COLOR: "COLOR",
             DISPLACEMENT: "DISPLACEMENT",
         },
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "frequencyX", {
-        disabled: disabledButNotForDev,
         min: 0,
         max: 5,
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "frequencyY", {
-        disabled: disabledButNotForDev,
         min: 0,
         max: 5,
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "octaves", {
-        disabled: disabledButNotForDev,
         min: 1,
         max: 8,
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "isFractal", {
-        disabled: disabledButNotForDev,
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "time", {
-        disabled: disabledButNotForDev,
         min: 0,
         max: 10,
     });