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

Collision

Two sources orbit. The waves collide.

One ripple from center. Two ripples from different points create interference, where they cross, waves add or cancel. Complex interaction patterns.

Two stones in the same lake.

InterferenceAdding two sin() from different origins. Where they align = strong wave. Where they oppose = calm. Like two speakers in a room, zones of sound and zones of silence.
TryChange *.5 on o1 (orbit radius) to *.9, separated sources, complex interference. To *.15, sources overlapping, taut interference. Change T*.25 to T*1.5 and the sources spin fast.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  vec2 o1 = vec2(cos(T*.25),sin(T*.25))*.5;
  vec2 o2 = -o1;
  float d1 = length(p-o1), d2 = length(p-o2);
  float r1 = sin(d1*10.-T*2.)*.5+.5;
  float r2 = sin(d2*10.-T*2.)*.5+.5;
  float v = (r1+r2)*.5;
  v *= smoothstep(1.8, 0., min(d1,d2));
  float c1 = smoothstep(.08,.06, d1);
  float c2 = smoothstep(.08,.06, d2);
  float s1 = smoothstep(0.,.15, length(p-o1+vec2(.03,-.04))-.08);
  float s2 = smoothstep(0.,.15, length(p-o2+vec2(.03,-.04))-.08);
  vec3 col = vec3(.06,.02,.1) * s1 * s2;
  col += vec3(.85,.55,.6) * pow(v,.75);
  col += vec3(.95,.3,.4) * c1;
  col += vec3(.4,.3,.95) * c2;
  col += vec3(.95,.8,.85) * pow(v,4.) * .3;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close