[Processing] 좌표계와 이동의 기본개념

프로세싱의 좌표계가 어떻게 이루어져있는지와 변환(Transformation) 개념, 그리고 이어서 평행이동 함수인 translate()에 대해서 설명하는 글입니다.

프로세싱에서의 좌표계

회전, 이동을 비롯해서 크기가 변하거나 모양이 바뀌는것을 변환(transformation)이라고 합니다.

변환을 이해하려면 먼저 프로세싱에서 화면상의 좌표를 어떻게 쓰는지 알아야 합니다.

1. 좌측 상단을 원점으로 한다.

2. x좌표는 오른쪽으로 갈수록 증가.
(오른쪽이 플러스(+) 방향)

3. y좌표는 아래로 갈수록 증가. 
(아래쪽이 플러스(+) 방향)


그리고 앞으로 종종 좌표상의 위치를 ( x좌표, y좌표 ) 와 같이 표현하게 될 것입니다.
마치 수학시간에 자주 보던 좌표평면과 비슷한데요. y축의 방향은 반대로 되어있습니다.

만약  (60,50)의 위치에 점을 찍겠다고 한다면
좌측상단의 원점을 기준으로, 가로방향으로 60만큼 세로아래 방향으로 50만큼의 위치에 점을 찍으면 되겠죠..!

변환(Transformation)

그렇다면 프로세싱에서 변환은 어떻게 이루어지는지 알아봅시다.

ellipse()라는 함수를 이용하여 4개의 타원을 그려보았습니다.

ellipse()에 대한 설명을 여기서는 하지 않겠지만 간단히 말씀드리면 

(60,50),(100,120),(80,140),(50,100)의 위치에 각각 원이 그려지도록 하겠습니다.

다 그렸으면 그 다음입니다.

Q. x방향으로 100, y방향으로 80만큼 이동하려면 어떻게 할까요?

먼저 가장 먼저 생각할 수 있는 방법은 코드에서 x좌표와 y좌표에 해당하는 부분을 모두 찾아서 

x좌표는 100, y좌표는 80을 더하도록 고쳐주면 되겠습니다. (아래 그림)

이렇게 하는것도 방법이지만 코드를 일일히 수정해야 하기 때문에 번거롭고 보기가 불편합니다.

그런데 translate()를 이용하면 위에서 한 것을 좀더 쉽게 할 수 있습니다.

일일히 100,80을 더할 필요 없이 translate(100,80)이라는 코드만 추가해서 같은 그림을 그렸습니다.

간단하죠??

조금 더 본격적으로 translate에 대해 알아보겠습니다.

이번에는 x방향으로 dx, y방향으로 dy만큼 이동하고 싶은데요. 

아까처럼 하려면 코드의 모든 x좌표에 dx만큼 더하고, 모든y좌표에 dy만큼 더하면 되겠죠.

하지만 이번엔 그렇게 하지 않고 좌표계 자체를 통째로 움직임니다.

translate(dx, dy);

(0,0)에 원을 그리면 오른쪽 상단이 아니라, (dx,dy)라고 부를 법한 자리가 원이 그려집니다.

translate(dx, dy);

ellipse(0,0,10,10);

결과적으로는 (0,0)에 그려져야 할 원이 (+dx,+dy)만큼 이동하여 그려진 것 처럼 되었네요.

translate(dx, dy);

ellipse(0,0,10,10);

translate하지 않고 ellipse(dx,dy,10,10)을 써서 (dx,dy)자리에 원을 그리면, 위 그림과 똑같이 나오겠지만

더 많은 원이 있었다면 translate() 하나만 쓰는게 훨씬 간단했을 것 같습니다. 

이런식으로 translate()는 그림의 평행이동을 시켜주는 함수입니다.

translate(x,y)와 같이 쓰고, 

x는 x방향의 이동량, 

y는 y방향의 이동량을 의미합니다..

추가로, 헷갈릴 수 있는것이,
그리고자 했던 그림이 그려지기 전에, translate()가 이루어져야 한다는 점입니다.
코드를 작성할 때, 실행되는 순서에 따라 결과가 달라집니다.
먼저 있는 코드가 먼저 실행이 되고 나중에 쓰여진코드는 나중에 실행이 됩니다.

따라서 ellipse가 실행되고 나서 translate가 실행이 되더라도 이미 그려진 원이 이동하지는 움직이지는 않습니다. 

translate가 실행된 이후에 그려진 그림들만 변환이 적용되는 것입니다.

ellipse(0,0,10,10);

translate(dx, dy);

ellipse에는 변환이 이루어지지 않음.(X)