🎉 Add pixelate effect
This commit is contained in:
Simon Schneegans
@@ -0,0 +1,36 @@
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// ) ( //
|
||||
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
|
||||
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
|
||||
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
|
||||
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
|
||||
// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< //
|
||||
// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ //
|
||||
// |__/ //
|
||||
// Copyright (c) 2021 Simon Schneegans //
|
||||
// Released under the GPLv3 or later. See LICENSE file for details. //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// The content from common.glsl is automatically prepended to each shader effect.
|
||||
|
||||
uniform float uNoise;
|
||||
uniform float uPixelSize;
|
||||
|
||||
void main() {
|
||||
// We simply inverse the progress for opening windows.
|
||||
float progress = uForOpening ? 1.0 - uProgress : uProgress;
|
||||
|
||||
// The current level of pixelation increases with the progress.
|
||||
float pixelSize = ceil(uPixelSize * progress + 1.0);
|
||||
vec2 pixelGrid = vec2(pixelSize) / uSize;
|
||||
vec2 texcoord = iTexCoord.st - mod(iTexCoord.st, pixelGrid) + pixelGrid * 0.5;
|
||||
vec4 oColor = getInputColor(texcoord);
|
||||
|
||||
// Hide selected pixels based on some random noise.
|
||||
float random = simplex2DFractal(texcoord * uNoise * uSize / 1000.0);
|
||||
if (random * 1.5 - 0.25 < progress) {
|
||||
oColor.a = 0.0;
|
||||
}
|
||||
|
||||
setOutputColor(oColor);
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<interface domain="burn-my-windows">
|
||||
|
||||
<object class="GtkAdjustment" id="pixelate-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>
|
||||
|
||||
<object class="GtkAdjustment" id="pixelate-noise">
|
||||
<property name="upper">100</property>
|
||||
<property name="lower">1</property>
|
||||
<property name="step-increment">1</property>
|
||||
<property name="page-increment">10</property>
|
||||
</object>
|
||||
|
||||
<object class="GtkAdjustment" id="pixelate-pixel-size">
|
||||
<property name="upper">50</property>
|
||||
<property name="lower">1</property>
|
||||
<property name="step-increment">1</property>
|
||||
<property name="page-increment">10</property>
|
||||
</object>
|
||||
|
||||
<object class="GtkBox" id="pixelate-prefs">
|
||||
<property name="orientation">vertical</property>
|
||||
|
||||
<child>
|
||||
<object class="GtkFrame">
|
||||
<child>
|
||||
<object class="GtkListBox">
|
||||
<property name="selection-mode">none</property>
|
||||
<style>
|
||||
<class name="rich-list" />
|
||||
</style>
|
||||
|
||||
<child>
|
||||
<object class="GtkListBoxRow">
|
||||
<property name="margin-start">10</property>
|
||||
<property name="margin-end">10</property>
|
||||
<property name="margin-top">10</property>
|
||||
<property name="margin-bottom">10</property>
|
||||
<property name="activatable">0</property>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="spacing">8</property>
|
||||
<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">pixelate-animation-time</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixelate-animation-time">
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
<property name="icon-name">edit-clear-symbolic</property>
|
||||
<property name="icon-size">1</property>
|
||||
</object>
|
||||
</child>
|
||||
<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="margin-start">10</property>
|
||||
<property name="margin-end">10</property>
|
||||
<property name="margin-top">10</property>
|
||||
<property name="margin-bottom">10</property>
|
||||
<property name="activatable">0</property>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="spacing">8</property>
|
||||
<child>
|
||||
<object class="GtkLabel">
|
||||
<property name="label" translatable="yes">Scale</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">pixelate-noise</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixelate-noise">
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
<property name="icon-name">edit-clear-symbolic</property>
|
||||
<property name="icon-size">1</property>
|
||||
</object>
|
||||
</child>
|
||||
<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="margin-start">10</property>
|
||||
<property name="margin-end">10</property>
|
||||
<property name="margin-top">10</property>
|
||||
<property name="margin-bottom">10</property>
|
||||
<property name="activatable">0</property>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="spacing">8</property>
|
||||
<child>
|
||||
<object class="GtkLabel">
|
||||
<property name="label" translatable="yes">Pixel 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">pixelate-pixel-size</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixelate-pixel-size">
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
<property name="icon-name">edit-clear-symbolic</property>
|
||||
<property name="icon-size">1</property>
|
||||
</object>
|
||||
</child>
|
||||
<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>
|
||||
</child>
|
||||
|
||||
|
||||
</object>
|
||||
|
||||
</interface>
|
||||
@@ -0,0 +1,163 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<interface domain="burn-my-windows">
|
||||
|
||||
<object class="GtkBox" id="pixelate-prefs">
|
||||
<property name="orientation">vertical</property>
|
||||
|
||||
<child>
|
||||
<object class="GtkFrame">
|
||||
<child>
|
||||
<object class="GtkListBox">
|
||||
<property name="selection-mode">none</property>
|
||||
<property name="show-separators">1</property>
|
||||
<style>
|
||||
<class name="rich-list" />
|
||||
</style>
|
||||
|
||||
<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="pixelate-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-pixelate-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">Randomness</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="pixelate-noise">
|
||||
<property name="upper">100</property>
|
||||
<property name="lower">1</property>
|
||||
<property name="step-increment">1</property>
|
||||
<property name="page-increment">10</property>
|
||||
</object>
|
||||
</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixelate-noise">
|
||||
<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">Pixel 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="pixelate-pixel-size">
|
||||
<property name="upper">50</property>
|
||||
<property name="lower">1</property>
|
||||
<property name="step-increment">1</property>
|
||||
<property name="page-increment">10</property>
|
||||
</object>
|
||||
</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixelate-pixel-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>
|
||||
</child>
|
||||
|
||||
|
||||
</object>
|
||||
|
||||
</interface>
|
||||
Reference in New Issue
Block a user