Perlin noise decomposition

Question

I'm trying to understand 2D Perlin noise from a visual point of view and I want to ask a couple of questions here to make sure I'm on the right track. I use WebGL and write custom shaders for rendering.

I start by calculating a dot product across one grid cell between a position vector from the center of the cell and one vertical vector and I get the gradient below (red is positive values and blue - negative). If I rotate the vector, it rotates the gradient:

Q1: The Wikipedia on "gradient noise" says "...a lattice of random gradients, dot products of which are then interpolated...". That's not correct, what creates actual gradients here is the dot operation itself, "gradient" vectors are just normal vectors, right?

Below are 3 different interpolations of 4 dots products between 4 random vectors and 4 position vectors calculated from each corner of each cell, the first one is simple average, the second is bilinear interpolation and the third is bilinear with smoothstep.

Q2: So what gives Perlin noise its organic blobby flowing look and feel is the interpolation method, rather that the gradients, in particular, the fact that bilinear interpolation is not linear but quadratic?

Thank you!

Answer 1

A1: Technically correct. Usually I use the term "gradient vectors" which I think communicates the idea better, though sometimes I do call the vectors themselves "gradients". Maybe it's more confusing than I realize, you make a good point. Sometimes I call the actual gradient as you refer to it the "ramp", but "gradient" describes it well too.

A2: It's the way the gradients are combined, yes. Each grid vertex needs to contribute in some way to the noise around it, with its contribution falling off to zero smoothly outside of the range. The fade-curve lerp accomplishes this.

Obligatory note: If you're going to actually use noise in anything, I recommend either Simplex-type noise (with good gradient vector tables, and an "Open" noise if using it for 3D+), or domain-rotated 3D+ Perlin. Take it with a grain of salt when tutorials recommend Perlin noise with no caveats. Perlin is an older noise algo that, without anything done specifically to correct it, produces a lot of squareness that is an entirely unnecessary compromise for most applications. I suggest using FastNoiseLite with these steps or these domain-rotated Perlin evaluators.

If you want to implement 2D simplex yourself, I wrote this answer a while back where I described a process.