<canvas id="canvas"></canvas>

body {
  margin: 0;
  min-height: 100vh;
  height: 1px;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
}

const canvas = document.querySelector("#canvas");
let width = canvas.clientWidth;
let height = canvas.clientHeight;

const ctx = canvas.getContext("2d");

const maxMouseDist = 300;
const simplex = new SimplexNoise();

function onResize() {
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width;
  canvas.height = height;
}

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

const mouse = {
  currX: 0,
  currY: 0,
  prevX: 0,
  prevY: 0,
};

canvas.addEventListener('mousemove', (event) => {
  const coord = getCoord(canvas, event);
  mouse.currX = coord.x;
  mouse.currY = coord.y;
});

function loop(now) {
  ctx.clearRect(0, 0, width, height);
  ctx.lineJoin = 'round';
  ctx.lineWidth = 2;
  ctx.fillStyle = 'rgba(156, 39, 176, 0.8)';
  ctx.strokeStyle = '#3f51b5';
  
  ctx.save();
  ctx.translate(0, height / 2);
  
  const maxAmp = height / 8;
  const mouseDx = (mouse.currX - mouse.prevX) * 0.03;
  const mouseDy = (mouse.currY - mouse.prevY) * 0.03;
  mouse.prevX += mouseDx;
  mouse.prevY += mouseDy;
  
  const mouseSpeedXFactor = Math.min(10, Math.abs(mouseDx)) / 10;
  
  ctx.beginPath();
  
  for (let x = 0; x <= width; x++) {
    const dx = mouse.prevX - x;
    const distN = 1 - Math.min(maxMouseDist, Math.abs(dx)) / maxMouseDist;
    const wave = Math.sin(distN * Math.PI * 4 * Math.sign(dx));

    const noise = simplex.noise2D(x * 0.005 - now * 0.0005, x * 0.002);
    const mixFactor = distN * mouseSpeedXFactor;
    const y = lerp(noise, wave, mixFactor) * maxAmp;
    
    if (x === 0) {
      ctx.moveTo(x, y);
    }
    else {
      ctx.lineTo(x, y);
    }
  }
  
  ctx.stroke();
  ctx.restore();
  
  ctx.beginPath();
  ctx.arc(mouse.prevX, mouse.prevY, lerp(10, 20, mouseSpeedXFactor), 0, 2 * Math.PI);
  ctx.fill();
  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

function lerp(v0, v1, t) {
  return v0*(1-t)+v1*t
}

function getCoord(el, event) {
  const rect = el.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  }
}