Mapping HSB to polar coordinates with atan and length renders a color wheel
HSB was designed for polar representation (angle = hue, radius = saturation). To render a colour wheel in GLSL: (1) compute the vector from the screen centre to the pixel, (2) use atan(y, x) to get the angle in radians [-PI, PI] and normalize by dividing by TWO_PI then adding 0.5, (3) use length() for the radius, which maxes at 0.5 from centre, so multiply by 2 to reach [0,1], (4) pass (angle, radius, 1.0) to hsb2rgb(). The recurring shader idea is that everything useful lives in 0.0–1.0, so raw angle and radius must be rescaled. GLSL’s atan(y, x) is the equivalent of C’s atan2(y, x).
Examples
vec2 toCenter = vec2(0.5) - st;
float angle = atan(toCenter.y, toCenter.x) / TWO_PI + 0.5;
float radius = length(toCenter) * 2.0;
vec3 color = hsb2rgb(vec3(angle, radius, 1.0));
gl_FragColor = vec4(color, 1.0);
Assessment
Walk through the wheel shader: (a) what angle does atan return for the pixel directly right of centre? (b) what hue is that after normalizing? (c) why multiply radius by 2.0?