Smooth randomness, step 1: blend two values

The hash gives one random number per whole number: hash(0), hash(1), hash(2)... all unrelated. That is why the last lesson looked like blocky static.

To get smooth randomness we fill in the gaps by blending neighbours. For any position x:

• i = floor(x): the whole number to the left of us.
• f = frac(x): how far we are towards the next one (0 to 1).
• a = hash(i) and b = hash(i + 1): the random values on the left and the right.
• lerp(a, b, f): slide from a to b as f goes 0 to 1.

We will use only one direction first, and draw the result as a graph: a pixel is bright when it is close to the curve, i.e. when abs(uv.y - n) is small. This graphing trick is a great way to look at any value.

float x = uv.x * 8.0;                  // 8 cells across
float i = floor(x);
float f = frac(x);
float a = hash(float2(i, 0.0));
float b = hash(float2(i + 1.0, 0.0));
float n = lerp(a, b, f);               // the smooth value