kampos - npm Package Compare versions

Comparing version 0.14.9 to 0.14.10

CHANGELOG.md

@@ -0,1 +1,8 @@
+### 0.14.10 (2025-01-08)
+
+_New:_
+
+-   Added `input` property to `displacement` effect to allow switching from texture input to other methods.
+    Currently built-in methods are `displacement.TEXTURE` and `displacement.TURBULENCE` that works when combined with the `turebulence` effect.
+
 ### 0.14.9 (2025-01-02)
@@ -2,0 +9,0 @@

demo/multi-pointer.js

@@ -55,17 +55,14 @@ import { Kampos, effects } from '../index.js';
     if (DEBUG) {
-        function tick () {
-            requestAnimationFrame(tick);
+        document.body.appendChild(mapTarget);
+        mapTarget.style.pointerEvents = 'none';
+        mapTarget.style.position = 'absolute';
+        mapTarget.style.top = '0';
+    }
 
-            pointerTexture.update();
-        }
+    const instance = new Kampos({target, effects: [displacement]});
 
-        requestAnimationFrame(tick);
-    } else {
-        const instance = new Kampos({target, effects: [displacement]});
+    // // set media source
+    instance.setSource({media: img, width, height});
 
-        // // set media source
-        instance.setSource({media: img, width, height});
-
-        instance.play();
-    }
+    instance.play();
 });

demo/turbulence.js

 import { Kampos, effects, noise } from '../index.js';
 
-const target = document.createElement('canvas');
-target.width = 854;
-target.height = 480;
+const target = document.querySelector('#target');
+const media = document.querySelector('#video5');
 
-const target2 = document.querySelector('#target');
-const media1 = document.querySelector('#video5');
+prepareVideos([media]).then(() => {
+    const width = media.videoWidth;
 
-// uncomment here if you want to see just the turbulence
-//target2.parentNode.replaceChild(target, target2);
+    // try playing with this factor
+    const AMPLITUDE = 2 / width;
+    const frequency = { x: AMPLITUDE, y: AMPLITUDE };
 
-// try playing with this factor
-const AMPLITUDE = 1 / target.width;
-const frequency = { x: AMPLITUDE, y: AMPLITUDE };
+    // increase/decrease the number of octaves to see different noise patterns
+    const octaves = 4;
+    // change to false (or comment out) if you want to see the turbulence noise variant
+    const isFractal = true;
 
-const octaves = 4;
-// change to false (or comment out) if you want to see the turbulence noise variant
-const isFractal = true;
+    // create the effects we need
+    const turbulence = effects.turbulence({
+        noise: noise.simplex,
+        frequency,
+        octaves,
+        isFractal,
+        output: '', // comment out this line to see the turbulence noise itself
+    });
 
-// create the effects we need
-const turbulence = effects.turbulence({
-    noise: noise.simplex,
-    frequency,
-    octaves,
-    isFractal,
-});
+    // create a simple effect that converts the turbulence return value into the output color
+    const disp = effects.displacement({
+        input: effects.displacement.TURBULENCE,
+        scale: { x: 0.15, y: -0.15 },
+    });
 
-// init kampos
-const instance = new Kampos({ target, effects: [turbulence], noSource: true });
+    const instance = new Kampos({ target, effects: [turbulence, disp] });
 
-// create a simple effect that converts the turbulence return value into the output color
-const disp = effects.displacement();
-
-const instance2 = new Kampos({ target: target2, effects: [disp] });
-
-// you can increase/decrease the time factor for a faster/slower animation
-instance.play((time) => (turbulence.time = time * 2));
-
-prepareVideos([media1]).then(() => {
-    const width = media1.videoWidth;
-    const height = media1.videoHeight;
-
     // set media source
-    instance2.setSource({ media: media1, width, height });
+    instance.setSource(media);
 
-    disp.map = target;
-    disp.scale = { x: 0.15, y: -0.15 };
-    disp.textures[0].update = true; // to update
-
-    // start kampos
-    instance2.play();
+    // you can increase/decrease the time factor for a faster/slower animation
+    instance.play((time) => (turbulence.time = time * 2));
 });

package.json

 {
     "name": "kampos",
-    "version": "0.14.9",
+    "version": "0.14.10",
     "description": "Tiny and fast effects compositor on WebGL",
@@ -5,0 +5,0 @@ "registry": "https://registry.npmjs.org/",

src/effects/displacement.js

 /**
  * @function displacement
+ * @property {string} TEXTURE use texture sampling as input method.
  * @property {string} CLAMP stretch the last value to the edge. This is the default behavior.
@@ -8,2 +9,3 @@ * @property {string} DISCARD discard values beyond the edge of the media - leaving a transparent pixel.
  * @param {string} [params.wrap] wrapping method to use. Defaults to `displacement.CLAMP`.
+ * @param {string} [params.input] input method to use. Defaults to `displacement.TEXTURE`.
  * @param {{x: number, y: number}} [params.scale] initial scale to use for x and y displacement. Defaults to `{x: 0.0, y: 0.0}` which means no displacement.
@@ -15,3 +17,3 @@ * @param {boolean} [params.enableBlueChannel] enable blue channel for displacement intensity. Defaults to `false`.
  */
-function displacement({ wrap = WRAP_METHODS.CLAMP, scale, enableBlueChannel } = {}) {
+function displacement({ wrap = WRAP_METHODS.CLAMP, input = INPUT_METHODS.TEXTURE, scale, enableBlueChannel } = {}) {
     const { x: sx, y: sy } = scale || { x: 0.0, y: 0.0 };
@@ -49,6 +51,4 @@
     if (u_displacementEnabled) {
-        vec3 dispMap = texture2D(u_dispMap, v_displacementMapTexCoord).rgb;
-        vec2 dispMapPosition = dispMap.rg - 0.5;
-        float dispIntensity = u_enableBlueChannel ? dispMap.b : 0.0;
-        vec2 dispVec = vec2(sourceCoord.x + (u_dispScale.x + dispIntensity) * dispMapPosition.r, sourceCoord.y + (u_dispScale.y + dispIntensity) * dispMapPosition.g);
+        ${input}
+        vec2 dispVec = vec2(sourceCoord.x + (u_dispScale.x + dispIntensity) * dispPosition.r, sourceCoord.y + (u_dispScale.y + dispIntensity) * dispPosition.g);
         ${wrap}
@@ -123,2 +123,11 @@ sourceCoord = dispVec;
 
+const INPUT_METHODS = {
+    TEXTURE: `vec3 dispMap = texture2D(u_dispMap, v_displacementMapTexCoord).rgb;
+            vec2 dispPosition = dispMap.rg - 0.5;
+            float dispIntensity = u_enableBlueChannel ? dispMap.b : 0.0;`,
+    TURBULENCE: `vec3 dispMap = vec3(turbulenceValue);
+            vec2 dispPosition = dispMap.rg - 0.5;
+            float dispIntensity = u_enableBlueChannel ? dispMap.b : 0.0;`,
+};
+
 const WRAP_METHODS = {
@@ -130,2 +139,4 @@ CLAMP: `dispVec = clamp(dispVec, 0.0, 1.0);`,
 
+displacement.TEXTURE = INPUT_METHODS.TEXTURE;
+displacement.TURBULENCE = INPUT_METHODS.TURBULENCE;
 displacement.CLAMP = WRAP_METHODS.CLAMP;
@@ -132,0 +143,0 @@ displacement.DISCARD = WRAP_METHODS.DISCARD;

No alert changes

Improved metrics

Total package byte prevSize

10551447

increased by0.02%

Lines of code

30024

increased by0.07%

No dependency changes