Lesson 6 of 10 · GLSL for beginners
The center
The origin point of every shader.
So far p went from 0 (corner) to 1 (opposite corner). That is useful for gradients, but not for centered things like a circle in the middle.
(0, 0). Ground zero. Everything is measured from here.
There is a formula that almost every shader uses at the start. Think of it as tuning your instrument before you play:
The center formula
What it does: the center of the screen is now (0,0). The top-right corner is (1,1). The bottom-left is (-1,-1). And it works whether the screen is square or wide, no distortion.
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);What it does: the center of the screen is now (0,0). The top-right corner is (1,1). The bottom-left is (-1,-1). And it works whether the screen is square or wide, no distortion.
You do not need to understand the full formula yet. It is the first line of almost every shader you write.
Change
0.4 (blue) to 0.9 and the center turns lavender. Swap p.x for p.y on the first color line and the gradient flips.The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
vec3 col = vec3(p.x * 0.5 + 0.5, p.y * 0.5 + 0.5, 0.4);
col *= 0.9 + 0.1 * (1.0 - length(p));
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}