[Processing?] Processing의 시작

프로세싱을 찾아보고 오신분은 아시겠지만 프로세싱이란 툴은 2001년 MIT의 Ben Fry에 의해서 만들어진 디자인 툴입니다.

그런데 재미있는 것은 이게 단순한 디자인 툴이 아니라 모든 구성이 코드로 이뤄진다는 것이지요. 물론 Expression Blend처럼 수작업으로 그리는게 아니라 모든 도형이 숫자와 문자로 구성된다는 겁니다.

 

 

어디서 많이 본 UI라고 했더니 Arduino의 UI와 매우 유사합니다. 무슨 연유에선지는 모르겠지만 색깔이 다르기만 할뿐 거의 뭐든게 비슷해보입니다. 비공식적으로 지금 이렇게 펼쳐진 화면을 스케치북이라고 합니다. 그냥 그린다는 의미를 나타내는 것이겠지요. 간단한 예제를 통해서 함수를 소개해보고자 합니다.

 

 

우선 그냥 눈앞에 도화지가 있다고 생각합니다. 그럼 맨 먼저 해야 할 일은 그릴 영역을 지정해주는 겁니다. 그걸 나타낸 것이 바로 size(x,y)입니다. 위와같이 하면 200x200 크기의 도화지에 그리겠다는 것을 의미합니다. OutPut Screen을 내보내기위해서는 이렇게 size를 선언해주는 것이 필요합니다.

 자 그다음은 배경색을 선언해주는 것이 바로 background입니다. 그런데 특이한 건 이 안에 들어가는 값이 한개일 때가 있고 3개일때가 있다는 겁니다. 지금 위와 같이 하나만 넣어준 것은 바로 background를 그레이스케일로 나타내겠다는 겁니다.말하자면 채도를 표현하는 거랄까요? 따라서 위와 같이 작성하면 배경은 흰색이 됩니다. 그런데 background의 숫자를 바꿔보면 다음과 같이 나옵니다.

 

 

R:255,B:100을 정함으로써 위와 같은 약간의 핑크를 표현할 수 있습니다.

Stroke는 말 그대로 가장자리의 색을 지정해주는 것입니다. 그러니 지금 테두리 색을 0, 즉 검정색으로 표현하겠다는 것이 되겠지요. 유념해야 될것은 문법이 위에서부터 차례대로 내려오는 것이기 때문에 Stroke의 영향은 바로다음 stroke가 나오기전까지 모든 개체에 영향을 끼친다는 겁니다. 즉 저상태에서 다음 stroke가 나오기전까지 원과 네모가 들어간다면 stroke(0)의 효과는 그 원과 네모에도 미친다는 겁니다. 어떻게 보면 stroke는 가장자리를 그리는 펜이라고 생각하시면 될거 같네요. 우선은 펜을 꺼내야 뭘 그리던지 할테니까요.

 

다시 배경을 하얗게 만들고 코드를 마저 채워 봅니다.

 

 

 

보통 도형을 채우는 형식은 아래 rect과 같습니다. 구조는 (100,100)을 좌상점 (20,100)을 우하점으로 따진다는 겁니다. 이는 Ellipse를 그릴 때도 비슷한 형태입니다. 다만 타원형은 이런 스케치북 상에서 그릴때 정확한 원형으로 그리는 것이 아닙니다. 단지 네모에서 가장자리에 대한 처리를 해줌으로써 사람의 눈에는 곡률을 표현하게끔 하는 것이죠. 물론 중심점을 정하는 rectMode나 eillipseMode에 따라서 계산하는 방법이 조금씩 달라집니다. 이는 다음에 설명하기로 하겠습니다. 그래서 더 채워봅니다.

 

 

이번에는 Ellipse를 삽입해봤습니다. 유념할 것은 지금 기존의 Rectangle위에 덮어서 그려졌다는 겁니다. 생각해보면 정말로 그림을 그리는 것과 유사하다는 걸 느끼실 겁니다.

계속 보고 계시지만 지금도 stroke(0)의 영향이 미치고 있습니다. 테두리가 전부 검정색으로 나타나고 있지요. 여기다가 눈을 삽입해보겠습니다.

 

 

속을 까맣게 채운 ellipse를 두개 삽입합니다. 그런데 사실 저도 처음부터 보고있지만 ellipse를 그리는 것은 조금 기준이 애매한거 같습니다. 좀 많이 그려봐야 경험이 늘어날까요?

이제 마지막으로는 Line을 형성해주면 이 캐릭터의 다리를 만들 수 있을겁니다. Line은 오히려 Rect이나 Ellipse를 만드는 것보다 더 직관적입니다.

 

 

일련의 캐릭터를 그리는 과정을 통해서 함수를 알아봤습니다. 그런데 이미지가 보면 조금 픽셀이 깨져있는 것을 보실 수 있을겁니다. 앞에서 잠깐 언급했지만 Ellipse도 정확한 곡률을 가지고 그려진게 아니기 때문에 표현하면서 픽셀이 깨지는 현상입니다. 이걸 막을 수 있는 것이 smooth()입니다. 보통 게임을 하시다 보면 AA라는 효과를 보실 겁니다. 바로 안티 앨리어싱이라고 해서 날카로운 모서리를 부드럽게 처리해주는 알고리즘입니다. 이 프로세싱에서도 smooth()를 통해서 구현할 수 있습니다. 반대로 안 쓰려면 앞에 No 를 붙여서 No smooth()라고 쓰면 됩니다.

 

 

어떤가요. 위 이미지와 비교했을 때 픽셀이 깨진 현상이 조금 덜 나타납니다. 그런데 여러가지 실험을 해본결과 이 smooth함수는 맨위에 적어줘야 하는 것 같습니다.

 

 

위와 같이 smooth를 맨 밑에 적은 경우에는 smooth가 적용이 안되는 것을 보실 수 있을겁니다.

그러면 항상 smooth를 써줘서 표면을 부드럽게 하면 보기에 좋지 않느냐 하실 수도 있겠지만 제가 생각하기에 이 문제는 프로그램의 퍼포먼스와 연관이 있는 것 같습니다. 지금은 단순히 작은 캐릭터를 생성하는 것이었지만 이걸 통해서 3D 애니메이션을 구현한다고 할때 그 퍼포먼스 문제는 분명 fps에도 영향을 끼칠 것이 분명하기 때문이지요.

 아무튼 간단하게 processing이란 툴을 소개하고 사용방법에 대해서 언급해봤습니다. 어떻게보면 참 직관적이고 쉬운 프로그래밍이면서 그걸 디자인으로 나타내는, 한마디로 끝내주는 프로그램입니다.