Sound Performance 2

Role: Design & Develpoment

Tools: Kinectar, Ableton Live, Synapse & Quartz Composer

Date: Jan 2016

This project is an example of how to use shaders in a real project. I wrote the shader instruction in Quartz Composer to make it to a new level of graphical quality. KINECT sensor has been used as a gesture controller. Users can manipulate the music and two drumbeats by waving their arms and they can get multiple visual looking that make by shaders.

Right hand: Y-axis - move from up to down - volume from low to high left hand: X-axis - first drumbeat - move from right to left - volume from low to high / Y-axis - move from up to down - volume from low to high

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

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

                    float rows = 10.0;

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

                    vec2 tile2(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 circlePattern(vec2 _st, float _radius){
                      _st = tile1(_st, 5.0);
                      return circle(_st + vec2(0.0, -0.5), _radius) + 
                             circle(_st + vec2(0.0, 0.5), _radius) +
                             circle(_st + vec2(-0.5, 0.0), _radius) +
                             circle(_st + vec2(0.5, 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);

                      vec3 colorA = vec3(0.34, 0.0, 0.48);
                      vec3 colorB = vec3(0.63, 0.25, 0.18);

                      vec3 pct = vec3(st.y);
                      color = mix(colorA, colorB, pct);

                      vec2 circle_st = tile1(st, 1.0);
                      // float t = u_time * 0.8 + random(circle_st);
                      circle_st = tile2(st + vec2(cos(u_time), sin(u_time))*0.01, 1.);
                      color += mix(vec3(0.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0), circlePattern(circle_st, 0.2) * circlePattern(circle_st, 0.02));
                      // color.rgb += step(0.9, random(t));

                      vec2 circle_st_2 = tile1(st, 3.0);
                      circle_st_2 *= 3.0;
                      vec2 circle_st_3 = fract(circle_st_2);
                      color += mix(vec3(0.0, 0.0, 0.0), vec3(0.5, 0.5, 0.5), circlePattern(circle_st_3, 0.6) * circlePattern(circle_st_3, 0.01));

                      vec2 circle_st_4 = tile1(st, 3.0);
                      color += mix(vec3(0.0, 0.0, 0.0), vec3(0.5, 0.5, 0.5), circlePattern(circle_st_4, 0.5) * circlePattern(circle_st_4, 0.03));

                      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;

                    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 *= 0.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.,-.1), radius)+
                                circle(st+vec2(0.,.1), radius)+
                                circle(st+vec2(-.1,0.), radius)+
                                circle(st+vec2(.1,0.), radius);
                    }

                    float circle2(vec2 st, float radius) {
                        return  circle(st+vec2(0.2,-.5), radius)+
                                circle(st+vec2(0.2,.5), radius)+
                                circle(st+vec2(-.2,0.), radius);
                                // circle(st+vec2(.2,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.2)-circle2(grid1,0.15));

                        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.2)) - circlePattern(grid2,0.05);

                        gl_FragColor = vec4(color,1.0);
                    }