Chain coordinate rotation, polar angle mapping, and fract repetition to build an animated radial wedge mask:
Let's break it down.
atan extracts the polar angle
atan(y, x) returns the angle of point (x, y) relative to the origin — ranging from -π to +π (about -3.14 to +3.14).
Map it to 0–1 for easier processing:
Adding π shifts the range to 0–2π, then dividing by 2π (the full circle) maps it to 0–1.
fract splits the angle into wedges
fract(angle01 * 8.0) stretches the 0–1 circle to 0–8, then takes the fractional part — dividing the full circle into 8 equal segments, each running 0–1 locally.
smoothstep(0.32, 0.42, wedges) cuts off the tail of each segment with a soft threshold. 1.0 - inverts it so each wedge is bright at the start and dark at the end.
Rotation makes it animate
p = rot(u_time * 0.8) * p rotates the coordinate system before computing the angle. Because atan reads the already-rotated position, the entire pattern of wedges turns together over time.
Order matters: rotate first, then extract the angle.
Try changing it
| Change | Effect |
|---|---|
Change 8.0 to 12.0 | 8 wedges becomes 12 |
Change 0.32 to 0.1 | Each wedge's bright portion is wider |
Change u_time * 0.8 to u_time * 3.0 | Faster rotation |
Change wedgeMask * ringMask to just wedgeMask | Remove the ring — wedges fill the entire canvas |
Exercise
Compute the polar angle with atan(p.y, p.x), map it to 0–1, then use fract and smoothstep to build the repeating wedge mask wedgeMask.
Answer Breakdown
atan(p.y, p.x) converts 2D coordinates to a polar angle (-π to +π). Adding π and dividing by 2π maps the full circle to 0–1. fract(angle01 * 8.0) divides that circle into 8 equal parts. smoothstep soft-clips the tail of each part, and 1.0 - flips it to give bright-leading wedges.
The exercise starts with angle01 = 0.0 and wedgeMask = 0.0 — all black. Fill in the four lines to see the rotating wedge pattern appear.
Try changing smoothstep(0.32, 0.42, wedges) to smoothstep(0.45, 0.55, wedges) to see how wedge width changes.