var left_dir = 0;
var right_dir = 0;
function update() {
  document.addEventListener('mousemove', (e) => {
    const left = document.getElementById("left-eye-contour");
    const right = document.getElementById("right-eye-contour");
    left_dir = e.clientX;
    right_dir = e.clientY;
    var wid = window.innerWidth; //ブラウザの横幅
    var hig = window.innerHeight; //ブラウザの高さ
    //face-contourについて
      //width: 50vh; height: 50vh;より縦横hig/100*50=hig/2 pxである
      //また位置はtop:(hig/4)px,left:(wid/2-hig/4)pxになる。
    //eye-contourについて
      //縦横17vh,17vhであるため、縦横が(hig/100*17)pxである
      //left-eye-contourについて
        //位置はtop: 22%; left: 7%;より
    //位置は
    console.log(`X: ${e.clientX}, Y: ${e.clientY}, wid:${wid}, hig:${hig}`);
    left.style.transform = `rotate(${left_dir}deg)`;
    right.style.transform = `rotate(${right_dir}deg)`;
  });
}
update(); // 初回の表示更新（読み込み直後）
//setInterval(update, 50); // 毎秒更新（0.05秒ごとにupdateを呼び出し）