md`# Value and Gradient noise in GLSL Gradient noise, known also as [*Perlin* noise](https://dl.acm.org/citation.cfm?doid=325334.325247), is based on the definition of random vectors on the lattice, instead of random numbers as with value noise. On the following, I tried to clean up the code needed to draw noise in a GLSL shader. You can easily compare functions valueNoise and gradientNoise, noting how the latter depends on the fractional part of the coordinate point:

vec4 valueNoise (vec2 p) {
    vec2 i = floor(p);

    float f11 = random(i + vec2(0., 0.));
    float f12 = random(i + vec2(0., 1.));
    float f21 = random(i + vec2(1., 0.));
    float f22 = random(i + vec2(1., 1.));
    
    return vec4(f11, f12, f21, f22);
}

vec4 gradientNoise (vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);

    float f11 = dot(random2(i + vec2(0., 0.)), f - vec2(0., 0.));
    float f12 = dot(random2(i + vec2(0., 1.)), f - vec2(0., 1.));
    float f21 = dot(random2(i + vec2(1., 0.)), f - vec2(1., 0.));
    float f22 = dot(random2(i + vec2(1., 1.)), f - vec2(1., 1.));
    
    return vec4(f11, f12, f21, f22);
}

Gradient noise calculates the ramdom values f11, f12, f21 and f22 on the lattice points as the dot product between the random gradient on the lattice point (with coordinates in ${tex`[-1, 1]`}) and the position of the coordinate point with respect the lattice point: ${tex`(\delta_x f, \delta_y f) \bullet (x, y)`}. You can see the images generated by value and gradient noise commenting the lines

vec4 v = gradientNoise(p);
//vec4 v = valueNoise(p);

in function noise and lines

float interpolate (float t) {
    //return t;
    return t * t * (3. - 2. * t); // smoothstep
    //return t * t * t * (10. + t * (6. * t - 15.)); // smootherstep
}

for the interpolating function. Note also that we can freely choose the interpolating function whatever is the used noise. `