🎉 Add support for alpha channel in color of TV Effect, TV Glitch, and Glitch

docs/changelog.md

@@ -11,11 +11,12 @@ SPDX-License-Identifier: CC-BY-4.0
 
 #### New Features
 
-* **New Effect: TV-Glitch.** This effect combines the Glitch and the TV Effect into one. Credits go to Kurt Wilson (https://github.com/Kurtoid) for this idea!
+* **New Effect: TV-Glitch.** This effect combines the Glitch and the TV Effect into one. Credits go to [Kurt Wilson](https://github.com/Kurtoid) for this idea!
 
 #### Other Enhancements
 
 * On KDE, the effect configuration dialogs can now be translated. The translations for GNOME are re-used, so we already have many translations! This requires at least KWin 5.27 to be working.
+* The effect colors for the Glitch and TV Effect now support an alpha channel. With this you can control how much color gets mixed into the window color.
 
 
 ## [Burn My Windows 25](https://github.com/schneegans/Burn-My-Windows/releases/tag/v25)

kwin/glitch/onSettingsChanged.js

@@ -9,4 +9,4 @@ 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'));
+effect.setUniform(this.shader, 'uColor', this.readRGBAConfig('Color'));

kwin/tv-glitch/onSettingsChanged.js

@@ -9,4 +9,4 @@ 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'));
+effect.setUniform(this.shader, 'uColor', this.readRGBAConfig('Color'));

kwin/tv/onSettingsChanged.js

@@ -5,4 +5,4 @@
 // The code below is called whenever the user changes something in the configuration of
 // the effect.
 
-effect.setUniform(this.shader, 'uColor', this.readRGBConfig('Color'));
+effect.setUniform(this.shader, 'uColor', this.readRGBAConfig('Color'));

resources/shaders/glitch.frag

@@ -14,7 +14,7 @@
 
 // The content from common.glsl is automatically prepended to each shader effect.
 
-uniform vec3 uColor;
+uniform vec4 uColor;
 uniform float uSeed;
 uniform float uScale;
 uniform float uStrength;
@@ -37,18 +37,18 @@ void main() {
   vec4 oColor = getInputColor(vec2(xPos, iTexCoord.y));
 
   // Mix in some random interference lines.
-  vec3 interference          = uColor * hash12(vec2(yPos * time));
+  vec3 interference          = uColor.rgb * hash12(vec2(yPos * time));
   float interferenceStrength = noise * min(strength, 1.0);
-  oColor.rgb                 = mix(oColor.rgb, interference, interferenceStrength);
+  oColor.rgb = mix(oColor.rgb, interference, uColor.a * interferenceStrength);
 
   // Mix in some grainy noise.
-  vec3 grain          = uColor * simplex2D(uSize * iTexCoord + vec2(time * 100.0));
+  vec3 grain          = uColor.rgb * simplex2D(uSize * iTexCoord + vec2(time * 100.0));
   float grainStrength = 0.2 * min(strength, 1.0);
-  oColor.rgb          = mix(oColor.rgb, grain, grainStrength);
+  oColor.rgb          = mix(oColor.rgb, grain, uColor.a * 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));
+    oColor.rgb = mix(oColor.rgb, uColor.rgb, uColor.a * (0.15 * noise));
   }
 
   // Shift green/blue channels.

resources/shaders/tv-glitch.frag

@@ -14,7 +14,7 @@
 
 // The content from common.glsl is automatically prepended to each shader effect.
 
-uniform vec3 uColor;
+uniform vec4 uColor;
 uniform float uSeed;
 uniform float uScale;
 uniform float uStrength;
@@ -57,18 +57,18 @@ void main() {
   vec4 oColor = getInputColor(vec2(xPos, coords.y));
 
   // Mix in some random interference lines.
-  vec3 interference          = uColor * hash12(vec2(yPos * time));
+  vec3 interference          = uColor.rgb * hash12(vec2(yPos * time));
   float interferenceStrength = noise * min(strength, 1.0);
-  oColor.rgb                 = mix(oColor.rgb, interference, interferenceStrength);
+  oColor.rgb = mix(oColor.rgb, interference, uColor.a * interferenceStrength);
 
   // Mix in some grainy noise.
-  vec3 grain          = uColor * simplex2D(uSize * coords + vec2(time * 100.0));
+  vec3 grain          = uColor.rgb * simplex2D(uSize * coords + vec2(time * 100.0));
   float grainStrength = 0.2 * min(strength, 1.0);
-  oColor.rgb          = mix(oColor.rgb, grain, grainStrength);
+  oColor.rgb          = mix(oColor.rgb, grain, uColor.a * 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));
+    oColor.rgb = mix(oColor.rgb, uColor.rgb, uColor.a * (0.15 * noise));
   }
 
   // Shift green/blue channels.
