Vertical Stripes
Rotating horizontal stripes 90 degrees takes just one change — swap vUv.y for vUv.x:
Here's how it works.
Using the x coordinate for repetition
vUv.x runs from 0.0 on the left to 1.0 on the right of the canvas.
Multiplying by c stretches that range to 0–12.
fract() folds 0–12 into 12 individual 0–1 cycles, dividing the canvas into 12 columns where each column has its own local coordinate starting from 0.0.
step creates hard vertical edges
step(0.5, x) gives 0.0 to the left half of each column (0%–50%) and 1.0 to the right half (50%–100%).
mix(dark, light, m) uses that 0/1 mask to alternate between two colors, producing the vertical stripe pattern.
Try changing it
| Change | Effect |
|---|---|
Set c to 6.0 | Wider stripes, only 6 columns |
Change step(0.5, x) to step(0.8, x) | Wide dark stripes, narrow light hairlines |
Replace vUv.x with vUv.y | Stripes become horizontal again |
Swap the colors in mix() | Any color combination |
Exercise
Replace float x = 0.0; with the correct expression to produce 12 vertical stripes.
Answer Breakdown
With c = 12.0, multiplying vUv.x by 12 expands the x range to 0–12. fract() folds that into a 12-cycle sawtooth wave.
The starting code float x = 0.0 pins every pixel's x at zero. step(0.5, 0.0) always returns 0, so the canvas stays solid dark. Changing to fract(vUv.x * c) makes x vary across the canvas, allowing step to split each column into two halves — creating the stripes.
Try setting c to 24.0 to double the stripe density.