🎉 Add paint-brush effect

This commit is contained in:
Simon Schneegans
2023-07-02 21:45:40 +02:00
parent c27c644977
commit be38af32af
8 changed files with 401 additions and 0 deletions
+1
View File
@@ -65,6 +65,7 @@ class Extension {
new Me.imports.src.effects.Hexagon.Hexagon(),
new Me.imports.src.effects.Incinerate.Incinerate(),
new Me.imports.src.effects.Matrix.Matrix(),
new Me.imports.src.effects.PaintBrush.PaintBrush(),
new Me.imports.src.effects.Pixelate.Pixelate(),
new Me.imports.src.effects.PixelWheel.PixelWheel(),
new Me.imports.src.effects.PixelWipe.PixelWipe(),
+1
View File
@@ -56,6 +56,7 @@ var PreferencesDialog = class PreferencesDialog {
new Me.imports.src.effects.Hexagon.Hexagon(),
new Me.imports.src.effects.Incinerate.Incinerate(),
new Me.imports.src.effects.Matrix.Matrix(),
new Me.imports.src.effects.PaintBrush.PaintBrush(),
new Me.imports.src.effects.Pixelate.Pixelate(),
new Me.imports.src.effects.PixelWheel.PixelWheel(),
new Me.imports.src.effects.PixelWipe.PixelWipe(),
Binary file not shown.

After

Width:  |  Height:  |  Size: 988 KiB

+62
View File
@@ -0,0 +1,62 @@
//////////////////////////////////////////////////////////////////////////////////////////
// ) ( //
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< //
// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ //
// |__/ //
//////////////////////////////////////////////////////////////////////////////////////////
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: GPL-3.0-or-later
// The content from common.glsl is automatically prepended to each shader effect.
// See assets/README.md for how this texture was created.
uniform sampler2D uBrushTexture;
uniform float uBrushSize;
const float SHADOW_WIDTH = 0.03;
const float SHADOW_STEPS = 10.0;
// Returns 1.0 if the window texture at the given texCoord should be painted.
float getMask(vec2 texCoord, float progress) {
float brush = texture2D(uBrushTexture, texCoord)[int(uBrushSize - 1.0)];
if (uForOpening) {
return step(brush, progress);
}
return step(progress, brush);
}
void main() {
vec4 oColor = getInputColor(iTexCoord.st);
// This will be 0.0 in the masked-out areas.
float mask = getMask(iTexCoord.st, uProgress);
// Add a simple drop shadow below the remaining parts.
if (mask == 0.0) {
for (float i = 0.0; i < SHADOW_STEPS; ++i) {
vec2 shadowTexCoord = iTexCoord.st - vec2(0.0, i * SHADOW_WIDTH / SHADOW_STEPS);
float shadowMask = getMask(shadowTexCoord, uProgress);
float shadowAlpha = (1.0 - i / SHADOW_STEPS) * shadowMask * getInputColor(shadowTexCoord).a;
if (shadowAlpha > 0.0) {
oColor = vec4(vec3(0.0), shadowAlpha * 0.2);
break;
}
// If we arrived at the end of the shadow, make sure to set the alpha to 0.
if (i == SHADOW_STEPS - 1.0) {
oColor.a = 0.0;
}
}
}
setOutputColor(oColor);
}
+80
View File
@@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
SPDX-License-Identifier: GPL-3.0-or-later
-->
<interface domain="burn-my-windows">
<object class="AdwExpanderRow" id="paint-brush-prefs">
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Animation Time [ms]</property>
<child>
<object class="GtkScale">
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="paint-brush-animation-time">
<property name="upper">10000</property>
<property name="lower">100</property>
<property name="step-increment">1</property>
<property name="page-increment">100</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-paint-brush-animation-time">
<property name="icon-name">edit-clear-symbolic</property>
<property name="valign">center</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Size</property>
<child>
<object class="GtkScale">
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="paint-brush-size">
<property name="upper">4</property>
<property name="lower">1</property>
<property name="step-increment">1</property>
<property name="page-increment">1</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-paint-brush-size">
<property name="icon-name">edit-clear-symbolic</property>
<property name="valign">center</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</interface>
+113
View File
@@ -0,0 +1,113 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
SPDX-License-Identifier: GPL-3.0-or-later
-->
<interface domain="burn-my-windows">
<object class="GtkRevealer" id="paint-brush-prefs">
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Animation Time [ms]</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="paint-brush-animation-time">
<property name="upper">10000</property>
<property name="lower">100</property>
<property name="step-increment">1</property>
<property name="page-increment">100</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-paint-brush-animation-time">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Size</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="paint-brush-size">
<property name="upper">4</property>
<property name="lower">1</property>
<property name="step-increment">1</property>
<property name="page-increment">1</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-paint-brush-size">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
@@ -386,6 +386,28 @@ SPDX-License-Identifier: CC0-1.0
<description>The color of the TV effect.</description>
</key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Paint-Brush Options -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<key name="paint-brush-enable-effect" type="b">
<default>false</default>
<summary>Paint Brush Enable Effect</summary>
<description>Use the paint-brush effect.</description>
</key>
<key name="paint-brush-animation-time" type="i">
<default>1000</default>
<summary>Paint Brush Animation Time</summary>
<description>The time the paint-brush effect takes.</description>
</key>
<key name="paint-brush-size" type="i">
<default>3</default>
<summary>Paint Brush Size</summary>
<description>Affects the number of paint strokes.</description>
</key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- T-Rex Attack Options -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+122
View File
@@ -0,0 +1,122 @@
//////////////////////////////////////////////////////////////////////////////////////////
// ) ( //
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< //
// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ //
// |__/ //
//////////////////////////////////////////////////////////////////////////////////////////
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// 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 paints your windows with a thick paint brush. //
// This effect is not available on GNOME 3.3x, due to the limitation described in the //
// documentation of vfunc_paint_target further down in this file. //
//////////////////////////////////////////////////////////////////////////////////////////
// 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 PaintBrush = 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/<nick>.glsl. The callback will be called for each
// newly created shader instance.
constructor() {
this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
// We import these modules in this function as they are not available in the
// preferences process. This callback is only called within GNOME Shell's process.
const {Clutter, GdkPixbuf, Cogl} = imports.gi;
// Create the texture in the first call.
if (!this._brushTexture) {
const brushData = GdkPixbuf.Pixbuf.new_from_resource('/img/brush.png');
this._brushTexture = new Clutter.Image();
this._brushTexture.set_data(brushData.get_pixels(),
Cogl.PixelFormat.RGBA_8888_PRE, brushData.width,
brushData.height, brushData.rowstride);
}
// Store uniform locations of newly created shaders.
shader._uBrushTexture = shader.get_uniform_location('uBrushTexture');
shader._uBrushSize = shader.get_uniform_location('uBrushSize');
// Write all uniform values at the start of each animation.
shader.connect('begin-animation', (shader, settings, forOpening, testMode) => {
shader.set_uniform_float(shader._uBrushSize, 1,
[settings.get_int('paint-brush-size')]);
});
// This is required to bind the brush texture for drawing. Sadly, this seems to be
// impossible under GNOME 3.3x as this.get_pipeline() is not available. It was
// called get_target() back then but this is not wrapped in GJS.
// https://gitlab.gnome.org/GNOME/mutter/-/blob/gnome-3-36/clutter/clutter/clutter-offscreen-effect.c#L598
shader.connect('update-animation', (shader) => {
const pipeline = shader.get_pipeline();
// Use linear filtering for the window texture.
pipeline.set_layer_filters(0, Cogl.PipelineFilter.LINEAR,
Cogl.PipelineFilter.LINEAR);
// Bind the brush texture.
pipeline.set_layer_texture(1, this._brushTexture.get_texture());
pipeline.set_uniform_1i(shader._uBrushTexture, 1);
});
});
}
// ---------------------------------------------------------------------------- metadata
// This effect is only available on GNOME Shell 40+.
getMinShellVersion() {
return [40, 0];
}
// 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. '*-enable-effect'), and its animation time
// (e.g. '*-animation-time').
getNick() {
return 'paint-brush';
}
// 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 _('Paint Brush');
}
// -------------------------------------------------------------------- API for prefs.js
// This is called by the preferences dialog whenever a new effect profile is loaded. It
// binds all user interface elements to the respective settings keys of the profile.
bindPreferences(dialog) {
dialog.bindAdjustment('paint-brush-animation-time');
dialog.bindAdjustment('paint-brush-size');
}
// ---------------------------------------------------------------- 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};
}
}