Centered Circle Mask
Use distance and step to decide whether each pixel is inside the circle:
Let's break it down.
distance measures the gap
distance(a, b) returns the straight-line distance between two points.
distance(vUv, vec2(0.5, 0.5)) gives each pixel its distance from the canvas center:
- Center pixel: distance = 0
- A pixel at radius 0.3: distance = 0.3
- Near a corner: distance ≈ 0.7
step generates a hard-edge mask
step(edge, x) returns 0 when x < edge, and 1 when x ≥ edge.
Here it's step(dist, radius) — pay attention to argument order:
- dist < radius → returns 1 (inside the circle)
- dist ≥ radius → returns 0 (outside the circle)
The result is a crisp circular mask: 1 inside, 0 outside.
mix turns the mask into color
inside = 1(circle interior) → warm yellowvec3(1.0, 0.8, 0.2)inside = 0(exterior) → blackvec3(0.0)
Try changing it
| Change | Effect |
|---|---|
Change radius from 0.3 to 0.15 | Smaller circle |
Change center to vec2(0.3, 0.7) | Circle shifts to upper-left area |
Use 1.0 - step(dist, radius) | Invert — circle goes black, background goes yellow |
Replace step with 1.0 - smoothstep(radius - 0.01, radius + 0.01, dist) | Soft edge |
Exercise
Define the center point and radius, compute the distance with distance, generate a mask with step, blend colors with mix, and output the result.
Answer Breakdown
distance(vUv, center) gives each pixel its distance from center. step(dist, radius) checks whether that distance is within the radius — returning 1 inside, 0 outside. mix uses the 0/1 mask to switch between black and yellow.
The exercise starts with an empty main() — write out all six lines to complete it.
Try replacing step with 1.0 - smoothstep(0.29, 0.31, dist) to see the circle with a soft anti-aliased edge.