Language: English , Español, Japanese , Korean

소개  

프로세싱은 전자 매체가  실현하는 컨셉공간을 만드는 환경을 제공한다. 프로세싱은 전자적 예술작품을 만드는 과정을 통해서 컴퓨터 풀그림을 배울 수 있는 환경이기도 하며  아이디아를 개발할 수 있는 전자 스켓치북이라고도 할 수 있다.
http://www.proce55ing.net/

프로세싱은 우리가 알고 있는한 가장 쉽게 접근할 수 있는 자바 컴파일러이고 쌍방향성 그래픽스와 멀티미디아 풀그림 환경이기도 하다.   이 프로세싱은 호스트 컴퓨터에서 독립적으로 실행시킬 수 있는 작품을 만들 수도 있고 웹 브라우저에 끼워 넣는 자바 애플랫으로도 만들 수 있다.  또 이 시스템은 그래픽스 풀그림 교육(educational graphics programming environments)과 진짜 "자바" 사이의 간격을 메꿔 주기 위한 목적으로도 만들었다.  프로세싱은 풀그림 교육의 도구이기도 하지만 그 이상의 가능성과 발전성은 얼마던지 있다.

이 튜토리알의 목적은 매크로미디아의 Flash 와 Director 의 유저에게 프로세싱과 매크로미디아 제품들과 비교하고 대비하면서프로세싱을 소개하려는 목적으로 썼다.  이러한 목적의 바탕에는 매크로미디아 제품을 사용하면서 터득한 지식을 잘 활용하면 프로세싱을 배우는데 상당한 시간을 절약할 수 있다고 생각했기 때문이다.  그래서 이 튜토리알은 위에 든 매크로미디아 제품중 하나에 대해서 최소한의 기초지식을 갖춘 독자를 염두에 두고 썼다.   이 튜토리알을 마치면 여러분은 자신의 프로세싱(자바)작품을 만들어 발표하고   BX-24 chip  을 갖춘 시리알 포트를 통해서 통신도 할 수 있을 것이다.

차례
머릿말
프로세싱 무른모 얻기
인터페이스 둘러 보기
아래 레벨  미디아 다루기
문법 구조
2차원 정적 이미지 그리기
시간과 동영상
마우스와 키보드
프레센테이션/내보내기
이미지 파일 그리기
3D 형태
픽셀
문자 출력
시리얼 장치
전망

현재 컴퓨터를 쓰는 인터랙티브 디자인 교재에서는 대다수는 플래시 아니면 디렉터를 도구로 쓰고 있다.그런데 학생들은 다른 툴을 쓰는 환경에서 제작된 작품에 영향을 받아 좀더 동적인 기하적 디자인이나 앨고리즘이 복잡한 작품을 만드는 단계에 온다.  프로세싱을 쓰기 전의 일이지만 ITP에서 이런 강좌에서 실험을 하나 해 보았다.  Director Lingo를 가르치는 도중에 일주간 자바 풀그림을 가르쳐 보았다.   다른 언어체계를 통해서 Lingo 말고 좀더 다양한 언어세계를 이해하고 시야를 넓혀주기 위해서였다. 템프레이트(template) 하나와 참고문헌(rosetta stone reference)를 주고 풀그림을 바꿔 보도록 하였다. 일주일간의  혼란을 겪은 학생들가운데에는 아무것도 못한채 그저 좀더 자바를 배워야겠다는 생각만 토로하는 경우가 있었다. 그런데 딱한 것은 대학에서 가르치는 일반 자바 강좌는 텍스트모드 콘솔에서  풀그림을 짜고 컴파일하는등  특수한 강좌를 제외하고는 "애플렛 그래픽스"와는 거리가 먼 것들이라는 사실이다.  그러니 학생들에게 그런 자바 강좌를 듣고 오라고 하긴 쉽지 않았다.  그래서 이 강좌는 이런 사정을 감안하여  프로세싱환경에서 대학의 일반 자바강좌와 그래픽스와 디자인 위주의 풀그림 교육간의 갭을 줄여 주려는 것이다.   결코 이 강좌로 자바강좌를 대치하려는 것은 아니다.   자바 언어의 심오한 뉴앙스를 배우기 전 단계로 자바교육의 보충교육쯤으로 알아 두면 좋겠다.  또한  프로세싱과 자바를 매크로미디아 제품의 다음단계로 또는 그 바탕(lower level)시스템으로 내 세우는 것도 아니라는 점에 유의하기 바란다.  프로세싱과 자바는 이들  상업제품과는 다른 내용을 달리 풀그림할 수 있는 단순한 대안일 뿐이다.   여러분이 현재 자바 강의를 듣고 있다면 담당강사가 얼마나 유연한 생각을 갖고 있느냐에 달렸지만 프로세싱을 써서 여러분의 과제를 제출할 수도 있을 것이다.  이 튜토리알은 Casey Reas 와 Ben Fry 가 만든 프로세싱 사이트에서 얻은 정보를 내 나름대로의 관점에서 종합해서 쓴 것이다.  

