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).

The picture produced by the shader in the lesson "Randomness without random()"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

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