home/ atoms/ length-function-radial-gradient

The GLSL length() function computes distance from the origin, enabling radial gradients and circular shapes

length(v) returns the Euclidean magnitude of vector v — the distance from the vector to the origin. In 2D shader art, length(uv) gives the distance of each pixel from the canvas center (after UV normalization). This value can be used directly as a grayscale gradient (closer to center = darker, farther = lighter), or as the basis for SDFs, rings, and radial patterns. The function is foundational because most interesting 2D shapes are defined relative to a center point. It also extends naturally to 3D for sphere SDFs.

Examples

float d = length(uv); // radial distance from center
fragColor = vec4(d, d, d, 1.0); // grayscale radial gradient

Assessment

Predict the output of length(vec2(0.0, 0.0)), length(vec2(1.0, 0.0)), and length(vec2(1.0, 1.0)). Then use length() to draw a grayscale gradient that is black at center and white at distance 0.5.

“I will create a float value which unlike vectors contains one single decimal number and assign the length of our UV coordinates to it by setting the red channel of the output color to this value we can observe a radial gradient expanding from the center”
corpus · kishimisu-an-introduction-to-shader-art-coding-video · chunk 2