[2기 부산 배보람] develop visually oriented applications by Processing

이번에 소개할 것은 Processing 이란 오픈 소스 프로젝트 입니다. 

얼마전 부산 멤버십 신입 회원들이 Processing을 이용한 핵카썬을 무박 2일동안 진행하는 걸 지켜 봤었는데 

짧은 코드로 상당한 그래픽 효과를 만들어 내는 모습이 상당히 인상 깊었습니다. 

먼저 한번 보는는게 나을 것 같아서 프로세싱으로 만든 예제를 첨부 합니다. 

마우스를 올리고 클릭을 해보세요 ^^ 

출처 : http://www.openprocessing.org/sketch/8062

위의 사이트로 들어 가면 관련한 소스 코드를 확인 할 수 있습니다. 

그렇게 복잡하지 않은 코드로 상당한 효과를 쉽게 만들어 낼 수 있다는걸 확인 할 수 있을 겁니다. ^^ 

 

프로세싱은 오픈 소스 프로젝트로, MIT 미디어 연구소의 Casey Res와 벤자민 프라이라는 능력자가 시작한 open 프로젝트 입니다. 얼마 만져 보진 못했지만 프로세싱이 제공하는 에디터로 작성한 코드는 윈도우,맥,리눅스에서 모두 사용 가능하도록 추출 가능합니다. 심지어 웹과 안드로이드 까지 지원을 하고 있습니다. 

우선은 설치를 위해서 http://processing.org/ 에 접속을 해 보겠습니다. 

Overview페이지에서 확인해 보니 

Processing consists of:

• The Processing Development Environment (PDE). This is the software that runs when you double-click the Processing icon. The PDE is an Integrated Development Environment (IDE) with a minimalist set of features designed as a simple introduction to programming or for testing one-off ideas.
• A collection of functions (also referred to as commands or methods) that make up the “core” programming interface, or API, as well as several libraries that support more advanced features such as sending data over a network, reading live images from a webcam, and saving complex imagery in PDF format.
• A language syntax, identical to Java but with a few modifications.
• An active online community, based at http://processing.org.

  

개발을위한 위한 툴을 지원하고 문법이 자바와 비슷하다고 하는 것을 확인 했습니다. 

원래는 디자이인 관련 일을 하시는 분들이 많이들 배운다고 합니다. 자바랑 비슷하다고 하니 프로그래머들도 쉽게 슥득 할 수 있을 것 같습니다. ^^ 

저는 다운로드 페이지에서 windows 32-bit용 PDE를 다운로드했습니다. 

편집기는 상당히 심플하게 구성 되어 있는데 

가운데 자리 잡은 텍스트 에디터를 기준으로 바로 아래 회색 띠 부분이 메시지 영역, 그 아래 검은색 공간은 콘솔 출력 부분입니다. 

가장 기본이 되는 원을 한번 그려 보겠습니다. 

텍스트 에디터에서  아래와 같은 함수출 코드를 적고 

ellipse(50, 50, 80, 80);

toolbar에 있는 재생버튼을 누르면 결과가 실행이 됩니다. 

또 다른 예제를 한번더 보겠습니다. 

 

void setup() {
  size(480, 120);
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

간단하게 설명하면 창을 480,120 크기로 생성하고 

원을 마우스 포언티를 중심으로 그리는데 마우스 클릭을 하면 검은색 클릭을 안하면 흰색으로 그리는 예제 입니다. 

지금까지 간단하게 hello word 수준으로 프로세싱의 맛을 한번 봤습니다. 

사이트에 좌표계, 색상, 객체, 2차원, 3차원등 종류 별로 강의가 준비 되어 있습니다. 관심이 생기신 분들은 

이 강좌를 보고 한번 배워 보시면 금방 익숙해 질 수 있을듯하네요 ㅎㅎ 

이 사이트 뿐만아니라 http://www.openprocessing.org/ 곳도 있습니다. 

 

이곳은 강좌뿐 아니라 사람들이 자신이 만든 소스 코드를 공유 하고 있는데 여기 있는 것들을 조금만 응용해도 

재미있는 것들을 많이 만들어 보실수 있습니다. 

실제로 부산멤버십에서도 프로젝트에 프로세싱을 적용한 사례가 있었는데 프로젝트가 상당히 있어보이는효과(?)가 있었습니다. ㅎㅎ

여러분들도 한번 프로젝트에 프로세싱을 적용해 보는건 어떨까요? 

이상 포스팅을 마치겠습니다.