프로그래밍을 위한 수학 - X축과 직선이 이루는 사이각 구하기

마우스로 찍은 점을 기준으로 야구공이 회전하는 기능을 만들 것이라고 가정 해보자. 그림은...벡터로 되어있지만 어쨌든 검은색 화살표 끝이 가리키는 방향이 유저가 찍은 좌표 x, y라고 하겠다. 야구공은 얼마만큼 회전해야할까?

위에서 본 그림을 우리에게 익숙한 직각 삼각형으로 나타내면 사이각 θ에대해 이렇게 정리할 수 있다.

우리는 V에대해 모르기때문에, 탄젠트 식으로 θ값을 구할 것이다. 양변에 역탄젠트(Arctangent)를 취해주면 식은 θ에 대하여 정리된다.

구글에 Math.atan2를 쳐서 가장 위에나온 javascript atan2 메소드의 설명을 가져와 보았다.

The Math. atan2() method returns a numeric value between -π and π representing 
the angle theta of an (x, y) point. This is the counterclockwise angle, 
measured in radians, between the positive X axis, and the point (x, y)

 

파라미터는 y, x 두개를 받고 x, y와 X축이 이루는 사이각 θ를 반환해주고 있다. 야구공이 정확히 (0, 0) 지점에 있다면야 상관없겠지만 대부분의 경우는 야구공이 어딘가 다른 위치에 존재할 것이다.

X축에 대한 x, y 좌표로 변환해주기 위해 현재 공의 좌표에서 마우스 터치 좌표 만큼을 빼준 후 계산을 해줘야한다.

 

let dx = ball.x - mousePos.x
let dy = ball.y - mousePos.y

let radian = Math.atan2(dy, dx)
let degree = radian * 180 / Math.PI

Math.atan2(y, x)의 반환값은 radian이므로, 필요한 경우 각도(degree)로 변환을 추가적으로 해준다.

이를 응용한 포스팅이 궁금하다면 여기로!