Hash Grid Noise
The example divides the canvas into a 64×64 grid and gives each cell a random shade of gray. It all comes down to these two lines:
Let's break it down.
What is hash21
hash21 is a pseudo-random function — give it a 2D coordinate and it returns a number between 0.0 and 1.0.
The key word is pseudo-random: it is not truly random. The same input always produces the same output. That is exactly what we want — the same grid cell should show the same color every frame, not flicker.
You do not need to memorize those numbers. Treat this function as a black box.
What floor does
vUv is a continuous coordinate from 0.0 to 1.0. After floor(vUv * 64.0):
- Multiplying by 64 stretches the coordinate to the range 0.0–64.0
floordrops the decimal part, leaving integers: 0, 1, 2 ... 63
Every pixel inside the same cell produces the same floor result, so hash21 returns the same value for all of them. The entire cell becomes one solid color. A smaller multiplier makes bigger cells; a larger one makes finer noise.
Try changing it
| Change | Effect |
|---|---|
64.0 → 8.0 | Larger cells, more obvious mosaic look |
64.0 → 256.0 | Tiny cells, looks like random static |
vec3(n) → vec3(n, n*0.5, 0.2) | Each cell takes on a warm orange-blue hue |
34.345 → 12.0 | Different random distribution, similar overall structure |
Exercise
Inside main, compute a per-cell random value using hash21(floor(vUv * 64.0)) and output it as a grayscale image.
Answer Breakdown
There is only one line to change: replace n = 0.0 with n = hash21(floor(vUv * 64.0)).
vUv * 64.0— scales up UV to control cell densityfloor(...)— collapses every pixel inside a cell to the same integer coordinatehash21(...)— hashes that integer coordinate into a 0–1 gray valuevec3(n)— expands the single float into a grayscale color
The starter code sets n = 0.0, so every pixel is black. After the replacement, each cell gets its own random number, producing the mosaic noise pattern.
Try changing 64.0 to 16.0 to see how cell size affects the coarseness of the noise.