삼각함수를 이용한 예제 1 :: 마이구미

"수학을 활용한 예제" 란 카테고리는 한번쯤은 접했던 수학 공식을 활용한 예제를 다룬다.
컴퓨터 비전, 그래픽, 게임 등을 다루지 않으면, 사실 우리가 배운 수학 공식이나 지식을 사용할 일은 많지 않다.
하지만 수학은 프로그래밍에서 확실히 도움이 된다. 
이 카테고리는 수학 공식을 활용하는 예제를 통해 조금이나마 (프로그래밍<=>수학) 연관 관계와 흥미에 도움을 되었으면 한다.
관련 카테고리 링크

 

예제는 HTML, CSS, JAVASCRIPT 를 통해 이루어진다.

예제는 두 점 사이의 거리 공식도 함께 활용된다(mygumi.tistory.com/360)

 

이 글은 "삼각함수" 활용한 예제를 다룬다.

중학교 때 이미 배웠고, 크게 어렵지 않은 내용이다.

사인, 코사인, 탄젠스 웬만하면 잊어버리지 않는 용어일 것이다.

 

 

삼각함수를 활용해서 무엇을 구현할 것인가?

어딘가에 2개의 요소가 존재한다.

 

 

우리는 두 요소 사이의 거리를 구할 것이다.

그 거리는 50 이다.

 

거리를 알았으니 이 값을 활용해서 두 개의 요소의 거리를 나타내는 선을 그려보자.

현재 우리는 두 요소의 각 위치, 두 요소 사이의 거리를 알고 있다.

 

이 정보를 가지고 선을 그릴 수 있을까?

 

두 요소의 각 좌표, 두 점 사이의 거리를 알더라도 선을 그릴 수 없다.

50 을 나타내는 선은 다양하게 존재한다.

 

 

위와 같은 50 을 나타내는 선들을 수도 없이 많다.

50 을 나타내는 선들 중 두 요소의 거리에 맞는 각도의 선을 찾아야한다.

 

 

위와 같은 선을 그리기 위해서 필요한 속성은 다음과 같다.

 

• width - 두 요소 사이의 거리
• x - 선의 기준이 되는 x 값
• y - 선의 기준이 되는 y 값
• degree - 선이 그려지는 각도

 

이를 요소의 CSS 스타일 시점으로 보면 다음과 같다.

 

const styleProperties = {
    width: distance + 'px',
    top: targetEl.y + 'px',
    left: targetEl.x + 'px',
    transform: `rotate(${degree}deg)`,
};

 

두 요소가 주어지는 순간 이미 우리는 width, x, y 는 알고 있다.

우리가 구해야하는 건 Degree 를 의미한다.

 

이러한 경우 우리는 삼각함수를 활용하여 선을 그릴수 있다.

우선 두 요소간의 거리를 기준으로 삼각형을 만들어보자.

 

 

A 라는 각을 구하려면 알고 있는 밑변과 높이를 활용하는 탄젠트로 나타낼 수 있다.

 

tanA = 빗변 / 높이

 

하지만 우리는 tanA 가 아닌 A 의 값을 원한다.

이는 역삼각함수를 이용하여 각을 구할 수 있다.

 

https://ko.khanacademy.org/math/geometry/hs-geo-trig/hs-geo-solve-for-an-angle/a/inverse-trig-functions-intro

 

위와 같은 방식으로 A 를 의미하는 각을 구할 수 있게 된다.

관련된 메소드는 Math.atan() 형식으로 제공되고 있다.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan

 

프로그래밍에서는 주로 라디안(radian)으로 계산되기 때문에 디그리(degree) 로 변환해주어야한다.

변환 방법은 "1 라디안" 은 몇 디그리인지만 확인해보면 된다.

 

https://m.blog.naver.com/PostView.nhn?blogId=wyepark&logNo=220517029219&proxyReferer=https:%2F%2Fwww.google.com%2F

 

 

핵심 코드는 다음과 같다.

 

const distance = Math.sqrt(
    Math.pow(bRect.x - aRect.x, 2) + Math.pow(bRect.y - aRect.y, 2)
);
const calc = Math.atan((bRect.y - aRect.y) / (bRect.x - aRect.x));
const degree = (calc * 180) / Math.PI;

 

예제를 확인할 수 있는 전체 코드