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 2 of 10 · Noise in GLSL

Smooth

From blocks to signal.

Static is interesting but hard. To make it usable you need to smooth it. n2() blends neighboring blocks so the transition is continuous.

Static learns to flow. From blocks to signal.

n2(p)Value noise. Blends the 4 neighboring blocks based on your position. Smooth waves instead of blocks.
TryChange 4. to 10., smaller waves. To 2., bigger.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float bar = n2(vec2(p.y * 4.0, 0.5));
  float signal = sin(p.x * 20.0 + bar * 8.0) * 0.5 + 0.5;
  signal = smoothstep(0.3, 0.7, signal);
  float noise = n2(p * 8.0) * 0.15;
  vec3 col = vec3(0.0, signal * 0.85, signal * 0.65);
  col += vec3(signal * 0.5, 0.0, signal * 0.3) * step(0.7, bar);
  col += noise;
  col *= 0.9 + 0.1 * step(0.5, sin(gl_FragCoord.y * 2.0) * 0.5 + 0.5);
  col += vec3(0.015, 0.01, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close