[Javascript] atan2를 이용한 두 점 사이 각도 구하기

  서론

나는 학교에서 수학같은거 배워다가 평생 써먹지 않을 줄 알았다.

주변 사람들이 다들 그렇게 말했고, 나조차도 학교 시험문제를 푸는 순간만 사용하고 사용을 하질 않으니 그런 줄 알았다. 그리고 그런 나의 생각은 내가 프로그래머의 길에 들어서면서 완전히 틀렸다는 것을 알게 되었다.

 

내 프로그래머 인생이 기능대회에서 비롯되어서 그런진 몰라도 대부분의 기술 문서에 기능대회라는 단어가 적혀있을 것이다. 이 역시 기능대회로 인해 알게 된 알고리즘인데, 어느 날 처럼 기출문제 모음집에서 풀어볼 문제를 고르던 도중, 수족관 사이트를 만드는 과제를 풀게 되었다.

국가대표 선발전 문제였던지라 난이도도 난이도지만 처음 보는 유형의 문제가 등장했는데,

수족관 홈페이지에서는 해당 수족관에 있는 물고기를 가상으로 구입할 수 있으며, 구입한 물고기는 '내 수족관' 페이지에서 헤엄치는 모습을 애니메이션으로 구현해야 한다.

대강 이런 문제였을 것이다.

웹으로 못해본게 없다고 생각했지만, 하다하다 브라우저에서 물고기마저 헤엄치도록 만드는 기능대회, 당신은 대체...

 

물고기 구입 페이지 구성도 상당히 어려웠지만, 여기서 중요한건 저 헤엄을 치는걸 애니메이션으로 구현을 해야한다는 것이었다. 물론 단순히 x좌표와 y좌표를 Math.random 함수로 구한다음 움직이도록 구현하면 되는 일이었지만, 물고기라는게 옆을 보며 헤엄치지는 않지 않은가?

그러다보니 헤엄치는 방향을 바라보도록 물고기가 돌아가야 된다는 요구사항이 생기게 되었고, 두 점 사이의 좌표를 이용하여 각도를 구해야만 하는 일이 생기게 되었다. 수학을 진작부터 포기했던 나에게 있어서 이 문제의 난이도는 밀레니엄 문제를 방불케 했고, 여태까지와 마찬가지로 우리의 신께 질문을 드리기로 했다. 그리고 역시 우리의 구글신께서는 나의 기대를 저버리지 않고 바로 알고리즘을 찾아주셨는데, 이는 생각보다 간단하다.

 

  사용법

function getAngle(x1, y1, x2, y2) {
	var rad = Math.atan2(y2 - y1, x2 - x1);
	return (rad*180)/Math.PI ;
}

https://gist.github.com/conorbuck/2606166

JavaScript: Find the angle between two points

  마치며

이게 끝이다.

정말로 생각보다 간단했다.