[vvvv] 2. Renderer(GDI,EX9), Group, LFO, Mouse 노드
.
.
.
미루고 미루다 다시 tut를 써보네요...
제가 글을 쓰는 이유는 많은 분들에게 VVVV를 공유하려는 생각도 있고, 사람은 망각의 동물인지라 몇 주만 안 쓰면 금방 다 까먹습니다. 그래서 제가 나중에 다시 기억을 되살리기 위해 기록을 해 두기 위한.... 그런 두가지 의미가 있습니다.
지난 번에는 VVVV의 설치와, 기본 인터페이스 설명, 그리고 Renderer에 대해 간단히 알아보았습니다.
오늘 할 내용은 Renderer(GDI) 와 GDI 렌더러에서 나타낼 수 있는 몇가지 노드들, 인스펙터(Inspector), 그리고 작품에서 조작을 할 때 유용하게 쓰일 수 있는 Mouse 노드에 대해 설명할까 합니다.
지난 번에 설명했지만, 다시 Render에 대해 알아봅시다.
Renderer(GDI), GDI 노드들
패치 창에서 (VVVV를 실행하고 나오는 흰 바탕을 패치창이라고 합니다.. 아직 초반이니 반복적으로 설명을 드립니다), 마우스 좌측 더블클릭을 하면 노드를 검색할 수 있는 검색창이 나옵니다. 여기에 renderer라고 쳐(?)넣으면 여러가지의 Renderer 노드들이 나옵니다. 용도가 제각각이고 저도 다 써보지 않았지만, GDI와 EX9에 대해 설명을 드릴려구요. 먼저 GDI 렌더러를 선택해서 만들어봅시다.
그럼 위 그림처럼 창이 뜰텐데 별개의 창으로 나와있는 것을 패치창 안에다가 넣기 위해서 ALT+2 를 누릅니다.(이거도 전에 설명했지만 금새 까먹습니다)
그리고 노드 검색창에서 gdi 만 쳐보면, 위 처럼 gdi 노드들이 여럿 나옵니다. 안타깝게도 gdi 렌더러 창에서 표현할 수 있는 것은 위의 gdi 노드들이 전부입니다. 다시 말해 표현이 상당히 제한이 되어있죠. 그래도 우선 해봅시다.
gdi로 검색후 나오는 것들 중에 아무거나 맘에 드는 것들을 서너개 선택해 봅시다. 저는 Line, Point, Circle, HLine, Text를 선택했습니다.
아! 잠시 여기에서 잠시 부가 설명 들어갑니다.
Node와 Inspector?
노드에는 인풋과 아웃풋 단자(혹은 핀이라고 합니다)가 있습니다. 노드의 윗쪽에 찍혀있는 점들이 인풋(Input)이고, 아랫쪽에 찍혀있는 점들이 아웃풋(Output) 입니다. 인풋 핀 쪽에서 이러저러한 설정을 해주면, 그 설정에 따른 모양새로 아웃풋으로 나오게 됩니다.
다시 원래 하던걸로 돌아가서.. GDI렌더러에 GDI 노드들을 나타내주려면 노드들을 바로 렌더러의 인풋으로 붙여주면 되지만, 그렇게 하면 하나의 노드밖에 붙일수가 없겠죠? 그래서 사용하는 것이 Group 노드입니다.
Group 노드는 원래는 2개의 인풋밖에 없지만 그 갯수를 늘릴 수 있습니다.
Group 노드를 좌클릭으로 선택 후, CTRL+I를 눌러봅시다. 아래 그림처럼 창이 하나 뜰텐데요. 이 창을 인스펙터(Inspector) 창이라고 합니다. 몹시 중요하고 자주 열게 되는 창입니다. 노드들의 속성을 바꿔주는 쉽게 말해서 환경설정 창 같은 거라고 보시면 됩니다.
다시 닫으려면 CTRL+W를 누르시면 됩니다.
위의 창이 뜨면, Layer Template Count 라고 적혀있는 곳의 숫자 2를 8로 입력해봅시다. 혹은 마우스 우클릭으로 드래그 해서 위로 올리셔도 됩니다. 그리고 CTRL+W로 창을 닫아줍니다.
이제는 Group에서 받아줄 수 있는 인풋의 갯수가 많이 늘어났죠? 연결할 노드들보다 넉넉하게 미리 늘려놓으면 좋습니다. 위의 그림처럼 하나씩 연결을 하면 렌더러 창에서 노드들이 다같이 보여지게 됩니다 ㅎㅎ
사실 모든 노드들을 설명할 필요는 없는데요, 왜냐하면 아무 노드나 클릭을 한 후, F1 을 누르면 자세한 설명과 어떻게 사용해야 하는지 예시까지 나옵니다. 그리고 사실 도움말을 보기전에 인스펙터 창(CTRL+I)를 눌러서 그 속성들을 보면 어떻게 쓰는 건지 대충 가다가 나옵니다.
시험삼아 Line 노드를 선택하고, 인스펙터 창을 열어볼까요?
위 처럼 창이 뜨는데요. X1, X2, Y1, Y2, Pen color 등의 속성이 보이시죠? 중학교 때 하던 산수처럼 점의 좌표를 가리키는데, (x1,y1)이 선의 시작점, (y1,y2)가 선의 끝 점을 뜻하는 거에용.
여기서 또 잠시.... 중요한 걸 알려드릴게요. Render는 그 위치에 따라서 좌표값을 가지는데요
그림을 좀 유치하게 그렸죠? 그만큼 유치한 내용입니다. 쉽죠..
가운데가 (0,0) 입니다. 오른쪽 끝이 1이고 왼쪽끝이 -1, 그리고 위로 가면 1, 아래로 가면 -1입니다. 쉽죠? 또 중요한 점은 이 점은 절대 위치가 아니라 비율이라고 보셔야 됩니다. 렌더러 창을 드래그 해서 늘이고 줄인다고 해도 항상 렌더러는 오른쪽 끝이 1 윗쪽이 1 이런식입니다.
네 이제 다음으로 넘어가서 렌더러 창의 두 번째 인풋 핀을 볼까요? 커서를 올려보면 Clear라고 되어있습니다. 기본값은 1로 세팅이 되어있는데 이 옵션을 0으로 바꿔봅시다. 바꾸는 가장 쉬운 방법은 점을 우클릭하고 아래로 드래그 해서 0으로 내리면 됩니다 ㅎㅎ
자, 이제 Circle의 Translate Y값을 우클릭 드래그 해서 한번 올려볼게요. 속성중에 Translate X,Y 라고 되어있는 것은 위치를 의미합니다. 그 값을 바꾸면 도형이 움직이게 되죠.
보이시나요 ㅎㅎ 위 그림처럼 움직일때 그 궤적이 다 남으면서 지워지지 않습니다. 이걸 어떻게 활용하냐구요? 지금 설명하기엔 어려우니 다음에....
Renderer(EX9)
이번에 사용해볼 노드는 EX9 렌더러와 LFO입니다. EX9렌더러는 GDI렌더러와는 좀 다른데, 앞으로 가장 많이 쓰이게 될 렌더러입니다. GDI 렌더러에서는 GDI노드들을 표현하고, 색깔들을 선택해서 뿌려주지만, EX9 렌더러는 도형에 이미지 혹은, 동영상, 캠 영상 등을 입혀서 보여줍니다. 이를 텍스쳐(Texture) 라고 합니다.
아래 예시로 설명해볼까요. 우선 아래 처럼 노드들을 검색해서 만들어보세요.
물론 아랫쪽에 있는 렌더러는 Renderer(EX9)입니다. 그리고 Quad는 사각형 도형을 렌더러에서 보여주는 역할이구요. GDI 노드와는 달리 위치나 크기, 각도 등을 바꿔주기 위해서는 "Transform"이라는 노드를 사용해야 합니다. Transform 2D, 3D가 있지만 우선은 2D로 만들어볼게요.
그리고 또 처음보는 노드가 있는데 LFO 입니다. 이는 Linear Frequency Oscillator 의 준말로 '선형 진동 발생기' 뭐 이런 뜻입니다. Linear라는 말은 일정한 속도로 증가함을 뜻하는 일종의 공대 용어이고, 프리퀀시 역시 주파수를 나타내는 공대 용어지요... Frequency 를 '빈도수' 라고 해석하는 사람은 문과라고 보시면 됩니다 ㅋㅋㅋ LFO의 인풋단자를 보면 Period 라고 있는데 이 값을 늘리고 줄임으로써 속도를 느리게, 혹은 빠르게 조정할 수 있습니다.
Transform 노드를 살펴보면 하나의 아웃풋으로부터 3개의 선이 연결되어있는데, 동일한 값을 세개의 다른 인풋으로 줄 수도 있어요. 저기에서는 Scale X, Scale Y, Rotate 이 값들을 0~1까지 증가시키고 있기 때문에 렌더러에서 저런 모양의 변화를 보여주게 되죠.
Mouse 노드
마우스 노드는 사람과 기계를 이어주는 매우 유용한 인터페이스이지요.. 작품에서 뭔가 조작이 필요할텐데, 이를 위한 도구로는 마우스, 키보드, 혹은 다른 외부기계, 그리고 캠을 통해서도 조작할 수도 있습니다. 우선 마우스의 사용법을 알아봅시당.
위에서 만들었던 움직이는 사각형을 마우스로 움직이도록 개조를 해봅시다.
노드 검색창에서 mouse를 친 뒤, Mouse(Devices Window)를 선택합니다. Devices Desktop 과의 차이점은 아래와 같습니다.
- Mouse(Devices Window) : 렌더러 창 안에서만 마우스를 인식함
- Mouse(Devices Desktop) : 렌더러 창과 상관없이 모니터 화면 전체에서의 마우스 동작을 인식함
보통 렌더러 창 안에서만 동작하는 Devices Window 를 더 많이 쓰는 편입니다.
이제 아래 영상을 따라서 같이 연결해 볼까요
Mouse 노드에서 마우스의 좌표값을 꺼내기 위해서는 Unzip이라는 노드를 사용합니다. Mouse 노드에서는 x,y의 좌표값이 한 묶음으로 나오게 되는데 이를 Unzip으로 받은 뒤, Unzip의 출력 노드에서 마우스의 X좌표값과 Y좌표값을 따로 분리해서 받을 수 있습니다.
마우스의 X,Y 좌표 값을 Transform 의 Translate X,Y에 연결해주면 렌더러 창 안에서 마우스로 사각형의 위치를 이동시킬 수 있습니다. 간단하죠? ㅎㅎㅎ
다음 강좌에서는 키보드의 사용법과, 스프레드(Spread)라는 것에 대해 알아보도록 하겠습니다. 사실 VVVV에서 배울것들이 많진 않습니다. 본인이 어떻게 활용하느냐...에 달려있고 레고처럼 만들기만 하시면 됩니다.
모르시는 내용은 리플 달아주세요
끗.