Lección 1 de 10 · Fuerzas en un shader

Forces

Tres figuras. Cero fuerzas. El antes.

Mira lo que ya sabes construir. Rayas, espirales, radiales, Chladni, patrones, todo con código que tú escribiste. Eso no es trabajo de principiante. Eso es real.

Lo que falta es movimiento. Las imágenes quietas son posters. Las imágenes que se mueven están vivas.

Frame estático = poster. Frame animado = sistema vivo.

Antes de moverlas necesitas un material, algo con textura irregular que se sienta natural cuando lo empujes. fb() es esa función: genera campos con detalle a todas las escalas. Por ahora es una caja negra, en la siguiente sección vas a aprender qué tiene adentro. Aquí la usas como herramienta.

Esta sección te enseña 9 fuerzas:

→ p.y += T gravedad, todo cae
→ p.x += sin(T) viento, sopla y regresa
→ warp * sin(T) pulso, el material pulsa
→ atan(p) + T vórtice, gira desde el centro
→ sin(length(p) - T) ripple, ondas que salen del centro
→ M (mouse) touch

fb(p)fb() genera textura irregular, como nubes, humo, terreno. Es tu material base. Cada lección le agrega UNA fuerza para moverlo.

PruebaLas tres figuras casi no se mueven, un sutil bob arriba y abajo. Cambia el 0.02 a 0.0 y quedan congeladas. A 0.1 y empiezan a flotar. Pero esto sigue siendo el antes, en Gravity les sumas una fuerza real.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float b = sin(T*.8)*.02;
  vec3 col = vec3(0.03, 0.02, 0.08);
  // Circle
  float dc = length(p-vec2(-.55,b))-.25;
  col *= smoothstep(-.02,.2,length(p-vec2(-.48,b-.08))-.25);
  col += vec3(0.0,0.7,0.9) * smoothstep(.02,-.02,dc);
  col += vec3(0.0,0.35,0.45) * exp(-max(dc,0.)*4.)*.4;
  // Square
  vec2 sq = abs(p-vec2(0.,-b))-vec2(.18);
  float ds = max(sq.x,sq.y);
  vec2 ssq = abs(p-vec2(.06,-.08-b))-vec2(.18);
  col *= smoothstep(-.02,.2,max(ssq.x,ssq.y));
  col += vec3(.9,.3,.1) * smoothstep(.01,-.01,ds);
  col += vec3(.45,.15,.05) * exp(-max(ds,0.)*4.)*.4;
  // Triangle
  vec2 tp = p-vec2(.55,-b); vec2 at = abs(tp);
  float dt = max(at.x*.866+tp.y*.5,-tp.y)-.22;
  vec2 st = abs(tp+vec2(.05,-.06));
  col *= smoothstep(-.02,.15,max(st.x*.866+(tp.y-.06)*.5,-(tp.y-.06))-.22);
  col += vec3(.95,.85,.2) * smoothstep(.01,-.01,dt);
  col += vec3(.5,.42,.1) * exp(-max(dt,0.)*4.)*.4;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}