Lesson 7 of 10 · GLSL for beginners
The clock
T is time. Your first live variable.
Until now everything was static. Now we add motion.
A counter that never stops. Your first live input.
There is a variable ready for you: T. It is the time in seconds since the page loaded. It keeps growing: 0.1, 0.2, 0.3... and it never stops.
Like any number, you can use it in your colors. If you make the red depend on T, the red will change over time.
Why sin(T)?If you just used
T by itself, the color would grow forever and stay white. So we "wrap" it with sin(), which oscillates between -1 and 1 forever. The formula .5 + .5 * sin(T) makes it oscillate between 0 and 1, perfect for colors.Change
0.8 inside sin(T * 0.8) to 5. and it blinks fast. To 0.2 and it breathes slow.The code
void main(){
vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
float brightness = .5 + .5 * sin(T * 0.8);
float d = length(p);
vec3 col = vec3(0.1, 0.02, 0.18) + vec3(0.68, 0.28, 0.72) * brightness;
col *= 0.7 + 0.3 * (1.0 - d * 0.4);
col = hueShift(col, 0.0);
gl_FragColor = vec4(col, 1.);
}