삼각법은 무엇에 쓰일까?

어떤 직각삼각형이 있을 때, 여러분은 두 변의 길이 또는 한 변과 한 예각의 크기만 알면 다른 모든 것을 계산할 수 있다. 다음의 사실을 알아두기 바란다.

알겠지? 모르겠다고? 뭐, 걱정 안 해도 된다. 만약 빗변이나 sin, cos, tan 같은건 한 번도 본 적이 없는 사람이라면 저 삼각형의 빗금친 각 위에 앉도록. 어떻게 된 건지는 곧 알 수 있을 테니까.

직각삼각형에서 가장 긴 변을 빗변이라고 한다. 여러분이 앉아있는 자리에서 반대쪽에 있는 것이 높이(대변)이며 나머지 한 변이 밑변(빗변 말고 바로 옆에 있는 변)이다.

...(중략)...

나름대로 기억하기

일단 사인, 코사인, 탄젠트의 뜻을 알았다면 이제 성가신 부분은 직각삼각형의 어느 변으로 분수를 만드는지 기억하는 일 뿐이다. 흔히 직각삼각형을 놓고 사인, 코사인, 탄젠트의 영문 필기체 모양을 따라서 기억하는 경우가 많다. 사인의 S를 필기체로 쓸 때는 사선으로 올라갔다 내려오므로 빗변 분의 높이, 코사인의 C는 사선으로 내려왔다가 옆으로 가므로 빗변 분의 높이가 된다. 직접 직각삼각형을 그리고 왼쪽의 예각을 시작으로 S, C, t를 필기체로 써보면 쉽게 알 수 있다. 잘 돼?

이런 건 어떨까? 사대비 코밑비 탄대비*, 이것은 위의 식을 찌부러트려서 옆으로 늘인 것이다(대변=높이). 이 공식을 가지고 나름대로 엽기적인 짧은 글을 지어 보도록.

"찰거머리 박사, 사람 대놓고 비웃으며 코 밑 비비지 말고 딴 데로 비*키시오."

여러분이라면 더 멋진 시를 지을 수 있을걸.

*찌부러트린 문장에는 비(빗변)이지만 원래는 밑(밑변)이 맞음. 탄대밑.

(인용 - 섬뜩섬뜩 삼각법)

게임에 간단하게 적용할 수 있는 삼각함수의 기본적인 두가지 문제를 알아보려고 한다.

먼저 하나는 임의의 각도 세타, 예를 들면 120도라는 각도가 주어졌을 때 거기서 나오는 방향을 어떻게 계산하는지.

두번째는 그 반대로 어떤 벡터가 주어졌을 때 그 각도를 어떻게 계산하는지.

그리고 호도법(Radian)과 각도법(Degree)간의 변환, 이걸 유니티에서 사용하는 방법을 알아보자.

반지름이 1유닛이고 중심점이 원점인 원에서 시작해보자.

우선 (1,0) 지점에 각도의 시작을 의미하는 0°를 시작으로, 각도가 증가할수록 반시계방향으로 회전하게 된다.

그럼 이제 어떤 임의의 방향을 향하는 벡터가 있고, 아는것은 θ(세타)라는 이름의 120°짜리 각 하나뿐이라고 가정해보자.

이 벡터가 원에 닿아있는 지점은 원점에서 x, y만큼 이동한 (x, y)지점이라고 할 수 있으며, 이 과정을 그리면 직각삼각형이 나오게 된다.

물론 직관적으로 길이는 음수가 될 수 없으므로 약간 이상하게 느껴질 수 있지만, 부호는 나중에 유용하게 쓸 때가 있다.

부호는 좌표평면에서 원점으로부터의 방향이라고 생각하자.

가장 기본적인 세 삼각함수 공식, 사인/코사인/탄젠트를 소개한다.

공식에서 볼 수 있는대로 sin 함수에 θ값을 넣은 결과는 y / r, 즉 높이를 빗변(반지름)으로 나누면 알 수 있다.

그리고 코사인과 탄젠트도 비슷한 방식.

만약 y를 알고싶다면 사인공식을 활용해서 y / r = sin(θ), 여기서는 반지름이 1이기때문에 r을 생략할 수 있다.

그리고 같은 방법으로 x = cos(θ)라고 쓸 수 있고, 구하려고 했던 임의의 벡터는 (cos(θ), sin(θ))라고 할 수 있다.

앞서 θ를 120°라고 했으므로 계산기에 이걸 입력하면 최종적으로 (-0.5, 0.87)이라는 좌표를 구할 수 있다.

