const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(
  -0.5,
  0.5,
  0.5,
  -0.5,
  1e-5,
  100
);
camera.position.z = 1;

const mouse = new THREE.Vector2(0.5, 0.5);
const resolution = new THREE.Vector2(1, 1);
const speed = new THREE.Vector2(1, 0);

window.addEventListener('mousemove', (e) => {
    mouse.set(
      e.clientX / window.innerWidth,
      1 - (e.clientY / window.innerHeight)
    );
});

const geo = new THREE.PlaneBufferGeometry(1, 1);
const mat = new THREE.ShaderMaterial({
  depthTest: false,
  uniforms: {
    uTime: {
      value: 0
    },
    uMouse: {
      value: mouse
    },
    uGridSize: {
      value: 25
    },
    uResolution: {
      value: resolution
    },
    speed: {
      value: speed
    },
    seed: {
      value: Math.random()
    },
    noiseSize: {
      value: 2
    }
  },
  vertexShader: `

varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

  `,
  fragmentShader: `

varying vec2 vUv;

uniform float uTime;
uniform vec2 uMouse;
uniform float uGridSize;
uniform vec2 uResolution;
uniform vec2 speed;
uniform float noiseSize;
uniform float seed;

//	Simplex 3D Noise 
//	by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
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 * C 
  vec3 x1 = x0 - i1 + 1.0 * C.xxx;
  vec3 x2 = x0 - i2 + 2.0 * C.xxx;
  vec3 x3 = x0 - 1. + 3.0 * C.xxx;

// Permutations
  i = mod(i, 289.0 ); 
  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
// ( N*N points uniformly over a square, mapped onto an octahedron.)
  float n_ = 1.0/7.0; // N=7
  vec3  ns = n_ * D.wyz - D.xzx;

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

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

vec4 hex2rgb(int hex) {
  return vec4(
    float((hex >> 16) & 0xFF) / 255.0,
    float((hex >> 8) & 0xFF) / 255.0,
    float(hex & 0xFF) / 255.0,
    1.0
  );
}

int hex[5] = int[] (
  0x395028,
  0x50594F,
  0xB1B6A6,
  0x5D554A,
  0xB8BC90
);

void main() {
  vec2 ar = vec2(1.0, uResolution.x / uResolution.y);
  vec2 uv = vUv / ar;
  
  float tile = uResolution.x / uGridSize;

  vec2 offset = speed * uTime * 0.0001;
  vec2 grid = floor(uv * tile) / tile;
  vec3 arg = vec3(grid * noiseSize + offset, seed);
  
  float noise = snoise(arg) * 0.5 + 0.5;
  int idx = int(floor(noise * 5.0));
  vec4 color = hex2rgb(hex[idx]);
  
  gl_FragColor = color;
}

  `
});

const plane = new THREE.Mesh(geo, mat);
scene.add(plane);

const resize = () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  renderer.setSize(w, h);
  resolution.set(w, h);
};

resize();
window.addEventListener('resize', resize);

const gui = new dat.GUI();

gui.add(mat.uniforms.noiseSize, 'value')
  .min(0.1).max(10).step(0.1).name('Noise Size');

gui.add(mat.uniforms.uGridSize, 'value')
  .min(1).max(100).step(1).name('Grid Size');

gui.add(mat.uniforms.speed.value, 'x')
  .min(-2).max(2).step(0.1).name("X Speed");

gui.add(mat.uniforms.speed.value, 'y')
  .min(-2).max(2).step(0.1).name("Y Speed");

var stats = new Stats();
document.body.appendChild(stats.dom);

const seed = Math.random() * 360000;
const animate = () => {
  
  stats.begin();
  
  mat.uniforms.uTime.value = performance.now() + seed;
  
  renderer.render(scene, camera);
  
  stats.end();
  
  requestAnimationFrame(animate);
};

requestAnimationFrame(animate);