<script id="Mosaic_ComputeVelocity" type="x-shader/x-vertex">
        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);

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

        // Other corners
          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 );

          //   x0 = x0 - 0.0 + 0.0 * C.xxx;
          //   x1 = x0 - i1  + 1.0 * C.xxx;
          //   x2 = x0 - i2  + 2.0 * C.xxx;
          //   x3 = x0 - 1.0 + 3.0 * C.xxx;
          vec3 x1 = x0 - i1 + C.xxx;
          vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
          vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

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

        // Gradients: 7x7 points over a square, mapped onto an octahedron.
        // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
          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 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
          //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
          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) ) );
          }

        vec3 snoiseVec3( vec3 x ){

          float s  = snoise(vec3( x ));
          float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
          float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
          vec3 c = vec3( s , s1 , s2 );
          return c;

        }


        vec3 curlNoise( vec3 p ){

          const float e = .1;
          vec3 dx = vec3( e   , 0.0 , 0.0 );
          vec3 dy = vec3( 0.0 , e   , 0.0 );
          vec3 dz = vec3( 0.0 , 0.0 , e   );

          vec3 p_x0 = snoiseVec3( p - dx );
          vec3 p_x1 = snoiseVec3( p + dx );
          vec3 p_y0 = snoiseVec3( p - dy );
          vec3 p_y1 = snoiseVec3( p + dy );
          vec3 p_z0 = snoiseVec3( p - dz );
          vec3 p_z1 = snoiseVec3( p + dz );

          float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
          float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
          float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;

          const float divisor = 1.0 / ( 2.0 * e );
          return normalize( vec3( x , y , z ) * divisor );

        }


        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;
            float idParticle = uv.y * resolution.x + uv.x;
            vec4 tmpVel = texture2D( textureVelocity, uv );
            vec4 tmpPos = texture2D( texturePosition, uv );

            vec3 vel = curlNoise(tmpPos.xyz*0.04);
            tmpVel.w -= 0.8;
        //    vel.z *= 2.0;
        //    vec3 vel = tmpVel.xyz;
        //    vel.x *= 2.0;
        //    vel. *= 2.0;
        //    vel.x = abs(vel.x);
        //    vel.z = abs(vel.z);

            if(tmpVel.w < -1.0)
            {
                tmpVel.w = 100.;
            }

            gl_FragColor = vec4( vel.xyz, tmpVel.w );
        }

    </script>
  	<script id="Mosaic_ComputePosition" type="x-shader/x-vertex">
        #define delta 0.08
        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;
            vec4 tmpPos = texture2D( texturePosition, uv );
            vec3 pos = tmpPos.xyz;
            vec4 tmpVel = texture2D( textureVelocity, uv );
            vec4 tmpOrgPos = texture2D( textureOriginal, uv );
            vec3 vel = tmpVel.xyz;
            pos += vel * delta;
        //    if(tmpVel.w == 100.)
            if(distance(pos,tmpOrgPos.xyz) > 20.)
            {
                pos = tmpOrgPos.xyz;
            }
            gl_FragColor = vec4( pos, 1.0 );
        }

    </script>
    <script id="Mosaic_ComputeOriginal" type="x-shader/x-vertex">
        uniform sampler2D pre_texturePosition;


        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;

            vec4 q = texture2D( textureOriginal, uv );

            gl_FragColor = q;
        }

    </script>
    <script id="Mosaic_ComputeShadow" type="x-shader/x-vertex">

        precision highp float;
        const float PackUpscale = 256. / 255.;
        const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
        const float ShiftRight8 = 1. / 256.;

        vec4 packDepthToRGBA( const in float v ) {
          vec4 r = vec4( fract( v * PackFactors ), v );
          r.yzw -= r.xyz * ShiftRight8; // tidy overflow
          return r * PackUpscale;
        }

        void main() {

          gl_FragColor = packDepthToRGBA( gl_FragCoord.z );

        }

    </script>
    <script id="vertex" type="x-shader/x-vertex">
        precision highp float;

        attribute vec3 offset;

        attribute vec2 pos_uv;
        attribute vec4 orientation;
        varying vec2 vUv;
        varying vec2 vTuv;
        uniform sampler2D map;
        uniform mat4 shadowMatrix;
        varying vec4 vShadowCoord;
        uniform sampler2D shadowMap;
        uniform vec2 shadowMapSize;
        uniform float shadowBias;
        uniform float shadowRadius;


        uniform float time;
        uniform sampler2D texturePosition;
        uniform sampler2D textureVelocity;
        uniform sampler2D textureOriginal;
        varying vec4 vPosition;
        varying vec3 vColor;
        varying vec3 vNormal;
        uniform mat4 uMatrix;
        varying mat4 vModelMatrix;

        uniform float imgWidth;
        uniform float imgHeight;



        mat3 calcLookAtMatrix(vec3 vector, float roll) {
          vec3 rr = vec3(sin(roll), cos(roll), 0.0);
          vec3 ww = normalize(vector);
          vec3 uu = normalize(cross(ww, rr));
          vec3 vv = normalize(cross(uu, ww));

          return mat3(uu, ww, vv);
        }

        const float DEG_TO_RAD = 3.141592653589793 / 180.0;
        mat2 rotationMatrix( float a ) {
          return mat2( cos( a ), sin( a ),
                  -sin( a ), cos( a ) );
        }

        const float PI = 3.141592653589793;
        uniform float near;
        uniform float far;
        uniform vec3 cameraPos;
        float fogStart = 0.1;
        float fogEnd = 30.0;
        varying float fogFactor;
        uniform float isStart;

          mat2 calcRotate2D(float _time){
            float _sin = sin(_time);
            float _cos = cos(_time);
            return mat2(_cos, _sin, -_sin, _cos);
          }



        void main() {
            vPosition = vec4(position.xyz,1.);
            vec4 posTemp = texture2D( texturePosition, pos_uv );
            vec4 velTemp = texture2D( textureVelocity, pos_uv );
            vec4 orgTemp = texture2D( textureOriginal, pos_uv );

        //    float scale = 1.0 - velTemp.w/100.0;

            float scale = 1.0 - distance(posTemp.xyz,orgTemp.xyz)/20.;
            scale = sin(scale*PI)*1.0;
        //    scale = mix(sin(scale*PI)*1.2,1.0,isStart);

        //    scale= 1.0;

            vTuv = pos_uv;

            mat4 localRotationMat = mat4( calcLookAtMatrix( velTemp.xyz, 0.0 ) );


            vec2 tUv =vec2( posTemp.x/imgWidth+0.5,posTemp.y/imgHeight+0.5);

            vColor = texture2D( map, tUv ).xyz;







            vec3 modifiedVertex =  (localRotationMat * vec4( position*vec3(0.1,1.3,0.1)*scale,1.0 )).xyz;
            vec3 modifiedPosition = modifiedVertex + posTemp.xyz;

            modifiedPosition.yz = calcRotate2D(time) * modifiedPosition.yz;
            modifiedPosition.xz = calcRotate2D(time) * modifiedPosition.xz;

            float linerDepth = 1.0 / (30.0 - 0.01);
            float linerPos = length(cameraPos - modifiedPosition.xyz) * linerDepth;
            fogFactor      = clamp((fogEnd - linerPos) / (fogEnd - fogStart), 0.0, 1.0);

            vPosition =  vec4( modifiedPosition, 1.0 );
            vShadowCoord = shadowMatrix * modelMatrix * vec4( vPosition.xyz, 1. );

            gl_Position = projectionMatrix * modelViewMatrix * vec4( modifiedPosition, 1.0 );

        }

    </script>

    <script id="fragment" type="x-shader/x-vertex">
        precision highp float;
        uniform sampler2D map;
        varying vec2 vUv;
        varying vec3 vColor;

        varying vec4 vShadowCoord;
        uniform sampler2D shadowMap;
        uniform vec2 shadowMapSize;
        uniform float shadowBias;
        uniform float shadowRadius;
        uniform float bias;

        const float UnpackDownscale = 255. / 256.; // 0..1 -> fraction (excluding 1)
        const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
        const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );

        float unpackRGBAToDepth( const in vec4 v ) {
          return dot( v, UnpackFactors );
        }

        float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
          return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
        }

        float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {

          float shadow = 1.0;

          shadowCoord.xyz /= shadowCoord.w;
          shadowCoord.z += shadowBias;

          // if ( something && something ) breaks ATI OpenGL shader compiler
          // if ( all( something, something ) ) using this instead

          bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
          bool inFrustum = all( inFrustumVec );

          bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
          bool frustumTest = all( frustumTestVec );

          if ( frustumTest ) {

            vec2 texelSize = vec2( 1.0 ) / shadowMapSize;

            float dx0 = - texelSize.x * shadowRadius;
            float dy0 = - texelSize.y * shadowRadius;
            float dx1 = + texelSize.x * shadowRadius;
            float dy1 = + texelSize.y * shadowRadius;

            shadow = (
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +
              texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )
            ) * ( 1.0 / 9.0 );
          }

          return shadow;
        }
      
      
         vec3 rgb2hsv(vec3 c)
        {
            vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
            vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
            vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

            float d = q.x - min(q.w, q.y);
            float e = 1.0e-10;
            return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
        }
        vec3 hsv2rgb(vec3 c)
        {
            vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
            vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
            return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
        }

        varying vec4 vPosition;
        uniform sampler2D textureVelocity;
        uniform sampler2D texturePosition;
        varying vec2 vTuv;
        varying mat4 vModelMatrix;
        varying vec3 vNormal;
        uniform mat4 uMatrix;
        uniform float near;
        uniform float far;
        uniform vec3 cameraPos;
        float fogStart = 0.1;
        float fogEnd = 10.0;
        varying float fogFactor;

        vec3 calcIrradiance_dir(vec3 newNormal, vec3 lightPos, vec3 light){
            float dotNL = dot(newNormal, normalize(lightPos));

            return light * max(0.0, dotNL);
          }

        vec3 calcIrradiance_hemi(vec3 newNormal, vec3 lightPos, vec3 grd, vec3 sky){
            float dotNL = dot(newNormal, normalize(lightPos));
            float hemiDiffuseWeight = 0.5 * dotNL + 0.5;

            return mix(grd, sky, hemiDiffuseWeight);
          }

        const vec3 hemiLight_g = vec3(0.86,0.86,0.86);

        // hemisphere sky color
        const vec3 hemiLight_s_1 = vec3(0.5882352941176471,0.8274509803921568,0.8823529411764706);
        const vec3 hemiLight_s_2 = vec3(0.9686274509803922,0.8509803921568627,0.6666666666666666);
        const vec3 hemiLight_s_3 = vec3(0.8784313725490196,0.5882352941176471,0.7647058823529411);

        const vec3 hemiLightPos_1 = vec3(100.0, 100.0, -100.0);
          const vec3 hemiLightPos_2 = vec3(-100.0, -100.0, 100.0);
          const vec3 hemiLightPos_3 = vec3(-100.0, 100.0, 100.0);
        //uniform sampler2D map;
        void main() {
            vec4 velTemp = texture2D( textureVelocity, vUv );
            vec4 posTemp = texture2D( texturePosition, vTuv );
            vec3 _normal = normalize(cross(dFdx(vPosition.xyz), dFdy(vPosition.xyz)));


            vec3 hemiColor = vec3(0.0);
            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_1, hemiLight_g, hemiLight_s_1) * 0.38;
            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_2, hemiLight_g, hemiLight_s_2) * 0.26;
            hemiColor += calcIrradiance_hemi(_normal, hemiLightPos_3, hemiLight_g, hemiLight_s_3) * 0.36;
            vec3 dirColor = vec3(0.0);
            dirColor += calcIrradiance_dir(_normal, vec3(0.,0.,1.), vec3(1.));
            float shadow = 1.0;
            shadow *= getShadow(shadowMap, shadowMapSize, bias, shadowRadius, vShadowCoord);



            dirColor.x = max(dirColor.x,0.8);
            dirColor.y = max(dirColor.y,0.8);
            dirColor.z = max(dirColor.z,0.8);

            vec3 color = vColor.xyz*dirColor;
            color = mix(vec3(0.,0.,0.),color,fogFactor);
          
            vec3 hsv = rgb2hsv(color);
            hsv.z *= 1.3;
            color = hsv2rgb(hsv);
            gl_FragColor = vec4(color,1.0);
        }
    </script>

<div id="container"></div>
   
<div id="info">
    <span>
      <h1>Impressionists Blobs -The Starry Night-</h1>
    </span>
    <br>
    <span>
      <a href="https://twitter.com/murasaki_0606" target="_blank">@murasaki_0606</a>
    </span>
    <br>
    <span>
      <p>click: Start / Restart</p>
        <br>
      <p>key"H": Hide info</p>
    </span>

</div>