두번째 문제로 넘어가기 전에 사인, 코사인, 그리고 탄젠트 함수의 그래프를 한 번 확인하고 가자.

이 애니메이션에서 θ가 증가함에 따라 각 값들이 어떻게 변하는지 확인할 수 있다.

이렇게 변하는 값을 그래프로 기록하면 θ의 값이 증가함에 따라 위아래로 움직이는 사인 곡선을 그릴 수 있다. 

코사인도 마찬가지로 기록해보면 사인 곡선과 같은 모양에 90°의 오프셋만 이동한 형태로 그려지는 것을 확인할 수 있다.

이를 통해서 sin(θ) = cos(90-θ) 임을, 또한 cos(θ) = sin(90-θ) 임을 알 수 있다.

이어서 탄젠트 그래프도 확인해보자.

탄젠트 함수는 y/x이므로 파란 선 길이를 초록 선의 길이로 나눈 비율이라고 할 수 있다.

즉 탄젠트 함수는 tan(θ) = sin(θ) / cos(θ) 라고도 쓸 수 있다.

실제로 그래프를 그려 확인해보면, 1과 -1 사이를 왕복하는 사인/코사인 곡선과 달리 탄젠트 곡선은 음의 무한부터 양의 무한까지의 범위를 갖는다.

우선 여기는 나중에 돌아오기로 하고, 두번째 문제로 넘어가보자.

두번째 문제는 어떤 벡터가 주어졌을 때, 그 벡터의 각도가 몇 도인가 하는 것이다. 

이 문제에서는 X가 -0.71이고, Y가 0.71임을 알고있으므로, 탄젠트를 사용해서 각도를 구해보자. 

tan(θ) = 0.71/-0.71 = -1 이므로 탄젠트 그래프를 확인해보면

탄젠트 값이 -1일 때, 135°와 315° 두 가지 가능성이 존재한다.

-1/1과 1/-1의 경우 모두 값이 -1이기 때문이다.

지금의 경우에는 원 그래프에 그려진 각도를 눈으로 확인하면 θ가 135°임을 알 수 있다.

매번 일일히 그래프와 각도를 눈으로 확인하는 것 대신 유용하게 사용할 수 있는 역함수, asin, acos, atan을 알아보자.

각각 아크사인, 아크코사인, 아크탄젠트라고 읽는다.

또한 아크탄젠트 함수는 직전에 언급한 문제를 해결하기 위해,

대다수의 프로그래밍 언어는 y/x 대신 y와 x를 별개의 인자로 분리해서 받는 atan2 함수를 내장하고 있다.

이게 어떻게 도움이 되는지 알아보기 위해서, 원을 축에 따라 4개의 사분면으로 나누어 보자.

원의 위쪽 사분면에서는 y의 값이 양일 것이고, 같은 방식으로 x는 오른쪽에서 양일 것이다.

그러니 만약 atan2 함수에 인자로 (0.71, -0.71)을 전달하면 함수에서는 y가 양수고 x가 음수임을 확실히 알 수 있다.

이는 답이 Q2 사분면에 있다는 것을 의미하므로 함수는 하나의 올바른 값을 반환할 수 있게된다.

즉 이 문제에서 θ는 atan2(y, x)를 사용하여 구할 수 있다.

이제 호도법(라디안)을 알아보자.

호도법은 반지름과 같은 길이의 호를 그렸을 때 대응하는 각의 크기를 1 rad(라디안)으로 정의한다.

오른쪽의 0 라디안 지점부터 반시계 방향으로 원의 둘레를 따라서 진행해보면 반원은 3.14, 즉 π라디안임을 알 수 있는데,

이를 통해서 우측의 0라디안 지점부터 90°지점마다의 라디안 값은 각각 0, π/2, π, 3π/2 임을 알 수 있다. 

라디안 값을 디그리(기존의 각도) 값으로 변환하려면 π/180을, 반대로 디그리 값을 라디안으로 변환하려면 180/π를 곱하면 된다.

유니티의 삼각함수는 라디안 값을 기준으로 동작하는데, 이는 곧 실습에서 확인할 수 있다.

실습에 앞서 한가지 짚고 넘어가야 할 점이 있다.

유니티에서의 각도를 보면 회전축 Y를 기준으로 0°는 양의 Z축 방향을 향하고 있고, 각도를 높여 오브젝트를 회전시키면 시계방향으로 회전한다.

