Fix mouse y invert (#61)

* Fixed mouse utility to invert y coordinate internally * 0.14.6
wix-incubator · Dec 18, 2024 · 7cb77a9 · 7cb77a9
1 parent e24aa6c
commit 7cb77a9
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 0.14.6 (2024-12-18)
+
+_Fixed:_
+
+-   Fixed `mouse` utility to invert `y` coordinate internally.
+
 ### 0.14.5 (2024-12-18)
 
 _Fixed:_

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -48,6 +48,7 @@ function resolution({
 
 /**
  * Exposes the `u_mouse` uniform for use inside fragment shaders.
+ * Note that internally the `y` coordinate is inverted to match the WebGL coordinate system.
  *
  * @function mouse
  * @param {Object} [params]
@@ -74,17 +75,17 @@ function mouse({
         },
         get position() {
             const [x, y] = this.uniforms[0].data;
-            return { x, y };
+            return { x, y: 1 - y };
         },
         set position({ x, y }) {
             if (typeof x !== 'undefined') this.uniforms[0].data[0] = x;
-            if (typeof y !== 'undefined') this.uniforms[0].data[1] = y;
+            if (typeof y !== 'undefined') this.uniforms[0].data[1] = 1 - y;
         },
         uniforms: [
             {
                 name: 'u_mouse',
                 type: 'f',
-                data: [initial.x || 0, initial.y || 0],
+                data: [initial.x || 0, 1 - initial.y || 0],
             },
         ],
     };

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.4 | Documentation</title>
+  <title>kampos 0.14.5 | 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.4</code></div>
+          <div class='mb1'><code>0.14.5</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
@@ -2328,7 +2328,8 @@ <h3 class='fl m0' id='utilities'>
 
 
 
-  <p>Exposes the <code>u_mouse</code> uniform for use inside fragment shaders.</p>
+  <p>Exposes the <code>u_mouse</code> uniform for use inside fragment shaders.
+Note that internally the <code>y</code> coordinate is inverted to match the WebGL coordinate system.</p>
 
     <div class='pre p1 fill-light mt0'>mouse(params: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>?): <a href="#mouseutility">mouseUtility</a></div>
 

diff --git a/index.umd.js b/index.umd.js
@@ -52,6 +52,7 @@
 
     /**
      * Exposes the `u_mouse` uniform for use inside fragment shaders.
+     * Note that internally the `y` coordinate is inverted to match the WebGL coordinate system.
      *
      * @function mouse
      * @param {Object} [params]
@@ -78,17 +79,17 @@
             },
             get position() {
                 const [x, y] = this.uniforms[0].data;
-                return { x, y };
+                return { x, y: 1 - y };
             },
             set position({ x, y }) {
                 if (typeof x !== 'undefined') this.uniforms[0].data[0] = x;
-                if (typeof y !== 'undefined') this.uniforms[0].data[1] = y;
+                if (typeof y !== 'undefined') this.uniforms[0].data[1] = 1 - y;
             },
             uniforms: [
                 {
                     name: 'u_mouse',
                     type: 'f',
-                    data: [initial.x || 0, initial.y || 0],
+                    data: [initial.x || 0, 1 - initial.y || 0],
                 },
             ],
         };

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.5",
+    "version": "0.14.6",
     "description": "Tiny and fast effects compositor on WebGL",
     "registry": "https://registry.npmjs.org/",
     "main": "dist/index.cjs",

diff --git a/src/utilities/mouse.js b/src/utilities/mouse.js
@@ -1,5 +1,6 @@
 /**
  * Exposes the `u_mouse` uniform for use inside fragment shaders.
+ * Note that internally the `y` coordinate is inverted to match the WebGL coordinate system.
  *
  * @function mouse
  * @param {Object} [params]
@@ -26,17 +27,17 @@ function mouse({
         },
         get position() {
             const [x, y] = this.uniforms[0].data;
-            return { x, y };
+            return { x, y: 1 - y };
         },
         set position({ x, y }) {
             if (typeof x !== 'undefined') this.uniforms[0].data[0] = x;
-            if (typeof y !== 'undefined') this.uniforms[0].data[1] = y;
+            if (typeof y !== 'undefined') this.uniforms[0].data[1] = 1 - y;
         },
         uniforms: [
             {
                 name: 'u_mouse',
                 type: 'f',
-                data: [initial.x || 0, initial.y || 0],
+                data: [initial.x || 0, 1 - initial.y || 0],
             },
         ],
     };