[기초 수학] 삼각함수와 역삼각함수

삼각함수

삼각함수란 각의 수치를 입력받아 그 각에 대한 삼각비를 출력하는 함수이다. 보통 각도는 세타( θ )로 표현하며, 호도법으로 각도를 표현할 때는 일반 함수의 변수처럼 x를 사용한다. 삼각함수 종류로는 사인함수, 코사인함수, 탄젠트함수가 있으며 각각 sinx, cosx, tanx로 표현한다. 

 

삼각함수 예시

 

위와 같은 삼각형 ABC가 존재한다 가정했을 때, sinθ, cosθ, tanθ는 값이 무엇일까?

θ가 무슨 값인지 몰라도, 삼각형의 각 변의 길이를 알고 있다면 각 삼각함수의 값을 구할 수 있다. 각 삼각함수의 값은 다음과 같다.

 

각 삼각함수의 값

• sinθ = BC / AB = √3 / 2
• cosθ = AC / AB = 1 / 2
• tanθ = BC / AC = √3

 

삼각함수는 길이의 값이 아닌 삼각비의 값이다.

삼각함수의 출력값은 길이의 값이 아닌, 삼각비의 값이기 때문에, 각 삼각형에서 두 변의 길이의 비율이 동일하다면 변의 길이와 상관없이 삼각함수의 값은 동일하다. 따라서 적어도 하나의 변 길이와 하나의 각도( θ )를 알고 있어야 삼각형의 나머지 변의 길이 또한 알 수 있다. 

삼각형 A'B'C'는 삼각형 ABC와 닮은 꼴이기 때문에 서로 변의 길이가 달라도 sin θ, cosθ, tanθ값이 같다.

 

삼각함수의 그래프 표현

삼각함수를 좌표평면상에 그래프로 표현하면 주기함수의 모습을 하고 있는걸 알 수 있다. 각 삼각함수를 그래프로 표현하면 다음과 같다.

 

각 삼각함수 그래프

 

역삼각함수

역삼각함수는 삼각함수의 역함수로, 삼각비를 입력받아 각도를 출력한다. 역삼각함수는 sinx-1과 같이 역함수를 뜻하는 -1를 붙여 표현하기도 하지만, arc라는 접두사를 붙여 표현(ex. arcsinx)하기도 한다.

 

 

완전한 역함수는 아니다.

역삼각함수는 삼각함수의 역함수 역할을 하지만, 일대일 대응을 할 수 없으므로, 정의역의 범위를 제한하여 역함수를 나타낸다. 정의역과 치역의 범위는 다음과 같다.

역삼각함수	정의역	치역
y=arcsinx	∣x∣ ≤ 1	∣y∣ ≤ π/2​
y=arccosx		0 ≤ y ≤ π
y=arctanx	x ∈ R	∣y∣ ≤ π/2

 

 

역삼각함수 예시

예시1

다시 한 번 적지만, 역삼각함수는 삼각비를 통해 각도를 출력하는 함수이다. 따라서, 예시1처럼 2개 이상의 삼각형 변의 길이가 주어졌을 때, 각도( θ )를 알 수 있다. 각 역삼각함수의 값은 다음과 같다.

• arcsin( BC / AB ) = arcsin( √3 / 2  ) = π / 6
• arccos(  AC / AB ) = arccos( 1 / 2 ) = π / 6
• arctan( BC / AC ) = arctan( √3  ) = π / 6

삼각함수 때와 다르게 모든 역삼각함수의 출력값은 π / 6으로 동일하다. (같은 각도( θ )를 구하기 때문.) 이로써 각도( θ ) = π / 6라는 것을 알 수 있다.

 

번외1) 역삼각함수의 값은 어떻게 구하나요?

위의 예시는 특수각이기 때문에 계산없이 구할 수 있었지만, 특수각이 아닌 대부분의 경우는 계산기를 사용하거나, 개발의 경우 이미 내장되어 있는 라이브러리 함수를 사용합니다. 

 

자바스크립트의 경우, Math라는 표준 내장 객체가 존재하여 Math.atan()와 같은 메소드를 통해 사용할 수 있습니다. 자세한 내용은 아래 링크를 통해 확인할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

 

번외2) 개발을 하는 데에 있어 삼각/역삼각함수는 어디에 쓰나요? 

물체의 회전 정도를 결정하는데 사용할 수 있습니다. 예시로 이동하는 방향으로 물체를 회전시키고 싶은 경우가 있습니다. 이런 경우 현재 위치, 이동할 위치 두 점의 좌표를 통해 기울기를 구하고, Math.atan(기울기)를 이용하여 각도를 얻어낼수 있습니다. 구한 각도는 rotate와 같은 함수를 사용하여 물체를 회전시키면 이동하는 방향으로 회전된 물체를 얻을 수 있게됩니다. (사실 rotate함수 내부에 있는 수학적 구현 원리가 훨씬 재밌지만 따로 다루지는 않겠습니다.)

 

아래 코드는 길을 만드는 함수들입니다. 아래 코드처럼 삼각/역삼각함수를 활용할 수 있습니다.

function drawPath() {
 .
 .
 .

    const deltaX = endX - startX;  // dx
    const deltaY = endY - startY;  // dy
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); // 두 점 사이의 거리 
    const angle = Math.atan2(deltaY, deltaX); // 두 점 사이의 각도 

    // 두 점 사이에 여러 회전된 이미지를 draw하여 보간
    for (let j = gap; j < distance - gap; j += segmentLength) {
      const x = startX + Math.cos(angle) * j; // 다음 이미지 x좌표 계산
      const y = startY + Math.sin(angle) * j; // 다음 이미지 y좌표 계산
      drawRotatedImage(pathImage, x, y, imageWidth, imageHeight, angle); // 계산한 위치에 회전된 이미지 draw
    }
  
}

function drawRotatedImage(image, x, y, width, height, angle) {
  ctx.save();
  ctx.translate(x + width / 2, y + height / 2); // 이동
  ctx.rotate(angle); // 회전
  ctx.drawImage(image, -width / 2, -height / 2, width, height);
  ctx.restore();
}