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 6 of 10 · Domain warping

Tie-dye

Midnight tie-dye. Not Woodstock.

Tie-dye is radial: length() creates rings. Warping before length() distorts them into fluid shapes. sin() over distance creates color bands.

The t-shirt you never washed.

length(p)Distance to origin. With warp = irregular radial.
TryChange blood to vec3(1., 0., .9) (magenta), gold to vec3(0., 1., .7) (cyan), electric to vec3(1., .9, 0.) (yellow). Rave mode.

The code

void main(){
  vec2 p = gl_FragCoord.xy / R * 3.0 - 1.5;
  float warp = fb(p * 2.0);
  vec2 wp = p + warp * 0.4;
  float d = length(wp);
  float rings = sin(d * 10.0) * 0.5 + 0.5;
  float band = floor(rings * 4.0) / 4.0;
  vec3 midnight = vec3(0.03, 0.02, 0.1);
  vec3 blood = vec3(0.5, 0.05, 0.1);
  vec3 gold = vec3(0.8, 0.65, 0.15);
  vec3 electric = vec3(0.1, 0.3, 0.9);
  vec3 col = midnight;
  col = mix(col, blood, step(0.25, band));
  col = mix(col, gold, step(0.5, band));
  col = mix(col, electric, step(0.75, band));
  col *= 0.85 + 0.15 * rings;
  col += vec3(.1,.06,.04) * pow(rings, 5.) * 0.3;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.0);
}
close