라즈이노 iOT

【 프로세싱 기초#17 】 극좌표로 원 그리기 

 이제까지 사각 박스를 그리거나 원을 그릴 때, 직교좌표(x, y 데카르트식)를 이용하여 그렸다. 하지만, 특히 원을 그릴 때는 극 좌표계(반지름과 각도)를 이용해서 그릴 수 있다. 즉, 공간속의 좌표를 거리와 각도로 표현하는 방법이 극좌표계 이다.  의외로 간단한 이 방법은 이후 에도 많이 활용되니 알아보도록 하자. 

[ 직교 좌표계와 극좌표계 ]

- 직교좌표는 원점에서 x(가로)와 y(세로)의 위치(거리)로서 P의 위치를 나타내는 방식이고,
   P(x, y)
- 극좌표계는 원점에서의 거리(반지름)와 각도로서 P의 위치를 나태내는 방식이다.  
   P(r, θ)

 이런 삼각함수의 정의를 이용하여, 극 좌표를 통해 표현되는 위치는 아래와 같다. 
  x = r cosθ     ,  y = r sin θ  가 된다.
우선 이번 프로세싱에서 원을 그려 볼텐데,  점을 찍어 주는 포인트 함수( point() )를 가지고 극 좌표 값을 이용해서 그려볼 예정이다. 

참고 :  각도를 나타내는 단위에는 도( ˚ , degree, 디그리)와 라디안(radian)이 있다. 
디그리는 원 한바퀴를 360도로 표현하는 방법이고, 우리에게 매우 익숙한 표현법이다. 
반원은 180도,  직각은 90도 등...
라디안은 수학에서 사용하기 편리한 단위이다.  1라디안은 원주 호의 길이가 반지름과 같은 길이가 될 때의 각도로 정의 된다.  

즉, 2r = 2 라디안,  3r = 3라디안  ,  ...
원주율 π는 원의 둘레를 지름으로 나눈 값(3.14159...) 이다.
즉, 반지름이 1일 때 반원의 둘레는 π이다. 

따라서 2π 가 되면 한 바퀴가 되며 이는 각도상으로 360도에 해당 된다. 
정리하면,  2π = 360도   ,   1π = 180도   ,   2분의 1π  = 90 도  ... 이런식이다.
그래서, 라디안 값과 디그리 값을 환산하는 하는 식은 아래와 같다. 

그래서,  각도(디그리) 값을 가지고 라디안 값으로 구하려면,  각도값에 (π /180) 을 곱해주고,
라디안값을 각도 값으로 바꾸려면 라디안 값에 (180/π)을 곱해주면 된다. 

  프로세싱에서는 각도값을 넣으면 라디안 값을 구해주는 함수 "radians(angle)" 와  "sin θ" , "cosθ" 을 구해주는 함수가 내장되어 있다.  따라서  삼각함수( x = r cosθ     ,  y = r sin θ  ) 정의를 이용하면, 하나의 점을 찍어(Point()함수)가며, 원의 궤적을 쫓아가면 원을 손쉽게 그릴 수 있는 것이다.    
 설명이 다소 길었는데, 그럼 직접 코딩을 통해 원을 그려보자.

▶ 문제  :  극좌표를 이용하여 원을 그려라.
   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 400 x 400) , 
              2. 배경색 및 라인: background(0), stroke(0)
              3. 화면의 중심에서 원을 그리기, 원의 반지름 은 100으로 하고 삼각함수( x = r cosθ , y = r sin θ  )이용 ]

▶ 실행결과 1 :

▶ 프로그램(code)  1: 
(이미지를 클릭하면 확대 됩니다)

size(400, 400);
background(255);
stroke(0);
int centerX = width/2;
int centerY = height/2;
float x, y;
float angle;
float radius = 100;    // 반지름 100
for (angle = 0; angle < 360; angle++) {
  float rad = radians(angle); // 각도를 라디안 값으로 변환
  x = centerX + (radius * cos(rad)); //가로중심에서 x = rcosθ
  y = centerY + (radius * sin(rad)); //세로중심에서 y = rsinθ
  point(x, y);   // 점을 찍는다
}

▶ 프로그램(code) 다운로드 1: 
(압축 파일을 풀어서 사용하세요)

 자 여기서 잠깐!  1도씩 점을 찍으며 그리다 보니 완전히 연결된 원이 그려지지 않았다. 
이를 해결하기 위해서는 포인트 함수(point())를 사용하지 말고, 라인함수(line())를 사용하면 이문제를 해결 할 수 있다.

▶ 실행결과 2 :

▶ 프로그램(code)  2: 
(이미지를 클릭하면 확대 됩니다)

size(400, 400); 
background(255); 
stroke(0); 
int centerX = width/2; 
int centerY = height/2; 
float x, y; 
float angle; 
float radius = 100;    // 반지름 100 
float beginx = radius+centerX; // 라인함수를 사용하기 위한 x 시작점
float beginy = 0+centerY;  //라인함수를 사용하기 위한 y 시작점

for (angle = 0; angle <= 360; angle +=5) {
  float rad = radians(angle);
  x = centerX + (radius * cos(rad));
  y = centerY + (radius * sin(rad));
  line(beginx, beginy, x, y);
  beginx = x;  // 다음 위치를 옮겨준다
  beginy = y;  // 다음 위치를 옮겨준다
}

▶ 프로그램(code) 다운로드 2: 
(압축 파일을 풀어서 사용하세요)