Horizontal Stripes
Two lines of code are enough to slice the canvas into evenly spaced horizontal stripes:
Let's break down what each does.
How fract creates repetition
vUv.y runs from 0.0 at the bottom to 1.0 at the top of the canvas.
Multiplying by count stretches that range to 0–12.
fract() keeps only the fractional part: 1.3 becomes 0.3, 2.7 becomes 0.7. The full range 0–12 gets folded into 12 identical 0–1 cycles.
The result: the canvas is divided into 12 equal bands, each with its own local coordinate running from 0.0 to 1.0 — like photocopying the same ruler 12 times.
How step creates hard edges
step(0.5, y) returns 1.0 when y is at least 50%, and 0.0 otherwise.
Within each band, the lower half (0%–50%) gives 0.0 and the upper half (50%–100%) gives 1.0.
That 0/1 mask goes into mix() to alternate between the dark and light colors.
Try changing it
| Change | Effect |
|---|---|
Set count to 4.0 | Wider stripes, only 4 bands |
Change step(0.5, y) to step(0.3, y) | Light stripes become wider, dark ones narrower |
Replace vUv.y with vUv.x | Stripes rotate 90 degrees |
Swap the colors in mix() | Any two-color combination you like |
Exercise
Replace float y = 0.0; with the correct expression to produce 12 horizontal stripes.
Answer Breakdown
With count = 12.0, multiplying vUv.y by 12 expands the y range to 0–12. fract() folds that range back into a repeating 0–1 sawtooth wave with 12 cycles.
The starting code float y = 0.0 makes y equal to 0 for every pixel. Since step(0.5, 0.0) always returns 0, the canvas is solid dark. Changing to fract(vUv.y * count) lets y vary with height, so step can split each band into two halves — creating the stripes.
Try setting count to 20.0 and see how the stripe density changes.