31:T8af,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. `32:T6df,frag = `#ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; #define MAGIC 43758.5453123 float random (vec2 st) { float s = dot(st, vec2(0.400,0.230)); return -1. + 2. * fract(sin(s) * MAGIC); } vec2 random2(vec2 st){ vec2 s = vec2( dot(st, vec2(127.1,311.7)), dot(st, vec2(269.5,183.3)) ); return -1. + 2. * fract(sin(s) * MAGIC); } vec2 scale (vec2 p, float s) { return p * s; } float interpolate (float t) { //return t; // return t * t * (3. - 2. * t); // smoothstep return t * t * t * (10. + t * (6. * t - 15.)); // smootherstep } 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); } float noise (vec2 p) { vec4 v = gradientNoise(p); //vec4 v = valueNoise(p); vec2 f = fract(p); float t = interpolate(f.x); float u = interpolate(f.y); // linear interpolation on t and u, // the returned value belongs to [0, 1] return mix( mix(v.x, v.z, t), mix(v.y, v.w, t), u ) * .5 + .5; } void main() { vec2 st = gl_FragCoord.xy/u_resolution; float z = noise(scale(st, 20.)); gl_FragColor = vec4(vec3(z), 1.0); }`33:[] 2f:{"title":"Value and Gradient noise in GLSL","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"sandbox = new glslCanvas(canvas)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"sandbox.load(frag)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"glslCanvas = require('glslCanvas@0.0.25')","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}