🎉 Add support for colorful wisps

docs/changelog.md

@@ -13,6 +13,7 @@ SPDX-License-Identifier: CC-BY-4.0
 
 - Two convenience buttons have been added to the preferences dialog. One allows you to select all effects, the other one allows you to deselect all effects.
 - A new main menu entry has been added which allows you to open the effect-profile directory. This is useful if you want to back up or share your profiles with others.
+- The Wisps effect now supports colorful wisps. You can now specify three colors for the effect. These colors make up a gradient which is used to color the wisps.
 
 #### Bug Fixes
 

kwin/wisps/config.ui

@@ -71,7 +71,17 @@ SPDX-License-Identifier: GPL-3.0-or-later
                 </widget>
             </item>
             <item row="1" column="1">
-                <widget class="KColorButton" name="kcfg_Color"></widget>
+                <layout class="QHBoxLayout" name="horizontalLayout">
+                    <item>
+                        <widget class="KColorButton" name="kcfg_Color1"></widget>
+                    </item>
+                    <item>
+                        <widget class="KColorButton" name="kcfg_Color2"></widget>
+                    </item>
+                    <item>
+                        <widget class="KColorButton" name="kcfg_Color3"></widget>
+                    </item>
+                </layout>
             </item>
         </layout>
     </widget>

kwin/wisps/main.xml

@@ -5,8 +5,7 @@ SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
 SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
-<kcfg xmlns="http://www.kde.org/standards/kcfg/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.kde.org/standards/kcfg/1.0
+<kcfg xmlns="http://www.kde.org/standards/kcfg/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.kde.org/standards/kcfg/1.0 http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
-                          http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
   <kcfgfile name="" />
   <group name="">
     <entry name="Duration" type="UInt">
@@ -15,8 +14,14 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <entry name="Scale" type="Double">
       <default>1</default>
     </entry>
-    <entry name="Color" type="Color">
+    <entry name="Color1" type="Color">
       <default>#ff64c8</default>
     </entry>
+    <entry name="Color2" type="Color">
+      <default>#6464ff</default>
+    </entry>
+    <entry name="Color3" type="Color">
+      <default>#64c8ff</default>
+    </entry>
   </group>
 </kcfg>

kwin/wisps/onSettingsChanged.js

@@ -7,4 +7,6 @@
 
 effect.setUniform(this.shader, 'uDuration', this.duration * 0.001);
 effect.setUniform(this.shader, 'uScale', effect.readConfig('Scale', 1.0));
-effect.setUniform(this.shader, 'uColor', this.readRGBConfig('Color'));
+effect.setUniform(this.shader, 'uColor1', this.readRGBConfig('Color1'));
+effect.setUniform(this.shader, 'uColor2', this.readRGBConfig('Color2'));
+effect.setUniform(this.shader, 'uColor3', this.readRGBConfig('Color3'));

resources/shaders/wisps.frag

@@ -15,8 +15,10 @@
 // The content from common.glsl is automatically prepended to each shader effect.
 
 uniform vec2 uSeed;
-uniform vec3 uColor;
 uniform float uScale;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
 
 const float WISPS_RADIUS    = 20.0;
 const float WISPS_SPEED     = 10.0;
@@ -28,7 +30,7 @@ const float SCALING         = 0.9;
 
 // Returns a grid of randomly moving points. Each grid cell contains one point which
 // moves on an ellipse.
