Diagonal Stripes
Adding x and y coordinates together tilts the stripes 45 degrees:
Here's why that works.
Why adding x and y creates a diagonal
Horizontal stripes use only vUv.y; vertical stripes use only vUv.x.
Adding them — vUv.x + vUv.y — means pixels along the 45-degree diagonal (from bottom-left to top-right) share the same x+y value. The value changes uniformly in the perpendicular direction.
The result: stripes run along diagonal lines.
fract creates repetition
(vUv.x + vUv.y) * c stretches the 0–2 range (since x+y maxes at 1+1=2) to 0–28 (with c=14).
fract() folds that into 14 repeating 0–1 sawtooth cycles — each cycle is one dark/light stripe pair.
step cuts the hard edges
step(0.5, v) splits each cycle into the first half (returns 0, dark) and the second half (returns 1, light), producing sharp stripe edges.
Try changing it
| Change | Effect |
|---|---|
Set c from 14.0 to 6.0 | Wider stripes |
Change vUv.x + vUv.y to vUv.x - vUv.y | Stripes tilt the other way (bottom-left to top-right becomes top-left to bottom-right) |
Change step(0.5, v) to step(0.3, v) | Narrower dark stripes, wider light ones |
Change to vUv.x * 2.0 + vUv.y | Stripe angle shifts, leaning more horizontal |
Exercise
Replace float v = 0.0; with the correct expression to produce 45-degree diagonal stripes.
Answer Breakdown
vUv.x + vUv.y is a linear coordinate along the diagonal direction, ranging from 0 to 2. Multiplying by c = 14.0 expands it to 0–28; fract() folds it into 14 repeating cycles.
The starting code v = 0.0 makes v constant at 0 for every pixel. step(0.5, 0.0) always returns 0, so the canvas is solid dark. Changing to fract((vUv.x + vUv.y) * c) makes v vary diagonally, and the stripes appear.
Try vUv.x * 0.5 + vUv.y instead — the stripes will tilt toward vertical.