🎉 Add wisps kwin effect

kwin/build.sh

@@ -109,4 +109,5 @@ generate "energize-a" "Energize A" "Beam your windows away"
 generate "energize-b" "Energize B" "Using different transporter technology results in an alternative visual effect"
 generate "hexagon"    "Hexagon"    "With glowing lines and hexagon-shaped tiles, this effect looks very sci-fi"
 generate "tv"         "TV Effect"  "Make windows close like turning off a TV"
+generate "wisps"      "Wisps"      "Let your windows be carried away to the realm of dreams by these little fairies"
 # generate "fire" "Fire" "Make windows burn"

kwin/wisps/config.ui

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>BMWConfigForm</class>
+ <widget class="QWidget" name="BMWConfigForm">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>562</width>
+    <height>365</height>
+   </rect>
+  </property>
+  <layout class="QGridLayout" name="gridLayout">
+   <item row="2" column="1">
+    <widget class="QDoubleSpinBox" name="kcfg_Scale">
+     <property name="minimum">
+      <double>0.100000000000000</double>
+     </property>
+     <property name="maximum">
+      <double>10.000000000000000</double>
+     </property>
+    </widget>
+   </item>
+   <item row="0" column="1">
+    <widget class="QSpinBox" name="kcfg_Duration">
+     <property name="suffix">
+      <string> milliseconds</string>
+     </property>
+     <property name="minimum">
+      <number>100</number>
+     </property>
+     <property name="maximum">
+      <number>9999</number>
+     </property>
+     <property name="singleStep">
+      <number>100</number>
+     </property>
+    </widget>
+   </item>
+   <item row="1" column="0">
+    <widget class="QLabel" name="label_4">
+     <property name="text">
+      <string>Color:</string>
+     </property>
+     <property name="alignment">
+      <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+     </property>
+    </widget>
+   </item>
+   <item row="0" column="0">
+    <widget class="QLabel" name="label">
+     <property name="text">
+      <string>Duration:</string>
+     </property>
+     <property name="alignment">
+      <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+     </property>
+    </widget>
+   </item>
+   <item row="2" column="0">
+    <widget class="QLabel" name="label_3">
+     <property name="text">
+      <string>Scale:</string>
+     </property>
+     <property name="alignment">
+      <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+     </property>
+    </widget>
+   </item>
+   <item row="1" column="1">
+    <widget class="KColorButton" name="kcfg_Color"></widget>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>KColorButton</class>
+   <extends>QPushButton</extends>
+   <header>kcolorbutton.h</header>
+  </customwidget>
+ </customwidgets>
+ <resources />
+ <connections />
+</ui>

kwin/wisps/main.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+  <kcfgfile name="" />
+  <group name="">
+    <entry name="Duration" type="UInt">
+      <default>1500</default>
+    </entry>
+    <entry name="Scale" type="Double">
+      <default>1</default>
+    </entry>
+    <entry name="Color" type="Color">
+      <default>#ff64c8</default>
+    </entry>
+  </group>
+</kcfg>

kwin/wisps/onAnimationBegin.js

@@ -0,0 +1,4 @@
+// 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(), Math.random()]);

kwin/wisps/onSettingsChanged.js

@@ -0,0 +1,6 @@
+// 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, 'uScale', effect.readConfig('Scale', 1.0));
+effect.setUniform(this.shader, 'uColor', effect.readConfig('Color', 'white'));

resources/shaders/wisps.frag

@@ -14,7 +14,7 @@
 // The content from common.glsl is automatically prepended to each shader effect.
 
 uniform vec2 uSeed;
-uniform vec3 uColor;
+uniform vec4 uColor;
 uniform float uScale;
 
 const float WISPS_RADIUS    = 20.0;
@@ -98,7 +98,7 @@ void main() {
   oColor.a *= windowMask * mask;
 
   // Add the wisps.
-  vec4 wispColor = wisps * vec4(uColor, min(wispsIn, 1.0 - wispsOut) * mask);
+  vec4 wispColor = wisps * vec4(uColor.rgb, min(wispsIn, 1.0 - wispsOut) * mask);
   oColor         = alphaOver(oColor, wispColor);
 
   // These are pretty useful for understanding how this works.

src/Wisps.js

@@ -58,7 +58,7 @@ var Wisps = class {
 
         // 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._uColor, 4, [c.red / 255, c.green / 255, c.blue / 255, 1.0]);
         shader.set_uniform_float(shader._uScale, 1, [settings.get_double('wisps-scale')]);
         // clang-format on
       });