If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

극좌표

ProcessingJS에서 모양을 출력할 때마다 픽셀 위치를 xy 좌표로 나타내야 합니다. 이 좌표법은 르네 데카르트(René Descartes)의 이름을 따서 데카르트 좌표(Cartesian coordinates)라고 합니다. 데카르트는 데카르트 공간이란 개념을 개발한 프랑스 수학자입니다.
극좌표로 알려진 또 다른 유용한 좌표 체계는 공간상의 점을 원점을 중심으로 한 회전각과 반지름으로 나타냅니다. 이것을 벡터로 생각해 보겠습니다.
  • 데카르트 좌표—벡터의 x,y 요소
  • 극좌표—벡터의 크기(길이)와 방향(각)
그러나 ProcessingJS의 그리기 함수는 극좌표 체계를 이해하지 못합니다. ProcessingJS에서 어떤 것을 출력하려면 항상 (x,y) 데카르트 좌표로 위치를 나타내야 합니다. 그러나 설계할 때 극좌표를 사용하는 것이 훨씬 더 편리한 경우가 있습니다. 다행인 것은 삼각함수를 이용하면 극좌표와 데카르트 좌표를 상호변환할 수 있습니다. 삼각함수를 이용하면 좌표 체계 종류에 상관없이 설계할 수 있지만, 항상 데카르트 좌표로 그려야 합니다.
그리스 문자 θ(세타)는 각을 표시할 때 주로 사용하는 문자입니다. 그리고 극좌표는 일반적으로 (x, y) 대신 (r, θ) 로 나타냅니다. 그래서 이제부터는 극좌표를 나타낼 때 각도에 대한 변수 이름으로 "세타(theta)"를 사용할 겁니다.
sin(세타) = y/r → y = r * sin(세타)
cos(세타) = x/r → x = r * cos(세타)
예를 들어 r이 75이고 theta가 45도(또는 파이/4 라디안)라면 아래와 같이 xy를 계산할 수 있습니다. ProcessingJS에서 사인(sine)과 코사인(cosine) 함수는 sin()cos()입니다. 함수에 입력되는 인수는 '도'로 측정되는 하나의 각입니다.
var r = 75;
var theta = 45;

//극좌표를 데카르트 좌표로 바꿉니다
var x = r * cos(theta);
var y = r * sin(theta);
이런 변환 방식은 특정 부분에서 응용할 때 좋습니다. 예를 들어 원을 따라 움직이는 동작을 데카르트 좌표로 나타내기는 쉽지 않습니다. 반면, 극좌표를 이용하면 간단해집니다. 각도를 올리거나 내리면 됩니다!
다음은 극좌표 변환을 이용하여 단순한 회전운동을 하는 물체를 나타낸 코드입니다.

본 "내추럴 시뮬레이션" 과정은 다니엘 쉬프만(Daniel Shiffman)이 저술한 "The Nature of Code"의 내용을 차용한 것이며, 본 내용물의 저작권은 Creative Commons Attribution-NonCommercial 3.0 Unported License를 적용합니다.