Lección 8 de 10 · GLSL para principiantes

La onda

sin() de la posición. Patrones con una función.

Hace dos lecciones le aplicaste sin() al tiempo y el brillo subía y bajaba. Ahora le aplicas sin() a la posición, y aparecen rayas.

Una onda. Infinita. La base de todo lo que viene.

¿Por qué? Porque sin(p.x * 10) oscila entre -1 y 1 a medida que p.x cambia. Así que de izquierda a derecha, el valor sube, baja, sube, baja... y eso son rayas.

El número 8Es la frecuencia. Más alto, más rayas. Más bajo, menos rayas. Pruébalo: cambia 8. por 50. (muchísimas rayas finas) o por 3. (pocas rayas anchas).

Le sumamos + T * 1.2 al final para que las rayas se muevan. Sin esa parte son rayas estáticas. Con ella son rayas que fluyen. El 1.2 es la velocidad.

PruebaCambia p.x por p.y y las rayas se vuelven horizontales. Cambia el + T * 1.2 por - T * 1.2 y las rayas van en la dirección contraria. Cambia el 1.2 a 5. y vuelan; a 0.2 y apenas se arrastran.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float v = sin(p.x * 8. + T * 1.2) * .5 + .5;
  vec3 a = vec3(0.08, 0.02, 0.12);
  vec3 b = vec3(0.95, 0.35, 0.55);
  vec3 col = mix(a, b, v * v);
  col *= 0.85 + 0.15 * v;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}