Shader Map

Role: Design & Develpoment

Tools: Sublime

Date: 2015

I am building the future of digital map with Tangram map API. I've been inspired by the work with data visualization of Stamen. The project is written around by the OpenGL family of graphics languages and integrated with popular mapping frameworks Leaflet.

                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

                    #define PI 3.14159265358979323846

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

                    vec2 random2(vec2 st){
                        st = vec2( dot(st,vec2(127.1,311.7)),
                                  dot(st,vec2(269.5,183.3)) );
                        return -1.0 + 2.0*fract(sin(st)*43758.5453123);
                    }

                    vec2 rotate2D(vec2 _st, float _angle){
                        _st -= 0.5;
                        _st =  mat2(cos(_angle),-sin(_angle),
                          sin(_angle),cos(_angle)) * _st;
                        _st += 0.5;
                        return _st;
                    }

                    float noise(vec2 st) {
                        vec2 i = floor(st);
                        vec2 f = fract(st);

                        vec2 u = f*f*(3.0-2.0*f);

                        return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 
                                         dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
                                    mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 
                                         dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
                    }

                    vec2 movingTiles(vec2 _st, float _zoom, float _speed){
                        _st *= _zoom;
                        float time = u_time*_speed*0.5;
                        if( fract(time)>0.5 ){
                            if (fract( _st.x * 0.5) > 0.5){
                                _st.y += fract(time)*2.0;
                            } else {
                                _st.y -= fract(time)*2.0;
                            } 
                        } else {
                            if (fract( _st.x * 0.5) > 0.5){
                                _st.y += fract(time)*2.0;
                            } else {
                                _st.y -= fract(time)*2.0;
                            } 
                        }
                        return fract(_st);
                    }

                    vec2 tile(vec2 _st, float _zoom){
                        _st *= _zoom;
                        return fract(_st);
                    }

                    float X(vec2 _st, float _width){
                        float pct0 = smoothstep(_st.x-_width,_st.x,_st.y);
                        pct0 *= 1.-smoothstep(_st.x,_st.x+_width,_st.y);

                        float pct1 = smoothstep(_st.x-_width,_st.x,1.0-_st.y);
                        pct1 *= 1.-smoothstep(_st.x,_st.x+_width,1.0-_st.y);

                        return pct0+pct1;
                    }

                    vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
                    vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
                    vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
                    vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }

                    float snoise(vec3 v) { 
                        const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
                        const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

                        vec3 i  = floor(v + dot(v, C.yyy) );
                        vec3 x0 =   v - i + dot(i, C.xxx) ;

                        vec3 g = step(x0.yzx, x0.xyz);
                        vec3 l = 1.0 - g;
                        vec3 i1 = min( g.xyz, l.zxy );
                        vec3 i2 = max( g.xyz, l.zxy );

                        vec3 x1 = x0 - i1 + C.xxx;
                        vec3 x2 = x0 - i2 + C.yyy;
                        vec3 x3 = x0 - D.yyy;

                        i = mod289(i); 
                        vec4 p = permute( permute( permute( 
                                 i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
                               + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
                               + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

                        float n_ = 0.142857142857; // 1.0/7.0
                        vec3  ns = n_ * D.wyz - D.xzx;

                        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

                        vec4 x_ = floor(j * ns.z);
                        vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

                        vec4 x = x_ *ns.x + ns.yyyy;
                        vec4 y = y_ *ns.x + ns.yyyy;
                        vec4 h = 1.0 - abs(x) - abs(y);

                        vec4 b0 = vec4( x.xy, y.xy );
                        vec4 b1 = vec4( x.zw, y.zw );

                        vec4 s0 = floor(b0)*2.0 + 1.0;
                        vec4 s1 = floor(b1)*2.0 + 1.0;
                        vec4 sh = -step(h, vec4(0.0));

                        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
                        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

                        vec3 p0 = vec3(a0.xy,h.x);
                        vec3 p1 = vec3(a0.zw,h.y);
                        vec3 p2 = vec3(a1.xy,h.z);
                        vec3 p3 = vec3(a1.zw,h.w);

                        //Normalise gradients
                        vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
                        p0 *= norm.x;
                        p1 *= norm.y;
                        p2 *= norm.z;
                        p3 *= norm.w;

                        // Mix final noise value
                        vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
                        m = m * m;
                        return 42.0 * dot( m*m, vec4(dot(p0,x0), dot(p1,x1), 
                                                     dot(p2,x2), dot(p3,x3) ) );
                    }

                    float box(vec2 _st, vec2 _size, float _smoothEdges){
                        _size = vec2(0.5)-_size*0.5;
                        vec2 aa = vec2(_smoothEdges*0.5);
                        vec2 uv = smoothstep(_size,_size+aa,_st);
                        uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
                        return uv.x*uv.y;
                    }

                    vec2 offset(vec2 _st, vec2 _offset){
                        vec2 uv;

                        if(_st.x>0.5){
                            uv.x = _st.x - 0.5;
                        } else {
                            uv.x = _st.x + 0.5;
                        } 

                        if(_st.y>0.5){
                            uv.y = _st.y - 0.5;
                        } else {
                            uv.y = _st.y + 0.5;
                        } 

                        return uv;
                    }

                    void main() {
                        vec2 st = gl_FragCoord.xy/u_resolution.xy;
                        st.x *= u_resolution.x/u_resolution.y;

                        st = tile(st,5.);
                        vec2 offsetSt = offset(st,vec2(0.5));
                        st = rotate2D(st,PI*0.25);
                        // float grid2 = box(offsetSt,vec2(0.1),0.01) + 2.*box(st,vec2(0.5),0.01);
                        float grid = X(movingTiles(st,15.+snoise(vec3(st,u_time*.1)), 0.1),0.05);

                        // gl_FragColor = vec4(vec3(grid+grid2*vec3(0.123, 0.234, 0.456)),1.0);
                        gl_FragColor = vec4(vec3(grid*vec3(0.623, 0.334, 0.156)),1.0);
                    }
                
                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

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

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

                    float noise(vec2 st) {
                        vec2 i = floor(st);
                        vec2 f = fract(st);
                        vec2 u = f*f*(3.0-2.0*f);
                        return mix( mix( random( i + vec2(0.0,0.0) ), 
                                         random( i + vec2(1.0,0.0) ), u.x),
                                    mix( random( i + vec2(0.0,1.0) ), 
                                         random( i + vec2(1.0,1.0) ), u.x), u.y);
                    }

                    mat2 rotate2d(float angle){
                        return mat2(cos(angle),sin(angle),
                                    sin(angle),cos(angle));
                    }

                    float lines(in vec2 pos, float b){
                        float scale = 3.0;
                        pos += scale;
                        return smoothstep(0.0,
                                        1.5+b*.5,
                                        abs((sin(pos.x*3.1415)+b*2.0))*.9);
                    }

                    void main() {
                        vec2 st = gl_FragCoord.xy/u_resolution.xy;
                        st.y *= u_resolution.y/u_resolution.x;
                        vec3 color = vec3(0.0);
                        st = st -0.5;

                        // st += noise(st*2.)*abs(1.0-sin(u_time*.1))*5.; 
                        float sinX = sin(u_time*0.3)-0.5;
                        float cosX = cos(u_time*0.1)-0.5;

                        vec2 pos = st.yx*vec2(13.,2.);
                        float pattern = pos.x;

                        pos = rotate2d( noise(pos)) * pos *abs(1.0-sin(u_time*.1));

                        pattern = lines(pos,.5);

                        
                        color = vec3(1.) * smoothstep(.18,.2,noise(st));
                        // color += smoothstep(.15,.2,noise(st*10.));
                        // color -= smoothstep(.35,.4,noise(st*10.));

                        gl_FragColor = vec4(pattern*vec3(0.132, 0.484, 0.857),1.0);
                    }
                
                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

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

                    float random (in float x) {
                        return fract(sin(x)*1e4);
                    }

                    float randomSerie(float x, float freq, float t) {
                        return step(.8,random( floor(x*freq)-floor(t) ));
                    }

                    void main() {
                        vec2 st = gl_FragCoord.xy/u_resolution.xy;
                        st.x *= u_resolution.x/u_resolution.y;
                        
                        vec3 color = vec3(0.1);

                        float cols = 30.;
                        float freq = random(floor(u_time))+abs(atan(u_time)*1.5);
                        float t = 10.+u_time*(1.0-freq)*30.;

                        if (fract(st.y*cols* 0.5) < 0.5){
                            t *= -1.0;
                        }

                        freq += random(floor(st.y));

                        float offset = 0.025;
                        color = vec3(randomSerie(st.x, freq*80., t+offset),
                                     randomSerie(st.x, freq*100., t),
                                     randomSerie(st.x, freq*100., t-offset));

                        gl_FragColor = vec4(color,1.0);
                    }
                
                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

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

                    float random (in float x) {
                        return fract(sin(x)*1e4);
                    }

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

                    float pattern(vec2 st, vec2 v, float t) {
                        vec2 p = floor(st+v);
                        // return step(t, random(100.+p*.000001)+random(p.x)*0.5 );
                        return step(t, random(100.+p*.000001)+random(p.x)*0.5)-step(random(10.+p), random(p.x));
                    }

                    void main() {
                        vec2 st = gl_FragCoord.xy/u_resolution.xy;
                        st.x *= u_resolution.x/u_resolution.y;

                        vec2 grid = vec2(100.0,50.);
                        st *= grid;
                        
                        vec2 ipos = floor(st);  // integer
                        vec2 fpos = fract(st);  // fraction
                        
                        vec2 vel = vec2(u_time*1.0*max(grid.x,grid.y));
                        vel *= vec2(-1.0,0.0) * random(1.0+ipos.y);

                        // Assign a random value base on the integer coord
                        vec2 offset = vec2(0.1,0.0);

                        vec3 color = vec3(0.);
                        // -u_mouse.x/u_resolution.x
                        color.r = pattern(st+offset,vel,0.5+u_mouse.x/u_resolution.x);
                        color.g = pattern(st,vel,0.5+u_mouse.x/u_resolution.x);
                        color.b = pattern(st-offset,vel,0.5+u_mouse.x/u_resolution.x);

                        // Margins
                        color *= step(0.8,fpos.y);

                        gl_FragColor = vec4(1.0-color,1.0);
                    }