[SourceMod] 삼각함수를 이용해서 기하 움직임을 표현해보자

본 글은 2012년 중반에 어느 카페에서 제가 작성한 글을 가져온 것입니다.

---------------------------------------------------------

제목 그대로 삼각함수를 이용해서 기하의 움직임을 표현해보는 그런 글을 써보자 합니다.

삼각함수를 이용해서 여러 움직임을 표현하지 못하시는 분들께 좋은 글이 될 것 같습니다.

('삼각함수 정도는 알고 있다'는 전제 하에 글을 씁니다)

처음 기초적인 것부터 시작해서 응용작으로 뻗어나갑니다. 참고하세요.

우선 동영상을 봅시다.

(하하하 고양이가 참으로 귀요미하죠? 는 기본 텍스쳐)

1 - 좌, 우로 이동

2 - 위, 아래로 이동

3 - 수평 원 운동

4 - 수직 원 운동

5 - 수평 타원 운동

6 - 수직 타원 운동

7 - 꼬불꼬불 원 운동

8 - 원환 소용돌이선

9 - 대각선 타원 운동

10 - 원 운동하며 위로 이동

위 동영상은 '삼각함수'과 '매개변수 방정식'을 사용해서 응용한 겁니다.

(사실, '매개변수 방정식'은 여기서 크게 중요하지는 않습니다.)

1. '좌, 우로 이동'과 '위, 아래로 이동'에 대해서 설명할까요?

알겠지만, 삼각함수의 사인, 코사인 기본 그래프는 다음과 같습니다.

Sin 그래프와 Cos 그래프

그래프를 보시면 아시겠지만, y 값이 -1 부터 1 사이로 정해져있으며 x 값이 증가할 수록 계속 반복합니다.

거기에 당연히 그 y 값에 특정 숫자를 곱하여 숫자를 크게 할 수도 있으며, Valve 사의 하프 램버트 방식인 '* 1/2 + 1/2' 를 사용하거나 기타 여러 가지 등을 사용할 수 있습니다.

이를 이용해서 만들면 됩니다.

공간 상에서는 x, y, z 좌표 축으로 나타납니다.

x 와 y 는 크게 차이는 없고 특히, z 좌표는 높이로 나타난다는 것을 알아두시면 됩니다.

다음과 같이 하시면 됩니다.

x = 기존x좌표 + Cosine(DegToRad(각도));

y = 기존y좌표;

z = 기존z좌표;

이렇게 하면 좌, 우로 이동되고,

x = 기존x좌표;

y = 기존y좌표;

z = 기존z좌표 + Cosine(DegToRad(각도));

이렇게 하면 위, 아래로 이동됩니다.

※참고1. 여기서 반응을 크게 하시려면 삼각함수에 특정 숫자를 곱하시면 됩니다.

