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");
    var wid = window.innerWidth; //ブラウザの横幅
    var hei = window.innerHeight; //ブラウザの高さ
    console.log(`X: ${e.clientX}, Y: ${e.clientY}, wid:${wid}, hei:${hei}`);
    //vh,%は相対位置、()pxは絶対位置とする
    //face-contourについて
      //width: 50vh; height: 50vh;より縦横hei/100*50=hei/2 pxである
      //また位置はtop:(hei/4)px,left:(wid/2-hei/4)pxになる。
      //中心位置はtop: (hei/2)px,left:(wid/2)px
    //eye-contourについて
      //縦横17vh,17vhであるため、縦横が(hei/100*17)pxである
      //left-eye-contourについて
        //位置はtop: 22%; left: 7%;よりtop:(hei/4+hei/100*11)=(hei*0.36)px,left:(wid/2-hei/4+hei/200*7)=(wid/2-hei*0.215)px
        //回転中心位置はtop:(hei*0.36+hei*0.085)=(hei*0.445)px; left:(wid/2-hei*0.215+hei*0.085)=(wid/2-hei*0.13)px
      //right-eye-contourについて
        //位置はtop: 22%; right: 7%;よりtop:(hei*0.36)px,left:(wid/2+hei/4-hei/200*7-hei/100*17)=(wid/2+hei*0.045)px
        //回転中心位置はtop:(hei*0.36+hei*0.085)=(hei*0.445)px; left:(wid/2+hei*0.045+hei*0.085)=(wid/2+hei*0.13)px
    //x座標:left y座標:top
    var left_cen_top = hei*0.445;
    var left_cen_left = wid/2-hei*0.13;
    var right_cen_top = hei*0.445;
    var right_cen_left = wid/2+hei*0.13;
    left_dir = Math.atan((e.clientY-left_cen_top)/(e.clientX-left_cen_left))*180/Math.PI-45;
    right_dir = Math.atan((e.clientY-right_cen_top)/(e.clientX-right_cen_left))*180/Math.PI-45;
    if (e.clientX > left_cen_left) {
      left_dir += 180;
    }
    if (e.clientX > right_cen_left) {
      right_dir -= 180;
    }
    left.style.transform = `rotate(${left_dir}deg)`;
    right.style.transform = `rotate(${right_dir}deg)`;
    //でばぐよう
    //const dot = document.getElementById("dot");
    //var dot_top = hei/2;
    //var dot_left = wid/2;
    //dot.style.top = `${dot_top}px`;
    //dot.style.left = `${dot_left}px`;

    const mouce = document.getElementById("mouce");
    var mouce_hei = (1-Math.sqrt((e.clientX-wid/2)**2+(e.clientY-hei/2)**2)/Math.sqrt((wid/2)**2+(hei/2)**2))*25;
    mouce.style.height = `${mouce_hei}%`;
  });
}
update(); // 初回の表示更新（読み込み直後）
//setInterval(update, 50); // 毎秒更新（0.05秒ごとにupdateを呼び出し）