Modulo Wrap
Use fract to repeat a stretch of coordinates indefinitely:
Let's break it down.
What fract does
fract(x) returns only the fractional part — the whole number is discarded:
fract(0.3)= 0.3fract(1.7)= 0.7fract(2.9)= 0.9
The result is a sawtooth wave: rises from 0 to 1, then instantly resets back to 0 and repeats.
Multiply to control frequency
vUv.x * 5.0 stretches the original 0–1 range into 0–5. fract then cuts that 0–5 into 5 equal segments, each running from 0 to 1 — so you get 5 gradient bands across the canvas.
The rule: multiplier = number of repetitions.
fract(vUv.x * 1.0)= no repetition, just the original gradientfract(vUv.x * 3.0)= 3 bandsfract(vUv.x * 10.0)= 10 bands
Try changing it
| Change | Effect |
|---|---|
Change 5.0 to 10.0 | Twice as many bands, thinner stripes |
Change vUv.x to vUv.y | Repeat in the vertical direction |
Apply step(0.5, t) to the result | Turn the gradient into hard-edge stripes |
Use 1.0 - fract(vUv.x * 5.0) | Reverse the gradient direction |
Exercise
Replace t = vUv.x with fract(vUv.x * 5.0) so the canvas shows 5 repeating gradient bands.
Answer Breakdown
vUv.x * 5.0 stretches the 0–1 range to 0–5. fract takes the fractional part at each position, resetting every 1 unit, which produces 5 gradient cycles across the canvas.
The exercise starts with float t = vUv.x — a single plain gradient. Replacing it with fract(vUv.x * 5.0) gives you the 5 repeating bands.
Try 5.5 instead of 5.0 to see how the last band gets clipped at the right edge.