home/ atoms/ glsl-hsb-polar-coordinates

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?

“HSB was originally designed to be represented in polar coordinates (based on the angle and radius) instead of cartesian coordinates (based on x and y).”
corpus · the-book-of-shaders-chapter-6-color-patricio-gonzalez-vivo-a · chunk 2