🎉 Add pixel wipe effect
This commit is contained in:
Simon Schneegans
@@ -37,7 +37,8 @@ void main() {
|
||||
}
|
||||
|
||||
// Progressively hide the spokes.
|
||||
if (mod(angle * uSpokeCount, 1.0) < progress) {
|
||||
float threshold = mod(angle * uSpokeCount, 1.0);
|
||||
if (progress > threshold) {
|
||||
oColor.a = 0.0;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// ) ( //
|
||||
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
|
||||
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
|
||||
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
|
||||
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
|
||||
// | '_ \ || | '_| ' \)) | ' \()| || | \ 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 uPixelSize;
|
||||
uniform vec2 uStartPos;
|
||||
|
||||
const float FADE_WIDTH = 1.0; // Width of the transition.
|
||||
|
||||
void main() {
|
||||
|
||||
// Now we compute a 2D gradient in [0..1] which covers the entire window. The dark
|
||||
// regions will be burned first, the bright regions in the end. We mix a radial gradient
|
||||
// with some noise. The center of the radial gradient is positioned at uStartPos.
|
||||
float circle = length(iTexCoord - uStartPos);
|
||||
|
||||
float progress = easeOutQuad(uProgress);
|
||||
progress = ((1.0 - progress) * (1.0 + FADE_WIDTH) - 1.0 + circle) / FADE_WIDTH;
|
||||
progress = smoothstep(0.0, 1.0, progress);
|
||||
|
||||
progress = uForOpening ? progress : 1.0 - progress;
|
||||
|
||||
// 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 pixels in the transition zone.
|
||||
float random = simplex2DFractal(texcoord * uSize / 20.0) * 1.5 - 0.25;
|
||||
if (progress > random) {
|
||||
oColor.a *= max(0.0, 1.0 - (progress - random) * 10.0);
|
||||
}
|
||||
|
||||
// These are pretty useful for understanding how this works.
|
||||
// oColor = vec4(progress, 0.0, 0.0, 1.0);
|
||||
// oColor = vec4(random, 0.0, 0.0, 1.0);
|
||||
|
||||
setOutputColor(oColor);
|
||||
}
|
||||
@@ -27,9 +27,9 @@ void main() {
|
||||
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;
|
||||
float random = simplex2DFractal(texcoord * uNoise * uSize / 1000.0) * 1.5 - 0.25;
|
||||
if (progress > random) {
|
||||
oColor.a *= max(0.0, 1.0 - (progress - random) * 20.0);
|
||||
}
|
||||
|
||||
setOutputColor(oColor);
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<interface domain="burn-my-windows">
|
||||
|
||||
<object class="GtkAdjustment" id="pixel-wipe-animation-time">
|
||||
<property name="upper">5000</property>
|
||||
<property name="lower">100</property>
|
||||
<property name="step-increment">1</property>
|
||||
<property name="page-increment">100</property>
|
||||
</object>
|
||||
|
||||
<object class="GtkAdjustment" id="pixel-wipe-direction">
|
||||
<property name="upper">360</property>
|
||||
<property name="lower">0</property>
|
||||
<property name="step-increment">1</property>
|
||||
<property name="page-increment">10</property>
|
||||
</object>
|
||||
|
||||
<object class="GtkAdjustment" id="pixel-wipe-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="pixel-wipe-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">pixel-wipe-animation-time</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixel-wipe-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">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">pixel-wipe-pixel-size</property>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="reset-pixel-wipe-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,117 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<interface domain="burn-my-windows">
|
||||
|
||||
<object class="GtkBox" id="pixel-wipe-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="pixel-wipe-animation-time">
|
||||
<property name="upper">5000</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-pixel-wipe-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">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="pixel-wipe-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-pixel-wipe-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