feat(kampos): turbulence

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

Hide file tree

Showing 7 changed files with 60 additions and 15 deletions.
diff --git a/kampos/global.d.ts b/kampos/global.d.ts
@@ -74,5 +74,6 @@ type State = {
   interface Window {
     state: State;
     pane: Pane;
+    kamposCanvas: any;// TODO kamposInstance
   }
 }
diff --git a/kampos/src/App.tsx b/kampos/src/App.tsx
@@ -9,6 +9,7 @@ const App: Component = () => {
                 class="absolute inset-0 z-0 w-full h-full"
              />
         </div>
+        <canvas id="canvas" class="hidden" />
         <video id="video" src="./assets/cloudy-night.mp4"
                autoplay
                loop

diff --git a/kampos/src/constants.ts b/kampos/src/constants.ts
@@ -13,6 +13,7 @@ export const VIDEO_SOURCE_OPTIONS = {
     'starry night': ASSETS_PREFIX+'/starry-night.mp4',
     'shell beach': ASSETS_PREFIX+'/shell-beach.mp4',
     'wheat field': ASSETS_PREFIX+'/wheat-field.mp4',
+    'canvas': 'canvas',
 }
 
 const VIDEO_MASK_SOURCE_OPTIONS = {
@@ -111,3 +112,8 @@ export const DEFAULT_STATE = {
         },
     },
 };
+
+
+export const EFFECT_NAMES = {
+    'turbulence': 'turbulence',
+} as const;
diff --git a/kampos/src/core/kampos-effects.test.ts b/kampos/src/core/kampos-effects.test.ts
@@ -37,6 +37,31 @@ describe('resolveConfig', () => {
     });
   });
 
+it('should resolve paths that start with canvas as the kamposCanvas instance', async () => {
+    // Add DOM elements with ids canvas2 and canvas3
+    document.body.innerHTML = `
+      <canvas id="canvas"></canvas>
+      <canvas id="canvas2"></canvas>
+    `;
+
+    const config = {
+      video: 'canvas',
+      media: 'canvas2'
+    };
+
+    const resolvedConfig = await resolveConfig(noMattersEffectName, config);
+
+    expect(resolvedConfig).toEqual({
+      video: document.getElementById('canvas'),
+      media: document.getElementById('canvas2'),
+    });
+    expect(resolvedConfig).not.toEqual({
+        video: null,
+        media: null,
+    })
+  });
+
+
   it('should filter out "none" and "WIP" values', async () => {
     const config = {
       backgroundColor: '#ff0000',

diff --git a/kampos/src/core/kampos-effects.ts b/kampos/src/core/kampos-effects.ts
@@ -16,6 +16,9 @@ async function resolveMediaFromPath(path: string) {
             resolvedValue = await loadImage(path);
         } else if (["mp4", "webm", "ogg"].includes(extension)) {
             resolvedValue = await loadVideo(path);
+        } else if (path.startsWith("canvas")) {
+            console.log("resolving canvas vladd", path);
+            resolvedValue = document.getElementById(path);
         } else {
             // Fallback: Return the path as a string if it doesn't match expected extensions
             resolvedValue = path;
@@ -120,18 +123,14 @@ export function splitEffectConfigToInitialsAndSetters(effectName: string, effect
     return { initials, setters } as const;
 }
 
-export const onEffectApplied = (willBeAppliedEffects: any, effectName: string) => {
+export const onEffectApplied = (effect, effectName: string) => {
     const onEffectAppliedMapper = {
         alphaMask: () => {
-            willBeAppliedEffects[effectName].textures[0].update = true
+            effect.textures[0].update = true
         },
         displacement: () => {
-            willBeAppliedEffects[effectName].textures[0].update = true
+            effect.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/main.ts b/kampos/src/core/main.ts
@@ -1,5 +1,5 @@
 import { Kampos, effects } from "kampos";
-import { getVideoElement } from "../constants";
+import { EFFECT_NAMES, getVideoElement } from "../constants";
 import { initPane } from "./pane";
 import { getQueryValue, onStateChange, setState } from "../utils/state";
 import { resolveVideo } from "../utils/media-utils";
@@ -17,6 +17,15 @@ function getActiveEffects() {
     return Object.keys(effects).filter((effectName) => window.state.effects[effectName].active);
 }
 
+function initTurbulenceEffect(effect) {
+    const target = document.querySelector("#canvas");
+    window.kamposCanvas = new Kampos({
+        target,
+        effects: [effect],
+        noSource: true
+    });
+    window.kamposCanvas.play((time) => (effect.time = time * 2)); // TOOD: maybe configurable
+};
 
 async function initKampos() {
     const target = document.querySelector("#target");
@@ -25,13 +34,18 @@ async function initKampos() {
         const effectConfig = await resolveConfig(effectName, window.state.effects[effectName]);
         console.log(`[config] ${effectName}:`, effectConfig);
         const { initials, setters } = splitEffectConfigToInitialsAndSetters(effectName, effectConfig);
-        console.log('split',effectName, {initials, setters});
-        willBeAppliedEffects[effectName] = effects[effectName](initials);
+        // console.log('split',effectName, {initials, setters});
+        const effect = effects[effectName](initials);
+
         Object.entries(setters).forEach(([key, value]) => {
-            willBeAppliedEffects[effectName][key] = value;
+            effect[key] = value;
         });
-
-        onEffectApplied(willBeAppliedEffects, effectName);
+        onEffectApplied(effect, effectName);
+        if(effectName === EFFECT_NAMES.turbulence) {
+            initTurbulenceEffect(effect);
+            continue;
+        }
+        willBeAppliedEffects[effectName] = effect;
     }
     kamposInstance = new Kampos({
         target,

diff --git a/kampos/src/core/pane.ts b/kampos/src/core/pane.ts
@@ -16,7 +16,6 @@ window.pane = pane;
 pane.registerPlugin(CamerakitPlugin);
 
 window.state = structuredClone(DEFAULT_STATE);
-const isDevQuery = window.location.search.includes("dev");
 
 export function initPane() {
     pane.addButton({ title: "Reset" }).on("click", () => {
@@ -122,7 +121,7 @@ export function initPane() {
     turbulenceFolder.addBinding(window.state.effects.turbulence, "output", {
         options: {
             COLOR: "COLOR",
-            DISPLACEMENT: "DISPLACEMENT",
+            ALPHA: "ALPHA",
         },
     });
     turbulenceFolder.addBinding(window.state.effects.turbulence, "frequencyX", {