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 3 of 10 · Forces in a shader

Wind

Wind pushes the blocks. Blows and returns.

Gravity goes one direction forever. Wind goes and comes back. sin(T) oscillates, pushes one way, slows, returns. The material undulates like cloth in an open window.

Curtain that cannot decide.

sin(T * speed) * ampspeed = how fast it blows. amp = how far it pushes. sin(T * 0.5) * 0.3 = gentle breeze. sin(T * 2.0) * 1.0 = gale.
TryChange 0.35 (wind speed) to 1.5, fast gust. Change 0.5 (amplitude) to 1.0, pushes further. Add Y wind too: p.y += sin(T * 0.3) * 0.15;

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float wind = sin(T * 0.35) * 0.5;
  float gust = sin(p.y * 2.5 + T * 0.5) * 0.2;
  vec3 col = vec3(0.02, 0.04, 0.12);
  for(int i = 0; i < 5; i++){
    float fi = float(i);
    float w = wind*(.4+fi*.2) + gust*(.3+fi*.15);
    float x = -0.8+fi*.4 + w;
    float y = -0.5+fi*.25;
    vec2 sz = vec2(.12+fi*.01, .07+fi*.02);
    vec2 q = abs(p-vec2(x,y))-sz;
    float d = max(q.x, q.y);
    vec2 qs = abs(p-vec2(x+.06,y-.07))-sz;
    col *= smoothstep(-.02,.15,max(qs.x,qs.y));
    col += vec3(.1+fi*.18,.4+fi*.12,.9-fi*.12) * smoothstep(.01,-.01,d) * (.55+fi*.12);
    col += vec3(.05+fi*.1,.2+fi*.05,.5-fi*.05) * exp(-max(d,0.)*5.) * .2;
  }
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close