프로세싱은 무료로 아직은 개발 단계에 있다.  개발이 끝난 다음에도 무료로 배포될 것이다. 현재는 알파단계에 있다.   알파버전은 베타 버전보다 앞선 단계다.  버그를 잡고 새 기능들을 추가하고 있는 단계다.  크로스푸랫폼 인스톨 풀그림을  다운로드하기 위해서는  시험사용 코뮤니티에 가입하겠다는 이메일을 개발자에게 보내면 된다.    프로세싱 웹사이트에 가서 Download를 클릭하면 다음 단계에에 대한  지시를 해 준다.  또 테스터 협력자사이에는 메쎄징 시스템이 있다.  또 프로세싱 사이트에서 Discourse를 클릭하여 이 사이트에 가담하면  다른 테스터들과 정보를 교환하고 어떤 주제이던 도움을 받을 수 있고 줄 수도 있다.  뿐만 아니라 이 사이트에 가담하면 저자들과 직접 대화를 할 수도 있고 이 튜토리알 저자와도 만날 수 있다.   이 사이트에는 끊임없이 업데이트하고 새로운 버전이 올라 오고 있는 역동적인 사이트라는 사실이다.

아래 그림은 www.Proce55ing.net에 있는 그림이다.  관련사항은 Reference를 클릭하고 Environment.를 클릭하면 볼 수 있다.



이 그림을 보는 순간 여러분은 즉시 "아니 이렇게 단순한 인터패이스라니?  어떻게 플래시나 디렉터같은 일을 해 낼 수 있단 말인가?"  하는 질문을 할지 모른다.   디렉터와 플래시에는 상업용 멀티미디아에 공통적용되는 온갖 입력장치나 미디아 편집기가 탑재되어 있다. 한편 프로세싱에서는 이런 것을 쓰지 못하고 모두 다른 풀그림으로 하거나 자바로 짜서 쓰고 있다.  예컨데  플래시에는 미니 일러스트레이터(Illustrator) 가 들어 있고 디렉터에는 미니 포토샵 (Photoshop) 이 탑재되어 있다.    그런 연유로 이 두 무른모에서 만든 작품의 많은 부분이 통합편집기능의 제약을 서로  닮고 있을 수밖에 없다.   프로세싱(자바도 마찬가지지만)에서는 여러분이 벡타패쓰(vector paths)나 GIF 파일의 목록을 스스로 만들고 풀그림을 통해서 이들 그림을 구현해야 한다.   따라서 여러분 자신이 형식과 구조를 자유로이 결정하고 스크린위의 픽셀 하나하나를 풀그림 언어를 통해서 직접적으로 제어 통제할 수 있다.   그런 의미에서  현상에 만족하지 않고 가존의 자동 툴을 넘어선 새로운 형식을 탐구하고저 하는 실험정신이 강한 독자에게는 프로세싱이야 말로 아주 편리한 도구라 할 수 있다.

아래에 윈도우 왼쪽에 있는 6개의 버튼을 간략히 설명한다.  

Director에서는 외부 미디아를 cast 에  불러 오거나 새로 만든 다음 이것을 stage 에  끌어 오면 sprite 가 생성 배치된다.  Flash 에서는 외부 미디아를 library 에 불러 오거나 새로  만든 다음  stage 로 끌고 와서 movieclips 로 인스턴스화 한다.  프로세싱에서는 (자바에서도 마찬가지이지만) 미디아 생성은 모두 코드로 만들어 수행해야 한다. 이것은 HTML  의 작동방법과 같다.  뿐만 아니라 여러분이 창작한 자작 미디아 (벡타그림, DNA데이타, 필름의 색표본, Fargo)를 자바코드의 일부로 포함 시킬 수도 있다.   실제로 어떤 외부 이미지나 사운드도 원한다면 한 파일에 모두 집어 넣을 수 있다.  왜냐하면 이미지의 픽셀도 여러분의 코드의 일부분으로 바꿀 수 있고 사운드 역시 커다란 데이터 배열로 저장할 수 있기 때문이다. library 나 cast 의 이점이란 디스크 공간이나 메모리를 절약하고 형식을 통제하는데 유리하다는 점일 것이다.  또 다른 이점을 들자면 sprite 나 movieclip 은 눈으로 직접 볼 수 있어 버튼, 비디오게임 캐랙터, 독립적인 그래픽스 요소등을 만드는데 실감이 난다는 점이다.그러나 고정된 틀에 의존하는 작업환경은 역기능도 가져 온다.   프로세싱에는 이런 고정된 틀이 없다.  기본적인 drawing routine에 마우스/키보드/시리얼포트의 이벤트 가 다다.  동영상을 만든다는 것은 시간적으로 씬을 다시 바꿔 그린다는 것 뿐이다.   다시 말하면 무비클립이나  스프라이트를 여러분 자신이 써야 한다는 것이다.   그러나 반드시 그럴 이유가 없다.   아티스트에게 유용한 새로운 방법을 발명해 내면 된다.   이렇게 하므로서 매크로미디아 냄새가 풍기는 작품들에서 벗어난 다양화된 심미관을 발견하는 기회가 될 수 있을 것이다.

이 튜토리알의 아래 부분에서는 먼저 이미지를 스크린에 그리는법을 소개하고 시간과 애니메이션을 소개한다. 그런다음 마지막으로 마우스 키보드 그리고 시리알 포트와의 상호작용을 설명할 것이다.  이것들만 알면 높은레벨 툴에서 할 수 있는 어떤 작업도 수행할 수 있다.  여러분 자신이 마음만 먹으면 어떤 작품도 자바로 만드러 낼 수 있다는 사실을 명심하기 바란다.

