How does this 2d noise generation function work? Does it have a name?

Question

I came across this 2D noise function in the Book of Shaders

float noise(vec2 st) {
  vec2 integerPart = floor(st);
  vec2 fractionalPart = fract(st);

  float s00 = random(integerPart);
  float s01 = random(integerPart + vec2(0.0, 1.0));
  float s10 = random(integerPart + vec2(1.0, 0.0));
  float s11 = random(integerPart + vec2(1.0, 1.0));

  float dx1 = s10 - s00;
  float dx2 = s11 - s01;
  float dy1 = s01 - s00;
  float dy2 = s11 - s10;

  float alpha = smoothstep(0.0, 1.0, fractionalPart.x);
  float beta = smoothstep(0.0, 1.0, fractionalPart.y);

  return s00 + alpha * dx1 + (1 - alpha) * beta * dy1 + alpha * beta * dy2; 
}

It is clear what this function does: it generates four random numbers at the vertices of a square, then interpolates them. What I am finding difficult is understanding why the interpolation (the s00 + alpha * dx1 + (1 - alpha) * beta * dy1 + alpha * beta * dy2 expression) works. How is it interpolating the four values when it does not seem to be symmetric in the x and y values?

Answer 1

If you expand the last line, it's:

return s00 * (1-alpha) * (1-beta) +
       s10 * alpha * (1-beta) +
       s01 * (1-alpha) * beta +
       s11 * alpha * beta;

Which is symmetric in x and y. If you add up the weights:

alpha * beta + (1-alpha) * beta  + alpha * (1-beta) + (1-alpha) * (1-beta)
= (alpha + 1-alpha) * beta + (alpha + 1-alpha) * (1-beta)
= beta + 1-beta
= 1

so it's an affine combination of the values at the corners