SlitScan offset input (#62)

* Added offsetInput to slitScan * Fixed version in CHANGELOG * 0.14.7
wix-incubator · Dec 19, 2024 · ad99b33 · ad99b33
1 parent 7cb77a9
commit ad99b33
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 0.14.7 (2024-12-19)
+
+_New:_
+
+-   Added `offsetInput` property to `slitScan` effect for allowing exposing an offset variable.
+
 ### 0.14.6 (2024-12-18)
 
 _Fixed:_

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1339,6 +1339,7 @@ function kaleidoscope ({ segments = 6, offset, rotation = 0 } = {}) {
  * @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.
+ * @param {string} [params.offsetInput] code to use as input for adding offset. Defaults to empty.
  * @returns {slitScanEffect}
  *
  * @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -1349,6 +1350,7 @@ function slitScan ({
     intensity = 0.1,
     frequency = 2.0,
     direction = 'x',
+    offsetInput = '',
 }) {
     /**
      * @typedef {Object} slitScanEffect
@@ -1362,7 +1364,7 @@ function slitScan ({
      * effect.frequency = 3.5;
      */
     const isHorizontal = direction === 'x';
-    const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+    const noiseFragPart = `(gl_FragCoord.${direction} / u_resolution.${direction}${offsetInput ? `+ ${offsetInput}` : ''}) * u_frequency`;
     const noiseTimePart = 'u_time * 0.0001';
 
     return {

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.5 | Documentation</title>
+  <title>kampos 0.14.6 | 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.5</code></div>
+          <div class='mb1'><code>0.14.6</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
@@ -4169,6 +4169,15 @@ <h3 class='fl m0' id='effects'>
 
 
 
+                <tr>
+  <td class='break-word'><span class='code bold'>params.offsetInput</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>code to use as input for adding offset. Defaults to empty.
+</span></td>
+</tr>
+
+
+
             </tbody>
           </table>
 

diff --git a/index.umd.js b/index.umd.js
@@ -1343,6 +1343,7 @@ const mat3 satmat = mat3(
      * @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.
+     * @param {string} [params.offsetInput] code to use as input for adding offset. Defaults to empty.
      * @returns {slitScanEffect}
      *
      * @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -1353,6 +1354,7 @@ const mat3 satmat = mat3(
         intensity = 0.1,
         frequency = 2.0,
         direction = 'x',
+        offsetInput = '',
     }) {
         /**
          * @typedef {Object} slitScanEffect
@@ -1366,7 +1368,7 @@ const mat3 satmat = mat3(
          * effect.frequency = 3.5;
          */
         const isHorizontal = direction === 'x';
-        const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+        const noiseFragPart = `(gl_FragCoord.${direction} / u_resolution.${direction}${offsetInput ? `+ ${offsetInput}` : ''}) * u_frequency`;
         const noiseTimePart = 'u_time * 0.0001';
 
         return {

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

diff --git a/src/effects/slit-scan.js b/src/effects/slit-scan.js
@@ -7,6 +7,7 @@
  * @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.
+ * @param {string} [params.offsetInput] code to use as input for adding offset. Defaults to empty.
  * @returns {slitScanEffect}
  *
  * @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -17,6 +18,7 @@ export default function ({
     intensity = 0.1,
     frequency = 2.0,
     direction = 'x',
+    offsetInput = '',
 }) {
     /**
      * @typedef {Object} slitScanEffect
@@ -30,7 +32,7 @@ export default function ({
      * effect.frequency = 3.5;
      */
     const isHorizontal = direction === 'x';
-    const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+    const noiseFragPart = `(gl_FragCoord.${direction} / u_resolution.${direction}${offsetInput ? `+ ${offsetInput}` : ''}) * u_frequency`;
     const noiseTimePart = 'u_time * 0.0001';
 
     return {