FlashMX 사용자에게는 별로 새로운 것이 없으므로 복습이라고 생각하고 읽어 주기 바란다. 아래의 보기는 example sketches 에 들어 있는 structure00 이다.

그리고 자바 변수들은 :

프래셔들에게: 여기에는 var 가 없다는 점에 유의하기 바란다.  좀더 깊이 알고 싶은 독자는 자바 튜토리알을 찾아서 읽어 보기 바란다.  여기에 변수부분이 있다.

if-then  구문은?

Lingo 와 비교하면 문법은 다소 달라진다.  어떤 값을 대입할 때에 단순 등부호 "="를 사용한다.  이중 등부호 "==" 는 어떤 다른 값과 비교할 때에 사용한다.  즉 "같은가"를 물을 때에 사용한다.   또 "다른가"( "not equal to")를 물을 때에는 "<>" 가 아니라 "!="  를 쓴다. 나머지는 같다.  즉 ("<" , ">" , ">=" , 와 "<=") 는 두 언어에서 차이가 없다.  조건문과 관련된 좀더 자세한 정보는  For more information on conditionals, 전문 문헌을 참조하기 바란다.

반복 실행문(looping)은 ?

Lingo 사용자에게 말하면 이것은 "repeat with i = 0 to 4." 와 같다. 소괄호 안에 들어 있는 세 개의 명령문은 두 개의 세미콜론 ";"으로 분리해 놓았다.  첫 번째 명령문은 임시변수를 선언한다.   두 번째 명령문은 반복실행의 조건을 명시한다.  위의 보기에서는 i 라는 변수가 5 보다 작은 한 반복실행을 계속하고 그렇지 않게 되면 반복실행을 멈추라는 명령이다.  셋째 명령문에서는 다양한 방식으로 i 를 변동시키는 명령을 준다. 위의 보기에서는  한번 반복한 다음 i 를 1 증가시키라는 명령을 보여 준다. "i++" 은 "i = i + 1"를 짧게 쓰는 문법규약이다. 썬(SunMicrosytem) 에 가면 반복조건문에 대해서 더 자세한 정보를 얻을 수 있다.

while 조건 반복문은 if-then 조건문과 비슷하다.

조건분기 흐름 구문(flow-control syntax) 에 관하여 심층 분석에 관심이 있는 독자라면 자바언어의 튜토리알중 조건분기 흐름 구문 부분을 참조하기 바란다.

여기서 완벽한 구문 해설을 할 생각도 할 수도 없지만 흔히 쓰는 루틴(함수)에 대해서 조금 더 설명할까 한다.  단순히 앞으로 집중적으로 사용하게 될 그리기 관련함수들을 초보자에게 이해시킬 목적일 뿐이니  자세한 내용은 Processing Language Comparison 과 Processing Structure Examples.을 참조하기 바란다.

size(200,100); background(0,0,0); stroke(255,0,0); point(50,50); stroke(0,255,0); point(100,50); stroke(0,0,255); point(150,50);

이 코드를 실행시키면 오른 쪽과 같은 이미지를 얻을 것이다. 이것은 검은 바탕색의 너비가 긴 윈도우에 빨강, 초록, 파랑색 픽셀 셋이 찍혀 있다.

이제 이 코드를 한줄 한줄 따라가면서 분석해 보자.

size(200,100);

size함수를 부르는 것은 이 캔버스(윈도우)의 크기를 너비, 200 픽셀, 높이, 100 픽셀로 지정하는 것이다.  이 함수를 처음에 호출하지 않으면 디폴트로 너비 100, 높이 100 으로 지정된다.

background(0,0,0);

background를 부르는 것은 캔버스 전체의 색을 지정한다.  Director에서는 stage 색에 해당되고  Flash에서는 문서(document)의 배경색(background color)이 된다. 인자로 들어간 0,0,0 은 검정색을 뜻한다.  이 함수를 호출하지 않으면 프로세싱은 디폴트로 회색 배경색을 가진 캔버스를 출력한다.

stroke(255,0,0);

stroke 함수의 호출은 현재 그리기 색깔(stroke color)을 지정한다. 이 함수를 호출한 다음 그리기 관련함수를 호출하면 그림은 모두 이 색깔로 그려진다. 255,0,0 는 빨강을 뜻한다. 이함수를 생략하면 프로세싱은 디폴트로 현재 그리기 색깔을 검정색으로 지정한다.

point(50,50);

point 함수는 현재 그리기 색깔로 픽셀 하나를 자리표 50,50 에 그리라는 명령이다. 현재 그리기 색깔은 빨강으로 지정되어 있다.

stroke(0,255,0);
point(100,50);

이 코드는 캔버스 한 가운데에 초록색 픽셀을 하나 찍는다.

stroke(0,0,255);
point(150,50);

이 코드는 파랑색 픽셀을 오른쪽에 하나 찍는다.


여기서 보듯이 이것은 Lingo 의 이미지를 그리는 draw( ) 함수나 Flash의 ActionScript에 있는 이미지 drawing methods와 비슷하다는 것을 알 수 있을 것이다.   여러분은 스크린을 마치 어떤 그리기 명령을 이해하는 캔버스라고 생각하고 주무르면 된다.  이제 좀 더 복잡한 모양을 그리는 법을 알아 보기로 한다.

