97

Organic Noise Terrain

Top-down view of generating terrain dynamically lit by the mouse.

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;
float hash(vec2 p){return fract(sin(dot(p,vec2(12.9898,78.233)))*43758.5453);}
float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}
float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*noise(p);p*=2.;a*=.5;}return v;}
void main(){
    vec2 uv = gl_FragCoord.xy/u_resolution.y;
    float h = fbm(uv*5.0 + u_time*0.2);
    vec2 e = vec2(0.01,0);
    vec3 n = normalize(vec3(fbm(uv*5.+e.xy)-h, fbm(uv*5.+e.yx)-h, 0.05));
    vec3 l = normalize(vec3(u_mouse - gl_FragCoord.xy/u_resolution.xy, 0.5));
    float diff = max(dot(n,l), 0.0);
    f = vec4(vec3(0.2,0.6,0.3)*h + vec3(diff*0.5), 1.0);
}

Properties

#glsl#terrain#noise
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! ✨