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

Vortex

Triangles in orbit. The vortex pulls.

Convert to polar coordinates, add T to the angle, convert back. The entire space rotates. The warp coils like water going down the drain.

Water when you pull the plug.

atan() + Tatan(p.y, p.x) gives you the angle. Add T * 0.1 and rebuild with cos/sin. Everything rotates. Low speed = contemplative. High = centrifuge.
TryChange 0.15 to 0.5, spin cycle. To 0.02, so slow you barely notice. Flip sign to -T * 0.15, spins the other way.

The code

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float spin = T * 0.15;
  vec3 col = vec3(0.04, 0.02, 0.1);
  for(int i = 0; i < 5; i++){
    float fi = float(i);
    float a = spin + fi * 1.2566;
    float dist = 0.4 + fi * 0.08;
    vec2 c = vec2(cos(a),sin(a)) * dist;
    float rot = a*2.; float ca=cos(rot),sa=sin(rot);
    vec2 q = p-c; q = vec2(q.x*ca-q.y*sa, q.x*sa+q.y*ca);
    vec2 aq = abs(q);
    float d = max(aq.x*.866+q.y*.5, -q.y) - 0.1;
    vec2 sq=q+vec2(.03,-.05); vec2 asq=abs(sq);
    col *= smoothstep(-.01,.1,max(asq.x*.866+sq.y*.5,-sq.y)-.1);
    col += vec3(.85,.45,.05) * smoothstep(.01,-.01,d) * (.5+fi*.1);
  }
  col += vec3(.95,.85,.4) * exp(-length(p)*2.) * .2;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close