( 예: 50 * Cosine(DegTo..... )

※참고2. 삼각함수를 이용하실 때에는 라디안을 이용해야합니다.

2. 수평 원 운동과 수직 원 운동에 대해서 설명할까요?

원의 방정식은 다음과 같습니다.

여기서 r 은 radius 로서 '반지름'을 말합니다.

그런데 이걸 삼각함수로써 표현하면 다음과 같은 식이 됩니다.

이것을 식을 고치면

(매개변수를 t 라고 놓았을때)

로 잡을 수 있습니다.

그러면 바로 응용이 가능합니다.

x = 기존x좌표 + Sine(DegToRad(각도));

y = 기존y좌표 + Cosine(DegToRad(각도));

z = 기존z좌표;

반경을 크게 하려면 위에 있듯이 r 값으로 조정을 해주시면 됩니다.

단, 똑같이 해주셔야 합니다. 나중에 말씀드리겠지만, 똑같이 하지 않게 되면 타원이 됩니다.

예: 

x = 기존x좌표 + 50 * Sine(DegToRad(각도));

y = 기존y좌표 + 50 * Cosine(DegToRad(각도));

z = 기존z좌표;

3. 타원 운동은 어떻게 될까요?

위에 있는 원의 방정식을 예를 들어볼까요?

반지름이 1이라면

이렇게 됩니다.

근데 여기서 짚고 넘어가야 할게 있는데

여기에서 예를 들어 a 와 b 를 다르게 하면 어떻게 될까요?

아까 위에서는 x 와 y 앞에 1로서 x² + y² = 1 를 표현하여 원의 방정식이 되었지만 만약 저 a 와 b 를 다르게 하면 어떻게 될까요?

다르게 하면 타원이 됩니다.

타원의 방정식은 다음과 같습니다.

그리고 역시 이걸 삼각함수로써 이용 가능합니다.

이것도 역시 매개변수를 t 로 잡고 x 와 y 로서 표현합니다.

바로 응용해볼까요?

x = 기존x좌표 + A * Sine(DegToRad(각도));

y = 기존y좌표 + B * Cosine(DegToRad(각도));

z = 기존z좌표;

여기서 A 와 B 를 다르게 설정하시면 타원이 만들어집니다.

4. 꼬불꼬불 원 운동을 만들어볼까요?

꼬불꼬불.....이라고 붙였습니다만, 여전히 이 단어를 쓰기엔 뭔가 부적합한 느낌이...;

어쨌든 z 축을 이제 본격적으로 건드려봅시다.

아까 처음 1번에서 기억하고 있으신지 모르겠습니다. 그걸 그대로 이용하시면 됩니다.

음....사인을 이용해볼까요?

x = 기존x좌표 + Sine(DegToRad(각도));

y = 기존y좌표 + Cosine(DegToRad(각도));

z = 기존z좌표 + Sine(DegToRad(각도));

이렇게 됩니다.

5. 원환 소용돌이선을 만들어볼까요?

원환 소용돌이선의 공식은 다음과 같습니다.

x = (4 + Sine(20 * DegToRad(각도))) * Cosine(DegToRad(각도))

y = (4 + Sine(20 * DegToRad(각도))) * Sine(DegToRad(각도))

z = Cosine(20 * DegToRad(각도))

꽤나 복잡하죠?

이걸 다르게 고치면

x = 기존x좌표 + (4 + Sine(20 * DegToRad(각도))) * Cosine(DegToRad(각도));

y = 기존y좌표 + (4 + Sine(20 * DegToRad(각도))) * Sine(DegToRad(각도));

z = 기존z좌표 + Cosine(20 * DegToRad(각도));

이렇게 됩니다.

여기서 큰 원 반경을 크게 하시려면 위에 있는 4 를 좀 더 큰 숫자로 변경하시면 됩니다.

그리고 그 원의 원 모양으로 회전하는 반경을 크게 하시려면 다음과 같이 하시면 됩니다.

예:

x = 기존x좌표 + (4 + 50 * Sine(20 * DegToRad(각도))) * Cosine(DegToRad(각도));

y = 기존y좌표 + (4 + 50 * Sine(20 * DegToRad(각도))) * Sine(DegToRad(각도));

z = 기존z좌표 + Cosine(20 * DegToRad(각도));

※참고1. 원환 소용돌이선은 뭔가요?

Toroidal Spiral

6. 대각선 타원을 만들까요?

이 대각선 타원은 원의 방정식과 일반 벡터의 평면 식을 가지고 하시면 됩니다.

예를 들어

의 식이 있다고 합시다.

저 두 개의 식에서 교차되는 곡선의 매개변수 방정식을 끌어냅니다.

(매개 변수는 t 로 잡습니다.)

그러면 이렇게 됩니다.

자, 이걸 바로 응용합니다.

x = 기존x좌표 + 5 * Sine(DegToRad(각도));

y = 기존y좌표 + 5 * Cosine(DegToRad(각도));

z = 기존z좌표 + 10 - Cosine(DegToRad(각도);

자, 그러면 원을 그리며 위로 이동하게 하려면 어떻게 하면 될까요?

여기서부터는 알아서 생각해보세요.

첨부파일에는 위 식을 전부 응용하여 캐릭터 자체를 가지고 움직임을 표현한 예제가 있습니다.

(동영상에서도 쓰인 것입니다.)

다운로드

movement.zip