Checker 10x10
A checkerboard comes down to two lines:
Here's how each line works.
floor identifies the cell number
vUv * 10.0 stretches the 0–1 UV range into 0–10, dividing the canvas into a 10×10 grid.
floor() rounds down to the nearest integer: 3.7 becomes 3, 0.2 becomes 0.
Each cell ends up with a pair of integer coordinates — for example, the cell in column 3, row 7 gets the ID (3, 7).
mod separates black from white
g.x + g.y adds the column number to the row number.
mod(..., 2.0) takes the remainder when divided by 2: even sums (0, 2, 4…) give 0.0, odd sums (1, 3, 5…) give 1.0.
This creates the alternating pattern: the bottom-left cell (0,0) gives 0, and every step right or up flips the remainder between 0 and 1.
mix(dark, light, m) uses that 0/1 value to output the correct color for each cell.
Try changing it
| Change | Effect |
|---|---|
Set the scale from 10.0 to 4.0 | Larger cells, a 4×4 board |
Set the scale to 20.0 | Smaller cells, a 20×20 board |
Swap the colors in mix() | Red/black, blue/white, any combination |
Change mod(g.x + g.y, 2.0) to mod(g.x, 2.0) | Turns into vertical stripes |
Exercise
Replace vec2 g = vec2(0.0); and float m = 0.0; with the correct expressions to produce a 10×10 checkerboard.
Answer Breakdown
floor(vUv * 10.0) discretizes the UV coordinates into integer cell IDs on a 10×10 grid. mod(g.x + g.y, 2.0) adds the two IDs and takes the remainder — adjacent cells always differ by 1, so the remainder always alternates.
The starting code g = vec2(0.0), m = 0.0 gives every cell the same ID, so mix can only produce one color. Adding floor and mod gives each cell a unique ID, and the alternating pattern follows automatically.
Try changing mod(g.x + g.y, 2.0) to mod(g.x * g.y, 2.0) and see what pattern appears.