From 72db690fa80a551e7eb1ca41d0cc51f54b938656 Mon Sep 17 00:00:00 2001 From: Kurt Wilson Date: Sun, 22 Jan 2023 21:57:39 -0500 Subject: [PATCH 1/2] :tada: add tvglitch effect - adds the TV effect to glitch --- kwin/build.sh | 1 + kwin/tvglitch/config.ui | 137 +++++++++++++++++++++++++++++ kwin/tvglitch/main.xml | 28 ++++++ kwin/tvglitch/onAnimationBegin.js | 7 ++ kwin/tvglitch/onSettingsChanged.js | 12 +++ resources/shaders/tvglitch.frag | 120 +++++++++++++++++++++++++ src/TVGlitch.js | 120 +++++++++++++++++++++++++ 7 files changed, 425 insertions(+) create mode 100755 kwin/tvglitch/config.ui create mode 100755 kwin/tvglitch/main.xml create mode 100644 kwin/tvglitch/onAnimationBegin.js create mode 100644 kwin/tvglitch/onSettingsChanged.js create mode 100644 resources/shaders/tvglitch.frag create mode 100644 src/TVGlitch.js diff --git a/kwin/build.sh b/kwin/build.sh index 7dba2b4..8311b9a 100755 --- a/kwin/build.sh +++ b/kwin/build.sh @@ -140,6 +140,7 @@ generate "energize-b" "Energize B [Burn-My-Windows]" "Using different transpor generate "fire" "Fire [Burn-My-Windows]" "The classic effect inspired by Compiz" generate "glide" "Glide [Burn-My-Windows]" "Fade the window to transparency with subtle 3D effects" generate "glitch" "Glitch [Burn-My-Windows]" "This effect applies some intentional graphics issues to your windows" +generate "tvglitch" "TVGlitch [Burn-My-Windows]" "This effect applies some intentional graphics issues to your windows" generate "hexagon" "Hexagon [Burn-My-Windows]" "With glowing lines and hexagon-shaped tiles, this effect looks very sci-fi" generate "incinerate" "Incinerate [Burn-My-Windows]" "A less snappy but definitely more fancy take on the fire effect" generate "pixelate" "Pixelate [Burn-My-Windows]" "Pixelate the window and randomly hide the pixels" diff --git a/kwin/tvglitch/config.ui b/kwin/tvglitch/config.ui new file mode 100755 index 0000000..84ba445 --- /dev/null +++ b/kwin/tvglitch/config.ui @@ -0,0 +1,137 @@ + + + + + + BMWConfigForm + + + + 0 + 0 + 562 + 365 + + + + + + + Scale + + + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter + + + kcfg_Color + + + + + + + Color + + + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter + + + kcfg_Color + + + + + + + Animation Time [ms] + + + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter + + + + + + + true + + + + + + + 100 + + + 9999 + + + 100 + + + + + + + Strength + + + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter + + + + + + + Speed + + + Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter + + + + + + + 0.100000000000000 + + + 10.000000000000000 + + + + + + + 0.100000000000000 + + + 10.000000000000000 + + + + + + + 0.100000000000000 + + + 10.000000000000000 + + + + + + + + KColorButton + QPushButton +
kcolorbutton.h
+ + + + + diff --git a/kwin/tvglitch/main.xml b/kwin/tvglitch/main.xml new file mode 100755 index 0000000..95e2bf4 --- /dev/null +++ b/kwin/tvglitch/main.xml @@ -0,0 +1,28 @@ + + + + + + + + + 750 + + + 1 + + + 2 + + + 2 + + + #64A0FF + + + diff --git a/kwin/tvglitch/onAnimationBegin.js b/kwin/tvglitch/onAnimationBegin.js new file mode 100644 index 0000000..53dc727 --- /dev/null +++ b/kwin/tvglitch/onAnimationBegin.js @@ -0,0 +1,7 @@ +// SPDX-FileCopyrightText: Simon Schneegans +// SPDX-License-Identifier: GPL-3.0-or-later + +// This part is automatically included in the effect's source during the build process. +// The code below is called whenever a window is closed or opened. + +effect.setUniform(this.shader, 'uSeed', Math.random()); diff --git a/kwin/tvglitch/onSettingsChanged.js b/kwin/tvglitch/onSettingsChanged.js new file mode 100644 index 0000000..03c946f --- /dev/null +++ b/kwin/tvglitch/onSettingsChanged.js @@ -0,0 +1,12 @@ +// SPDX-FileCopyrightText: Simon Schneegans +// SPDX-License-Identifier: GPL-3.0-or-later + +// This part is automatically included in the effect's source during the build process. +// The code below is called whenever the user changes something in the configuration of +// the effect. + +effect.setUniform(this.shader, 'uDuration', this.duration * 0.001); +effect.setUniform(this.shader, 'uScale', effect.readConfig('Scale', 1.0)); +effect.setUniform(this.shader, 'uStrength', effect.readConfig('Strength', 1.0)); +effect.setUniform(this.shader, 'uSpeed', effect.readConfig('Speed', 1.0)); +effect.setUniform(this.shader, 'uColor', this.readRGBConfig('Color')); \ No newline at end of file diff --git a/resources/shaders/tvglitch.frag b/resources/shaders/tvglitch.frag new file mode 100644 index 0000000..0374a0f --- /dev/null +++ b/resources/shaders/tvglitch.frag @@ -0,0 +1,120 @@ +////////////////////////////////////////////////////////////////////////////////////////// +// ) ( // +// ( /( ( ( ) ( ( ( ( )\ ) ( ( // +// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( // +// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ // +// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) // +// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< // +// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ // +// |__/ // +////////////////////////////////////////////////////////////////////////////////////////// + +// SPDX-FileCopyrightText: Simon Schneegans +// SPDX-License-Identifier: GPL-3.0-or-later + +// The content from common.glsl is automatically prepended to each shader effect. + +uniform vec3 uColor; +uniform float uSeed; +uniform float uScale; +uniform float uStrength; +uniform float uSpeed; + +// tv params + +const float BLUR_WIDTH = 0.01; // Width of the gradients. +const float TB_TIME = 0.7; // Relative time for the top/bottom animation. +const float LR_TIME = 0.4; // Relative time for the left/right animation. +const float LR_DELAY = 0.6; // Delay after which the left/right animation starts. +const float FF_TIME = 0.1; // Relative time for the final fade to transparency. +const float SCALING = 0.5; // Additional vertical scaling of the window. + + +// Somewhat inspired by https://www.shadertoy.com/view/XtK3W3 +void main() { + float progress = easeInQuad(uForOpening ? 1.0 - uProgress : uProgress); + float time = progress * uDuration * uSpeed; + float strength = uStrength * progress; + float displace = 1000.0 * strength / uSize.x; + float yPos = uScale * uSize.y * (iTexCoord.y + uSeed * 10.0); + + // Create large noise waves and add some smaller noise waves. + float noise = clamp(simplex2D(vec2(time, yPos * 0.002)) - 0.5, 0.0, 1.0); + noise += (simplex2D(vec2(time * 10.0, yPos * 0.05)) - 0.5) * 0.15; + + // Apply the noise as x displacement for every line. + float xPos = clamp(iTexCoord.x - displace * noise * noise, 0.0, 1.0); + vec4 oColor = getInputColor(vec2(xPos, iTexCoord.y)); + + // Mix in some random interference lines. + vec3 interference = uColor * hash12(vec2(yPos * time)); + float interferenceStrength = noise * min(strength, 1.0); + oColor.rgb = mix(oColor.rgb, interference, interferenceStrength); + + // Mix in some grainy noise. + vec3 grain = uColor * simplex2D(uSize * iTexCoord + vec2(time * 100.0)); + float grainStrength = 0.2 * min(strength, 1.0); + oColor.rgb = mix(oColor.rgb, grain, grainStrength); + + // Add a subtle line pattern every 4 pixels. + if (floor(mod(yPos * 0.25, 2.0)) == 0.0) { + oColor.rgb = mix(uColor, oColor.rgb, 1.0 - (0.15 * noise)); + } + + // Shift green/blue channels. + float offset = 0.1 * noise * displace; + oColor.g = mix(oColor.g, getInputColor(vec2(xPos + offset, iTexCoord.y)).g, 0.25); + oColor.b = mix(oColor.b, getInputColor(vec2(xPos - offset, iTexCoord.y)).b, 0.25); + + // Dissolve the window. + // float fadeDelay = 1.5; + // float alpha = clamp(noise + 1.0 + fadeDelay - (3.0 + fadeDelay) * progress, 0.0, 1.0); + // oColor.a *= alpha; + + // add tv effect - we just want the shape transforms + float toffset = uForOpening ? 0.0 : 1.0; + float prog = clamp(uProgress * 2.0 - toffset, 0.0, 1.0); + prog = uForOpening ? 1.0 - easeOutQuad(prog) : easeOutQuad(prog); + + // Scale down the window vertically. + float scale = 1.0 / mix(1.0, SCALING, prog) - 1.0; + vec2 coords = iTexCoord.st; + coords.y = coords.y * (scale + 1.0) - scale * 0.5; + + // All of these are in [0..1] during the different stages of the animation. + // tb refers to the top-bottom animation. + // lr refers to the left-right animation. + // ff refers to the final fade animation. + float tbProg = smoothstep(0.0, 1.0, clamp(prog / TB_TIME, 0.0, 1.0)); + float lrProg = smoothstep(0.0, 1.0, clamp((prog - LR_DELAY) / LR_TIME, 0.0, 1.0)); + float ffProg = smoothstep(0.0, 1.0, clamp((prog - 1.0 + FF_TIME) / FF_TIME, 0.0, 1.0)); + + // This is a top-center-bottom gradient in [0..1..0] + float tb = coords.y * 2.0; + tb = tb < 1.0 ? tb : 2.0 - tb; + + // This is a left-center-right gradient in [0..1..0] + float lr = coords.x * 2.0; + lr = lr < 1.0 ? lr : 2.0 - lr; + + // Combine the progress values with the gradients to create the alpha masks. + float tbMask = 1.0 - smoothstep(0.0, 1.0, clamp((tbProg - tb) / BLUR_WIDTH, 0.0, 1.0)); + float lrMask = 1.0 - smoothstep(0.0, 1.0, clamp((lrProg - lr) / BLUR_WIDTH, 0.0, 1.0)); + float ffMask = 1.0 - smoothstep(0.0, 1.0, ffProg); + + // Assemble the final alpha value. + float mask = tbMask * lrMask * ffMask; + + // vec4 oColor = getInputColor(coords); + // don't add another color transform + // oColor.rgb = mix(oColor.rgb, uColor * oColor.a, smoothstep(0.0, 1.0, prog)); + oColor.a *= mask; + + // These are pretty useful for understanding how this works. + // oColor = vec4(vec3(tbMask), 1); + // oColor = vec4(vec3(lrMask), 1); + // oColor = vec4(vec3(ffMask), 1); + // oColor = vec4(vec3(mask), 1); + + setOutputColor(oColor); +} diff --git a/src/TVGlitch.js b/src/TVGlitch.js new file mode 100644 index 0000000..dda3bba --- /dev/null +++ b/src/TVGlitch.js @@ -0,0 +1,120 @@ +////////////////////////////////////////////////////////////////////////////////////////// +// ) ( // +// ( /( ( ( ) ( ( ( ( )\ ) ( ( // +// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( // +// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ // +// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) // +// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< // +// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ // +// |__/ // +////////////////////////////////////////////////////////////////////////////////////////// + +// SPDX-FileCopyrightText: Simon Schneegans +// SPDX-License-Identifier: GPL-3.0-or-later + +'use strict'; + +const GObject = imports.gi.GObject; + +const _ = imports.gettext.domain('burn-my-windows').gettext; + +const ExtensionUtils = imports.misc.extensionUtils; +const Me = imports.misc.extensionUtils.getCurrentExtension(); +const utils = Me.imports.src.utils; +const ShaderFactory = Me.imports.src.ShaderFactory.ShaderFactory; + +////////////////////////////////////////////////////////////////////////////////////////// +// This effect applies some intentional graphics issues to your windows. // +////////////////////////////////////////////////////////////////////////////////////////// + +// The effect class can be used to get some metadata (like the effect's name or supported +// GNOME Shell versions), to initialize the respective page of the settings dialog, as +// well as to create the actual shader for the effect. +var Glitch = class { + + // The constructor creates a ShaderFactory which will be used by extension.js to create + // shader instances for this effect. The shaders will be automagically created using the + // GLSL file in resources/shaders/.glsl. The callback will be called for each + // newly created shader instance. + constructor() { + this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => { + // We import Clutter in this function as it is not available in the preferences + // process. This creator function of the ShaderFactory is only called within GNOME + // Shell's process. + const Clutter = imports.gi.Clutter; + + // Store uniform locations of newly created shaders. + shader._uSeed = shader.get_uniform_location('uSeed'); + shader._uColor = shader.get_uniform_location('uColor'); + shader._uScale = shader.get_uniform_location('uScale'); + shader._uStrength = shader.get_uniform_location('uStrength'); + shader._uSpeed = shader.get_uniform_location('uSpeed'); + + // Write all uniform values at the start of each animation. + shader.connect('begin-animation', (shader, settings) => { + const c = Clutter.Color.from_string(settings.get_string('glitch-color'))[1]; + + // If we are performing an integration tests, we use a fixed seed. + const testMode = settings.get_boolean('test-mode'); + + // clang-format off + shader.set_uniform_float(shader._uSeed, 1, [testMode ? 0 : Math.random()]); + shader.set_uniform_float(shader._uColor, 3, [c.red / 255, c.green / 255, c.blue / 255]); + shader.set_uniform_float(shader._uScale, 1, [settings.get_double('glitch-scale')]); + shader.set_uniform_float(shader._uStrength, 1, [settings.get_double('glitch-strength')]); + shader.set_uniform_float(shader._uSpeed, 1, [settings.get_double('glitch-speed')]); + // clang-format on + }); + }); + } + + // ---------------------------------------------------------------------------- metadata + + // The effect is available on all GNOME Shell versions supported by this extension. + getMinShellVersion() { + return [3, 36]; + } + + // This will be called in various places where a unique identifier for this effect is + // required. It should match the prefix of the settings keys which store whether the + // effect is enabled currently (e.g. '*-close-effect'), and its animation time + // (e.g. '*-animation-time'). + getNick() { + return 'tvglitch'; + } + + // This will be shown in the sidebar of the preferences dialog as well as in the + // drop-down menus where the user can choose the effect. + getLabel() { + return _('TVGlitch'); + } + + // -------------------------------------------------------------------- API for prefs.js + + // This is called by the preferences dialog. It loads the settings page for this effect, + // and binds all properties to the settings. + getPreferences(dialog) { + + // Add the settings page to the builder. + dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/TVGlitch.ui`); + + // Bind all properties. + dialog.bindAdjustment('glitch-animation-time'); + dialog.bindAdjustment('glitch-scale'); + dialog.bindAdjustment('glitch-speed'); + dialog.bindAdjustment('glitch-strength'); + dialog.bindColorButton('glitch-color'); + + // Finally, return the new settings page. + return dialog.getBuilder().get_object('tvglitch-prefs'); + } + + // ---------------------------------------------------------------- API for extension.js + + // The getActorScale() is called from extension.js to adjust the actor's size during the + // animation. This is useful if the effect requires drawing something beyond the usual + // bounds of the actor. This only works for GNOME 3.38+. + getActorScale(settings) { + return {x: 1.0, y: 1.0}; + } +} From 424f522177191dd2fccede95ffbf35d851c49adf Mon Sep 17 00:00:00 2001 From: Kurt Wilson Date: Sun, 22 Jan 2023 22:35:57 -0500 Subject: [PATCH 2/2] clarify change in tv timing code --- resources/shaders/tvglitch.frag | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/shaders/tvglitch.frag b/resources/shaders/tvglitch.frag index 0374a0f..efadfd8 100644 --- a/resources/shaders/tvglitch.frag +++ b/resources/shaders/tvglitch.frag @@ -72,6 +72,8 @@ void main() { // oColor.a *= alpha; // add tv effect - we just want the shape transforms + + // add the tv effect sooner/later in the animation float toffset = uForOpening ? 0.0 : 1.0; float prog = clamp(uProgress * 2.0 - toffset, 0.0, 1.0); prog = uForOpening ? 1.0 - easeOutQuad(prog) : easeOutQuad(prog);