-float getWisps(vec2 texCoords, float gridSize, vec2 seed) {
+vec4 getWisps(vec2 texCoords, float gridSize, vec2 seed) {
 
   // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
   vec2 coords = (texCoords + hash22(seed)) * uSize;
@@ -56,13 +58,16 @@ float getWisps(vec2 texCoords, float gridSize, vec2 seed) {
 
   cellUV += offset;
 
+  vec3 color = tritone(hash12(cellID * seed * 1.256), uColor1, uColor2, uColor3);
+
   // Use distance to center of shifted / rotated UV coordinates to draw a glaring point.
   float dist = length(cellUV - 0.5) * gridSize / radius;
   if (dist < 1.0) {
-    return min(5.0, 0.01 / pow(dist, 2.0));
+    float alpha = min(5.0, 0.01 / pow(dist, 2.0));
+    return vec4(color * alpha, alpha);
   }
 
-  return 0.0;
+  return vec4(0.0);
 }
 
 void main() {
@@ -78,9 +83,9 @@ void main() {
   // Compute several layers of moving wisps.
   vec2 uv = (iTexCoord.st - 0.5) / mix(1.0, 0.5, progress) + 0.5;
   uv /= uScale;
-  float wisps = 0.0;
+  vec4 wisps = vec4(0.0);
   for (float i = 0.0; i < WISPS_LAYERS; ++i) {
-    wisps += getWisps(uv * 0.3, WISPS_SPACING, uSeed * (i + 1.0));
+    wisps = alphaOver(wisps, getWisps(uv * 0.3, WISPS_SPACING, uSeed * (i + 1.0)));
   }
 
   // Compute shrinking edge mask.
@@ -100,8 +105,8 @@ void main() {
   oColor.a *= windowMask * mask;
 
   // Add the wisps.
-  vec4 wispColor = wisps * vec4(uColor, min(wispsIn, 1.0 - wispsOut) * mask);
+  wisps.a *= min(wispsIn, 1.0 - wispsOut) * mask;
-  oColor         = alphaOver(oColor, wispColor);
+  oColor = alphaOver(oColor, wisps);
 
   // These are pretty useful for understanding how this works.
   // oColor = vec4(vec3(windowMask), 1.0);

resources/ui/adw/wisps.ui

@@ -78,17 +78,33 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <child>
       <object class="AdwActionRow">
         <property name="title" translatable="yes">Color</property>
-        <property name="activatable-widget">wisps-color</property>
         <child>
-          <object class="GtkColorButton" id="wisps-color">
+          <object class="GtkBox">
-            <property name="use_alpha">0</property>
+            <style>
+              <class name="linked" />
+            </style>
+            <child>
+              <object class="GtkColorButton" id="wisps-color-1">
                 <property name="show_editor">1</property>
-            <property name="width-request">250</property>
                 <property name="valign">center</property>
               </object>
             </child>
             <child>
-          <object class="GtkButton" id="reset-wisps-color">
+              <object class="GtkColorButton" id="wisps-color-2">
+                <property name="show_editor">1</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkColorButton" id="wisps-color-3">
+                <property name="show_editor">1</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="reset-wisps-colors">
             <property name="icon-name">edit-clear-symbolic</property>
             <property name="valign">center</property>
             <property name="tooltip-text" translatable="yes">Reset to Default Value</property>

resources/ui/gtk3/wisps.ui

@@ -117,11 +117,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
           </object>
         </child>
 
+
         <child>
           <object class="GtkListBoxRow">
             <property name="activatable">0</property>
             <child>
               <object class="GtkBox">
+                <property name="spacing">8</property>
                 <child>
                   <object class="GtkLabel">
                     <property name="label" translatable="yes">Color</property>
@@ -132,16 +134,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   </object>
                 </child>
                 <child>
-                  <object class="GtkColorButton" id="wisps-color">
+                  <object class="GtkColorButton" id="wisps-color-1">
-                    <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
-                    <property name="margin-start">8</property>
-                    <property name="margin-end">8</property>
-                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkButton" id="reset-wisps-color">
+                  <object class="GtkColorButton" id="wisps-color-2">
+                    <property name="show_editor">1</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkColorButton" id="wisps-color-3">
+                    <property name="show_editor">1</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton" id="reset-wisps-colors">
                     <child>
                       <object class="GtkImage">
                         <property name="icon-name">edit-clear-symbolic</property>

resources/ui/gtk4/wisps.ui

@@ -120,16 +120,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
                   </object>
                 </child>
                 <child>
-                  <object class="GtkColorButton" id="wisps-color">
+                  <object class="GtkColorButton" id="wisps-color-1">
-                    <property name="use_alpha">0</property>
                     <property name="show_editor">1</property>
-                    <property name="margin-start">8</property>
-                    <property name="margin-end">8</property>
-                    <property name="width-request">250</property>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkButton" id="reset-wisps-color">
+                  <object class="GtkColorButton" id="wisps-color-2">
+                    <property name="show_editor">1</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkColorButton" id="wisps-color-3">
+                    <property name="show_editor">1</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton" id="reset-wisps-colors">
                     <property name="icon-name">edit-clear-symbolic</property>
                     <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
                     <style>

schemas/org.gnome.shell.extensions.burn-my-windows-profile.gschema.xml

@@ -695,10 +695,22 @@ SPDX-License-Identifier: CC0-1.0
       <description>The size of the wisps.</description>
     </key>
 
-    <key name="wisps-color" type="s">
+    <key name="wisps-color-1" type="s">
       <default>"rgb(255, 100, 200)"</default>
-      <summary>Wisps Effect Color</summary>
+      <summary>Wisps Effect Color 1</summary>
-      <description>The color of the wisps effect.</description>
+      <description>A color of the wisps effect.</description>
+    </key>
+
+    <key name="wisps-color-2" type="s">
+      <default>"rgb(100, 100, 255)"</default>
+      <summary>Wisps Effect Color 2</summary>
+      <description>A color of the wisps effect.</description>
+    </key>
+
+    <key name="wisps-color-3" type="s">
+      <default>"rgb(100, 200, 255)"</default>
+      <summary>Wisps Effect Color 3</summary>
+      <description>A color of the wisps effect.</description>
     </key>
 
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

src/effects/Wisps.js

@@ -46,16 +46,23 @@ var Wisps = class {
 
       // 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._uColor = [
+        shader.get_uniform_location('uColor1'),
+        shader.get_uniform_location('uColor2'),
+        shader.get_uniform_location('uColor3'),
+      ];
 
       // Write all uniform values at the start of each animation.
       shader.connect('begin-animation', (shader, settings, forOpening, testMode) => {
-        const c = Clutter.Color.from_string(settings.get_string('wisps-color'))[1];
+        for (let i = 1; i <= 3; i++) {
+          const c = Clutter.Color.from_string(settings.get_string('wisps-color-' + i))[1];
+          shader.set_uniform_float(shader._uColor[i - 1], 3,
+                                   [c.red / 255, c.green / 255, c.blue / 255]);
+        }
 
         // clang-format off
         shader.set_uniform_float(shader._uSeed,  2, [testMode ? 0 : Math.random(), 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('wisps-scale')]);
         // clang-format on
       });
@@ -89,7 +96,21 @@ var Wisps = class {
   bindPreferences(dialog) {
     dialog.bindAdjustment('wisps-animation-time');
     dialog.bindAdjustment('wisps-scale');
-    dialog.bindColorButton('wisps-color');
+    dialog.bindColorButton('wisps-color-1');
+    dialog.bindColorButton('wisps-color-2');
+    dialog.bindColorButton('wisps-color-3');
+
+    // Connect the buttons only once. The bindPreferences can be called multiple times...
+    if (!this._isConnected) {
+      this._isConnected = true;
+
+      // The wisps-color-reset button needs to be bound explicitly.
+      dialog.getBuilder().get_object('reset-wisps-colors').connect('clicked', () => {
+        dialog.getProfileSettings().reset('wisps-color-1');
+        dialog.getProfileSettings().reset('wisps-color-2');
+        dialog.getProfileSettings().reset('wisps-color-3');
+      });
+    }
   }
 
   // ---------------------------------------------------------------- API for extension.js