2e:null 2f:["$","title",null,{"children":"Value and Gradient noise in GLSL | Riccardo | Observable"}] 34: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. `35: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); }`36:[] 32:{"id":"d3afaf8137e623e6","slug":"value-and-gradient-noise-in-glsl","title":"Value and Gradient noise in GLSL","thumbnail":"654507f221577db4eebf92cd57a9fd2b025b635a53d345ada0c50a683383fee7","access_level":"public","create_time":"$D2018-04-30T14:20:43.707Z","update_time":"$D2019-10-03T17:05:37.571Z","view_time":null,"first_public_time":"$D2018-05-01T02:27:22.039Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"14c4c06675a63cf8","login":"riccardoscalco","name":"Riccardo","avatar_url":"https://avatars-next.observableusercontent.com/1afa8fde2f7c6fcf35bffb69c3ce041ab63dd066dffb08b10cbdc8fa60cc301b","tier":"starter_2024"},"version":159,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"545aa796d4ecc313","login":"riccardoscalco","name":"Riccardo","avatar_url":"https://avatars-next.observableusercontent.com/1afa8fde2f7c6fcf35bffb69c3ce041ab63dd066dffb08b10cbdc8fa60cc301b","tier":null}],"members":[{"type":"individual","id":"545aa796d4ecc313","login":"riccardoscalco","name":"Riccardo","avatar_url":"https://avatars-next.observableusercontent.com/1afa8fde2f7c6fcf35bffb69c3ce041ab63dd066dffb08b10cbdc8fa60cc301b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Value and Gradient noise in GLSL","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"canvas = html`

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