삼각함수를 이용해 원형적인 움직임을 구현하기

 

Math.cos와 Math.sin은 삼각함수를 이용해 각도를 기반으로 한 값을 반환하는 JavaScript의 내장 함수이다.

두 함수는 주로 그래픽, 애니메이션, 주기적인 패턴 생성 등에서 많이 사용된다.

 

 

Math.cos()

 

설명

Math.cos() 함수는 특정 각도의 코사인 값을 반환한다.

이 값은 주어진 각도의 x 축에서의 위치를 의미한다.

 

 

입력 및 반환 값

• 입력 값은 라디안 단위이다. 예를 들어, 90도는 Math.PI / 2라디안으로 표현된다.
• 반환 값은 -1에서 1 사이이며, 주기는 2π이다.

 

 

용도

• 주기적이고 수평적인 움직임(예: 회전하는 물체의 x 위치 계산).
• 원형 궤도를 따라 이동하는 애니메이션에서의 x 좌표 계산.

 

 

예시

const angle = Math.PI / 4; // 45도
const x = Math.cos(angle); // 45도의 코사인 값은 약 0.707

 

 

Math.sin()

 

설명

Math.sin() 함수는 특정 각도의 사인 값을 반환한다.

이는 주어진 각도의 y 축에서의 위치를 의미한다.

 

 

입력 및 반환 값:

• 입력 값은 역시 라디안 단위이며, 반환 값은 -1에서 1 사이이다.
• 사인 함수의 주기 역시 2π이다.

 

 

용도

• 주기적인 수직적 움직임(예: 회전하는 물체의 y 위치).
• 원형 궤도를 따라 이동하는 애니메이션에서의 y 좌표 계산.

 

 

예시

const angle = Math.PI / 4; // 45도
const y = Math.sin(angle); // 45도의 사인 값은 약 0.707

 

 

Math.cos와 Math.sin의 관계 및 예제

 

이 두 함수는 주기적이고 원형적인 움직임을 구현할 때 자주 함께 사용된다.

예를 들어, 어떤 물체가 원형 궤도를 따라 움직이도록 하려면, 다음과 같이 x와 y 좌표에 코사인과 사인 값을 곱해 위치를 업데이트할 수 있다.

const clock = new THREE.Clock();
const time = clock.getElapsedTime();

const radius = 5; // 원의 반지름
const angle = time; // 시간에 따라 각도 변화

const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;

이 코드에서 x와 y는 시간이 지나면서 각도에 따라 변하여, 물체가 반지름이 5인 원을 그리며 이동하도록 한다.

 

 

삼각함수 설명

a가 1이라면 ?

• 결국 sin는 b가 되고, cos는 c가 된다.

 

 

Cosine은 x 좌표를 가리킨다.

• c = x축
• const x = Math.cos(angle) x축은 코사인을 사용

 

 

Sin은 y 좌표를 가리킨다.

• b = y축
• const y = Math.sin(angle) y축은 사인을 사용

 

 

2D가 아닌 3D 일 경우

y축은 제외하고 x축과 z축에서 원운동을 만드면 된다.

const z = Math.sin(angle) z축을 사인으로 사용

 

 

원을 그리게 되는 원리

 

1. 시간을 각도로 사용:
   • clock.getElapsedTime()을 사용하여 시간의 흐름을 각도로 변환하고 있다.
   • 시간(time)은 점진적으로 증가하면서 각도 역할을 하게 되어 물체가 한 방향으로 계속 회전하도록 한다.
     
     
2. 각도에 따른 x와 z 좌표 계산:
   • Math.cos(time) x 좌표를 구하며, 코사인 값은 각도에 따라 1에서 -1 사이로 변한다.
   • Math.sin(time) z 좌표를 구하며, 사인 값 역시 각도에 따라 1에서 -1 사이로 변한다.
   • 두 값이 함께 변하면서, (x, z) 좌표가 원형 경로를 따라 이동하게 된다.