GLSL shader example
Checkerboard
A scrolling checkerboard pattern built from floor() and mod() in four lines of GLSL.
Live example
Edit the code and the preview updates as you type.
How it works
uv * 8.0 stretches the coordinates so the canvas height spans 8 units. floor() drops the decimal part, so every pixel inside the same square gets the same whole-number cell index, like (3, 5).
Adding the two indices and taking mod(..., 2.0) gives 0 or 1. Moving one cell right or up changes the sum by 1, which flips the result. That alternation is the whole checkerboard.
Dividing by u_resolution.y for both axes keeps the cells square on a wide canvas, and adding u_time * 0.05 slides the whole grid diagonally.
Try changing it
| Change | Result |
|---|---|
8.0 to 20.0 | Smaller squares, 20 per column |
cell.x + cell.y to cell.x | Vertical stripes |
uv * 8.0 to uv * vec2(8.0, 4.0) | Rectangular cells, twice as tall as wide |
u_time * 0.05 to vec2(u_time * 0.2, 0.0) | Faster scrolling, left to right only |