First Whirlpool

An evolution of the step function: instead of sampling the quadrants from a fixed grid, we swirl the coordinate plane around its center before applying step. Each point is rotated by an angle that grows toward the middle, dragging the four colored quadrants into a whirlpool. A slow iTime term keeps the vortex turning.

A single shader block runs it live and, via #+attr_diff, shows its source as a changeset from the step function — toggle the box to read the full source instead:

Diff: step-function-shader → whirlpool-shader

--- step-function-shader
+++ whirlpool-shader
@@ -1,12 +1,20 @@
 void mainImage( out vec4 fragColor, in vec2 fragCoord )
 {
   vec2 uv = fragCoord/iResolution.xy; // <0,1>

-  vec3 col = vec3(0); // start with black
+  vec2 p = uv - 0.5; // recenter so the swirl pivots on the middle
+  float r = length(p); // distance from the center
+  float a = atan(p.y, p.x); // current angle
+
+  // twist harder near the center, and let it flow slowly over time
+  a += 6.0 * exp(-3.0 * r) + iTime * 0.3;

-  // perform step function across the x-component and y-component of uv
-  col = vec3(step(0.5, uv), 0);
+  // rebuild swirled coordinates back in <0,1>
+  vec2 sw = vec2(cos(a), sin(a)) * r + 0.5;
+
+  vec3 col = vec3(0); // start with black
+  col = vec3(step(0.5, sw), 0); // same quadrant step, now on the whirlpool

   // Output to screen
   fragColor = vec4(col,1.0);
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  vec2 uv = fragCoord/iResolution.xy; // <0,1>

  vec2 p = uv - 0.5; // recenter so the swirl pivots on the middle
  float r = length(p); // distance from the center
  float a = atan(p.y, p.x); // current angle

  // twist harder near the center, and let it flow slowly over time
  a += 6.0 * exp(-3.0 * r) + iTime * 0.3;

  // rebuild swirled coordinates back in <0,1>
  vec2 sw = vec2(cos(a), sin(a)) * r + 0.5;

  vec3 col = vec3(0); // start with black
  col = vec3(step(0.5, sw), 0); // same quadrant step, now on the whirlpool

  // Output to screen
  fragColor = vec4(col,1.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  vec2 uv = fragCoord/iResolution.xy; // <0,1>

  vec3 col = vec3(0); // start with black

  // perform step function across the x-component and y-component of uv
  col = vec3(step(0.5, uv), 0);

  // Output to screen
  fragColor = vec4(col,1.0);
}