Javascript rotate triangular clip path according to cursor position

Issue

I need to create a clip-path triangle and one of its vertices need to be anchored in the center, and its shape rotates according to the movement of the cursor to form a kind of flashlight, but I am stuck with forming triangular with sides of the equal length and stretching it out to the edges of the screen. Also it's area tends to zero as moving to the middle of top/bottom side of the screen Here is my code:

<div class="container">
   some lorem ipsum here
</div>

/* css */
body{
    box-sizing: border-box;
    margin:0;
    padding:0;
    height: 100vh;
    width:100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
    
}
.container{
    font-size: 2rem;
    clip-path: polygon(50% 50%,30% 100%,70% 100%);
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

//js
let container = document.querySelector(".container");
window.addEventListener("mousemove", (e) => {
  console.log(
    Math.round((e.pageX / window.innerWidth) * 100),
    Math.round((e.pageY / window.innerHeight) * 100)
  );

  const x = Math.round((e.pageX / window.innerWidth) * 100);
  const y = Math.round((e.pageY / window.innerHeight) * 100);
  container.style.clipPath = `polygon(50% 50%,${x}% ${y - 10}%,${x}% ${y + 10}%)`;
});

Solution

My math is probably rusty, but something like this may work for you:

var container = document.querySelector(".container");
var rayRadius = 0.3; /* Pi radians */
window.addEventListener("mousemove", (e) => {
  let katX = window.innerWidth/2 - e.pageX;
  let katY = window.innerHeight/2 - e.pageY;
  let atan = Math.atan( katX/katY );
  let ray1angle = atan + rayRadius;
  let ray2angle = atan - rayRadius;
  let cover = Math.max(window.innerWidth, window.innerHeight);
  let ray1x = window.innerWidth/2 - Math.sign(katY)*Math.sign(ray1angle)*cover;
  let ray1y = window.innerHeight/2 - Math.sign(katY)*1/Math.tan(ray1angle) * Math.sign(ray1angle)*cover;
  let ray2x = window.innerWidth/2 - Math.sign(katY)*Math.sign(ray2angle)*cover;
  let ray2y = window.innerHeight/2 - Math.sign(katY)*1/Math.tan(ray2angle) * Math.sign(ray2angle)*cover;
  container.style.clipPath = `polygon(50% 50%,${ray1x}px ${ray1y}px,${ray2x}px ${ray2y}px)`;
});

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;

}

.container {
  background: rebeccapurple;
  font-size: 2rem;
  clip-path: polygon(50% 50%, 30% 100%, 70% 100%);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

<div class="container">
  some lorem ipsum here
</div>

Also on JS Fiddle.

Answered By - skobaljic