@@ -101,7 +101,8 @@ void main() {
   float ffMask = 1.0 - smoothstep(0.0, 1.0, ffProg);
 
   // Assemble the final color value.
-  oColor.rgb = mix(oColor.rgb, uColor * oColor.a, smoothstep(0.0, 1.0, tvProgress));
+  oColor.rgb =
+    mix(oColor.rgb, uColor.rgb * oColor.a, uColor.a * smoothstep(0.0, 1.0, tvProgress));
   float mask = tbMask * lrMask * ffMask;
 
   oColor.a *= mask;

resources/shaders/tv.frag

@@ -14,7 +14,7 @@
 
 // The content from common.glsl is automatically prepended to each shader effect.
 
-uniform vec3 uColor;
+uniform vec4 uColor;
 
 const float BLUR_WIDTH = 0.01;  // Width of the gradients.
 const float TB_TIME    = 0.7;   // Relative time for the top/bottom animation.
@@ -56,7 +56,8 @@ void main() {
   float mask = tbMask * lrMask * ffMask;
 
   vec4 oColor = getInputColor(coords);
-  oColor.rgb  = mix(oColor.rgb, uColor * oColor.a, smoothstep(0.0, 1.0, prog));
+  oColor.rgb =
+    mix(oColor.rgb, uColor.rgb * oColor.a, uColor.a * smoothstep(0.0, 1.0, prog));
   oColor.a *= mask;
 
   // These are pretty useful for understanding how this works.

resources/ui/adw/Glitch.ui

@@ -149,7 +149,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
           <object class="GtkColorButton" id="glitch-color">
             <property name="valign">center</property>
             <property name="width-request">250</property>
-            <property name="use_alpha">0</property>
+            <property name="use_alpha">1</property>
             <property name="show_editor">1</property>
           </object>
         </child>

resources/ui/adw/TVEffect.ui

@@ -48,7 +48,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
         <property name="activatable-widget">tv-effect-color</property>
         <child>
           <object class="GtkColorButton" id="tv-effect-color">
-            <property name="use_alpha">0</property>
+            <property name="use_alpha">1</property>
             <property name="show_editor">1</property>
             <property name="width-request">250</property>
             <property name="valign">center</property>

resources/ui/adw/TVGlitch.ui

@@ -149,7 +149,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
           <object class="GtkColorButton" id="tv-glitch-color">
             <property name="valign">center</property>
             <property name="width-request">250</property>
-            <property name="use_alpha">0</property>
+            <property name="use_alpha">1</property>
             <property name="show_editor">1</property>
           </object>
         </child>

resources/ui/gtk3/Glitch.ui

@@ -263,7 +263,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </child>
                     <child>
                       <object class="GtkColorButton" id="glitch-color">
-                        <property name="use_alpha">0</property>
+                        <property name="use_alpha">1</property>
                         <property name="show_editor">1</property>
                       </object>
                     </child>

resources/ui/gtk3/TVEffect.ui

@@ -95,7 +95,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </child>
                     <child>
                       <object class="GtkColorButton" id="tv-effect-color">
-                        <property name="use_alpha">0</property>
+                        <property name="use_alpha">1</property>
                         <property name="show_editor">1</property>
                       </object>
                     </child>

resources/ui/gtk3/TVGlitch.ui

@@ -263,7 +263,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </child>
                     <child>
                       <object class="GtkColorButton" id="tv-glitch-color">
-                        <property name="use_alpha">0</property>
+                        <property name="use_alpha">1</property>
                         <property name="show_editor">1</property>
                       </object>
                     </child>

resources/ui/gtk4/Glitch.ui

@@ -220,7 +220,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </child>
                     <child>
                       <object class="GtkColorButton" id="glitch-color">
-                        <property name="use_alpha">0</property>
+                        <property name="use_alpha">1</property>
                         <property name="show_editor">1</property>
                       </object>
                     </child>

resources/ui/gtk4/TVEffect.ui

@@ -82,7 +82,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </child>
                     <child>
                       <object class="GtkColorButton" id="tv-effect-color">
-                        <property name="use_alpha">0</property>
+                        <property name="use_alpha">1</property>
                         <property name="show_editor">1</property>
                       </object>
                     </child>

resources/ui/gtk4/TVGlitch.ui

@@ -220,7 +220,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                     </child>
                     <child>
                       <object class="GtkColorButton" id="tv-glitch-color">
-                        <property name="use_alpha">0</property>
+                        <property name="use_alpha">1</property>
                         <property name="show_editor">1</property>
                       </object>
                     </child>

src/Glitch.js

@@ -59,7 +59,7 @@ var Glitch = class {
 
         // 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._uColor, 4, [c.red / 255, c.green / 255, c.blue / 255, c.alpha / 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')]);

src/TVEffect.js

@@ -51,8 +51,8 @@ var TVEffect = class {
       // 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('tv-effect-color'))[1];
-        shader.set_uniform_float(shader._uColor, 3,
+        shader.set_uniform_float(
-                                 [c.red / 255, c.green / 255, c.blue / 255]);
+          shader._uColor, 4, [c.red / 255, c.green / 255, c.blue / 255, c.alpha / 255]);
       });
     });
   }

src/TVGlitch.js

@@ -60,7 +60,7 @@ var TVGlitch = class {
 
         // 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._uColor, 4, [c.red / 255, c.green / 255, c.blue / 255, c.alpha / 255]);
         shader.set_uniform_float(shader._uScale, 1, [settings.get_double('tv-glitch-scale')]);
         shader.set_uniform_float(shader._uStrength, 1, [settings.get_double('tv-glitch-strength')]);
         shader.set_uniform_float(shader._uSpeed, 1, [settings.get_double('tv-glitch-speed')]);