🎉 Add support for colorful wisps
This commit is contained in:
@@ -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
|
||||
|
||||
|
||||
+11
-1
@@ -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>
|
||||
|
||||
+8
-3
@@ -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
|
||||
http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
|
||||
<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">
|
||||
@@ -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>
|
||||
@@ -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'));
|
||||
|
||||
@@ -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);
|
||||
oColor = alphaOver(oColor, wispColor);
|
||||
wisps.a *= min(wispsIn, 1.0 - wispsOut) * mask;
|
||||
oColor = alphaOver(oColor, wisps);
|
||||
|
||||
// These are pretty useful for understanding how this works.
|
||||
// oColor = vec4(vec3(windowMask), 1.0);
|
||||
|
||||
@@ -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">
|
||||
<property name="use_alpha">0</property>
|
||||
<object class="GtkBox">
|
||||
<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>
|
||||
|
||||
@@ -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">
|
||||
<property name="use_alpha">0</property>
|
||||
<object class="GtkColorButton" id="wisps-color-1">
|
||||
<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>
|
||||
|
||||
@@ -120,16 +120,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkColorButton" id="wisps-color">
|
||||
<property name="use_alpha">0</property>
|
||||
<object class="GtkColorButton" id="wisps-color-1">
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
<description>The color of the wisps effect.</description>
|
||||
<summary>Wisps Effect Color 1</summary>
|
||||
<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>
|
||||
|
||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||
|
||||
+25
-4
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user