다음은 기성 모양을 그리는 명령어들을 보기로 든다.

triangle 은 세 꼭지점을 가진 세모꼴을 그린다.  이 함수에는 6개의 인수를  받는데 인수 1,2는 첫 꼭지점의 자리표, X,Y 이고  인수 3,4는 둘째 꼭지점, 인수 5,6은 셋째 꼭지점의 자리표, X,Y 이다.

triangle(x1, y1, x2, y2, x3, y3);

quad 는 4 꼭지점을 갖는 다각형을 그린다.  인수의 구조는 세모꼴 명령어 triangle의 인수와 비슷한데 이젠 4번째 꼭지점 자리표, X,Y 가 더해질 뿐이다.

quad(x1, y1, x2, y2, x3, y3, x4, y4);

rect 는 직네모꼴을 그린다.  이 경우 인수는 첫 번째 2개는 위치 자리표 X, Y이고 셋째 넷째 인수는 너비와 높이를 지정한다.

rect(x, y, width, height);

ellipse 는 타원꼴을 그 인수의 구조는 rect 의 인수 구조는 와 같다.

ellipse(x, y, width, height);

이제 이 풀그림을 수정해서  조금 새 기능을 보인다. 아래에 이 새 코드를 마크했다.

(이번에는 색깔을 조금 다른 기법으로 지정하였다. 이 기법은 HTML 문서의 색깔 지정법과 비슷하다. )

fill 은 stroke 의 사촌과 같다. Fill 은 다각형을 초록으로 칠하고 stroke 은 외각선을 빨강으로 그릴 때에 쓴다.  fill 의 인수는 stroke의 인수와 마찬가지로 색깔이 들어 간다.   디폴트의 색깔은 흰색이다.  그런데  모양의 안을 칠하고 싶지 않을 땐 어떻게 할 것인가?

위에서 보듯이 다각형의 안이 칠해지지 않아 타원꼴 밑의 네모꼴 quad 가 보인다. 이것은 색으로 모양의 내부를 채우지 않고 외각선만 그렸기 때문이다. 이와 만찬가지로 noStroke은 외각선을 그리지 않고 다각형의 내부만 채워 칠할 때에 쓴다. 다시 내부를 칠하거나 외각선을 그리고 싶으면 stroke 나 fill 함수를 호출해야만 한다.

곡선을 그리는데에는 직선을 그릴 때보다 약간 복잡하다.  곡선을 지정할 때에는 곡선의 방향과 곡률을 지정해야 하기 때문에 눈에 보이지 않는 비가시 정보를 제공해야 한다. 프로세싱은 curve( ) 와 bezier( ) 함수로 곡선을 그린다.

curve(x1, y1, x2, y2, x3, y3, x4, y4);
bezier(x1, y1, x2, y2, x3, y3, x4, y4);

curve( ) 함수의 첫째와 둘째 인수는 곡선의 시작점의 자리표를 대입하고 마지막 두 인수는 곡선의 두 번째 점의 자리표를 대입한다.  가운데 인수들은 모양을 정의하는 인수들이다.  (이 정의들은 베타버전에 가면 바뀐다- 역자주)

bezier( ) 함수의 첫 두 인수에는 곡선의 첫점의 자리표, X, Y를 대입하고 마지막 두 인수에는 곡선의 끝점의 자리표를 대입한다.  가운데 인수들은 곡선의 모양을 정하는 값들을 대입한다.

위의 bezier( ) 함수 보기에서 보여 주는 오랜지색 직선은 이 곡선의 성질을 규정짓는 숨겨진 조절점을 나타내 준다.

프로세싱에서 이와 같은 모양을 쉽게 그리는 기본 요소를 제공하지만 여러분은 얼마던지 자유로이 여러분 자신의 모양을 만들 수 있다.(또 그러기를 권장한다.)

프로세싱에서는 좀더 복잡한 모양을 그리기 위하여 beginShape( ) 와 endShape( ) 함수를 제공한다.  beginShape( ) 는 어떤 모양의 꼭지점을 받아 쓰기 시작하고 endShape( ) 에서 받아 쓰기를 멈춘다.   The beginShape( ) 명령은 인수를 받아 들이는데 이 인수는 꼭지점 데이터로 어떤 모양을 그릴 것인가를 지정한다. beginShape( ) 안에 들어 가는 상수는 LINES, LINE_STRIP, LINE_LOOP, TRIANGLES, TRIANGLE_STRIP, QUADS, QUAD_STRIP과 POLYGON 이 모두다.   beginShape( ) 명령 다음에는 vertex( ) 명령이 따르는데 모양을 그리기에 충분한 데이터가 입력되면 endShape( ) 명령을 반드시 써 넣어야 한다. vertex( ) 함수에는 2차원 2D그림을 그리는 경우에는 X, Y 라는 두 개의 꼭지점 자리표를 인수로 받아 들이고 3차원 3D그림을 그리기 위해서는 3차원 공간의 자리표인 X,Y,Z 라는 3개의 실수를 인자로 받아 들인다.  이 모양들은  현재 stroke 색깔로 외각선을 그리고 현재 fill 색깔로 내면을 채워 색칠한다.   (좀더 자세한 정보는 나중에 나오는 color 부분을 참조할 것).

