Lección 1 de 10 · Fractales en GLSL

El plano complejo

Cada pixel es un número con dos mitades. Bienvenido al mapa.

Toda la ruta cabe en una línea: z = z² + c. Cada pixel pone su número en la regla y la repite: al cuadrado, más c, otra vez. Si se dispara, queda afuera. Si no, adentro. La orilla entre los dos es el fractal.

Un fractal de escape vive en el plano complejo. No te asustes con el nombre: es el mismo plano que ya conoces, solo que cada punto (x, y) lo leemos como un único número z con dos mitades, la real y la imaginaria. Aquí mapeamos uv directo a z y lo pintamos: el ang da el color, el radio rad empuja el tono.

Antes de iterar nada, hay que saber leer el mapa. Las dos líneas blancas son los ejes: cruce = el origen (0,0).

vec2 z = uv * zoomTratamos el frag como un número complejo. z.x es la parte real, z.y la imaginaria. zoom abre o cierra cuánto plano cabe en pantalla. Todo lo que sigue en las próximas 9 lecciones le hace cosas a este z.

PruebaSube zoom a 2.5 y ves más plano; bájalo a 0.8 y te acercas al origen. Mueve swirl de 2.0 a 5.0 y el color gira más rápido alrededor del centro.

El código

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=1.4;
  vec2 z=uv*zoom;
  float ang=atan(z.y,z.x);
  float rad=length(z);
  float swirl=2.0;
  vec3 col=0.5+0.5*cos(vec3(0.0,2.1,4.2)+ang+rad*swirl);
  col*=0.55+0.45*smoothstep(2.2,0.0,rad);
  float ax=smoothstep(0.02,0.0,abs(z.x))+smoothstep(0.02,0.0,abs(z.y));
  col+=vec3(1.0,0.95,0.85)*ax*0.55;
  gl_FragColor=vec4(col,1.0);
}