가운데 마우스 포인트 값 생성할때

저도 이번 강의를 듣다가 저 식에 대해서 고민해봤는데요. 

1. e.clientX(현재 마우스 x좌표값)/window.innerWidth(뷰포트 전체 너비값)의 비율 구하기 이때 값은 0 ~ 1사이의 값

2. 선생님 말씀대로 -1에서 1 사이의 값이 나와야 하기 때문에 (e.clientX /window.innerWidth) *2 를 해주어 0 ~ 2사이 값으로 만들어 줍니다.

3. 그리고 (e.clientX /window.innerWidth) *2에 -1를 더하여 -1 ~ 1사이의 값을 만들어주는 흐름인거 같습니다.

mousePos.Y도 위와 같은 흐름으로 이해할 수 있는데 1 - (e.clientY / window.innerHeight) *2인 이유는 html상에서의 좌표의 시작점(0, 0)이 왼쪽 위이기 때문에 y 좌표값이 커질수록 y의 위치는 아래를 향하게 되는데 저희는 y축 위에서 아래로 내려갈수록 값이 1에서 -1이 되는 수를 만들고 싶기 때문에  1 - (0 ~ 2)를 해주어 1에서 -1 사이의 값을 만들어 주는 흐름인 거 같습니다.

물론 저 혼자 생각해본거라 이게 맞다!라고 확신할 수 없지만 저는 그렇게 이해했습니다. 혹시라도 도움이 될까 싶어서 댓글 남겨봅니다.

어떤 수치든간에 -1에서 1 사이의 값이 나오도록 하려고 하는 계산인데요,

예를들어 브라우저의 width가 1000, 마우스로 클릭한 지점(e.clientX)이 500이라고 가정하면

mousePos.x = -1 + (500/1000) * 2 = -1 + 0.5 * 2 = 0이 되겠죠?

즉, 정 가운데를 클릭하면 0, 클릭한 지점의 위치에 따라 -1에서 1 사이의 "비율로 사용하기 좋은 값"을 갖게되어

원하는 계산을 수월하게 할 수 있는 거랍니다.