안녕하세요 박동윤입니다. 오늘 모임 내용 정리해 드립니다.

- DIP Introduction
- Exhibition 2008
- Processing?
- Why Programming? : Digital Era, New Design Environment
- Programming "Language" : Just like Japanese, English, Chinese
- Programming Basic : Grammar
- Reference, Examples


1. 프로그래밍 기본

- 순차적 실행 : 윗줄의 코드가 먼저실행되고, 아랫줄의 코드가 나중에 실행됨
   예) rect 를 이용해 사각형을 먼저그리고, 같은 좌표에 ellipse 로 원을 그리면 사각형 위에 원이 덮히는 모양이 나옴

- 매 행이 끝날때 세미콜론 ; 을 붙여주어야 함
   (한줄의 명령이 끝났다는 표시, 세미콜론이 없으면 몇줄에 나누어써도 상관은 없음)

- 함수(function, method) : 특정한 기능을 수행하는 모듈, 우리는 프로세싱에서 제공하는 다양한 함수들을 사용하여 작업
   예) rect(), ellipse(), size(), fill(), noStroke() ... 등등 - 어떻게 구현되어있는지는 알필요 없음

- 다양한 함수의 사용 => REFERENCE(http://www.processing.org/reference/) 를 적극 활용!

- // 으로 시작하는 줄은 주석 (comment)처리되어 실행되지 않음. 설명을 달아놓거나 할때 유용

- 여러줄에 걸친 주석은 /* 로시작하여 */ 로 끝내면 됨


2. Processing의 기본 뼈대

void setup()
{

}

void draw()
{

}

- setup 부분은 최초실행시 한번만 실행되며, draw 부분이 반복적으로 실행이 됨(예:초당 30번 - 설정에 따라 바꿀 수 있음) 
- draw 부분이 반복적으로 불려지는 점을 활용하여 변화하는 애니메이션, 또는 잔상을 남기는 작업등이 가능 
- void 는 추후설명

사각형 그리기
void setup()
{
   size(700, 500); // 윈도우 크기를 700x500 pixel로 설정
   background(0); // 배경을 검정색으로 설정, 255는 흰색
}

void draw()
{
   fill(120, 30, 210); // RGB 값이 120,30,210 인 컬러로 채운다. 이 명령 뒤에 나오는 모든 도형들에 적용됨
   rect(70, 40, 300, 200); // x, y 좌표가 70,40 인 지점에 폭300, 높이200 인 사각형을 그린다

}


사각형 움직여보기
void setup()
{
   size(700, 500); // 윈도우 크기를 700x500 pixel로 설정
   background(0); // 배경을 검정색으로 설정, 255는 흰색
}

void draw()
{
   fill(120, 30, 210); // RGB 값이 120,30,210 인 컬러로 채운다. 이 명령 뒤에 나오는 모든 도형들에 적용됨
   rect(mouseX, mouseY, 300, 200); // mouse 포인터의 현재 위치의 x,y 좌표에 폭300, 높이200 인 사각형을 그린다
}

위의 결과는 매번 불리는 draw 에서 매 프레임마다 새롭게 배경을 그리지 않으므로 이전 프레임의 잔상이 남음
이를 없애기 위해서는 background(0); 을 삽입해서 매 프레임마다 사각형을 그리기 전에 전체를 검은색으로 칠함

사각형 움직여보기 - 잔상 없애기
void setup()
{
   size(700, 500); // 윈도우 크기를 700x500 pixel로 설정
   background(0); // 배경을 검정색으로 설정, 255는 흰색
}

void draw()
{
   background(0);
   fill(120, 30, 210); // RGB 값이 120,30,210 인 컬러로 채운다. 이 명령 뒤에 나오는 모든 도형들에 적용됨
   rect(mouseX, mouseY, 300, 200); // mouse 포인터의 현재 위치의 x,y 좌표에 폭300, 높이200 인 사각형을 그린다
}

 


3. Reference의 활용

 

예제들에서 알 수 있듯이, 프로세싱에는 다양한 기능을 하는 메소드들이 있고, 주로 이들을 호출해서 다양한 작업을 합니다.
이때 메소드(method)는, 언어에따라 함수(function)로 표기하기도 하고 같은 것이라고 일단 아시면 됩니다.

플래시 AS2.0 / 3.0 에서도 function 많이 보셨죠. 특정 기능을 수행하는 모듈이라고 보면 되고요.
중요한점은, 프로그래머들도 이런 수많은 메소드들을 전부 외워서 사용하는게 아니라는겁니다.

그래서 제일중요한것이 바로 Reference 입니다. 

http://www.processing.org 에 가시면 상단 메뉴중 Reference 가 있는데요, 들어가보시면 프로세싱에 내장된 다양한 함수들이 보입니다. rect() 나 ellipse() 등 부터 다양하게 카테고리별로 잘 분류가 되어있습니다.

클릭하면 사용 방법에 대한 설명이 아주 자세히 나와있는데요,
사용 예제와 결과 화면을 일단 간단히 보시고, 어떤기능을 하는 메소드인지 Description 을 보고 이해하신 후
사용 방법을 보시면 됩니다.

Syntax, 말그대로 문법이라고 할 수 있겠는데, 메소드를 사용할때 몇개의 파라매터가 필요하고 각각의 파라매터는 무엇을 의미하는지 잘 설명이 되어있습니다. 이부분이 가장 중요하겠죠.

물론, 문법은 말그대로 규칙/약속과 같은 것이기에, 파라매터의 개수가 틀리다던가, 타입이 틀리다면 에러를 냅니다.

 

마지막으로 가장 밑의 Releated 는 말그대로 관련이 있는 메소드들인데, 한번씩 보시면 유용하게 함께 사용할 수
있는 것들이 많습니다.

결론은, 모든 정보와 해결책은 processing.org 에 있다는 점이고요, 특히 Reference 는 영어공부할때 영어사전을 사용하듯이 항상 북마크 해놓고 사용하세요-
(중국어, 일본어 공부하듯 역시 컴퓨터와 대화할 수 있는 '언어'를 공부한다는 점을 한번 떠올리시고...당연히 사전이 필수겠지요?)

그리고, 참고로 코딩시 주황색으로 나타나는 프로세싱 내장 메소드들은 블럭지정후 오른쪽클릭해서 Find in Reference 하면 마찬가지의 위의 Reference 페이지가 열립니다. 코딩중간중간에 유용하게 수시로 사용해야할 기능입니다.

 


4. Examples



위와같이 Processing 메뉴의 File - Examples 에 보시면 정말 무궁무진한 예제들이 많습니다
.

간단한 기본 도형부터 복잡한 3D 예제까지 전부 소스가 있으니 한번씩 쭉 전부 실행을 해보시고요.
재미있는 것들이 워낙 많아서 이들 예제들만 조합해서도 충분히 멋진 interactive 한 작업들을 해낼 수 있습니다. 아이디어와 영감을 얻을 수 있는 좋은 소스이기도 하고요.

당장 코드가 이해 안되는 예제도 많겠지만, 일단 심심할때마다 하나씩 실행해보시고 어떠한 표현들이 가능한지 보는데 큰 도움이 됩니다.

다른 언어를 공부할때도 그렇듯이, 역시 반복적으로 자꾸 사용해봐야 언어는 실력이 늡니다. 꾸준하게 심심할때마다 간단히 배운것들을 쳐보고 실행을 해보시고요...

"백견이 불여 일타(打)" 라는 말이 있습니다. 아무리 영어 문법공부 해봤자 말한마디 못하는것과 마찬가지로,
직접 쳐보고 뭔가 만들어 보지 않으면 금방 다 까먹고 아무것도 못하게 됩니다^^

 





신고
Posted by 박동윤(http://www.cre8ive.kr) cre8ive

댓글을 달아 주세요

  1. 기본적인 몇가지만 눈에 익고 손에 익으시면 그 다음 부턴 훨씬 재밌어질겁니다.^^

    혹시 하시다가 잘 안되는 것이 있으면 2학년 분들은 저(함경석)에게 물어보셔도 됩니다.

    2009.05.24 20:26 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바