3. 프로세싱 드로잉을 위한 기초
프로세싱 드로잉을 위한 레퍼런스 찾는 방법
점, 선, 면은 도형의 가장 기초가 되는 요소이다. 면은 선으로 이뤄져 있고, 선은 점의 연장으로 만들어진다. 이러한 기본적인 특성을 이해하면, 다양한 활용이 가능해진다. 모든 미술작품, 예술작품, 픽셀아트, 애니메이션, 설치미술에 이르기까지 점, 선, 면을 다루지 않는 것이 없다. 모든 비주얼의 시작과 끝인 셈이다.
우리는 쉽게 포토샵, 일러스트, 3d 프로그램들을 사용하면서 캐릭터를 만들고, 웹페이지를 디자인하고, 애니메이션 키를 잡고, 창작물을 만들어낸다. 하지만 단 한 번도 점, 선, 면의 의미를 헤아리면서 뭔가를 만들어내진 않았다. 어찌하다 보니 그림을 그리는 것보다 프로그램으로 브러시를 다루는 게 편하고, 수정하기 쉽고, 저장하기도 쉬워진 것이라 자연스럽게 몸속에, 정신 속에 녹아들어 버린 것이다.
세상을 이루는 가장 최소 단위가 원자라면, 그림을 이루는 가장 최소 단위가 점이라는 것을 이해하면 그 점들을 가지고 얼마나 많은 창작이 가능한지 깨닫게 될 것이다.
우선 뭔가를 그려나가야 되는데, 어디서부터 해야 될지 막막할 수 있다. 일단 명령어를 알아야 써먹을 수가 있기 때문에 우린 그 명령어를 찾아야 한다. 이걸 다 외울 필요도 없고, 어디에 정리할 필요도 없다. 이미 다 정리되어있기에, 잘 모르는 것들은 레퍼런스 검색을 해보자. 단 영어로 검색해야 할 것이다.
그럼 화면부터 만들어보자, 그림 그릴 도화지 즉 스크린을 만드는 것으로 시작한다.
1. 화면 사이즈 정하기
-작업한 소스가 화면으로 보일 크기를 정하는 겁니다. 너무 작으면 잘 보이지 않을 테고, 너무 크면 렌더링 하는데 시간이 많이 걸릴 겁니다. 지금은 소스가 많지 않지만 점점 많아지게 되고, 인터랙션이 실시간으로 일어나는 것을 처리하는 데는 화면 사이즈가 영향을 미치게 되거든요.
-그래서 일단 가로, 세로 600x600 px로 된 화면을 만들도록 할 거예요. 사실 작은 사이즈는 아니지만, 그래도 영상으로 잘 보이려면 이 정도는 돼야 할 것 같아요. 물론 화면을 꽉 차게 만들어주는, 풀 스크린도 적용 가능해요. 나중에 차차 알아보기로 해요.
2. 로컬에서 레퍼런스 찾기
-상단 메뉴/ 도움말 / 레퍼런스라는 메뉴가 있어요.
이걸 클릭하면 http://localhost:8053/reference/index.html 이 페이지가 열릴 겁니다. 이건 로컬에서 열린 거죠. 프로그램을 다운로드할 때 함께 다운로드한 파일이에요. 여기서 모든 명령어를 확인할 수 있어요. 인터넷에 연결되어있지 않아도 프로그램 실행과 도움말을 찾아볼 수 있다는 장점이 있네요. 우리가 찾을 건 [화면 만들기] 뭐 이런 거죠. 검색에서 [screen size]라고 쳐봅시다.
3. 구글 검색으로 레퍼런스 찾기
이 검색 기능은 구글 서치 엔진을 빌려다 쓰고 있나 봐요. 검색을 하니 구글 검색 결과 창이 열리는데,
아래를 보면 size(width, height) -Reference/Processing.org라는 결과창을 선택해서 열어보면 확인할 수 있어요.
size() 디스플레이 창 너비와 높이의 치수를 픽셀 단위로 정의합니다. setup() 함수가 있는 프로그램에서 size() 함수는 setup() 내부의 첫 번째 행이어야 하고, setup() 함수는 스케치 폴더와 동일한 이름으로 코드 탭에 나타나야 합니다.
size(가로나비, 세로 길이)로 화면 사이즈를 정하게 된다는 말이네요. setup()을 사용하는 경우 아래와 같이 사용한다는 말이니 참조하면 되겠어요.
4. 온라인 상태에서 레퍼런스 찾기
이제 온라인 상태에서 명령어를 찾을 때는 이 링크를 사용하는 게 편하겠어요.
https://processing.org/reference
void setup() { // 모든 세팅(공통부분)
size(320, 240); //화면 사이즈
}
void draw() { // 그림을 그릴 함수
background(153); // 배경색
line(0, 0, width, height); // 라인(선) (위치 x, 위치 y, 가로길이, 세로길이)
}
그럼 사용자 화면 모니터 전체를 차지할 수 있는 뷰에서 실행시키고 싶다면 어떻게 하면 될까요? 바로 fullScreen() 함수를 사용하면 된다고 나옵니다. 전체 화면의 픽셀을 사용하는 거죠.
마지막으로 렌더러를 선택할 수 있는
size(가로나비, 세로 길이, 렌더러)로 마지막 함수의 값에 렌더러를 선택할 수 있는 거예요.
렌더러는 다음과 같이 존재해요.
아무것도 안 쓰면 : 2D 예요. OpenGL 호환 그래픽 하드웨어를 사용하는 2D 렌더러.
[P3D] : 3D 처리예요 , 마찬가지로 OpenGL로 구현하는 거죠.
[FX2D] : JavaFX를 사용하는 2D 렌더러예요, 일부 응용프로그램에서 빠를 수 있지만 일부 호환성 문제가 있다고 합니다.
[PDF] : Acrobat PDF 파일에 2D로 직접 그리는 거예요, 고해상도 출력을 위한 벡터로 그리고자 할 때 우수한 결과물을 만들어낸다고 하네요. 라이브러리 참조에 찾아보세요.
[SVG] : 이건 다른 벡터 프로그램으로 가져오거나 티지털 작업을 하는 데 사용해봐요.
저도 아직 다 사용해보진 않았어요, 3D로 오브젝트가 움직이거나 마우스로 화면을 회전시킬 때 P3D를 사용한답니다. 나중에 한 번 써보도록해요.
참고로. Processing3.0 이후로는 setup() 대신에 settings() 함수 안에 size() 함수를 배치한다고 하네요. settings() 참조 페이지를 보면 될 거예요.
오늘 배운 거랑 연관된 용어들이에요.
궁금한 게 있으면 링크를 따라가 보도록 해요!
무언가 명령어를 찾기 위해 레퍼런스에서 검색해서 찾아보는 방법을 알아봤어요.
처음이라 이렇게 자세하게 설명을 해봤고요. 다음 장부터는 빠르게 그려보도록 할게요.
From. h