【GLSL】2次元のバリューノイズ

See the Pen 2D value noise by aadebdeb (@aadebdeb) on CodePen.

precision mediump float;

uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

float random (in vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}

float noise(in vec2 st) {
  vec2 i = floor(st);
  vec2 f = fract(st);
  float a = random(i);
  float b = random(i + vec2(1.0, 0.0));
  float c = random(i + vec2(0.0, 1.0));
  float d = random(i + vec2(1.0, 1.0));

  // return a;
  // vec2 u = f;
  // vec2 u = smoothstep(0., 1., f);
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(a, b, u.x)  + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}

void main(void) {
  float n = noise(gl_FragCoord.xy / u_resolution * u_mouse / u_resolution * 50.0 + vec2(u_time) * 0.001);

  gl_FragColor = vec4(vec3(n), 1.0);
}