From fda7a86446f41fa0379b298a2cfb30a8dbf5ba92 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Tue, 17 Dec 2024 14:14:47 +0200 Subject: [PATCH 1/2] Added support for direction in SlitScan --- CHANGELOG.md | 6 ++++++ dist/index.cjs | 24 ++++++++++++++++++------ docs/index.html | 15 +++++++++++++-- index.umd.js | 24 ++++++++++++++++++------ src/core.js | 5 ++++- src/effects/slit-scan.js | 19 ++++++++++++++----- 6 files changed, 73 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5944b76..670141c 100644 --- 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 index c20c121..152c2d2 100644 --- 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,6 +1360,10 @@ 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: { @@ -1365,13 +1371,16 @@ function slitScan ({ 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 index d4e44fa..dcff18e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,7 +2,7 @@ - kampos 0.14.2 | Documentation + kampos 0.14.3 | Documentation @@ -15,7 +15,7 @@

kampos

-
0.14.2
+
0.14.3
+ + params.direction string + + (default 'x') + + direction to apply the slit scan effect. + + + + + diff --git a/index.umd.js b/index.umd.js index c1abfa9..73ae61a 100644 --- 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,6 +1364,10 @@ 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: { @@ -1369,13 +1375,16 @@ const mat3 satmat = mat3( 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/src/core.js b/src/core.js index fb8047a..1ec3025 100644 --- 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 index 070ecfd..d2829ea 100644 --- 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,6 +29,10 @@ 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: { @@ -34,13 +40,16 @@ export default function ({ 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]; From bf945677cf3416530e5facb04ba50520769290b9 Mon Sep 17 00:00:00 2001 From: Yehonatan Daniv Date: Tue, 17 Dec 2024 14:14:53 +0200 Subject: [PATCH 2/2] 0.14.4 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 064726b..0029469 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "kampos", - "version": "0.14.3", + "version": "0.14.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "kampos", - "version": "0.14.3", + "version": "0.14.4", "license": "MIT", "devDependencies": { "@babel/core": "^7.26.0", diff --git a/package.json b/package.json index 1851e4b..cffa065 100644 --- 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",