평행이동

여기서 ProcessingJS를 이용해 프로그램을 만들 때, 출력값은 모눈종이와 같은 배경에 표시됩니다. 모양을 그리려면 그 모양의 좌표를 쓰면 됩니다.

예를 들어 다음은 rect(20, 20, 40, 40)을 이용하여 그린 단순한 사각형입니다. 좌표 시스템(모눈종이의 좀 더 세련된 단어)은 회색으로 나타나 있습니다. 그리고 이미지를 좀 더 작게 유지하기 위해, 다음 좌표 시스템은(초깃값 400x400 대신) 가로, 세로가 각각 200 픽셀, 200 픽셀입니다. 밑에서 정사각형은 x=20, y=20에 있고, 가로와 세로가 40입니다.

사각형을 오른쪽으로 60칸 아래로 80칸 이동하고자 한다면 x와 y 시작점에 이를 추가해 rect(20 + 60, 20 + 80, 40, 40) 좌표를 변경하면 사각형이 다른 장소에 나타날 것입니다. (극적인 효과를 위해 화살표를 넣었습니다.)

이것보다 더 흥미로운 방법이 있습니다. 대신 모눈종이를 옮기는 겁니다. 모눈 종이를 오른쪽으로 60칸 아래로 80칸 옮긴다면 동일한 시각적 효과를 얻게 될 것입니다. 좌표 시스템을 옮기는 것을 평행이동(translation)이라 합니다.

이 그림에서 중요한 것은 사각형의 관점에서 사각형은 전혀 움직이지 않았다는 것입니다. 사각형의 왼쪽 상단 모서리는 여전히 (20, 20)에 있습니다. 변환을 이용하면 그린 것은 절대로 위치가 변하지 않고 좌표 시스템의 위치만 변합니다.

다음은 원래의 그렸던 것처럼 사각형을 그리고, 좌표를 변경하여 새로운 위치에 빨간색으로 사각형을 그리는 프로그램입니다. 그다음 격자판을 이동하여(translate()) 새로운 위치에 파란색으로 사각형을 그립니다. 각 사각형은 반투명이어서 빨간색과 파란색이 겹쳐지며 사각형이 보라색으로 보입니다. 여기서는 사각형을 옮기는 방법만 다릅니다. 아래에 숫자를 바꿔서 직접 확인해 보세요.

평행이동 코드를 좀더 자세하게 살펴보겠습니다. pushMatrix()는 좌표 시스템의 현재 위치를 저장하는 내재된 함수입니다. translate(60, 80)은 좌표 시스템을 오른쪽으로 60칸 아래로 80칸 옮깁니다. rect(20, 20, 40, 40)은 사각형을 원래 있었던 위치에 그립니다. 여러분이 그린 것은 움직이지 않는다는 것을 기억하기 바랍니다. 대신 격자판이 이동합니다. 마지막으로 popMatrix()는 평행이동하기 이전의 상태로 좌표를 복원합니다.

왜 pushMatrix()와 popMatrix()를 사용할까요? 격자판을 다시 원래 위치로 이동시키는 translate(-60, -80)를 사용할 수도 있는데 말이에요. 그러나 좌표 시스템으로 좀 더 정교한 연산을 수행하려면 모든 연산을 무효로 만드는 것보다 상태를 저장하고 복원할 때 pushMatrix()와 popMatrix()를 사용하는 것이 더 쉽습니다. 나중에 이 함수들에 왜 이런 이상한 이름이 붙었는지 배울 겁니다.

좌표 시스템을 선택하여 옮기는 것이 단순히 좌표에 수를 더하는 것보다 훨씬 더 많은 문제가 있을 거라고 생각할 수도 있습니다. 사각형과 같이 단순한 예제에 대해서는 이 생각이 옳습니다. 그러나 translate()가 프로그래밍을 좀 더 쉽게 만들어주는 예제를 살펴 보겠습니다.

다음은 집을 줄지어 그리는 프로그램입니다. 이것은 drawHouse()라는 이름의 함수를 호출하는 반복문을 이용합니다. drawHouse 함수는 집의 왼쪽 상단 모서리의 x와 y 위치를 매개변수로 입력받습니다. drawHouse 함수는 집이 정해진 좌표에 그려지도록 많은 매개변수를 처리해야 한다는 사실을 주목하세요.

새로운 좌표를 계산하는 것 대신에 translate() 함수를 이용하면 어떻게 될까요? 이 경우 코드는 매번 (0, 0) 에 왼쪽 상단 모서리가 있는 동일한 장소에 집을 그립니다. 그리고 대신 평행이동을 통해 모든 작업을 수행하도록 합니다.

하지만 항상 새로운 좌표를 계산하는 것보다 translate()를 선호해야 하는 것은 아닙니다. 칸아카데미에서 배우는 많은 것처럼 이것은 단지 코딩을 잘하기 위한 또 하나의 도구입니다. 그리고 언제 translate() 이 유용할지 알아내는 것은 여러분에게 달려 있습니다.

본 내용은 제이 데이비드 아이젠버그(J David Eisenberg) 가 저술한 2D Transformations을 각색한 것이며, 본 내용물의 저작권은 Creative Commons Attribution-NonCommercial-ShareAlike 라이선스를 적용합니다.