Lección 2 de 10 · Patrones en shaders

Rayas

Una onda. Dos colores. Patrón infinito.

En la lección 01 cada forma vivía en una distancia. Ahora vas a usar una onda para repetir algo infinitas veces.

sin(p.x * 6.) oscila, sube de -1 a 1, baja, vuelve a subir, para siempre. Multiplícalo por .5 y súmale .5: el rango queda entre 0 y 1. Ese número entra a mix(), que mezcla dos colores: cuando vale 0 ves el primero, cuando vale 1 ves el segundo, en medio los funde.

Un seno. Dos colores. El patrón se repite solo.

La frecuenciaEl número que multiplica p.x (el 6.) decide cuántas rayas caben en la pantalla. Más alto = más rayas, más delgadas. Más bajo = pocas rayas anchas. Es como girar la perilla de un sintonizador.

PruebaCambia p.x por p.y y las rayas se vuelven horizontales. El 6. a 20. para rayas finas, a 2. para rayas anchas. Suma p.y dentro del sin y aparecen diagonales. Mete + (M.x * 2. - 1.) * 6. dentro del seno y el mouse mueve el patrón.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float wave = .5 + .5 * sin(p.x * 6. + p.y * 0.);
  vec3 cobalt = vec3(.08, .12, .42);
  vec3 llama  = vec3(.98, .55, .12);
  vec3 col = mix(cobalt, llama, wave);
  gl_FragColor = vec4(col, 1.);
}