processing웹사이트(www.processing.org/download)를 방문하여 해당하는 OS에 맞는 최신버전 processing을 다운로드 받는다.
- 윈도우의 경우 .zip파일로 압축되어 있다. 더블클릭하여 원하는 폴더에 압축을 푼다. 어디에 저장하던 중요한 것은 해당하는 폴더를 찾아 processing을 실행한다는 것이다. 해당하는 폴더로 이동하여 processing.exe를 실행한다.
- Mac OS X version은 disk image (.dmg) 파일이다. Processing icon을 Applications 폴더로 이동한다. 만일 다른이의 컴퓨터를 이용하는 경우, 즉, 해당 퍼미션이 없는 경우 본인은 Applications folder를 수정할 수 없을 것이다. 말하자면 Processing icon을 Application폴더로 이동할 수 없을 것이다. 그렇다면 데스크탑 폴더로 이동하고 Processing icon을 더블클릭하여 실행한다.
- Linux의 경우 version은 .tar.gz 파일일 것이다. 리눅스에 익숙한 이용자라면 파일을 home 디렉토리에 다운로드하고, terminal 창을 연후, 아래와 같이 입력한다:
tar xvfz processing-xxxx.tgz
(xxxx를 나머지 프로세싱의 버젼인 파일명으로 대치한다. 아래와 같이 폴더로 이동한다:
cd processing-xxxx
그리고 아래와 같이 실행한다:
./processing
문제가 없다면, 아래와 같이 Processing window가 보일 것이다. 각 설치한 사람마다의 컴퓨터가 다를 수 있다. 때문에 만일 제대로 실행되지 않는다면 troubleshooting page 을 방문하라. 가능한 해결책을 찾을 수 있을 것이다.
프로세싱 개발환경
(The Processing Development Environment.)
당신의 첫번째 프로그램
당신은 지금 프로세싱 개발환경(Processing Development Environment (or PDE))을 실행하고있다. 그렇게 복잡하지 않은데, 큰 면이 텍스트 에디터이고, 그 위에 그리고 Processing로고 아래 줄로서 툴바를 볼 수 있다. 텍스트 에디터 아래에 한 줄 정도 텍스트를 표현할 수 있을법한 칸이 있는데 에러 메시지와 관련된 줄이고, 그 아래는 보다 상세한 기술적인 에러 정보 또는 프로그래밍의 디버깅 등 프린트와 연관된 콘솔창이다.
Example 1: 원(Ellipse) 그리기
에디터 창에 아래와 같이 입력해보자.:ellipse(50, 50, 80, 80);
이 한 줄의 코드가 의미하는 바는 "왼쪽에서 오른쪽으로 50 pixels, 위에서 아래로 50 pixels에 중심이 있고, 너비 80, 높이 80의 원을 그려라."이다. 실행버튼을 누르고, 디스플레이 창이 나타나면서 아래와 같은 그림이 표현될 것이다.:
만일 정확히 입력되었다면, 디스플레이 창에 아래와 같이 표현될 것이다.:
만일 정확히 입력되지 않았다면, 메시지 영영이 붉은색으로 변하면서, 코드에러에 대해 불평을 늘어놓을 것이다. 만일 이러한 일이 생겼다면, 여러분들은 코드를 정확히 복사, 입력했는 지 확인해 보아야할 것이다.: 숫자는 정확히 괄호 안에 원의 위치를 나타내는 두개의 숫자, 원의 크기를 나타내는 2개 합해 4개가 있어야하며 각 숫자를 구분하기 위해 쉼표를 각 숫자 사이에 입력하여야 한다. 그리고 마지막으로 세미콜론으로 코드를 마친다.
가장 어려운 부분중의 하나는 여러분들은 프로세싱의 구문(Syntax)에 구체적이고 특정해야한다는 사실이다. 프로세싱 소프트웨어는 여러분들의 다양한 형식의 코드를 이해할 수 있을 만큼 충분히 스마트하지않다. 때문에 문장의 위치에 까다로울 수 있고, 여러분들은 실습을 통해 익숙해 질 수 밖에 없다.
다음으로 보다 흥미로운 스케치에 대해 다뤄보자.
Example 2-2: 원 만들기
에디터에 작성했던 한 줄의 코드를 지우고 다음을 시도해보자.:
void setup() {
size(480, 120);
smooth();
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
이 프로그램은 너비 480 pixels 높이 120 pixels의 윈도우 창에, 마우스 포지션(x, y)에 따라 너비 80 pixels, 높이 80 pixels의 원을 그리는 것이다. 마우스를 클릭할 때마다 원은 검정색으로 바뀐다. 다음에 보다 자세히 각각의 요소에 대해 설명하기로하고, 지금은 코드를 실행하고, 마우스를 움직이고, 클릭하며 경험해보자.
Show
지금까지 단지 실행버튼을 사용하며 숙지했음에도, 바로 다음 칸에 있는 정지 버튼이 무슨일을 하는 지 예상했을 것이다.:
만일 여러분들이 위의 버튼을 이용하지 않는다면, 스케치 메뉴의 숏컷인 Ctrl-R (or Cmd-R on the Mac)을 이용하여 실행할 수 있다. 두번째 실행메뉴인 Present가 활성화되면 스케치디스플레이 이외의 나머지를 초기화시킨다.
툴바에서 Present를 실행시키기 위해서 Shift key 누른체 실행 숏컷을 실행할 수 있다.
Save
다음으로 중요한 명령은 저장하기이다. 툴바에서 아래를 표시하는 화살표이다.:
파일 메뉴(file menu)에서도 찾을 수 있다. 디폴트에서 프로세싱 프로그램은 "sketchbook" 폴더에 저장함으로서 쉽게 여러분들의 프로그램들을 수집하고 접속할 수 있다. 여러분들은 툴바의 오픈 버튼(위로향한 화살표)을 누르면 스케치북 폴더에 있는 여러분들이 작성한 프로그램들인 스켓치들을 볼 수 있을 뿐 아니라 프로세싱 소프트웨어를 설치했을 때 같이 설치된 예제스케치 리스트들도 볼 수 있을 것이다.:
여러분들의 스케치들을 자주 저장하는 것은 좋은 생각일 것이다. 항상 다른 시도를 할 경우, 다른 이름으로 저장을 해 둔다면, 쉽게 이전 버전으로 돌아갈 수 있을 것이다. 특히 프로그램이 제대로 실행되지 않을경우 도움이 될 것이다. 여스케치메뉴의 스케치폴더를 통해 쉽게 스케치파일이 어디에 저장되어 있는 지 볼 수 있을 것이다.
여러분들은 또한 새로운 스케치 파일을 툴바의 뉴버튼을 눌러 생성할 수 있다.:
이 버튼은 현대 에디터에 입력한 내용을 초기화하여 빈 페이지로 대체시킨다 Shift 버튼을 누른채로 뉴버튼을 누를 경우 새로운 창과 동시에 새로운 스케치파일을 생성시킨다. 열기 버튼도 같은 방식으로 작동한다.
Share
다른 주제는 당신의 작업을 공유하는 것이다. 툴바의 Export 버튼을 눌러 웹 컴포넌트들을 생성한다.:
Export 버튼은 웹서버에 업로드하기 쉽도록 당신의 코드와 필요한 html파일 등을 applet이라는 폴더안에 저장한다. Export한 후 applet폴더는 데스크탑에 열릴것이다. PDE 파일은 소스코드이고, JAR 파일은 프로그램이다. HTML 파일은 web 페이지이다. 그리고 GIF 파일이 프로그램이 열리는 동안 표시될 것이다. index.html을 더블클릭하면 웹브라우저에 당신이 생성한 스케치가 나타나는 것을 볼 수 있을 것이다.
NOTE: 만일 웹브라우저가 자바사이트로 이동하고 JRE업데이트를 요구한다면 아래를 참고.
http://code-image.blogspot.com/2011/07/install-java-and-plugin-for-firefox.html
applet folder는 export된 스케치를 포함한다.
NOTE: applet folder는 Export를 실행할 때마다 이전 파일들과 폴더를 지우고 새롭게 생성되기 때문에 만일 이전 파일들을 보존하고 싶다면 Export를 실행하기 전, 폴더를 이동하거나 이름을 변경하는 것이 좋음.
당신은 또한 file메뉴에서 Export Application을 발견할 수 있을 것이다. Export to Application은 각 운영체제에 맞는 Application을 생성한다. 이것은 더블클릭 가능한 당신의 프로젝트 버젼을 생성하는 가장 쉬운 방법이다.
Export to Application menu.
Shift를 누른 상태에서 Export를 누르면 Export to Application을 실행할 수 있다.
Examples and Reference
Learning how to program with Processing involves exploring lots of code: running, altering, breaking, and enhancing it until you have reshaped it into something new. With this in mind, the Processing software download includes dozens of examples that demonstrate different features of the software. To open an example, select Examples from the File menu or click the Open icon in the PDE. The examples are grouped into categories based on their function, such as Form, Motion, and Image. Find an interesting topic in the list and try an example.
If you see a part of the program you're unfamiliar with that is colored orange (this means it's a part of Processing), select its name, and then click on "Find in Reference" from the Help menu. You can also right-click the text (or Ctrl-click on a Mac) and choose Find in Reference from the menu that appears. This will open the reference for the selected code element in your web browser. The reference is also available online.
The Processing Reference explains every code element with a description and examples. The reference programs are much shorter (usually four or five lines) and easier to follow than the longer code found in the Examples folder. We recommend keeping the reference open while you're reading this book and while you're programming. It can be navigated by topic or alphabetically; sometimes it's fastest to do a text search within your browser window.
The reference was written with the beginner in mind; we hope that we've made it clear and understandable. We're grateful to the many people who've spotted errors over the years and reported them. If you think you can improve a reference entry or you find a mistake, please let us know by clicking on the link at the top of each reference page.
This tutorial is for Processing version 1.1+. If you see any errors or have comments, please let us know. This tutorials is from the book, Getting Started with Processing, by Casey Reas and Ben Fry, O'Reilly / Make 2010.
