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

Question

mousePos.x = -1 + (e.clientX / window.innerWidth) *2; mousePos.y = 1 - (e.clientY / window.innerHeight) *2; 위에 처럼 가운데 마우스 포인트 값을 0주시기 위해서 위에 식을 주셨는데 설명은 자세히 안해주셨네요 ㅠㅠ -1+, 1- , *2 주신 부분이 이해가 잘 안가서요   그냥 저 식은 많이 쓰는 식이니깐 외우는게 좋나요? 아니면 부가 설명 살짝 부탁드려도 될까요? ^^

메가 · Answer

저도 이번 강의를 듣다가 저 식에 대해서 고민해봤는데요.  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분코딩 · Answer

어떤 수치든간에 -1에서 1 사이의 값이 나오도록 하려고 하는 계산인데요, 예를들어 브라우저의 width가 1000, 마우스로 클릭한 지점(e.clientX)이 500이라고 가정하면 mousePos.x = -1 + (500/1000) * 2 = -1 + 0.5 * 2 = 0이 되겠죠? 즉, 정 가운데를 클릭하면 0, 클릭한 지점의 위치에 따라 -1에서 1 사이의 "비율로 사용하기 좋은 값"을 갖게되어 원하는 계산을 수월하게 할 수 있는 거랍니다.