How do i extend the area of effect on my GLSL shader?

Im new to GLSL, and im writing my very first shader. The shader is written to be used with PIXIjs. I pretty much got the effect i want but it looks like the effect iv created is being masked and limited to the size of my sprite. see picture below.Can anybody tell me what im doing wrong? appreciate it

see the full code here: https://codepen.io/michell-morso/pen/dyMyxLd

my shader:

precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform vec2 u_resolution;
uniform float progress; 
  
void main(){
   vec2 uv = gl_FragCoord.xy/u_resolution.xy;
  float rnd = fract(sin(dot(uv.xy,vec2(12.9898,78.233)))*43758.5453123);
  vec2 cordi = vec2(vTextureCoord.x, vTextureCoord.y-rnd*progress);
  cordi = progress > 0. ? vec2(cordi.x+0.02*sin(cordi.y*52.0+progress*20.0),cordi.y):cordi;
  gl_FragColor = texture2D(uSampler, cordi);
}

Answer

I’m not sure how you want it to look. I’m guessing you want the effect to be larger, not clipped by the floor, or something else. Your shader looks good, but it can only affect the pixels within the sprite like you say. To render outside that area, you would need to add more geometry, scale up the sprite size, or even render a fullscreen quad so you have free reign on the entire screen.

Happy shading! Love south park! speaking of it, check this out: https://www.shadertoy.com/view/WlBcD3