이것을 기준으로 원을 그리면 12시 방향에 0°을 시작으로 시계방향으로 회전하게 되는데,

이는 아까 문제를 풀 때 사용했던 양의 X방향이 0°이고 반시계 방향으로 회전하는 삼각함수의 원과 약간 다르다.

삼각함수의 원과 유니티 둘 사이의 변환 방법은 단순하게 90에서 각도를 빼 주면 된다. 

만약 유니티에서의 180°를 변환한다면 90°-180°=-90°, -90°는 270°와 같은 말이므로 변환이 완료된다.

반대 방향도 같은 방법으로 90°-270°=-180°=180° 이므로 역도 성립.

유니티를 열고 씬에 캐릭터 오브젝트를 추가하자.

단순한 캡슐 캐릭터에 방향을 알 수 있도록 큐브를 앞쪽에 추가했다.

이어서 TrigTest라는 C#스크립트를 생성하고방금 만든 캐릭터에게 넣어주자.

public float angleInDegrees;

우선 각도를 입력받을 float 하나를 선언하자.

업데이트 메서드에서는 이 각도를 기반으로 방향을 계산할 것이다. 

Vector3 direction = new Vector3(Mathf.Cos(angleInDegrees * Mathf.PI / 180), 0, Mathf.Sin(angleInDegrees * Mathf.PI / 180));

전에 언급한대로 유니티의 삼각함수는 라디안 값을 기준으로 동작하기 때문에, 디그리 값으로 입력받은 각도에 π/180을 곱해줘야 한다.

매번 이 값을 계산하는것은 번거로우므로 유니티의 Mathf 구조체에서 제공하는 Deg2Rad 상수를 사용하면

Vector3 direction = new Vector3(Mathf.Cos(angleInDegrees * Mathf.Deg2Rad), 0, Mathf.Sin(angleInDegrees * Mathf.Deg2Rad));

이제 이 direction이 무슨 일을 하고있는지 알아보기 위해 시각화 해보도록 하자.

Debug.DrawRay(transform.position, direction * 3, Color.green);

광선의 시작점은 오브젝트의 중심, 길이는 3, 색깔은 초록색으로 광선을 그려서 확인해보자.

위에서 계산한 direction은 반지름이 1이므로, 다시 말하면 x/r = cos(θ) 에서 r이 1로써 생략된 꼴.

거기에 원하는 길이(여기서는 3)를 곱해주면 그 길이로 광선이 그려지게 된다.

물론 여기서 3 대신 새로운 float 변수를 선언해서 사용하는것도 좋은 생각.

스크립트를 저장하고 씬을 실행시켜보면 캐릭터에서 광선이 나오고, angleInDegree 변수의 값을 증가시키면 3시방향(오른쪽)부터 반시계방향으로 회전하는 광선을 볼 수 있다.

Vector3 direction = new Vector3(Mathf.Cos((90 - angleInDegrees) * Mathf.Deg2Rad), 0, Mathf.Sin((90 - angleInDegrees) * Mathf.Deg2Rad));

그러나 전에 언급한대로 유니티는 12시 방향부터 시계방향으로 회전하는 형태로 되어있다.

이는 90 - θ 변환을 통해 수정할 수 있으므로, 코드의 angleInDegrees 부분을 고쳐보자.

실행시켜보면 12시 방향부터 시계방향으로 회전하게끔 바뀐 것을 볼 수 있다.

예전의 이 공식을 기억한다면 코드를 조금 더 간결하게 작성할 수 있다.

방금 작성한 코드에서 angleInDegrees 부분이 딱 이 형태이므로

Vector3 direction = new Vector3(Mathf.Sin(angleInDegrees * Mathf.Deg2Rad), 0, Mathf.Cos(angleInDegrees * Mathf.Deg2Rad));

이렇게 x에 sin을, y에 cos을 사용해도 같은 결과를 확인할 수 있다.

첫번째 문제를 해결했으니 방향에서 각도를 구하는 두번째 문제로 넘어가보자.

여기서는 키보드 입력을 방향으로 받고 그것을 기준으로 각도를 구해 캐릭터를 회전시키는 방식으로 구현해보려고 한다.

Vector3 inputDir = new Vector3(Input.GetAxisRaw("Horizontal"), 0, Input.GetAxisRaw("Vertical")).normalized;

transform.Translate(inputDir * Time.deltaTime * 5, Space.World);

방향키 입력을 받아서 그 방향대로 오브젝트를 이동시키는 코드를 추가한다.