아래와 같은 주석문이 프로세싱 참고문헌에 나와 있다.

그렇다 하더라도 뾰죽다각형만으로도 얼마던지 다양한 모양을 그릴 수 있다.  웹사이트를 검색하면  좋은 보기들을 찾을 수 있을 것이다.

아래에 Proce55ing.net에서 찾은 보기들을 올려 놓았다.

벡타 그리기에 대한 더 자세한 정보를 얻고자 한다면 Processing Form Examples, 이나 Processing Shape reference를 방문하기 바란다.

스크린에 그리거나 나타내게 하는 방법은 더 많이 있지만 2차원 그림에만 주력하였다. 이것만으로도 애니메이션과 유저와의 서로작용을 설명할 수 있기 때문에 일단 그리기 기법의 기초는 접고 시간과 동영상 기법에 대한 설명으로 들어간다.  그런 다음에 다시 그리기 기법에 돌아 올 것이다.

Director에는 score 가 있다. playback head 와 sprite를 위한 tweening methods 가 있다. 비디오라든가 내포된 플래시, QTVR, 사운드 등은 자신의 시간 스페축에서 애니메이트 한다.  동적인 에니메이션을 가미하고 싶으며 프래임하나를 사용하여 ExitFrame 또는 PrepareFrame 이벤트를 사용하여 여기에 코드를 첨가한다. 플래시에서는 타임라인이 있고 조금더 Director 보다 정교한 트윈닝을 지원한다. 액션스크립트만을 사용하는 이는 두 개의 프래임만을 사용하기도 한다.  하나에는 에니메이션을 준비하는 setup에 여기서 루틴을 호출한다.  또 다른 프래임에서는 무한 루프의 코드를 작성한다.  또한 액션스크립트에는 onClipEvent (enterFrame)에 대응하여 작동하는 코드를 적어 넣어 애니메이션을 하기도 한다. 프로세싱에는 타임라인이라 스코어라는 것이 없다.  그러나 Lingo 나 Actionscript와 마찬가지로 프로세싱에서는 여러분 자신의 그리기 루틴을 접목시킨 프래임진행 event handler를  쓸 수 있다.   이제까지는 정적 그림을 그리는데에만 적용되는 프로세싱의 Basic Mode만 보여 주었다. 프로세싱을 돌리는 데에는 Basic Mode를 포함하여 세가지 모드가 있다. 나머지 둘은   Standard Mode. 와 Advanced Mode들이다. Advanced Mode는 훈련용 바퀴가 없는 진짜 자바다.  시간과 움직임을 풀그림하기 위해서는 최소한 Standard Mode를 써야 한다.  이 튜토리알에 필자가 간간히  집어 넣은 링크를 따라 갔던 독자라면 standart mode 로 짠 풀그림을 한 둘 보았을 것이다.  아래에 이 모드로 짠 간단한 풀그림 하나를 보기로 들기로 하자.

int x = 0; void setup( ){     noStroke( ); } void loop( ){     background(190);     rect(x, 0, 5, 100);     x=x+1; }

이 보기에서는 흰색 직네모꼴이 왼쪽에서 오른쪽으로 단 한번 움직인다. 오른쪽에 애니메이트 GIF를 보여 주고 있다.

standard 는 이 setup( ) 이라는 함수가 포함되는데 이 함수는 풀그림이 실행하면 단 한번 돈다.  다음의 loop( ) 함수는 그 뒤에 따르는 중괄호안의 코드를 무한회수 반복 실행시킨다.  Lingo에서 setup 함수는 beginSprite 나 startMovie 와 같은 것이고 loop( ) 함수는 ExitFrame 이나 PrepareFrame에 해당된다. Flash에서는 이 setup( ) 함수가 첫프래임으로 단 한번 실행하고 loop( ) 함수를 호출하는 것과 같다. 여러분은 이 함수들을 조직화하고 캡슐화 하기 위해 스스로 작성할 수도 있다.  자작 함수를 쓰는 법에 대해서 좀더 알고 싶다면 Sun의 자바 강좌 - Implementing Methods section.부분을 참조하기 바란다.

일단 함수를 하나 써서 쓰기 시작하면 프로세싱은 자동적으로 표준 모드(standard mode)로 바뀐다. 그런 다음에는 프로세싱은 함수 바깥에 있는 어떤 명령도 인식하지 못한다.  함수 바깥에 쓸 수 있는 것은 변수를 선언하고 초기화하는 것 뿐이다.  그러므로  초급 모드(basic mode)에서 사용했던 명령들은 모두 setup( ) 이나 loop( )함수 안에 집어 끌어 다 넣어야만 한다.  전역변수 (즉 함수 밖에서도 살아 있는 변수)만이 setup( ) 이나 loop( )함수 밖에서 선언되고 초기화된다.  위의 보기에서 x 가 그런 전역 변수가 된다.

프로세싱에는 framerate(n) 가 있는데 이 함수를 써서 스켓치 전체의 속도를 조절한다.  그러나  스켓치의 일부를 다른 속도로 움직이게 할 수 있다.  이것은 그 부분의 변화(움직임)의 증가량을 늘려 주거나 실수(float)를 써서 변화량을 분수량으로 만들어 줄여 주면 된다.   또 긴 시간을 쓸 때에나 정밀한 시간 조절을 위해서는 프로세싱은 아래와 같은 시간 함수를 제공한다.  아래 함수는 모두 컴퓨터의 시간을 불러 오는 함수들이다.

