[Processing] Basic of Drawing (2)

먼저 소개할 내용은 Anti-Aliasing(AA)이다. 아마 게임을 많이 하는 사람이라면 AA option을 많이 다뤄봤을텐데, 이걸 켜느냐 마느냐에 따라서 그래픽이 달라질 때가 있다. 간단하게 원리를 설명하자면, 높은 해상도 상에서 구현된 물체를 낮은 해상도에서 출력하고자 했을 때, 출력 개체는 물체를 세밀하게 묘사하려고 시도는 한다. 그런데 그게 능력이 안되니까, 자기 표현할 수 있는 한 최대로 비슷하게 구현하려는데, 이게 계단처럼 표현되는 현상을 Aliasing이라고 한다. 보통 곡선을 표현할 때 Aliasing 현상이 많이 나타나는데 이걸 Processing 상에서도 noSmooth() 함수를 통해서 표현할 수 있다. 

보면 알겠지만 왼쪽 상단에 있는 원이 뭔가 표면이 거칠어보인다. 저게 aliasing이고, 그걸 해제시켜주게 smooth()다. 참고로 smooth의 인자는 level이며, 기본적으로 level 2인 anti aliasing이 정해있다. 아마 해보면 알겠지만 smooth() 를 하지않은 원이나, smooth() 를 한거나 똑같이 보인다. 다만 aliasing을 그대로 표현하고자 하면 위와 같이 noSmooth() 를 쓰면 되겠다. 참고로 noSmooth()처럼 중간에 대문자가 들어간 표기법을 Camel Style이라고 한다. 아마 Camel의 뜻을 찾아보면 왜 그렇게 부르는지 이해할 수 있을 것이다.

아 그리고 processing은 특성상 위의 속성이 아래의 개체에 영향을 미친다. 따라서 뭔가 개체를 여러개 생성하는데 두 개체의 속성을 다르게 주기 위해서는 반드시 해당 개체 바로위에서 속성을 정의해줘야 한다. 위의 예에서도 똑같다. smooth()가 정의되어 있는 부분을 빼버리면 다음과 같이 나온다.

다음은 point에 관한 내용이다. 우리가 canvas 상에 점을 표현하고 싶으면 간단하다. 그냥 

point(xPixel, yPixel);

로 정의해주면 된다. 그런데 아마 이렇게 하면 canvas 상에 아주 조그마한 점으로만 표현이 된다. 그 이유는 point 개체 자체가 기본적으로 1pixel을 표현하게끔 구현되어 있기 때문이다. 이걸 뭔가 시각적으로 표현하기 위해서는 stroke와 strokeWeight() 함수를 쓰면 된다.

 사실 stroke()의 기능은 해당 개체의 테두리표현을 위한 함수이다. 보통은 이런 point에 쓰는 것보다는 ellipse나 rect 같은 closed object를 표현할 때 쓴다. 아마 유추는 되겠지만 strokeWeight는 그 테두리의 두께를 지정하는 함수이다. 그래서 예를 들어서 점을 표현할 때는 다음과 같이 써줄 수 있다.

그런데 사실 이렇게 표현할 바에야 그냥 ellipse로 표현하는게 응용할 수 있는 범위가 더 넓다.

그래서 위에 있는 ellipse에도 그대로 적용해보면 다음과 같이 나온다.

앞에서 말한것처럼 ellipse를 쓸때 뭔가 표현할 수 있는게 많아진다. 그걸 보여줄 수 있는게 fill() 함수와 nofill() 함수다. 만약 위에서 만든 큰원을 빨간 원으로 만들고 싶다 싶으면 간단하다. 역시 앞에서 말한 것처럼 해당 개체 위에다가 

fill(RGB);

로 정의해주면 된다.

noFill은 해당 개체의 fill을 transparent 하게 주겠다는 것이다. 그래서 쓰면 다음과 같이 된다. 

차이를 알려면 지난 포스트에서 언급한 background()에서 사진을 넣어보면 확연하게 알 수 있다.

참고로 유념해야 될 것은 항상 제일 아래 있는 개체의 우선순위가 높다는 것이다. 무슨 의미인지는 다음 예제를 통해서 알 수 있다. 지금 예에서 흰 원과 빨간 원을 겹쳐보겠다. 분명 내가 말한대로라면 빨간 원이 흰 원을 덮으면서 noSmooth로 인한 aliasing이 가려질 것이다. 

이 말은 아래에 있는 개체가 화면상에서 제일 위에 놓인다는 것을 의미한다. 이걸 다르게 확인해보려면, 원이 정의된 위치를 바꿔보면 되겠다.

이렇게 하면 흰원의 aliasing이 빨간원 상에도 표현되어 있는 것을 볼 수 있고, 이건 흰원이 빨간 원이 놓여져 있다는 것을 나타낸다.

그냥 한마디로 코드상으로 가장 밑에 있는게 위에서 부터 쌓인다고 생각하면 좋을 것 같다.

간단한 예제들을 살펴봤는데 이것처럼 Processing 코드 자체가 매우 직관적이라서 처음 배우는 사람도 뭔가 시각적으로 표현하기에 알맞은 툴이 아닌가 생각한다. 시중에도 Processing 관련 책도 있고, 인터넷에도 많은 예제들이 있으니까 참고해보면 좋을거라고 본다.