여기서의 5는 이동속도가 되므로 여기서 또한 새로운 float 를 선언해서 사용할 수 있다.

실행 후 조작해보면 캐릭터 움직임에 따라 광선의 모양이 이상하게 비틀릴텐데, 광선의 끝점인 direction 벡터는 원점을 기준으로 계산된 지점이기 때문.

거슬린다면 위의 Debug.DrawRay 구문을 주석처리 하거나 direction * 3에 transform.position을 더하면 된다.

아무튼 캐릭터는 방향키를 입력하는대로 움직이지만, 회전하지는 않는다.

float inputAngle = Mathf.Atan2(inputDir.z, inputDir.x) * Mathf.Rad2Deg;

방향으로부터 각도를 구하기 위해 Atan2 함수를 사용했다.

Atan2 함수에 마우스를 잠시 올려보면 "Returns the angle in radians" 라고 나오는데, 이는 Atan2의 반환값이 라디안임을 의미한다.

여기서는 실제 오브젝트를 일정 각도(디그리)만큼 회전시켜야 하기 때문에 Rad2Deg를 곱해서 라디안값을 각도로 바꿔주자.

transform.eulerAngles = Vector3.up * inputAngle;

그리고 계산된 값을 오브젝트의 실제 각도로 할당해서 회전시킨다.

오브젝트가 Y축을 축으로 회전해야하기 때문에 Vector3.up, 즉 (0, 1, 0)을 곱하면 Y축을 기준으로 회전하게 된다.

스크립트를 저장하고 씬을 실행시켜 보면

캐릭터가 회전하기는 하는데 좀 이상하게 회전한다.

이것은 아까 광선을 그릴 때 설명했던 것과 마찬가지로 삼각함수와 유니티의 각도 회전 방향이 달라서 발생하는 현상이다.

float inputAngle = 90 - (Mathf.Atan2(inputDir.z, inputDir.x) * Mathf.Rad2Deg);

계산하는 각도 값을 90에서 빼도록 코드를 수정한 후 테스트해보자.

이번엔 올바른 방향으로 캐릭터가 회전하는것을 확인할 수 있을 것이다.

추가로, 위의 direction에서 90에서 sin을 빼는 대신 cos을 사용하던 방법을 여기서도 사용할 수 있다.

float inputAngle = Mathf.Atan2(inputDir.x, inputDir.z) * Mathf.Rad2Deg;

90에서 각도를 빼는 대신 Atan2에 넘기는 인자의 순서만 바꿔줘도 같은 결과를 얻을 수 있다.

마지막으로 키보드를 떼는 순간 캐릭터의 각도가 0으로 초기화되는 현상이 마음에 들지 않을지도 모르겠다.

이는 방향키를 누르지 않을 때도 업데이트에서 지속적으로 Atan2를 호출하여 0을 할당하기 때문.

float inputMagnitude = inputDir.sqrMagnitude;

//...

if (inputMagnitude != 0)

{

    float inputAngle = Mathf.Atan2(inputDir.x, inputDir.z) * Mathf.Rad2Deg;

    transform.eulerAngles = Vector3.up * inputAngle;

}

inputDir 선언 밑에 새로운 float 변수를 추가해주자. 그리고 해당 변수가 0이 아닐때만, 즉 어느 방향키라도 누르고있는 경우에만 각도를 변경하게끔 해주면 해결된다.

아래는 코드 전문.

public class TrigTest : MonoBehaviour

{

    public float angleInDegrees;

    public float rayLength;

    public float moveSpeed;

    void Update()

    {

        //Calculate direction

        Vector3 direction = new(Mathf.Sin(angleInDegrees * Mathf.Deg2Rad), 0, Mathf.Cos(angleInDegrees * Mathf.Deg2Rad));

        Debug.DrawLine(transform.position, transform.position + (direction * rayLength), Color.green);

        //Calculate angle and Move

        Vector3 inputDir = new Vector3(Input.GetAxisRaw("Horizontal"), 0, Input.GetAxisRaw("Vertical")).normalized;

        float inputMagnitude = inputDir.sqrMagnitude;

        transform.Translate(moveSpeed * Time.deltaTime * inputDir, Space.World);

        if (inputMagnitude != 0)

        {

            float inputAngle = Mathf.Atan2(inputDir.x, inputDir.z) * Mathf.Rad2Deg;

            transform.eulerAngles = Vector3.up * inputAngle;

        }

    }

}