Warped Flow Field
A 2D liquid-like flow field running purely on the GPU fragment shader.
60 FPS • WebGL Shader
GLSL Fragment Shader
#version 300 es
precision highp float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; out vec4 f;
vec2 hash(vec2 p) { p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return -1.+2.*fract(sin(p)*43758.5453123); }
float noise(vec2 p) {
vec2 i = floor(p), f = fract(p), u = f*f*(3.-2.*f);
return mix(mix(dot(hash(i+vec2(0,0)),f-vec2(0,0)),dot(hash(i+vec2(1,0)),f-vec2(1,0)),u.x),
mix(dot(hash(i+vec2(0,1)),f-vec2(0,1)),dot(hash(i+vec2(1,1)),f-vec2(1,1)),u.x),u.y);
}
void main() {
vec2 uv = gl_FragCoord.xy/u_resolution.y;
vec2 m = u_mouse;
vec2 p = uv * 3.0;
for(int i=0; i<4; i++) {
p += vec2(noise(p + u_time*0.1), noise(p.yx - u_time*0.1)) * 0.5;
}
float lines = sin(p.x * 20.0 + m.x*10.) * sin(p.y * 20.0 + m.y*10.);
f = vec4(vec3(smoothstep(0.0, 0.1, abs(lines))), 1.0);
} Properties
#glsl#flow-field#organic
Author: Math Art Core Target: 60 FPS