What are the steps taken by this GLSL code?

Question

 1 void main(void)
 2 {
 3     vec2 pos = mod(gl_FragCoord.xy, vec2(50.0)) - vec2(25.0);
 4     float dist_squared = dot(pos, pos);
 5 
 6     gl_FragColor = (dist_squared < 400.0) 
 7         ? vec4(.90, .90, .90, 1.0)
 8         : vec4(.20, .20, .40, 1.0);
 9 }

taken from http://people.freedesktop.org/~idr/OpenGL_tutorials/03-fragment-intro.html

Now, this looks really trivial and simple, but my problem is with the mod function.

This function is taking 2 vec2 as inputs but is supposed to take just 2 atomic arguments according to the official documentation, also this function makes an implicit use of the floor function that only accepts, again, 1 atomic argument.

Can someone explain this to me step by step and point out what I'm not getting here?

It's some kind of OpenGL trick? OpenGL Math trick? in the GLSL docs i always find and explicit reference to the type accepted by the function and vec2 it's not there.

Answer 1

The first line with "mod" makes sure that coordinates are always in the range [-25;25), repeating all the time ("mod" is for repeating and without the "-vec2(25)" at the end, coordinates would be in the [0;50) range).

"mod" is often used in this manner to repeat procedurally generated content at no cost.

The reason you won't see explicitly defined types in GLSL docs is because this function works with genType (float/vec2/vec3/vec4) types. By the way, the tutorial you provided includes that:

Like many functions in GLSL, step has parameters and return values with the type genType. This is shorthand for float, vec2, vec3, and vec4.

Graph of the function: set "fmod(x#2)" here as the first graph and click on "Draw" to see what it looks like.

Here's a graph that might load slower but requires no input: mod(x,2) on Wolfram Alpha