🎉 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.Hexagon.Hexagon(),
new Me.imports.src.effects.Incinerate.Incinerate(), new Me.imports.src.effects.Incinerate.Incinerate(),
new Me.imports.src.effects.Matrix.Matrix(), 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.Pixelate.Pixelate(),
new Me.imports.src.effects.PixelWheel.PixelWheel(), new Me.imports.src.effects.PixelWheel.PixelWheel(),
new Me.imports.src.effects.PixelWipe.PixelWipe(), 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.Hexagon.Hexagon(),
new Me.imports.src.effects.Incinerate.Incinerate(), new Me.imports.src.effects.Incinerate.Incinerate(),
new Me.imports.src.effects.Matrix.Matrix(), 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.Pixelate.Pixelate(),
new Me.imports.src.effects.PixelWheel.PixelWheel(), new Me.imports.src.effects.PixelWheel.PixelWheel(),
new Me.imports.src.effects.PixelWipe.PixelWipe(), 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> <description>The color of the TV effect.</description>
</key> </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 --> <!-- 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};
}
}