year( ) // 올해 값을 반환한다. 즉, 2002, 2003, 따위를 반환한다.
month( ) // 이번 달을 반환한다. 즉 1에서 12까지의 수를 반환한다.
day( ) // 오늘 날짜를 반환한다. 즉 1에서 31까지의 수를 반환한다.
hour( ) // 현재 시간 즉, 0에서 23까지의 수자를 반환한다.
minute( ) // 현재 분을 반환한다. 0에서 59까지의 수를 반환한다.
second( ) // 현재 초를 반환한다. 0에서 59까지의 수를 반환한다.

그밖에 특수한 함수 millis( ) 가 있는데 이것은 애플렛이 시작한 (풀그림이 실행하기 시작한) 이후의 경과 시간을 1000 분의 1초 단위로 잰 값을 반환한다.  이 함수는 애니메이션 경과시간을 조절할 때 쓸 수 있다.

millis( ) // 애플렛이 시작한 이후 경과시간을 1000분의 1초 단위로 반환한다.

그리고 애플렛을 지연시키는 (기다리게 하는) 함수가 있다. 이 함수를 잘 쓰면 이 역시 프래임속도를 조절하는데에 쓸 수 있다.

delay(40); // 는 애플렛을 40 milliseconds(1000분의1초) 기다리게 하는 명령이다.

위의 보기는 썩 좋은 보기라고는 할 수 없지만 시간 함수를 간단하게 이해시키기에 충분하다고 본다. 좀더 근사하고 복잡한 시간 함수의 보기를 원한다면 Clock, by Mescobosa, 와 Milliseconds, by REAS를  참조하기 바란다. 이 두 참고자료는 모두 프로세싱으로 작성된 것들이다. 에니메이션에 대한 참고 자료로는 Processing Motion Examples를 찾아가 보기를 바란다.  

마우스와 키보드 사용법은 Flash 나 Director의 사용법이나 비슷하다.  Lingo 에서는 the mouseLoc, the mouseH, the mouseV  그리고 mouseDown따위가 있다. 또 Flash에는 onClipEvent (mouseDown)를 많이 쓴다. 프로세싱에서는 mousePressed( ) 가 마우스를 누를 때 마다 호출된다. 또 mouseReleased( ) 함수가 마우스를 눌른 상태에서 뗄 때 마다 호출된다. 여기에 원하는 액션에 대한 코드를 적어 넣으면 된다.  이것은 loop( ) 다음의 중괄호에 코드를 적어 넣는 것과 마찬가지이다.

void loop( ) {     background(190);     rect(mouseX-5, mouseY-5, 10, 10); } void mousePressed( ) {     fill(0); } void mouseReleased( ) {     fill(255); }

이 보기는 마우스를 따라 다니는 작은 네모꼴을 보여 준다.  마우스를 누르면 정네모꼴은 검정색으로 변한다.

마우스에 대한 자세한 정보는 Processing Mouse reference,를 참조하고 또 exquisite Processing Mouse examples도 찾아 가 보기 바란다.

키보드 입력 역시 Flash 와 Director와 비슷하다.

void loop( ) {     if(keyPressed) {         fill(102, 0, 0);     } else {         fill(204, 102, 0);     }     rect(30, 20, 55, 55); }

이 보기는 키보드의 아무 키나 누르고 있으면 정네모꼴의 색깔이 어두운 빨강색으로 바뀐다. 이 경우 배경색을 다시 그릴 필요가 없다!

키보드 입력은 이벤트 다루기함수 형식으로 사용할 수 있다. keyboard input can also be delivered to you in the form of an event handling function.

int x = 50; int y = 50; void loop( ){     background(190);     rect(x,y,10,10); } void keyPressed( ){     if(key=='w'||key=='W'){         y--;     }else if(key=='s'||key=='S'){         y++;     }else if(key=='a'||key=='A'){         x--;     }else if(key=='d'||key=='D'){         x++;     } }

이 보기에서는 키보드의 특정 키를 눌러 네모꼴을 움직이게 한다.

키보드에 더 자세한 정보는 Processing Keyboard reference, 를 참고 하고 특이한 용법을 보고 싶으면 exquisite Processing Keyboard examples도 방문하기 바란다.

여러분이 작성한 어떤 프로세싱 풀그림도 자바 애플렛을 만들어 웹페이지에 끼워 넣어 "발표" 할 수 있다. 메뉴에서 File -> Export to Web 하거나  단축키 Ctrl+E 를 눌러도 된다. ( export 단추를 눌러도 된다.) 어느 단추인지 모른다면 모든 단추에 마우스를 갖다 대면 풍선도움말 "Export" 가  나타나는 단추를 찾을 수 있다.  이 단추를 눌러 내보내기를 실행하면 "Exporting for web . . ." 라는 메시지를 스테터스 창에서 보게 되고 내보내기가 끝나면 "Done Exporting." 라는 메시지가 나타난다.  그러면 애플랫은 어디에 있을까? Processing 의 sketch folder를 열어 보면 applet라는 디렉토리가 생성된 것을 발견할 수 있다.  이 폴더를 그냥 올려놓기(upload)하면 된다. 그러나 이 폴더에 생성된 디폴트 index.html을 편집하여 올려 놓기를 권장한다.  그러나 그곳에 있는 다른 모든 파일들의 상대경로는 그대로 유지하여야 한다. 여기서의 규칙은 일반적인 HTML 미디아 파일의 규칙과 마찬가지이므로 그대로 따르면 된다.

