Gradient Grid
One line turns a smooth gradient into a stepped, grid-like one:
Here's how it works.
How floor quantizes the gradient
vUv * 6.0 stretches the 0–1 UV range to 0–6, dividing the canvas into a 6×6 grid.
floor() rounds down to the nearest integer, collapsing all continuous values within a cell to a single number:
- Coordinates 0.1, 0.3, 0.5, 0.9 → all become 0
- Coordinates 1.2, 1.7 → both become 1
- And so on…
/ 6.0 maps the integers back into the 0–1 range (0→0.0, 1→0.167, 2→0.333…).
The result: every pixel inside the same cell gets the same cell value, so they all share the same color. Between cells, there's a sharp jump.
How vec3(cell, 0.0) assigns color
vec3(cell, 0.0) uses cell.x as the red channel, cell.y as the green channel, and fixes blue at 0:
- Bottom-left cell
(0, 0)→ black - Bottom-right cell
(5/6, 0)→ red - Top-left cell
(0, 5/6)→ green - Top-right cell
(5/6, 5/6)→ yellow (red + green)
Try changing it
| Change | Effect |
|---|---|
Set 6.0 to 3.0 | Larger cells, 3×3 grid |
Set 6.0 to 12.0 | Smaller cells, 12×12 grid |
Change vec3(cell, 0.0) to vec3(0.0, cell.x, cell.y) | Color shifts to green and blue channels |
Remove floor(...) and leave only vUv * 6.0 / 6.0 | Grid disappears, back to smooth gradient |
Exercise
Replace vec2 cell = vUv; with the correct expression to produce a stepped 6×6 gradient grid.
Answer Breakdown
floor(vUv * 6.0) discretizes the continuous UV coordinates into integers from 0 to 5. Dividing by 6.0 scales them back to 0–1 so the color range stays consistent.
The starting code cell = vUv uses the raw UV coordinates as color, which produces a smooth gradient with no grid. Adding floor(...) / 6.0 makes every pixel inside a cell share the exact same coordinate value, creating the stepped appearance.
Try changing / 6.0 to / 3.0 and observe how the color distribution shifts.