Lección 7 de 10 · GLSL para principiantes
El reloj
T es el tiempo. Tu primera variable en vivo.
Hasta ahora todo era estático. Ahora le agregamos movimiento.
Un contador que nunca se detiene. Tu primer input live.
Hay una variable lista para ti: T. Es el tiempo en segundos desde que cargó la página. Va creciendo: 0.1, 0.2, 0.3... y nunca para.
Como cualquier número, lo puedes usar en tus colores. Si haces que el rojo dependa de T, el rojo va a cambiar con el tiempo.
¿Por qué sin(T)?Si pusieras solo
T, el color crecería para siempre y se quedaría en blanco. Por eso lo "envolvemos" con sin(), que oscila entre -1 y 1 eternamente. La fórmula .5 + .5 * sin(T) hace que oscile entre 0 y 1, perfecto para colores.Cambia el
0.8 dentro de sin(T * 0.8) a 5. para que parpadee rápido. A 0.2 para que respire lento.El código
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.);
}