Ripple Effect with GLSL need clarification

Question

I have been going through this blog for simple water ripple effect. It indeed gives a nice ripple effect. But what I dont understand this is this line of code

vec2 uv = gl_FragCoord.xy/iResolution.xy+(cPos/cLength)*cos(cLength*12.0-iGlobalTime*4.0) * 0.03;

I dont understand how math translate to this line and achieves sucha nice ripple effect. I need help in to decrypting logic behind this line.

Answer 1

vec2 uv = gl_FragCoord.xy/iResolution.xy+(cPos/cLength)*cos(cLength*12.0-iGlobalTime*4.0) * 0.03;

To understand this equation lets break it down into pieces and then join them.

gl_FragCoord.xy/iResolution.xy

• gl_FragCoord.xy varies from (0,0) to (xRes, yRes).
• We are dividing by the resolution iResolution.xy.
• So "gl_FragCoord.xy/iResolution.xy" will range from (0,0) to (1,1).
• This is your pixel coordinate position.
• So if you give "vec2 uv = gl_FragCoord.xy/iResolution.xy" it will be just a static image.

(cPos/cLength)

• cPos is ranging from (-1,-1) to (1,1).
• Imagine a 2D plane with origin at center and cPos to be a vector pointing from origin to our current pixel.
• cLength will give you the distance from center.
• "cPos/cLength" is the unit vector.
• Our purpose of finding the unit vector is to find the direction in which the pixel has to be nudged.

vec2 uv = gl_FragCoord.xy/iResolution.xy+(cPos/cLength)*cos(iGlobalTime);

• This equation will nudge every pixel along the direction vector(unit vector). But all the waves are nudged along the direction vector in coherence. The effect looks like the image is expanding and contracting.

• To get the wave effect we have to introduce phase shift. In the wave every particle will be in different phase. This can be introduced by cos(cLength*12-iGlobalTime).

  • Here cLength is different for every pixel. So we take this value and treat it as the phase of the pixel.
  • That multiplying with 12 is for amplifying the effect.

vec2 uv = gl_FragCoord.xy/iResolution.xy+(cPos/cLength)*cos(cLength*12-iGlobalTime*4.0);

• Multiplying iGlobalTime with 4.0 will speed the waves.

• Finally multiply the cosine product with 0.03 to move the pixels at max in the range (-0.03,0.03) because moving pixels in (-1,1) range will look weird.

And that is the entire equation.