Draw a circle using normalized coordinates and the distance function length(), then color it with a simple conditional.
The previous tutorial computed a circle mask with step. This one uses the same mask — but instead of outputting grayscale, uses it to switch between two colors.
Mask controls color
The circle mask is 0 or 1. Pass it to mix to select between background and foreground:
- Inside circle (
circle = 1) →mixpicksfg(blue) - Outside circle (
circle = 0) →mixpicksbg(dark)
Exercise
The exercise starts with circle = 0.0 (all background). Use 1.0 - step(0.3, d) to compute the mask and get a blue circle in the center.
Answer Breakdown
The mask is identical to simple-circle — 1 inside, 0 outside. The difference is using it with mix instead of outputting it directly as grayscale. A mask is essentially a 0/1 switch: mix(a, b, 0) picks a, mix(a, b, 1) picks b.
Change fg to vec3(1.0, 0.4, 0.1) for an orange circle instead.