Noise · lesson 1 of 6 · Intermediate · about 5 min
Randomness without random()
You will build: Make TV-static blocks: a 20×15 grid where each cell is a grey level from hash(cell).
There's no Random.Next() in a shader — remember, the function has to give the same answer for the same input, and pixels can't share a random generator. Instead we use a hash: a function that scrambles its input so thoroughly the output looks random.
float hash(float2 p)
{
return frac(sin(dot(p, float2(127.1, 311.7))) * 43758.5453);
}
Give it a position, get a pseudo-random number 0..1. The same position always returns the same value, so the noise doesn't flicker. (The magic numbers are just big, unrelated constants; sin of a huge number is chaotic.)
Combine with floor from the tiles lesson: every pixel in the same cell hashes the same cell ID → one random value per cell.
The numbers you need
Everything the picture depends on is given, so the challenge is the code, not guessing.
- Grid
20 × 15 cells
Try it in your own language
The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start coding