Slitscan add direction (#59)

* Added support for direction in SlitScan * 0.14.4
wix-incubator · Dec 17, 2024 · 952ab85 · 952ab85
1 parent 81a08a1
commit 952ab85
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 0.14.4 (2024-12-17)
+
+_New:_
+
+-   Added `direction` property to `slitScan` effect for choosing `x` or `y`.
+
 ### 0.14.3 (2024-12-16)
 
 _New:_

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1337,6 +1337,7 @@ function kaleidoscope ({ segments = 6, offset, rotation = 0 } = {}) {
  * @param {number} [params.time=0.0] initial time for controlling initial noise value.
  * @param {number} [params.intensity=0.1] initial intensity to use.
  * @param {number} [params.frequency] initial frequency to use .
+ * @param {string} [params.direction='x'] direction to apply the slit scan effect.
  * @returns {slitScanEffect}
  *
  * @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -1345,7 +1346,8 @@ function slitScan ({
     noise,
     time = 0.0,
     intensity = 0.1,
-    frequency = 2.0
+    frequency = 2.0,
+    direction = 'x',
 }) {
     /**
      * @typedef {Object} slitScanEffect
@@ -1358,20 +1360,27 @@ function slitScan ({
      * effect.intensity = 0.5;
      * effect.frequency = 3.5;
      */
+    const isHorizontal = direction === 'x';
+    const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+    const noiseTimePart = 'u_time * 0.0001';
+
     return {
         fragment: {
             uniform: {
                 u_slitScanEnabled: 'bool',
                 u_intensity: 'float',
                 u_frequency: 'float',
                 u_time: 'float',
+                u_horizontal: 'bool'
             },
             constant: noise,
             source: `
-    float noiseValue = noise(vec2(gl_FragCoord.x / u_resolution.x * u_frequency, u_time * 0.0001));
-    float sourceX = sourceCoord.x + noiseValue * u_intensity;
-    float mirroredX = mod(-sourceX, 1.0) * (mod(sourceX - 1.0, 2.0) - mod(sourceX, 1.0)) + mod(sourceX, 1.0) * (mod(sourceX, 2.0) - mod(sourceX, 1.0));
-    sourceCoord = vec2(mirroredX, sourceCoord.y);`,
+    if (u_slitScanEnabled) {
+        float noiseValue = noise(vec2(${isHorizontal ? noiseFragPart : noiseTimePart}, ${isHorizontal ? noiseTimePart : noiseFragPart}));
+        float source_ = sourceCoord.${direction} + noiseValue * u_intensity;
+        float mirrored_ = mod(-source_, 1.0) * (mod(source_ - 1.0, 2.0) - mod(source_, 1.0)) + mod(source_, 1.0) * (mod(source_, 2.0) - mod(source_, 1.0));
+        sourceCoord = ${isHorizontal ? 'vec2(mirrored_, sourceCoord.y)' : 'vec2(sourceCoord.x, mirrored_)'};
+    }`,
         },
         get disabled() {
             return !this.uniforms[0].data[0];
@@ -2849,8 +2858,11 @@ function _initProgram(gl, plane, effects, noSource = false) {
         _getWebGLProgram(gl, vertexSrc, fragmentSrc);
 
     if (error) {
+        function addLineNumbers(str) {
+            return str.split('\n').map((line, i) => `${i + 1}: ${line}`).join('\n');
+        }
         throw new Error(
-            `${type} error:: ${error}\n${type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc}`,
+            `${type} error:: ${error}\n${addLineNumbers(type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc)}`,
         );
     }
 

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.2 | Documentation</title>
+  <title>kampos 0.14.3 | 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.2</code></div>
+          <div class='mb1'><code>0.14.3</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
@@ -4157,6 +4157,17 @@ <h3 class='fl m0' id='effects'>
 
 
 
+                <tr>
+  <td class='break-word'><span class='code bold'>params.direction</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
+
+    (default <code>&#39;x&#39;</code>)
+  </td>
+  <td class='break-word'><span>direction to apply the slit scan effect.
+</span></td>
+</tr>
+
+
+
             </tbody>
           </table>
 

diff --git a/index.umd.js b/index.umd.js
@@ -1341,6 +1341,7 @@ const mat3 satmat = mat3(
      * @param {number} [params.time=0.0] initial time for controlling initial noise value.
      * @param {number} [params.intensity=0.1] initial intensity to use.
      * @param {number} [params.frequency] initial frequency to use .
+     * @param {string} [params.direction='x'] direction to apply the slit scan effect.
      * @returns {slitScanEffect}
      *
      * @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -1349,7 +1350,8 @@ const mat3 satmat = mat3(
         noise,
         time = 0.0,
         intensity = 0.1,
-        frequency = 2.0
+        frequency = 2.0,
+        direction = 'x',
     }) {
         /**
          * @typedef {Object} slitScanEffect
@@ -1362,20 +1364,27 @@ const mat3 satmat = mat3(
          * effect.intensity = 0.5;
          * effect.frequency = 3.5;
          */
+        const isHorizontal = direction === 'x';
+        const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+        const noiseTimePart = 'u_time * 0.0001';
+
         return {
             fragment: {
                 uniform: {
                     u_slitScanEnabled: 'bool',
                     u_intensity: 'float',
                     u_frequency: 'float',
                     u_time: 'float',
+                    u_horizontal: 'bool'
                 },
                 constant: noise,
                 source: `
-    float noiseValue = noise(vec2(gl_FragCoord.x / u_resolution.x * u_frequency, u_time * 0.0001));
-    float sourceX = sourceCoord.x + noiseValue * u_intensity;
-    float mirroredX = mod(-sourceX, 1.0) * (mod(sourceX - 1.0, 2.0) - mod(sourceX, 1.0)) + mod(sourceX, 1.0) * (mod(sourceX, 2.0) - mod(sourceX, 1.0));
-    sourceCoord = vec2(mirroredX, sourceCoord.y);`,
+    if (u_slitScanEnabled) {
+        float noiseValue = noise(vec2(${isHorizontal ? noiseFragPart : noiseTimePart}, ${isHorizontal ? noiseTimePart : noiseFragPart}));
+        float source_ = sourceCoord.${direction} + noiseValue * u_intensity;
+        float mirrored_ = mod(-source_, 1.0) * (mod(source_ - 1.0, 2.0) - mod(source_, 1.0)) + mod(source_, 1.0) * (mod(source_, 2.0) - mod(source_, 1.0));
+        sourceCoord = ${isHorizontal ? 'vec2(mirrored_, sourceCoord.y)' : 'vec2(sourceCoord.x, mirrored_)'};
+    }`,
             },
             get disabled() {
                 return !this.uniforms[0].data[0];
@@ -2853,8 +2862,11 @@ void main() {
             _getWebGLProgram(gl, vertexSrc, fragmentSrc);
 
         if (error) {
+            function addLineNumbers(str) {
+                return str.split('\n').map((line, i) => `${i + 1}: ${line}`).join('\n');
+            }
             throw new Error(
-                `${type} error:: ${error}\n${type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc}`,
+                `${type} error:: ${error}\n${addLineNumbers(type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc)}`,
             );
         }
 

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

diff --git a/src/core.js b/src/core.js
@@ -329,8 +329,11 @@ function _initProgram(gl, plane, effects, noSource = false) {
         _getWebGLProgram(gl, vertexSrc, fragmentSrc);
 
     if (error) {
+        function addLineNumbers(str) {
+            return str.split('\n').map((line, i) => `${i + 1}: ${line}`).join('\n');
+        }
         throw new Error(
-            `${type} error:: ${error}\n${type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc}`,
+            `${type} error:: ${error}\n${addLineNumbers(type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc)}`,
         );
     }
 

diff --git a/src/effects/slit-scan.js b/src/effects/slit-scan.js
@@ -6,6 +6,7 @@
  * @param {number} [params.time=0.0] initial time for controlling initial noise value.
  * @param {number} [params.intensity=0.1] initial intensity to use.
  * @param {number} [params.frequency] initial frequency to use .
+ * @param {string} [params.direction='x'] direction to apply the slit scan effect.
  * @returns {slitScanEffect}
  *
  * @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -14,7 +15,8 @@ export default function ({
     noise,
     time = 0.0,
     intensity = 0.1,
-    frequency = 2.0
+    frequency = 2.0,
+    direction = 'x',
 }) {
     /**
      * @typedef {Object} slitScanEffect
@@ -27,20 +29,27 @@ export default function ({
      * effect.intensity = 0.5;
      * effect.frequency = 3.5;
      */
+    const isHorizontal = direction === 'x';
+    const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+    const noiseTimePart = 'u_time * 0.0001';
+
     return {
         fragment: {
             uniform: {
                 u_slitScanEnabled: 'bool',
                 u_intensity: 'float',
                 u_frequency: 'float',
                 u_time: 'float',
+                u_horizontal: 'bool'
             },
             constant: noise,
             source: `
-    float noiseValue = noise(vec2(gl_FragCoord.x / u_resolution.x * u_frequency, u_time * 0.0001));
-    float sourceX = sourceCoord.x + noiseValue * u_intensity;
-    float mirroredX = mod(-sourceX, 1.0) * (mod(sourceX - 1.0, 2.0) - mod(sourceX, 1.0)) + mod(sourceX, 1.0) * (mod(sourceX, 2.0) - mod(sourceX, 1.0));
-    sourceCoord = vec2(mirroredX, sourceCoord.y);`,
+    if (u_slitScanEnabled) {
+        float noiseValue = noise(vec2(${isHorizontal ? noiseFragPart : noiseTimePart}, ${isHorizontal ? noiseTimePart : noiseFragPart}));
+        float source_ = sourceCoord.${direction} + noiseValue * u_intensity;
+        float mirrored_ = mod(-source_, 1.0) * (mod(source_ - 1.0, 2.0) - mod(source_, 1.0)) + mod(source_, 1.0) * (mod(source_, 2.0) - mod(source_, 1.0));
+        sourceCoord = ${isHorizontal ? 'vec2(mirrored_, sourceCoord.y)' : 'vec2(sourceCoord.x, mirrored_)'};
+    }`,
         },
         get disabled() {
             return !this.uniforms[0].data[0];