Shaders

Role: Design & Develpoment

Tools: Sublime, Processing

Date: 2016

Shaders are a set of instructions that are executed all at once for every single pixel on the screen with an extraordinary running speed. Shaders can be used like procedural shapes, patterns, textures, animations and filter effects. You may find many different ways to play it. I highly recommend The Book of Shaders to you, if you are interested in playing around with shaders.

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

                #ifdef GL_ES
                precision mediump float;
                #endif

                #define PI 3.14159265358979323846

                uniform vec2 u_resolution;
                uniform float u_time;

                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;
                }

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

                vec2 rotateTilePattern(vec2 st){
                 
                    st *= 12.0;

                    float index = 0.0;    
                    index += step(1., mod(st.x,2.0));
                    index += step(1., mod(st.y,2.0))*2.0;

                    st = fract(st);

                    if(index == 1.0){

                        st = rotate2D(st,PI*0.5);
                    } else if(index == 2.0){

                        st = rotate2D(st,PI*-0.5);
                    } else if(index == 3.0){
                 
                        st = rotate2D(st,PI);
                    }

                    return st;
                }

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

                    st = tile(st,3.0);
                    st = rotateTilePattern(st);

                    st = rotate2D(st,-PI*u_time*0.25);

                    gl_FragColor = vec4(vec3(step(st.x,st.y)),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;

                    vec2 mirrorTile(vec2 _st, float _zoom){
                        _st *= _zoom;
                        if (fract(_st.x * 0.5) > 0.5){
                            _st.y = _st.y+0.5;
                            _st.y = 1.0-_st.y;
                        }
                        if (fract(_st.y * 0.5) > 0.5){
                            _st.x = _st.x+0.5;
                            _st.y = 1.0-_st.y;
                        }
                        return fract(_st);
                    }


                    float fillY(vec2 _st, float _pct,float _antia){
                      return  smoothstep( _pct-_antia, _pct, _st.y);
                    }

                    void main(){
                      vec2 st = gl_FragCoord.xy/u_resolution.xy;
                      vec3 color = vec3(0.0);
                      float sinX = sin(u_time*1.0)+3.;
                      float cosX = cos(u_time*0.5)+5.;

                      st = mirrorTile(st,20.);
                      float x = st.x*1.; 
                      float a = floor(1.+sin(x*3.14*sinX*cosX));
                      float b = floor(1.+sin((x+1.)*3.14));
                      float f = fract(x);

                      color = vec3( fillY(st,mix(a,b,f),0.01) );

                      gl_FragColor = vec4( color, 1.0 );
                    }
                
                    // 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;

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

                    vec2 movingTiles(vec2 st, float _zoom, float _speed){
                        st *= _zoom;
                        float time = u_time*_speed;
                        if( fract(time)>0.5 ){
                            if (fract( st.y * 0.5) > 0.5){
                                st.x += fract(time)*2.0;
                            } else {
                                st.x -= 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 box(in vec2 st, in vec2 size){
                        st += 0.5;
                        size = vec2(0.53) - size;
                        vec2 uv = smoothstep(size,
                                            size+vec2(0.001),
                                            st);
                        uv *= smoothstep(size,
                                        size+vec2(0.001),
                                        vec2(1.0)-st);
                        return uv.x*uv.y;
                    }

                    float cross(in vec2 st, float size){
                        st -= 0.5;
                        float sinX = sin(u_time) - 0.5;
                        float cosX = cos(u_time) - 0.5;

                        return  box(rotate2D(u_time*PI*0.1)*st, vec2(size*0.125,size*0.9)) + 
                                box(rotate2D(u_time*PI*0.2)*st, vec2(size*0.125,size*0.9)) +
                                box(rotate2D(u_time*PI*0.3)*st, vec2(size*0.125,size*0.9)) +
                                box(rotate2D(u_time*PI*0.4)*st, vec2(size*0.125,size*0.9)) +
                                box(rotate2D(u_time*PI*0.5)*st, vec2(size*0.125,size*0.9)) +
                                box(rotate2D(u_time*PI*0.6)*st, vec2(size*0.125,size*0.9)) +
                                box(rotate2D(u_time*PI*0.7)*st, vec2(size*0.125,size*0.9));
                    }

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

                      float sinX = sin(u_time*0.5) - 0.5;
                      float cosX = cos(u_time*0.5) - 0.5;

                      vec2 st_f = fract(st);

                      st = movingTiles(st, 10.0, 0.5);
                      vec3 color = vec3( clamp(cross(fract(st),0.3),0.0,1.0));

                      gl_FragColor = vec4(color,1.0);
                    }
                
                    // 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;

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

                    vec2 movingTiles(vec2 st, float _zoom, float _speed){
                        st *= _zoom;
                        float time = u_time*_speed;
                        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 box(in vec2 st, in vec2 size){
                        st += 0.5;

                        float sinX = sin(u_time) - 0.5;
                        float cosX = cos(u_time) - 0.5;


                        size = vec2(0.525) - size;
                        vec2 uv = smoothstep(size,
                                            size+vec2(0.001),
                                            st);
                        uv *= smoothstep(size,
                                        size+vec2(0.001),
                                        vec2(1.0)-st);
                        return uv.x*uv.y;
                    }

                    float cross(in vec2 st, float size){
                        st -= 0.5;

                        float sin1 = sin(u_time*.5) - 0.5;
                        float sin2 = sin(u_time*.55) - 0.5;
                        float sin3 = sin(u_time*.6) - 0.5;
                        float sin4 = sin(u_time*.65) - 0.5;
                        float sin5 = sin(u_time*.7) - 0.5;
                        float sin6 = sin(u_time*.75) - 0.5;
                        float sin7 = sin(u_time*.8) - 0.5;
                        float sin8 = sin(u_time*.85) - 0.5;
                        float sin9 = sin(u_time*.9) - 0.5;
                        float sin10 = sin(u_time*.95) - 0.5;

                        return  box(rotate2D(PI*0.1)*st, vec2(size*0.115,size*0.9-sin1)) + 
                                box(rotate2D(PI*0.2)*st, vec2(size*0.115,size*0.9-sin2)) +
                                box(rotate2D(PI*0.3)*st, vec2(size*0.115,size*0.9-sin3)) +
                                box(rotate2D(PI*0.4)*st, vec2(size*0.115,size*1.9)) +
                                box(rotate2D(PI*0.5)*st, vec2(size*0.115,size*0.9-sin4)) +
                                box(rotate2D(PI*0.6)*st, vec2(size*0.115,size*1.9)) +
                                box(rotate2D(PI*0.7)*st, vec2(size*0.115,size*0.9-sin5)) +
                                box(rotate2D(PI*0.8)*st, vec2(size*0.115,size*0.9-sin6)) +
                                box(rotate2D(PI*0.9)*st, vec2(size*0.115,size*0.9-sin7)) +
                                box(rotate2D(PI*1.0)*st, vec2(size*0.115,size*0.9-sin8));
                    }

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

                      float sinX = sin(u_time*0.5) - 0.5;
                      float cosX = cos(u_time*0.5) - 0.5;

                      vec2 st_f = fract(st);

                      st = tile(st, 10.0);
                      vec3 color = vec3( clamp(cross(fract(st),0.3),0.0,1.0));

                      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 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));
                    }

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

                        st *= vec2 (100., 80.);

                        vec2 st_i = floor(st);
                        vec2 st_f = fract(st);
                        float time = floor(u_time * 40. * random(st_i.x));
                        float pct = random(st_i.y + time);
                        vec2 pos = st.x * vec2(1., 1.);
                        // pct = step(pct, 0.2) - step(0.6,st_f.x) - step(0.8,st_f.y);
                        pct = smoothstep(0.01*sin(u_time), 0.2, noise(st)) - smoothstep(0.2*sin(u_time), 0.3, noise(st_i));

                        color = vec3(1.) * smoothstep(0.1, 0.2, noise(st));

                        gl_FragColor = vec4(pct*color,1.0);
                    }
                
                    // 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,3.);
                        vec2 offsetSt = offset(st,vec2(0.5));
                        st = rotate2D(st,PI*0.25);
                        float grid2 = box(offsetSt,vec2(0.5),0.01) + 2.*box(st,vec2(0.5),0.4);
                        float grid = 1.0-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);
                    }
                
                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

                    #define PI 3.14159265359
                    #define TWO_PI 6.28318530718

                    uniform vec2 u_resolution;
                    uniform float u_time;

                    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);
                    }


                    float shape(vec2 st, float N){
                        st = st*2.-1.;
                        float a = atan(st.x,st.y)+PI;
                        float r = TWO_PI/N;
                        return abs(cos(floor(.5+a/r)*r-a)*length(st));
                    }

                    float box(vec2 st, vec2 size){
                        return shape(st*size,4.);
                    }

                    float rect(vec2 _st, vec2 _size){
                        _size = vec2(0.5)-_size*0.5;
                        vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);
                        uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);
                        return uv.x*uv.y;
                    }

                    float hex(vec2 st, float a, float b, float c, float d, float e, float f){
                        st = st*vec2(2.,6.);

                        vec2 fpos = fract(st);
                        vec2 ipos = floor(st);

                        if (ipos.x == 1.0) fpos.x = 1.-fpos.x;
                        if (ipos.y < 1.0){
                            return mix(box(fpos, vec2(0.84,1.)),box(fpos-vec2(0.03,0.),vec2(1.)),a);
                        } else if (ipos.y < 2.0){
                            return mix(box(fpos, vec2(0.84,1.)),box(fpos-vec2(0.03,0.),vec2(1.)),b);
                        } else if (ipos.y < 3.0){
                            return mix(box(fpos, vec2(0.84,1.)),box(fpos-vec2(0.03,0.),vec2(1.)),c);
                        } else if (ipos.y < 4.0){
                            return mix(box(fpos, vec2(0.84,1.)),box(fpos-vec2(0.03,0.),vec2(1.)),d);
                        } else if (ipos.y < 5.0){
                            return mix(box(fpos, vec2(0.84,1.)),box(fpos-vec2(0.03,0.),vec2(1.)),e);
                        } else if (ipos.y < 6.0){
                            return mix(box(fpos, vec2(0.84,1.)),box(fpos-vec2(0.03,0.),vec2(1.)),f);
                        }
                        return 0.0;
                    }

                    float hex(vec2 st, float N){
                        float b[6];
                        float remain = floor(mod(N,64.));
                        for(int i = 0; i < 6; i++){
                            b[i] = 0.0;
                            b[i] = step(1.0,mod(remain,2.));
                            remain = ceil(remain/2.);
                        }
                        return hex(st,b[0],b[1],b[2],b[3],b[4],b[5]);
                    }

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

                        st *= 2.0;
                        vec2 fpos = fract(st);
                        vec2 ipos = floor(st);
                        fpos = movingTiles(st + vec2(0.1)*0.01,15., .5);
                        
                        float t = u_time*5.0;
                        float df = 1.0;
                        df = hex(fpos,ipos.x+ipos.y+t)+(1.0-rect(fpos,vec2(0.7)));

                        gl_FragColor = vec4(mix(vec3(0.),vec3(1.),step(0.7,df)),1.0);
                    }
                
                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

                    #define PI 3.14159265358979323846

                    uniform vec2 u_resolution;
                    uniform float u_time;

                    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;
                    }

                    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 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(void){
                        vec2 st = gl_FragCoord.xy/u_resolution.xy;
                        st.y *= u_resolution.y/u_resolution.x;

                        st = movingTiles(st,10., 0.5);

                        vec2 offsetSt = offset(st,vec2(0.5));

                        st = rotate2D(st,PI*0.25);

                        vec3 color = vec3( box(offsetSt,vec2(0.1),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.2),0.01) );

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

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

                    #define PI 3.14159265358979323846

                    uniform vec2 u_resolution;
                    uniform float u_time;

                    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;
                    }

                    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 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;
                    }

                    bool grid(vec2 _pos, float _res){
                        vec2 grid = fract(_pos*_res*250.);
                        return grid.x < _res || grid.y < _res;
                    }

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

                        vec3 color = vec3(0.0);

                        float sinX = sin(u_time*0.5) - 0.5;
                        float cosX = cos(u_time*0.5) - 0.5;

                        st = movingTiles(st,10., 1.);
                        if(grid(st,0.01)) color += vec3(0.25);
                        if(grid(st,0.1)) color += vec3(0.15);

                        vec2 offsetSt = offset(st,vec2(0.5));

                        st = rotate2D(st,PI*0.25);

                        color += vec3( box(offsetSt,vec2(0.5),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.9),0.01) );
                        color += vec3( box(offsetSt,vec2(0.1),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.1),0.01) );
                        // vec3 color = vec3( box(offsetSt,vec2(0.1),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.2),0.01) );

                        gl_FragColor = vec4(color,1.0);    
                    }
                
                    // 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 tile(vec2 st, float zoom){
                        st *= zoom;
                        return fract(st);
                    }

                    float circle(vec2 st, float radius){
                        vec2 pos = vec2(0.5)-st;
                        radius *= 0.75;
                        return 1.-smoothstep(radius-(radius*0.05),radius+(radius*0.05),dot(pos,pos)*3.14);
                    }

                    float pattern(vec2 st, float radius) {
                        return  circle(st+vec2(0.,-.5), radius)+
                                circle(st+vec2(0.,.5), radius)+
                                circle(st+vec2(-.5,0.), radius)+
                                circle(st+vec2(.5,0.), radius);
                    }
                    mat2 rotationMatrix(float a) {
                        return mat2(vec2(cos(a),-sin(a)),
                                vec2(sin(a),cos(a)));
                    }


                    vec4 color1 = vec4(0.075,0.114,0.329, 1.0);
                    vec4 color2 = vec4(0.973,0.843,0.675, 1.0);
                    vec4 color3 = vec4(0.761,0.247,0.102, 1.0);

                    float curRotation = 0.0;
                    float curRotationContra = 0.0;

                    void main(){
                        vec2 st = gl_FragCoord.xy/u_resolution.xy;
                        st.x *= u_resolution.x/u_resolution.y;
                        vec4 color = vec4(0.0);
                        float time = u_time * 0.25;
                        float timeFrag = fract (time);

                        curRotation += (u_time - curRotation);
                        curRotationContra -= (u_time + curRotationContra);

                        vec2 layer1 = st;
                        if (timeFrag > 0.5) {
                            layer1 -= .5;
                            layer1 *= rotationMatrix ((PI * 0.5) * curRotation);
                            layer1 += .5;
                        }
                        
                        vec2 grid1 = tile(layer1, 3.);
                        if (timeFrag <= 0.5) {
                            grid1 -= .5;
                            grid1 *= rotationMatrix ((PI * 0.25) * curRotationContra);
                            grid1 += .5;

                        }
                        color = mix(color1, color2, pattern(grid1, 0.5));

                        vec2 layer2 = st;
                        if (timeFrag <= 0.5) {
                            layer2 -= .5;
                            layer2 *= rotationMatrix ((PI * 0.5) * curRotationContra);
                            layer2 += .5;
                        } 
                        
                        vec2 grid2 = tile(layer2, 6.);
                        if (timeFrag > 0.5) {
                            grid2 -= .5;
                            grid2 *= rotationMatrix ((PI * 0.25) * curRotation);
                            grid2 += .5;

                        }
                        color = mix(color, color3, pattern(grid2, 1.2));
                        gl_FragColor = vec4(color);
                    }
                
                    // 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;

                    vec2 tile(vec2 st, float zoom){
                        st *= zoom;
                        return fract(st);
                    }

                    vec2 movingTiles(vec2 _st, float _zoom, float _speed){
                        _st *= _zoom;
                        float time = u_time*_speed;
                        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);
                    }

                    float circle(vec2 st, float radius){
                        vec2 pos = vec2(0.5)-st;
                        radius *= 1.75;
                        return 1.-smoothstep(radius-(radius*0.05),radius+(radius*0.05),dot(pos,pos)*3.14);
                    }

                    float circlePattern(vec2 st, float radius) {
                        return  circle(st+vec2(0.,-.5), radius)+
                                circle(st+vec2(0.,0.5), radius)+
                                circle(st+vec2(-0.5,0.), radius)+
                                circle(st+vec2(0.5,0.), radius);
                    }

                    float circle2(vec2 st, float radius) {
                        return  circle(st+vec2(0.2, -0.2), radius)+
                                circle(st+vec2(-0.2, 0.2), radius);
                                // circle(st+vec2(-0.3, 0.), radius);
                                // circle(st+vec2(0., 0.), radius);
                    }

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

                        vec2 grid1 = tile(st,7.);
                        grid1 = movingTiles(st + vec2(cos(u_time),sin(u_time))*0.01,15., .5);
                        color += mix(vec3(0.075,0.114,0.329),vec3(0.973,0.843,0.675),circle2(grid1,0.1)-circle2(grid1,0.0001));

                        vec2 grid2 = tile(st,4.);
                        grid2 = tile(st + vec2(cos(u_time),sin(u_time))*0.02 ,5.);
                        color = mix(color, vec3(0.761,0.247,0.102), circlePattern(grid2,0.5)) - circlePattern(grid2,0.005),

                        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)*43758.5453);
                    }

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

                    mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983, 
                                        1.0, -0.39465, -0.58060, 
                                        1.0, 2.03211, 0.0);

                    float rchar(in vec2 outer,in vec2 inner){
                        float grid = 5.;
                        vec2 margin = vec2(.2,.05);
                        float seed = 23.;
                        vec2 borders = step(margin,inner)*step(margin,1.-inner);
                        return step(.5,random(outer*seed+floor(inner*grid))) * borders.x + borders.y;
                    }

                    vec3 matrix(in vec2 st){
                        float rows = 30.0;
                        vec2 ipos = floor(st*rows);

                        ipos += vec2(.0,floor(u_time*20.*random(ipos.x)));

                        
                        vec2 fpos = fract(st*rows);
                        vec2 center = (.5-fpos);

                        float pct = random(ipos);
                        float glow = (1.-dot(center,center)*3.)*2.0;


                        return vec3(rchar(ipos,fpos) * pct * glow);
                    }

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

                        vec2 vel = floor(vec2(u_time*10.)); 
                        vel *= vec2(0.,1.); 

                        vec2 offset = vec2(0.2,0.);

                        color.r *= random(floor(st+vel+offset));
                        color.g *= random(floor(st+vel));
                        color.b *= random(floor(st+vel-offset));
                        color = yuv2rgb * matrix(st);
                        gl_FragColor = vec4( 1.-color , 1.0);
                    }
                
                    // Author Ting Zhao @oahzgnit - 2016
                    // http://oahzgnit.com

                    #ifdef GL_ES
                    precision mediump float;
                    #endif

                    uniform vec3 u_resolution;
                    uniform float u_time;
                    uniform vec4 u_mouse;

                    #define SMOOTH(r,R) (1.0-smoothstep(R-1.0,R+1.0, r))
                    #define RANGE(a,b,x) ( step(a,x)*(1.0-step(b,x)) )
                    #define RS(a,b,x) ( smoothstep(a-1.0,a+1.0,x)*(1.0-smoothstep(b-1.0,b+1.0,x)) )
                    #define PI 3.14159265359

                    #define blue1 vec3(0.74,0.95,1.00)
                    #define blue2 vec3(0.87,0.98,1.00)
                    #define blue3 vec3(0.35,0.76,0.83)
                    #define blue4 vec3(0.953,0.969,0.89)
                    #define red   vec3(1.00,0.38,0.227)

                    #define MOV(a,b,c,d,t) (vec2(a*cos(t)+b*cos(0.1*(t)), c*sin(t)+d*cos(0.1*(t))))


                    float movingLine(vec2 uv, vec2 center, float radius)
                    {
                        //angle of the line
                        float theta0 = 90.0 * u_time;
                        vec2 d = (uv - center) *1.5;
                        float r = sqrt( dot( d, d ) );
                        if(r opening )
                            return SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius);
                        else
                            return 0.0;
                    }
                    float circle3(vec2 uv, vec2 center, float radius, float width)
                    {
                        vec2 d = (uv - center) * 1.4;
                        float r = sqrt( dot( d, d ) );
                        d = normalize(d);
                        float theta = 90.0*(atan(d.y,d.x)/PI);
                        return smoothstep(2.0, 2.1, abs(mod(theta+2.0,45.0)-2.0)) *
                            mix( 0.5, 1.0, step(45.0, abs(mod(theta, 180.0)-90.0)) ) *
                            (SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius));
                    }

                    float triangles(vec2 uv, vec2 center, float radius)
                    {
                        vec2 d = (uv - center) * 1.5;
                        return RS(-9.0, 150.0, d.x-radius) * (1.0-smoothstep( 7.0+d.x-radius,9.0+d.x-radius, abs(d.y*8.0)))
                             + RS(-150.0, 9.0, d.x+radius) * (1.0-smoothstep( 7.0-d.x-radius,9.0-d.x-radius, abs(d.y*8.0)))
                             + RS(-9.0, 150.0, d.y-radius) * (1.0-smoothstep( 7.0+d.y-radius,9.0+d.y-radius, abs(d.x*8.0)))
                             + RS(-150.0, 9.0, d.y+radius) * (1.0-smoothstep( 7.0-d.y-radius,9.0-d.y-radius, abs(d.x*8.0)));
                    }

                    float cross(vec2 uv, vec2 center, float radius)
                    {
                        vec2 d = (uv - center) * 1.5;
                        int x = int(d.x);
                        int y = int(d.y);
                        float r = sqrt( dot( d, d ) );
                        if( (r= 50.0 ) && ( r < 115.0 ) )
                            return 0.5;
                        else
                            return 0.0;
                    }
                    float bip1(vec2 uv, vec2 center)
                    {
                        return SMOOTH(length(uv - center),16.0);
                    }
                    float bip3(vec2 uv, vec2 center)
                    {
                        return SMOOTH(length(uv - center),12.0);
                    }
                    float bip4(vec2 uv, vec2 center)
                    {
                        return SMOOTH(length(uv - center),5.0);
                    }
                    float bip5(vec2 uv, vec2 center)
                    {
                        return SMOOTH(length(uv - center),20.0);
                    }
                    float bip2(vec2 uv, vec2 center)
                    {
                        float r = length(uv - center) * 1.5;
                        float R = 8.0+mod(87.0*u_time, 80.0);
                        return (0.5-0.5*cos(30.0*u_time)) * SMOOTH(r,5.0)
                            + SMOOTH(6.0,r)-SMOOTH(8.0,r)
                            + smoothstep(max(8.0,R-20.0),R,r)-SMOOTH(R,r);
                    }

                    mat2 rotate2d(float _angle){
                        return mat2(cos(_angle),-sin(_angle),
                                    sin(_angle),cos(_angle));
                    }
                    void main()
                    {
                        // vec2 uv = gl_FragCoord.xy/u_resolution.xy;
                        vec3 finalColor;
                        vec2 uv = gl_FragCoord.xy - 250.;
                        //center of the image
                        vec2 c = u_resolution.xy/2.0;
                        float sinX = sin(u_time*2.0) + 1.2;
                        float cosX = cos(u_time*0.5) - 0.5;
                        finalColor = vec3( 0.3*cross(uv, c, 240.0) );
                        finalColor += ( circle(uv, c, 100.0, 1.0)
                                      + circle(uv, c, 165.0, 100.0) ) * blue1;
                        finalColor += (circle(uv, c, 240.0, 2.0) );//+ dots(uv,c,240.0)) * blue4;
                        finalColor += circle3(uv, c, 313.0, 4.0) * blue1;
                        finalColor += triangles(rotate2d( sin(u_time)*PI ) * uv, c, 90.0) * blue2 * sinX;
                        // finalColor += triangles(uv, c, 315.0 + 30.0*sin(u_time)) * blue2;
                        finalColor += movingLine(uv, c, 240.0) * blue3;
                        finalColor += circle(uv, c, 1.0, 30.0) * blue3;
                        finalColor += 0.7 * circle2(uv, c, 262.0, 10.0, 0.5+0.2*cos(u_time)) * blue3;
                        if( length(uv-c) < 240.0 )
                        {
                            //animate some bips with random movements
                            vec2 
                            p = 147.0*MOV(1.3,1.0,1.0,1.4,3.0);
                            finalColor += bip1(rotate2d( cos(cosX)*PI*0.35 ) * uv, c+p) * vec3(1,1,1)*0.5;
                            p = 147.0*MOV(1.3,1.0,1.0,1.4,3.0);
                            finalColor += bip3(rotate2d( cos(cosX)*PI*0.35 ) * uv, c+p) * vec3(1,1,1)*0.3;
                            p = 147.0*MOV(1.3,1.0,1.0,1.4,3.0);
                            finalColor += bip4(rotate2d( cos(cosX)*PI*0.35 ) * uv, c+p) * vec3(1,1,1)*0.5*sinX;

                            p = 127.0*MOV(0.9,-1.1,1.3,0.8,-2.0+sin(0.1)+0.25);
                            finalColor += bip5(rotate2d( u_time ) * uv, c+p) * vec3(1,1,1)*0.5;
                            p = 127.0*MOV(0.9,-1.1,1.3,0.8,-2.0+sin(0.1)+0.25);
                            finalColor += bip3(rotate2d( u_time ) * uv, c+p) * vec3(1,1,1)*0.3;
                            p = 127.0*MOV(0.9,-1.1,1.3,0.8,-2.0+sin(0.1)+0.25);
                            finalColor += bip4(rotate2d( u_time ) * uv, c+p) * vec3(1,1,1)*0.5*sinX;

                            p = 50.0*MOV(1.54,1.7,1.37,1.8,sin(0.1*u_time+7.0)+0.2*u_time);
                            finalColor += bip2(uv,c+p) * vec3(1,1,1)*0.5;
                        }

                        gl_FragColor = vec4( finalColor, 1.0 );
                    }
                
                    #ifdef GL_ES
                    precision mediump float;
                    #endif

                    #define PI 3.14159265359
                    #define TWO_PI 6.28318530718

                    const float USE_K = 1.0;
                    const float NUM_SIDES = 6.0;

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

                    uniform sampler2D u_tex0;
                    uniform vec2 u_tex0Resolution;

                    float field( vec2 p, vec2 center, float r ) {
                        float d = length( p - center ) / r;
                        
                        float t   = d  * d;
                        float tt  = t  * d;
                        float ttt = tt * d;
                        
                        float v =
                            ( - 5.0 / 5.0 ) * ttt + //3.0
                            (  15.0 / 9.0 ) * tt + //17.0
                            ( -20.0 / 5.0 ) * t + //22.0
                            1.0;
                        
                        return clamp( v, 0.0, 1.0 );
                    }

                    vec2 Kaleidoscope( vec2 st, float n, float bias ) {
                        float angle = PI / n;
                        
                        float r = length( st );
                        float a = atan( st.y, st.x ) / angle;
                        
                        a = mix( fract( a ), 1.0 - fract( a ), mod( floor( a ), 2.0 ) ) * angle;
                        
                        return vec2( cos( a ), sin( a ) ) * r;
                    }

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

                        st = st - 0.5;

                        st = mix( st, Kaleidoscope( st, NUM_SIDES, u_time * 0.5 ), USE_K);

                        vec3 final_color = vec3( 0.0 );
                        float final_density = 0.0;
                        for ( int i = 0; i < 128; i++ ) {

                            vec4 noise  = texture2D( u_tex0, vec2( float( i ) + 0.5, 0.5 ) / 256.0 );
                            vec4 noise2 = texture2D( u_tex0, vec2( float( i ) + 0.5, 0.5 ) / 256.0 );
                            
                            vec2 vel = noise.xy * 2.0 - vec2( 1.0 );
                            
                            vec2 pos = noise.xy;
                            pos += u_time * vel * 0.2;
                            pos = mix( fract( pos ), 1.0 - fract( pos ), mod( floor( pos ), 2.0 ) );
                            
                            pos = ( pos * 2.0 - 1.0 ) * ratio;
                            
                            float radius = clamp( noise.w, 0.1, 0.8 );
                            radius *= radius * 0.4;
                            
                            vec3 color = noise2.xyz;
                            
                            float density = field( st, pos, radius );

                            final_density += density;       
                            final_color += density * color;
                        }

                        final_density = clamp( final_density - 0.1, 0.0, 1.0 );
                        final_density = pow( final_density, 3.0 );

                        gl_FragColor = vec4( final_color * final_density, 1.0 );
                    }