Bump turbulence updates (#58)

* Fixed homepage + cleanup + update changelog * 0.14.3
wix-incubator · Dec 16, 2024 · 81a08a1 · 81a08a1
1 parent edfa10f
commit 81a08a1
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,10 @@
-### 0.14.1 (2024-12-15)
+### 0.14.3 (2024-12-16)
+
+_New:_
+
+-   Added ability to use `u_mouse` as input to `turbulence` effect.
+
+### 0.14.2 (2024-12-15)
 
 _Fixed:_
 

diff --git a/demo/index.html b/demo/index.html
@@ -51,7 +51,6 @@
             nav {
                 position: fixed;
                 width: 256px;
-                min-height: 100vh;
                 z-index: 20;
                 top: 0;
             }

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1906,6 +1906,7 @@ float noise (vec3 seed) {
  * @param {number} [params.octaves=1] initial number of octaves to use for turbulence noise generation.
  * @param {boolean} [params.isFractal=false] initial number of octaves to use for turbulence noise generation.
  * @param {number} [params.time=0] initial time for controlling initial noise value.
+ * @param {string} [params.input] how to define `turbulenceSeed`. Defaults to `turbulence.FRAGCOORD_XY_TIME`.
  * @returns {turbulenceEffect}
  *
  * @example turbulence({noise: kampos.noise.simplex, output: turbulence.COLOR, octaves: 4, isFractal: true})
@@ -1917,6 +1918,7 @@ function turbulence({
     octaves = 1,
     isFractal = false,
     time = 0.0,
+    input = INPUT_TYPES.FRAGCOORD_XY_TIME,
 }) {
     const { x: fx, y: fy } = frequency || { x: 0.0, y: 0.0 };
 
@@ -1979,8 +1981,9 @@ float turbulence (vec3 seed, vec2 frequency, int numOctaves, bool isFractal) {
     return clamp(sum, 0.0, 1.0);
 }`,
             source: `
-    vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001);
-    float turbulenceValue = turbulence(turbulenceSeed, u_turbulenceFrequency, u_turbulenceOctaves, u_isFractal);
+    ${input || ''}
+    float turbulenceValue = turbulence(turbulenceSeed, u_turbulenceFrequency, u_turbulenceOctaves, u_isFractal);`,
+            main: `
     ${output || ''}`,
         },
         get frequency() {
@@ -2039,8 +2042,22 @@ const OUTPUT_TYPES = {
     ALPHA: 'alpha = turbulenceValue;',
 };
 
+const INPUT_TYPES = {
+    FRAGCOORD_XY_TIME:
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001);',
+    FRAGCOORD_XYZ: 'vec3 turbulenceSeed = vec3(gl_FragCoord.xyz);',
+    FRAGCOORD_XY_MOUSE_TIME:
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), u_time * 0.0001);',
+    FRAGCOORD_XY_MOUSE_Z:
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), gl_FragCoord.z);',
+};
+
 turbulence.COLOR = OUTPUT_TYPES.COLOR;
 turbulence.ALPHA = OUTPUT_TYPES.ALPHA;
+turbulence.FRAGCOORD_XY_TIME = INPUT_TYPES.FRAGCOORD_XY_TIME;
+turbulence.FRAGCOORD_XYZ = INPUT_TYPES.FRAGCOORD_XYZ;
+turbulence.FRAGCOORD_XY_MOUSE_TIME = INPUT_TYPES.FRAGCOORD_XY_MOUSE_TIME;
+turbulence.FRAGCOORD_XY_MOUSE_Z = INPUT_TYPES.FRAGCOORD_XY_MOUSE_Z;
 
 /**
  * @function fadeTransition
@@ -3490,6 +3507,10 @@ class Kampos {
             this.dimensions = { width: media.naturalWidth, height: media.naturalHeight };
         }
 
+        if (source && !this.data.source) {
+            this.data.source = source;
+        }
+
         if (typeof shouldUpdate === 'boolean') {
             this.data.source.shouldUpdate = shouldUpdate;
         }

diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>kampos 0.14.0 | Documentation</title>
+  <title>kampos 0.14.2 | Documentation</title>
   <meta name='description' content='Tiny and fast effects compositor on WebGL'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
@@ -15,7 +15,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>kampos</h3>
-          <div class='mb1'><code>0.14.0</code></div>
+          <div class='mb1'><code>0.14.2</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
@@ -3595,6 +3595,19 @@ <h3 class='fl m0' id='effects'>
 
 
 
+                <tr>
+  <td class='break-word'><span class='code bold'>params.input</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?</code>
+  </td>
+  <td class='break-word'><span>how to define 
+<code>turbulenceSeed</code>
+. Defaults to 
+<code>turbulence.FRAGCOORD_XY_TIME</code>
+.
+</span></td>
+</tr>
+
+
+
             </tbody>
           </table>
 

diff --git a/index.umd.js b/index.umd.js
@@ -1910,6 +1910,7 @@ float noise (vec3 seed) {
      * @param {number} [params.octaves=1] initial number of octaves to use for turbulence noise generation.
      * @param {boolean} [params.isFractal=false] initial number of octaves to use for turbulence noise generation.
      * @param {number} [params.time=0] initial time for controlling initial noise value.
+     * @param {string} [params.input] how to define `turbulenceSeed`. Defaults to `turbulence.FRAGCOORD_XY_TIME`.
      * @returns {turbulenceEffect}
      *
      * @example turbulence({noise: kampos.noise.simplex, output: turbulence.COLOR, octaves: 4, isFractal: true})
@@ -1921,6 +1922,7 @@ float noise (vec3 seed) {
         octaves = 1,
         isFractal = false,
         time = 0.0,
+        input = INPUT_TYPES.FRAGCOORD_XY_TIME,
     }) {
         const { x: fx, y: fy } = frequency || { x: 0.0, y: 0.0 };
 
@@ -1983,8 +1985,9 @@ float turbulence (vec3 seed, vec2 frequency, int numOctaves, bool isFractal) {
     return clamp(sum, 0.0, 1.0);
 }`,
                 source: `
-    vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001);
-    float turbulenceValue = turbulence(turbulenceSeed, u_turbulenceFrequency, u_turbulenceOctaves, u_isFractal);
+    ${input || ''}
+    float turbulenceValue = turbulence(turbulenceSeed, u_turbulenceFrequency, u_turbulenceOctaves, u_isFractal);`,
+                main: `
     ${output || ''}`,
             },
             get frequency() {
@@ -2043,8 +2046,22 @@ float turbulence (vec3 seed, vec2 frequency, int numOctaves, bool isFractal) {
         ALPHA: 'alpha = turbulenceValue;',
     };
 
+    const INPUT_TYPES = {
+        FRAGCOORD_XY_TIME:
+            'vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001);',
+        FRAGCOORD_XYZ: 'vec3 turbulenceSeed = vec3(gl_FragCoord.xyz);',
+        FRAGCOORD_XY_MOUSE_TIME:
+            'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), u_time * 0.0001);',
+        FRAGCOORD_XY_MOUSE_Z:
+            'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), gl_FragCoord.z);',
+    };
+
     turbulence.COLOR = OUTPUT_TYPES.COLOR;
     turbulence.ALPHA = OUTPUT_TYPES.ALPHA;
+    turbulence.FRAGCOORD_XY_TIME = INPUT_TYPES.FRAGCOORD_XY_TIME;
+    turbulence.FRAGCOORD_XYZ = INPUT_TYPES.FRAGCOORD_XYZ;
+    turbulence.FRAGCOORD_XY_MOUSE_TIME = INPUT_TYPES.FRAGCOORD_XY_MOUSE_TIME;
+    turbulence.FRAGCOORD_XY_MOUSE_Z = INPUT_TYPES.FRAGCOORD_XY_MOUSE_Z;
 
     /**
      * @function fadeTransition
@@ -3494,6 +3511,10 @@ void main() {
                 this.dimensions = { width: media.naturalWidth, height: media.naturalHeight };
             }
 
+            if (source && !this.data.source) {
+                this.data.source = source;
+            }
+
             if (typeof shouldUpdate === 'boolean') {
                 this.data.source.shouldUpdate = shouldUpdate;
             }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kampos",
-    "version": "0.14.2",
+    "version": "0.14.3",
     "description": "Tiny and fast effects compositor on WebGL",
     "registry": "https://registry.npmjs.org/",
     "main": "dist/index.cjs",

diff --git a/src/effects/turbulence.js b/src/effects/turbulence.js
@@ -147,12 +147,12 @@ const OUTPUT_TYPES = {
 
 const INPUT_TYPES = {
     FRAGCOORD_XY_TIME:
-        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001)',
-    FRAGCOORD_XYZ: 'vec3 turbulenceSeed = vec3(gl_FragCoord.xyz)',
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy, u_time * 0.0001);',
+    FRAGCOORD_XYZ: 'vec3 turbulenceSeed = vec3(gl_FragCoord.xyz);',
     FRAGCOORD_XY_MOUSE_TIME:
-        'vec3 turbulenceSeed = vec3(gl_FragCoord.x + u_mouse.x * u_resolution.x * -1.0, gl_FragCoord.y + u_mouse.y * u_resolution.y, u_time * 0.0001);',
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), u_time * 0.0001);',
     FRAGCOORD_XY_MOUSE_Z:
-        'vec3 turbulenceSeed = vec3(gl_FragCoord.x + u_mouse.x * u_resolution.x * -1.0, gl_FragCoord.y + u_mouse.y * u_resolution.y);',
+        'vec3 turbulenceSeed = vec3(gl_FragCoord.xy + u_mouse * u_resolution * vec2(-1.0, 1.0), gl_FragCoord.z);',
 };
 
 turbulence.COLOR = OUTPUT_TYPES.COLOR;

diff --git a/src/kampos.js b/src/kampos.js
@@ -199,6 +199,10 @@ export class Kampos {
             this.dimensions = { width: media.naturalWidth, height: media.naturalHeight };
         }
 
+        if (source && !this.data.source) {
+            this.data.source = source;
+        }
+
         if (typeof shouldUpdate === 'boolean') {
             this.data.source.shouldUpdate = shouldUpdate;
         }