Lesson 5 of 10 · GLSL for beginners
The gradient
A position controls a color. There you go, you are an artist.
This is the most powerful idea you will learn today: position can become color. And the other way around: the math you apply to the position shows up as an image.
Position becomes image. Welcome to shaders.
A gradient is just that: you take p.x (the horizontal position) and use it as a color channel. The frag on the left has p.x = 0, the one on the right has p.x = 1. Connect it to red, and you get a gradient from black to red.
mix()The function
mix(A, B, t) "blends" two things. When t is 0, you get pure A. When it is 1, you get pure B. When it is 0.5, you get half and half. It is like a slider.Change
p.x to p.y and the gradient goes vertical. Change the colors vec3(0.95, 0.15, 0.55) and vec3(0.1, 0.85, 0.5) to anything you like. Change p.x * p.x to p.x and the transition becomes linear instead of curved.The code
void main(){
vec2 p = gl_FragCoord.xy / R;
vec3 a = vec3(0.95, 0.15, 0.55);
vec3 b = vec3(0.1, 0.85, 0.5);
float t = p.x * p.x;
vec3 col = mix(a, b, t);
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}