▶프로세싱 활용노트⑤ :: rectMode()

▶프로세싱 활용노트⑤ :: rectMode()

---

이번에 살펴볼 것은 rect()함수와 관련 된 rectMode()이다. 이름 그대로 사각형을 그리는 방법을 설정하는 함수라고 할 수 있는데, 간단하지만 분명하게 짚고넘어가야 할 부분이 있어서 정리해보려고 했다.

rectMode()별 차이를 알아보기위한 간단한 예제코드

주석처리한부분을 하나씩 해제하면서 실행보는 것을 추천한다. 더 좋은 방법은 직접 타이핑하고, 값을 조절하면서 결과를 확인하는 것이다. 그러나 직접 타이핑하기가 번거롭다면, 아래에 첨부해놓은 메모장파일을 프로세싱에 집어넣어 실행버튼만 눌러보자.

프로세싱예제코드_rectMode().txt

rectMode(CORNER)와 rectMode(CORNERS)의 차이

---

이 둘 사이의 차이는 분명하게 기억해두어야 한다. 기본적으로 rectMode()관련 함수들은 기초에서 잠깐만 접하고 넘어가는 경우가 많은데, 사실 내용이 어려운 것은 아니지만, rectMode()를 잘못 설정해서 시각화 결과물이 미궁으로 빠지는 경우가 간혹 있다.

rectMode(CORNER)와 rectMode(CORNERS)의 경우가 대표적인 경우라고 할 수 있다. 

우선 rectMode(CORNER)는 프로세싱의 기본설정에 해당하는 함수로, rectMode()를 설정하지 않고 사각형을 그리리더라도 이 설정에의해서 도형이 그려지게된다. 그런데 시각화를 위해 rectMode()설정을 다른 형태로 변경한 후, 다시 원래 설정으로 돌아와 도형을 그리려할때, 디폴트 세팅인CORNER를 적용하지않고 CORNERS를 적용하면 아래 사진과 같이 완전히 다른 결과물을 볼 수 있다.

원래 rectMode(CORNERS)를 적용하고 코드를 실행하면 위 사진과 같이 여러 사각형이 보이는 것이아니라 맨 나중에 그린 사각형(짙은회색, 가장 큰 사각형을 말함)하나만 보인다. 이는 CORNERS설정이 rect(x, y, w, h)가 아니라 rect(x1, y1, x2, y2)를 의미하기 때문이다. 여기서 x2,y2는 첫 번째, 두 번째 인자로 지정한 좌표의 반대지점을 의미한다.

따라서 이러한 점을 분명하게 기억하고 넘어갈 필요가 있다.

rectMode(CENTER)와 recMode(RADIUS)

---

다음으로 살펴볼 것은 CENTER와 RADIUS모드이다. 둘 다 설정을 하면 다음과 원리로 사각형이 그려진다.

rect(centerX,centerY, w, h)

아주 간단하다. centerX, Y라고 임의로 적었는데, 이러한 모드로 설정하면 사각형은 첫 번째, 두 번째 인자가 의미하는 좌표점을 중심으로 그려진다. (기본설정으로 그리면 사각형의 좌측상단을 기준점으로 삼는다.) 

rectMode(CENTER)와 rectMode(RADIUS)의 차이

완전히 동일하게 동작하면 두 가지 함수명으로 나눌 필요가 없을 것이다. 이 두 함수에도 차이가 있는데 이는 앞의 두 인자가 아닌 세 번째와 네 번째로 들어가는 인자에 있다. 

CENTER, RADIUS설정시 rect(x,y,w,h)에서 w와 h는 너비와 높이를 의미하는데, RADIUS설정시에 우리가 집어넣은 인자 값의 2배의 도형이 출력된다. 자세한 내용은 다음 사진에서 확인할 수 있다.

사진을 보면 함수 인자에 같은 w, h값을 입력했음에도 CENTER와 RADIUS 설정 후 결과물이 큰 차이를 보인다. 이는 위에서 설명했다시피 rectMode()를 RADIUS로 설정하게되면 프로세싱은 입력받은 w, h값의 2배크기의 사각형을 그리기때문이다.