아래에 내보내기 기능이 만든 파일들과 그 상대경로를 표시하였다.

Processing Folder/
                sketchbook/
                            default/
                                  your_sketch_name/
                                                               applet/
                                                     your_sketch_name.java
                                                     your_sketch_name.class
                                                     your_sketch_name.jar
                                                     index.html

save( ) 와 saveFrame( )
양방향성이 아닌 형식을 내보내기 할 때에는 프로세싱 윈도우를 tif 파일 형식으로 내 보낼 수 있다.  이 경우 saveFrame( ) 함수를 쓰면 된다. 이 함수는 loop( ) 함수안의 코드 끝에 첨가한다. saveFrame( ) 이 여러번 호출되면 screen-0001, screen-0002, screen-0003, 의 순서로 프래임이 저장된다. save( ) 함수는  현 윈도우에 존재하는 이미지를 저장한다.  인수에 파일 이름을 적어 넣어 주면 그 파일이름으로 그림이 저장된다.  이런 일련의 연속 이미지를 쓰면 Quicktime 이나 다른 비디오 풀그림을 써서 이미지를 순차적으로 보여 주므로서 동영상 효과를 얻을 수 있다. 이처럼 프로세싱은 쉽게 이미지를 저장할 수 있는 내장함수가 있지만 노력을 좀 더 들여서 풀그림을 짜면 다른 포맷으로 이미지를 내 보낼 수도 있다. 여기에 Adobe Illustrator에 내보내기한 보기하나를 소개한다.

프로세싱에서 이미지를 스켓치에 올려 놓기는 쉽다. 자바는 JPG 또는 GIF 형식의 그림 파일만 받아 들인다. (좀더 작업을 하면 다른 그림도 올릴 수 있겠지만.)  그림 파일 시스템을 만들고 코드 두어줄 써주면 된다. 먼저 스켓치를 저장한다.  그런 다음 저장된 스켓치가 있는 폴더에 가서 폴더를 열어 보면 data 라는 하위 폴더가 생성되어 있는 것을 확인할 수 있다. 그 폴더에  불러다 쓸 그림 파일을 저장한다.   아래에 디렉토리 구조를 보여 준다.  

Processing Folder/
                sketchbook/
                            default/
                                  여러분이 만들어 저장한 스켓치 폴더/
                                                               data/
                                                                  불러다 쓸그림.gif

보기를 들자면 내가 image_example_1 라는 스켓치를 만들어 Cy Twombly가 그린 아래와 같은 이미지 twombly.jpg를 올려 놓을 생각이라면 이그림 파일을

아래와 같은 폴더구조를 갖도록 배치하여야 한다.에

Processing Folder/
                sketchbook/
                            default/
                                  image_example_1/
                                                               data/
                                                                  twombly.jpg

그런 연후에 아래와 같은 코드를 적어 넣는다.

BImage 란 이제 불러다 스크린에 그릴 그림을 담을 객체다. b 는 이 개체의 이름(인스턴스명)이다.  image( ) 는 바로 이 그림을 스크린에 그리라는 명령이다.  그 구문 형식은 아래와 같다.
image(BImage, x, y, 너비, 높이);
위에서 너비와 높이는 생략할 수도 있다.  그러면 그림은 제 크기로 그린다. l

데이터 폴더에 있는 그림 말고 URL 주소를 가진 그림도 올릴 수 있다.

이미지에 관하여 자세한정보를얻고 싶으면 프로세싱의 참고문헌을 참조하기 바란다.  여기에 그 부분 Loading_and_Displaying이 있다. 또 이 지식에 기반을 두고  순차적 이미지 (video footage)를 올릴 수 도 있다. 좀 더 재미 있는 보기를 원한다면 Processing Image Examples를 보기 바란다.

 

내재적으로 2차원 환경에 3차원을 도입한다는 것이 과연 타당하냐 하는 논란은 많았다. Flash  의 경우 제3자 벤더들이 각가지 3차원 도구를 제공하고 있다.  Director의 경우에는 최근에야 3차원 벡타 그래픽스 스프라이트를 덧 입히듯 도입하였다. 그러나 그 사용법이 너무 복잡하여 대부분의 유저들은 감히 배울 엄두조차 내지 못하는 형편이다. 프로세싱에서 3차원이란 단순히 z-축 하나를 더 도입하는 것 뿐이다.

vertex(x, y, z);
line(x1, y1, z1, x2, y2, z2);
bezierVertex(x, y, z);
curveVertex(x, y, z);

 

box(size);
box(width, height, depth);
sphere(size);

translate(58, 48, 0); rotateY(0.5); box(40);
noFill( ); translate(58, 48, 0); rotateY(0.5); box(40);
lights( ); translate(58, 48, 0); rotateY(0.5); box(40);
noStroke( ); lights( ); translate(58, 48, 0); rotateY(0.5); box(40);
noStroke( ); lights( ); translate(58, 48, 0); sphere(28);

