Step function

The simplest shader in the series, and the baseline the later pages build on.

A fragment shader runs once per pixel: mainImage gets that pixel’s location in fragCoord and returns its color. Dividing fragCoord by iResolution turns the raw pixel coordinate into uv, a point in <0,1> that is the same at any window size — (0,0) bottom-left, (1,1) top-right.

step(edge, x) returns 0 below the edge and 1 at or above it. Applied to uv at 0.5 it tests two things per pixel — right half? top half? — splitting the square into four quadrants. vec3(step(0.5, uv), 0) maps the x test to red and the y test to green with blue off, so the quadrants land on black (0,0), red (1,0), green (0,1), and yellow (1,1). The palettes page later revisits where those colors come from.

[glsl]: shader source

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);
}