console.clear();

import { Vec2 } from 'https://cdn.skypack.dev/wtc-math';
import { FragmentShader, Texture, Uniform } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.23';

const shaderF = document.querySelector('#fragShader').innerText;

// Create the fragment shader wrapper
const FSWrapper = new FragmentShader({
  fragment: shaderF });


const { gl, uniforms, renderer } = FSWrapper;
const dpr = renderer.dpr;
console.log(dpr);

// Create the texture
const texture = new Texture(gl, {
  wrapS: gl.REPEAT,
  wrapT: gl.REPEAT });

// Load the image into the uniform
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://assets.codepen.io/982762/noise.png";
img.onload = () => texture.image = img;

uniforms.s_noise = new Uniform({
  name: "noise",
  value: texture,
  kind: "texture" });


uniforms.u_position = new Uniform({
  name: "position",
  value: [0, 0],
  kind: "vec2" });

uniforms.u_zoom = new Uniform({
  name: "zoom",
  value: 1.,
  kind: "float" });


let zoom = uniforms.u_zoom.value;
let tzoom = 1.;
let velocity = new Vec2(0, 0);
let lastmouse = new Vec2(0, 0);
let pointerdown = false;
window.addEventListener('wheel', e => {
  tzoom += e.deltaY * 0.001 * uniforms.u_zoom.value;
  tzoom = Math.min(20., Math.max(tzoom, .1));
});
window.addEventListener('pointerdown', e => {
  pointerdown = true;
  lastmouse = new Vec2(e.x, e.y);
});
window.addEventListener('pointerup', e => {
  pointerdown = false;
});
window.addEventListener('pointermove', e => {
  if (pointerdown) {
    const thismouse = new Vec2(e.x, e.y);
    let dd = 1. / Math.min(window.innerWidth, window.innerHeight);
    dd *= uniforms.u_zoom.value;
    const diff = lastmouse.subtract(thismouse);
    velocity = diff.clone();
    uniforms.u_position.value = new Vec2(...uniforms.u_position.value).add(diff.multiply(new Vec2(dd, -dd))).array;
    lastmouse = thismouse;
  }
});
const runmouse = function (d) {
  const scalar = pointerdown ? .1 : .98;
  if (velocity.length > 0.01) {
    velocity.scale(scalar);
    let dd = 1. / Math.min(window.innerWidth, window.innerHeight);
    dd *= uniforms.u_zoom.value;
    uniforms.u_position.value = new Vec2(...uniforms.u_position.value).add(velocity.multiplyNew(new Vec2(dd, -dd))).array;
  }
  zoom += (tzoom - zoom) * .1;
  uniforms.u_zoom.value = zoom;
  requestAnimationFrame(runmouse);
};
requestAnimationFrame(runmouse);