Lección 3 de 10 · Animación en shaders

Desfase

Cada diamante arranca en su propio tiempo. Ola mexicana.

Hasta ahora, todo el canvas se mueve al mismo tiempo. Lo que quieres es que cada elemento arranque en un momento diferente.

El código tiene siete diamantes en un loop. Cada uno suma su índice fi * 0.9 dentro del sin(): sin(T * 2.5 + fi * 0.9). El primer diamante llega a su peak antes que el segundo, el segundo antes que el tercero, la onda recorre la fila.

Cada punto arranca en su propio tiempo. La ola se propaga.

Phase offsetEl término que sumas dentro del sin() junto con T. Si es fi * 0.9, la ola viaja por el loop. Si fuera p.x * 2., viajaría por el espacio. Si fuera length(p) * 4., se expandiría en círculo.

PruebaCambia el 0.9 (offset entre diamantes) a 0. y todos suben al mismo tiempo, la ola desaparece. A 3.14 y los diamantes se alternan en par/impar. Cambia el 2.5 (velocidad) a 0.8 para una ola perezosa.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  vec3 col = vec3(0.03, 0.01, 0.04);
  for(int i = 0; i < 7; i++){
    float fi = float(i);
    float x = -0.9 + fi * 0.3;
    float y = sin(T * 2.5 + fi * 0.9) * 0.35;
    vec2 q = abs(p - vec2(x, y));
    float d = q.x + q.y - 0.1;
    vec2 qs = abs(p - vec2(x, y) + vec2(.03,-.05));
    col *= smoothstep(-.02, .12, qs.x+qs.y-0.1);
    col += vec3(.95,.25,.55) * smoothstep(.01,-.01, d);
  }
  gl_FragColor = vec4(col, 1.);
}