🔧 Add some vertical squishing to the TV Glitch effect

resources/shaders/tv-glitch.frag

@@ -20,8 +20,6 @@ uniform float uScale;
 uniform float uStrength;
 uniform float uSpeed;
 
-// tv params
-
 const float BLUR_WIDTH = 0.01;  // Width of the gradients.
 const float TB_TIME    = 0.7;   // Relative time for the top/bottom animation.
 const float LR_TIME    = 0.4;   // Relative time for the left/right animation.
@@ -29,22 +27,34 @@ const float LR_DELAY   = 0.6;   // Delay after which the left/right animation st
 const float FF_TIME    = 0.1;   // Relative time for the final fade to transparency.
 const float SCALING    = 0.5;   // Additional vertical scaling of the window.
 
-
+// This is a combination of the effects from tv.frag and glitch.frag. Credits go to Kurt
-// Somewhat inspired by https://www.shadertoy.com/view/XtK3W3
+// Wilson (https://github.com/Kurtoid) for this idea!
 void main() {
+
+  // Add the tv effect sooner/later in the animation, compared to the original TV effect.
+  float tOffset    = uForOpening ? 0.0 : 1.0;
+  float tvProgress = clamp(uProgress * 2.0 - tOffset, 0.0, 1.0);
+  tvProgress = uForOpening ? 1.0 - easeOutQuad(tvProgress) : easeOutQuad(tvProgress);
+
+  // Scale down the window vertically.
+  float scale = 1.0 / mix(1.0, SCALING, tvProgress) - 1.0;
+  vec2 coords = iTexCoord.st;
+  coords.y    = coords.y * (scale + 1.0) - scale * 0.5;
+
+  // This is from the original Glitch effect.
   float progress = easeInQuad(uForOpening ? 1.0 - uProgress : uProgress);
   float time     = progress * uDuration * uSpeed;
   float strength = uStrength * progress;
   float displace = 1000.0 * strength / uSize.x;
-  float yPos     = uScale * uSize.y * (iTexCoord.y + uSeed * 10.0);
+  float yPos     = uScale * uSize.y * (coords.y + uSeed * 10.0);
 
   // Create large noise waves and add some smaller noise waves.
   float noise = clamp(simplex2D(vec2(time, yPos * 0.002)) - 0.5, 0.0, 1.0);
   noise += (simplex2D(vec2(time * 10.0, yPos * 0.05)) - 0.5) * 0.15;
 
   // Apply the noise as x displacement for every line.
-  float xPos  = clamp(iTexCoord.x - displace * noise * noise, 0.0, 1.0);
+  float xPos  = clamp(coords.x - displace * noise * noise, 0.0, 1.0);
-  vec4 oColor = getInputColor(vec2(xPos, iTexCoord.y));
+  vec4 oColor = getInputColor(vec2(xPos, coords.y));
 
   // Mix in some random interference lines.
   vec3 interference          = uColor * hash12(vec2(yPos * time));
@@ -52,7 +62,7 @@ void main() {
   oColor.rgb                 = mix(oColor.rgb, interference, interferenceStrength);
 
   // Mix in some grainy noise.
-  vec3 grain          = uColor * simplex2D(uSize * iTexCoord + vec2(time * 100.0));
+  vec3 grain          = uColor * simplex2D(uSize * coords + vec2(time * 100.0));
   float grainStrength = 0.2 * min(strength, 1.0);
   oColor.rgb          = mix(oColor.rgb, grain, grainStrength);
 
@@ -63,33 +73,19 @@ void main() {
 
   // Shift green/blue channels.
   float offset = 0.1 * noise * displace;
-  oColor.g     = mix(oColor.g, getInputColor(vec2(xPos + offset, iTexCoord.y)).g, 0.25);
+  oColor.g     = mix(oColor.g, getInputColor(vec2(xPos + offset, coords.y)).g, 0.25);
-  oColor.b     = mix(oColor.b, getInputColor(vec2(xPos - offset, iTexCoord.y)).b, 0.25);
+  oColor.b     = mix(oColor.b, getInputColor(vec2(xPos - offset, coords.y)).b, 0.25);
 
-  // Dissolve the window.
+  // Now hide the window according to the TV effect.
-  //   float fadeDelay = 1.5;
-  //   float alpha = clamp(noise + 1.0 + fadeDelay - (3.0 + fadeDelay) * progress, 0.0, 1.0);
-  //   oColor.a *= alpha;
-
-  // add tv effect - we just want the shape transforms
-
-  // add the tv effect sooner/later in the animation
-  float toffset = uForOpening ? 0.0 : 1.0;
-  float prog = clamp(uProgress * 2.0 - toffset, 0.0, 1.0);
-  prog = uForOpening ? 1.0 - easeOutQuad(prog) : easeOutQuad(prog);
-
-  // Scale down the window vertically.
-  float scale = 1.0 / mix(1.0, SCALING, prog) - 1.0;
-  vec2 coords = iTexCoord.st;
-  coords.y    = coords.y * (scale + 1.0) - scale * 0.5;
 
   // All of these are in [0..1] during the different stages of the animation.
   // tb refers to the top-bottom animation.
   // lr refers to the left-right animation.
   // ff refers to the final fade animation.
-  float tbProg = smoothstep(0.0, 1.0, clamp(prog / TB_TIME, 0.0, 1.0));
+  float tbProg = smoothstep(0.0, 1.0, clamp(tvProgress / TB_TIME, 0.0, 1.0));
-  float lrProg = smoothstep(0.0, 1.0, clamp((prog - LR_DELAY) / LR_TIME, 0.0, 1.0));
+  float lrProg = smoothstep(0.0, 1.0, clamp((tvProgress - LR_DELAY) / LR_TIME, 0.0, 1.0));
-  float ffProg = smoothstep(0.0, 1.0, clamp((prog - 1.0 + FF_TIME) / FF_TIME, 0.0, 1.0));
+  float ffProg =
+    smoothstep(0.0, 1.0, clamp((tvProgress - 1.0 + FF_TIME) / FF_TIME, 0.0, 1.0));
 
   // This is a top-center-bottom gradient in [0..1..0]
   float tb = coords.y * 2.0;
@@ -107,16 +103,7 @@ void main() {
   // Assemble the final alpha value.
   float mask = tbMask * lrMask * ffMask;
 
-  // vec4 oColor = getInputColor(coords);
-  // don't add another color transform
-  // oColor.rgb  = mix(oColor.rgb, uColor * oColor.a, smoothstep(0.0, 1.0, prog));
   oColor.a *= mask;
 
-  // These are pretty useful for understanding how this works.
-  // oColor = vec4(vec3(tbMask), 1);
-  // oColor = vec4(vec3(lrMask), 1);
-  // oColor = vec4(vec3(ffMask), 1);
-  // oColor = vec4(vec3(mask), 1);
-
   setOutputColor(oColor);
 }