97

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
ESC
↑↓ Navigate Select
101 Mathematical Artworks

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