[Processing] 회전변환에 대해서 알아보기

지난 포스트에는 x,y방향으로 평행이동하는 것을 소개했는데요.

이번에는 회전에 대해서 소개하려고 합니다.

회전 변환에 쓰이는 함수는 rotate()입니다.

입력변수는 1개만 있으면 됩니다.

rotate(angle); 처럼 쓰이며, angle은 회전 각도가 됩니다.

angle은 float이므로 소수나 분수도 입력할수 있습니다.

그림을 한번 보면서 회전이 어떻게 되는지 차근차근 알아봅시다.

위 그림과 같이 원을 하나 그렸다고 해 봅시다.

ellipse(0,50,10,10);

(0,50)위치에 반지름 10인 원을 그렸습니다.

rotate( -PI/3);
ellipse(0,50,10,10); 

회전을 시켜보았습니다. 

회전 각도는 -PI/3로 입력하였는데요.기본적으로 라디안 단위의 각도로 입력해 주어야 합니다. 라디안 단위에서 PI는 180도입니다.  PI/3은 60도겠네요.

마이너스 부호가 붙은것은, 좌표계가 방향으로 움직인 것을 확인할수 있는데요.

기본적으로 '좌표'가 '시계방향'으로 돌아가는 것이 '(+) 방향'입니다.

위의 상황처럼 '좌표'가 '시계방향'으로 회전된 것은 회전각도의 부호가 (-)입니다.

그렇다면 조금 더 응용해봅시다. 아래 그림과 같이 변환하려면 어떻게 할까요??

기존의 변환은 (0,0)을 중심으로 하여 회전을 했습니다.

그런데 위 그림처럼 하려면 하트의 중심을 기준으로 회전을 해야겠네요.

이럴 때에는 평행이동을 하는 함수와 혼합해서 씁니다.

말로만 먼저 설명하자면, 

- 하트를(0,0) 위치로 평행이동을 하고, 

- 그 상태에서 회전을 한다음 

- 원래 위치로 되돌아오는 평행이동을 한다

이렇게 3가지 단계가 됩니다.

하트를 그립니다. 하트를  그리는 함수는 편의상 하트(x positon, y position)라고 하겟습니다.

하트(width/2, height/2);

translate(width/2, height/2)
rotate(-PI/3);
translate(-width/2, -height/2);
하트(width/2, height/2);

하트를 움직이기 위해서는 사실은 좌표계가 이동하는 것. 그래서 실제 움직히는 방향과 반대의 값을 넣어주어야 합니다.
그리고 하트를 그리는 함수는 꼭, 변환이 모두 이루어진 이후에 위치하도록 코드 작성해야 합니다!

쉽게 쓴다고 썼는데 그렇게 잘 설명한것은 아닌것 같네요 ㅠㅠ
그래도 도움이 되실 분이 있길 바랍니다!