여기서 주목할 것은 box 나 sphere 는 위치의 자리표를 묻지 않는다는 점이다. 그 대신 translate 와 rotate를 써서 입체의 위치 자리표와 그 지향을 지정한다. 그리고   scale  과  push 와 pop 이라는 한쌍의 명령어를 써서 병진운동과 회전운동을 잘 조직적으로 갈무리하고 불러 오고 한다. 3차원 그리기를 어떻게 조직화하고 갈무리 하고 불러 오고 하는 기법을 배우려면 Processing Transform Reference 와 Processing Transform Examples를 방문하기를 바란다.  물론 이런 변환에 관심이 없다면 이런 방법이  있다.

또 주목할 점은 lights( ) 와 noLights( )용법이다.  조명을 사용하면 3차원 물체에  명암을 나타낼 수 있다. 3차원 입체에 대한 조명에 관하여 배우고 싶으면 Processing Lights Reference.를 참조하기 바란다.

"뭐 그게 3차원의 전부야?"

아마도 여러분은 이것으로는 성에 차지 않을지 모른다. 그렇다면 이것만으로도 얼마나 훌륭한 작품을 만들 수 있는지 직접 아래에 가서 프로세싱만으로 마든 무른모들을 둘러 보기 바란다. Processing Software. 그리고 이것은 오진 시작일 뿐이라는 점에 유의하기 바란다.

플래시에서 픽셀을 제어하기는 아직도 요원하다. 디렉터에는 이제야 SetPixel 과 GetPixel 를 도입했다. (그래서 디렉터를 좋아 하는 한 유명한 양방향성 미디아 아티스트는 SetPixel이라 니크네임을 쓰기까지 한다.)  그러나 Director는 아마도 픽셀을 다루는 시시템으로는 가장 느린 무른모일지 모른다. ITP의 Danny Rozin 교수가 가르치는 The World - Pixel by Pixel 이라는 강의를 수강하는 학생은 거의 모두가 C 로 풀그림을 하는데  C가 유일하게 자신들의 컨셉 목적을 달성케 해주는 빠른 속도를 보장하기 때문이다.  (Lingo 와 MAX 만이 유일한 대안이 되고 있다.)   그래서 그 과목을 듣는 학생들은 C 강의를 듣는 것이 유행이 되다 싶이 되었다.  프로세싱의 픽셀작업은 Lingo 보다 훨씬 빠르며 말할 것도 없이 훨씬 간단하다. 자바의 픽셀 작업은 C 의 픽셀보다는 느리다는 것은 사실이지만 프로세싱은 C 보다 배우기 쉽기 때문에 Danny Rozin 의 강의를 듣는 학생들은 프로세싱을 쓰기 시작하지 않을까 예상하고 있다.


get(x, y); // 정수를 반환한다.
set(x, y, color);
pixels[index]; // 출력 화면의 픽셀 배열

int width = 100; int height = 100; BImage b; // declare variable "b" of type BImage b = loadImage("basel.gif"); image(b, 0, 0); for (int i=30; i<(width-15); i++) {     for(int j=20; j<(height-25); j++) {         color here = get(30, j);         set(i, j, here);     } }

이와 같은 픽셀 제어 기능을 갖게 되면 여러분 자신의 그리기 루틴을 만들어 낼 수도 있다.  여기에 투명도를  제어하는 풀그림 보기가 있다.  프로세싱으로 Director의 ink 대부분을 만들어 낸다는 것도 그리 어려운 일은 아니다.  여기에 점선 그리기 함수의 보기가 있다.

픽셀 다루기에 대해 더 자세한 정보를 원한다면 Processing Image reference 와 Processing Image Examples.를 참조 바란다.

현재 프로세싱에서는 프로세싱 특유의 폰트 형식을 써서 문자 출력 시시템을 구축하고 있다. 프로세싱 제작자들은 끌어오기(import)메뉴 아이템을 탑재하여 상당히 다양한 폰트를 쓸 수 있게 배려하였다.  현재 프로세싱에서 쓸 수 있는 폰트 타입을 보려면 여기를 클릭 해 보기 바란다.  아래에  문자출력을 포함하는 간단한 풀그림을 보기로 내 놓았다.  이 풀그림을 복사해서 붙여 넣기 한 다음 풀그림을 실행시켜 보기 바란다.  아마도 에러가 나올 것이다.

size(200,100); background(#FFFFFF); fill(#000000); BFont f = loadFont("Bodoni-Italic.vlw.gz"); textFont(f, 50); text("handglove", 14, 60);

에러 메시지는 Bodoni-Italic.vlw.gz 찾을 수 없다는 오류메시지일 것이다. 그 이유는 지금 불러 쓸 폰트를 data 폴더에 끌어오기를 하지 않았기 때문이다. (데이터 폴더가 무엇을 뜻하는지 모르는 독자는 이 튜토리알의 이미지 출력 부분을 다시 한번 읽기 바란다. ) This is because you have not yet imported the font file into your data folder. (see the images section of this tutorial for more information on your data folder). 먼저 원하는 글자체를 선택  한 다음 프로세싱 폴더에 있는 fonts 폴더에 가서 골라 놓은 폰트를 복사해다 스켓치 폴더의 data 폴더에 복사해 놓는다.  그런 다음 풀그림을 돌리면 에러 메시지 없이 문자가 잘 출력될 것이다.

BFont f = loadFont( "Bodoni-Italic.vlw.g