learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 8 of 10 · Fractals in GLSL

Zoom

Recenter and dive. The detail never ends.

A fractal's superpower is self-similarity: no matter how close you get, there is always new detail. To dive in we need just two things: recenter on a juicy point and scale uv by a small zoom.

Here we aim at the seahorse valley, near (-0.745, 0.113). Lowering zoom is a microscope: each level reveals spirals that were not there before.

c = uv * zoom + centercenter is where you aim; zoom is how much plane fits. Smaller = closer = more detail. The iteration does not change a single letter: the fractal already holds everything, you only choose which sliver to look at.
TryDrop zoom from 0.6 to 0.15 and you nosedive into detail. Change center to vec2(-0.16, 1.04) for another region boiling with spirals.

The code

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=0.6;
  vec2 center=vec2(-0.745, 0.113);
  vec2 c=uv*zoom+center;
  vec2 z=vec2(0.0); float n=0.0; bool esc=false;
  const int IT=160;
  for(int i=0;i<IT;i++){
    z=vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y)+c;
    if(dot(z,z)>256.0){ n=float(i); esc=true; break; }
  }
  float sn=esc ? (n - log2(log2(dot(z,z))) + 4.0) : 0.0;
  float band=sn * 0.4;
  vec3 col=0.5+0.5*cos(0.3*band + vec3(0.0,2.4,4.4));
  col=esc ? col : vec3(0.02,0.0,0.04);
  gl_FragColor=vec4(col,1.0);
}
close