좌표가 부채꼴 안에 포함되어 있는지 알고 싶어요.

 

클릭 위치가 부채꼴 안에 포함되어 있는지 알고 싶어요!

옆 회의실에서 '프롤로그'팀이 수학 문제 푸는 거를 보고 재밌어 보여 나도 참여해보았다. 

 

 

 

 

라이브러리 없이 직접 확률에 따른 사잇각을 구하고 영역 클릭시 해당 내용을 확인할 수 있는 기능을 구현 중이었고, 사용자 클릭 이벤트가 주어졌을 때 그 좌표가 해당 영역에 포함되어 있는지 확인할 수 있는 로직이 필요했다.

 

1. 클릭 범위 확인

우선 클릭할 수 있는 범위가 맞는지를 확인했다. 아래 그림에서 빨간색으로 표시한 부분을 말한다. 

 

간단히 작은 원보다 밖에 있고, 큰 원 안에 있는지를 확인하면 된다. 

 

 

 

2. 각도 확인 

이번에는 좌표가 A 영역 부채꼴 안에 포함되었는지를 확인할 것이다. 영역 시작 선을 a, 영역 끝 선을 b이라고 한다.

 

x축과 a가 이루는 각을 theta_a, x축과 b가 이루는 각을 theta_b 라고 하고, 임의의 점 (x, y)와 x축과 이루는 각 theta_x가 이 theta_a와 theta_b 사이에 있다는 것만 확인한다는 생각이다.

 

 

y/x는 tan(theta_x) 이니, 이를 역으로 arctan(y/x) = theta_x이 된다. 이렇게 theta_x를 구할 수 있다. 

 

 

여기서 arctan(y/x) 는 두 값이 나온다. 원점 - (x, y)를 잇는 직선과 x축이 이루는 각도는 아래 그림처럼 두 개가 생기기 때문이다. 쉽게 그 둘을 선택하는 방법으로 y 좌표의 양음 여부를 생각했다. 임의의 점 (x, y)의 y 좌표가 양수면 두 각 중 더 작은 값, 양수면 두 각 중 더 큰 값을 선택하면 되는 것이다.

 

 

그렇게 선택한 theta_x가 다음의 조건에 만족하면 된다. 

 

 

 

3.  자바스크립트에선 Math.atan2를 사용하세요.

자바스크립트에선 Math.atan2()를 사용해서 다음과 같이 x축과 해당 좌표까지의 반시계 방향 각도를 구할 수 있다.

function calcAngleDegrees(x, y) {
  theta_x = Math.atan2(y, x) * 180 / Math.PI;
  if(theta_x < 0) {
  	return theta_x + 360;
  }
  return theta_x;
}

 

우아한테크코스 프롤로그 서비스 

우아한테크코스 프롤로그 서비스는 교육생들이 공부한 내용을 정리하고, 공유하기 위한 서비스다.

내가 참여했던 프로젝트가 아니라서, 프론트엔드 크루랑 함께 문제를 풀어가서 오히려 더 재밌었던 거 같다. 가끔 이런 딴 짓하는게 그렇게 재밌다. 

 

재밌는 하루였다. 많이 있을 것 같은 문제 사항인데 해결 방법이 쉽게 검색이 안돼서 정리해본다.

같은 고민을 하는 누군가에게 도움이 되시길 :)

 

프롤로그 서비스 홍보로 마무리!! 

 

서비스

우아한테크코스 학습로그 저장소

 

저장소

GitHub - woowacourse/prolog: 우아한테크코스 크루들이 배운 내용을 기록하는 학습로그 저장소입니다.