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 5 of 10 · Fractals in GLSL

Palette

The smooth count becomes color. Here it ignites.

You have a continuous number per frag: the smooth count. The only thing left to make this tier S is mapping it to a palette. We use IQ's cosine trick: three phase-shifted cosines that sweep the whole spectrum with no tables, no textures.

The same count from L04, dressed up. Changing the band density spreads more or less color across the edge.

0.5 + 0.5*cos(0.35*band + vec3(0.0,2.1,4.2))Three channels, three phases (0.0, 2.1, 4.2). Since each cosine starts at a different point, where red rises green falls: a smooth rainbow is born. band is the scaled smooth count; move the phase and move the color.
TryRaise band=sn * 0.5 to 1.2 for tighter color rings, or to 0.2 for wide gradients. Change the phases 2.1 and 4.2 and you reinvent the palette.

The code

precision highp float;
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0 - R)/R.y;
  float zoom=1.4;
  vec2 c=uv*zoom+vec2(-0.6,0.0);
  vec2 z=vec2(0.0); float n=0.0; bool esc=false;
  const int IT=150;
  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.5;
  vec3 col=0.5+0.5*cos(0.35*band + vec3(0.0,2.1,4.2));
  col=esc ? col : vec3(0.02,0.01,0.04);
  gl_FragColor=vec4(col,1.0);
}
close