Soft Circle Cutout

Task

Draw a circle on a 2D plane. The circle should be centered at a specified circleCenter point, with a fixed radius of 0.6. The edge of the circle should have a smooth falloff controlled by an edge softness of 0.01, creating a soft transition instead of a hard boundary.

Theory

To test whether a point lies inside a circle, we first calculate the distance from that point (in this case, the current fragment's uv coordinate) to the center of the circle using the Euclidean distance formula:

$ distance = \sqrt { (x - C_x)^2 + (y - C_y)^2 } $

This gives us the radial distance from the fragment to the center. We then compare this distance to the circle's radius:

$

\text{inside} = \begin{cases} \text{true}, & \text{if}; distance < R \ \text{false}, & \text{otherwise } \end{cases}

$

Visualizing the Circle

If you're drawing a solid circle:

float mask = step(dist, radius);

This yields 1.0 inside and 0.0 outside. It produces a hard-edged circle.

Soft Edge

To draw a circle with a soft cutout effect in GLSL, we can leverage the smoothstep function:

float edge = 0.01; // edge softness
float mask = 1.0 - smoothstep(radius - edge, radius + edge, dist);

This gradually fades from opaque to transparent near the perimeter - ideal for antialiased visuals or soft cutouts.