<canvas id="cnvs"/>
<!-- <script id="" type="x-shader/x-fragment">
</script> -->

<script id="vertex" type="x-shader/x-fragment">
  #define PI 3.14159265359
  uniform float uTime;
    varying vec2 vUv;
  varying float vNoise;
  varying float vLines;
  
  float ocNoise(vec3 pos,int octaves, float persistence){
    float amplitude = 1.;
    float frequency = 1.;
    float res = 0.;
    float maxValue = 0.;
    vec3 decimals = fract(pos);
    if(decimals.x == 0.){
      pos.x +=0.000001;
    }
    for(int i = 0; i < 10; i++){
      res += snoise(pos*frequency) * amplitude;
      maxValue+= amplitude;
      amplitude *= persistence;
      frequency *= 2.;
      if(i >= octaves) break;
    }
    res = res / maxValue;
    return res;
  }
  
vec2 random2( vec2 p ) {
    return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
}
vec3 random2( vec3 p ) {
    return fract(
      sin(
        vec3(
          dot(p,vec3(127.1,311.7,584.5)),
          dot(p,vec3(269.5,183.3,234.2)),
          dot(p,vec3(300.5,525.3,218.8))
        )
      )*43758.5453);
}
  void main(){
    vec3 pos  = position.xyz;
    vec3 nVal = normal;
    nVal.x += uTime;
    nVal.z += uTime;
    // nVal.y = 0.;
    // float noise = ocNoise(nVal/2. , 2, 0.5) * mix(0.5,1.,smoothstep(0.,0.5,sin(uTime)));
    // // noise = 0.;
    // float lineNoise = smoothstep(-1.,1.,ocNoise(vec3(normal.x , normal.z , uTime  ), 3, sin(uTime)* 0.5));
    // float lines = (sin((normal.y )*PI*(8.) +uTime + lineNoise * PI )*0.5+0.5) ;
    // lines = lineNoise;
    // lines = ocNoise(vec3(normal.y+uTime),8,0.5);
    // float deform = noise * 5.;
    // float change = smoothstep(-2.,2.1,lines + deform);
        vec3 unit = normalize(position.xyz);
    vec3 uv2 = normal * 0.5 +0.5 ;
    uv2 *= 10.;
    vec3 i_uv = floor(uv2);
    vec3 f_uv = fract(uv2);
    float m_dist = 1.;
    for (int y= -1; y <= 1; y++) {
        for (int x= -1; x <= 1; x++) {
          for (int z= -1; z <= 1; z++) {
          vec3 neighbor = vec3(float(x), float(y),float(z)); 
          vec3 point = random2(i_uv + neighbor);
            
           point = 0.5 + 0.5*sin(uTime + 6.2831*point);
          
          vec3 diff = neighbor + point - f_uv;
          
          float dist = length(diff);
          
          m_dist = min(m_dist, dist);
          }
        }
    }
    float sum = unit.x + unit.y;
    // m_dist = mix(m_dist, 1.-m_dist, sin(uTime)*0.5+0.5);
    m_dist = 1. - m_dist;
    float activation = ocNoise(normal/2. + uTime, 2, 0.5);
    pos = pos  + unit * activation + unit * m_dist * smoothstep(-1.,1.,activation)*5. + unit * (sin(uv.x * PI)*0.5*0.5)*5.; ;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);

    vUv = uv;
    vNoise = m_dist;
  }
  
</script>
<script id="fragment" type="x-shader/x-fragment">
    varying vec2 vUv;
  varying float vNoise;
  uniform float uTime;
  
  float ocNoise(vec3 pos,int octaves, float persistence){
    float amplitude = 1.;
    float frequency = 1.;
    float res = 0.;
    float maxValue = 0.;
    vec3 decimals = fract(pos);
    if(decimals.x == 0.){
      pos.x +=0.000001;
    }
    for(int i = 0; i < 10; i++){
      res += snoise(pos*frequency) * amplitude;
      maxValue+= amplitude;
      amplitude *= persistence;
      frequency *= 2.;
      if(i >= octaves) break;
    }
    res = res / maxValue;
    return res;
  }
  
  void main(){
    vec2 uv = vUv;
    float n = ocNoise(vec3(uv*10. ,uTime),6,0.5) * 0.5;
    vec3 color = vec3(vNoise + n,1.-(n - vNoise),1.);
    gl_FragColor = vec4(color,1.);
  }
</script>


<script id="noise" type="x-shader/x-fragment">
  
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
//               noise functions.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//

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

}
  
// via: https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
vec3 curlNoise( vec3 p ){

  const float e = 0.1;

  float  n1 = snoise(vec3(p.x, p.y + e, p.z));
  float  n2 = snoise(vec3(p.x, p.y - e, p.z));
  float  n3 = snoise(vec3(p.x, p.y, p.z + e));
  float  n4 = snoise(vec3(p.x, p.y, p.z - e));
  float  n5 = snoise(vec3(p.x + e, p.y, p.z));
  float  n6 = snoise(vec3(p.x - e, p.y, p.z));

  float x = n2 - n1 - n4 + n3;
  float y = n4 - n3 - n6 + n5;
  float z = n6 - n5 - n2 + n1;


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