VVVV gamma tutorial (2) / VVVV gamma 튜토리얼

튜토리얼 영상: Introduction to vvvv For Designers with Joreg

https://thenodeinstitute.org/courses/node20-vvvv-workshop-bundle/lessons/getting-started/topic/introduction-to-vvvv-gamma-for-designers/

(로그인 후 시청 가능)

 

오늘은 1시간 29분부터 다시 따라해보기...

 

- 새프로젝트 열기

이번 프로젝트에서는 마우스에 반응하는 원을 만드려는 모양 (특히 사운드와 함께)

 

 

- 가장 먼저 렌더러 노드를 만들어야 한다.그 다음에는 click노드와 mouse노드를 만든다. (mouse는 카테고리 속에 있는 마우스가 아닌, 일반 mouse 노드를 눌러야한다.)mouse노드가 렌더러에 반영되도록 만드려면, Renderer에 연결해주어야 한다.하지만 circle과 mouse 두개 모두를 연결하기 위해서는 group노드에 먼저 연결하고 이후에 Renderer에연결해야 한다. (물론 뭘 먼저 연결하든지 상관은 없다!)

 

- 원의 색상을 바꿔주기 위해 FromHSL노드를 추가한다. (색을 담당하는 노드인 것 같다.)

 

- 뭔가 circle이 자동적으로 흔들리듯이 움직이기 위해서는 boolean값이 필요한 것 같다.CircleContainsPoint 노드를 추가한다. (input이 circle이고 output은 boolean이다.)하지만 circle노드와 CircleContainsPoint를 연결할 수 없다. 왜일까?circle노드의 output은 layer 타입이고 CircleContainsPoint의 input 타입은 circle이기 때문에.

 

 

이를 해결해줄 수 있는 것이 circle(join) 노드이다.input값들은 vector2, vector3이고 output은 circle이다!CircleContainsPoint의 첫번째인풋에 circle(join)을 연결해주고 두번째 인풋에는 원들의 포지션을 담당할 Mouse 포지션 아웃풋을 연결해준다.

CircleContainsPoint의 아웃풋은 boolean값으로 아직까지 크게 하는 일은 모르겠다.

(우리가 만든 원에다가 마우스를 가져다대면 true로 바뀐다. 물론 지금 0.00으로 되어있는

Radius값을 키워야 그 안에 들어갔을 때 true가 된다!!)

 

 

- 그냥 circle의 Radius 인풋에 circle(join)의 Radius값을 연결시켜주면

화면에 circle(join)의 radius값의 원이 나타난다. 

 

 

- 음악 인터랙션을 넣기 위해서는 MIDI패키지를 이용해야 한다.

패키지란? 수천개의 노드가 들어있는 폴더느낌. 이걸 다 꺼내놓으면 사용자가 혼란스러울테니

패키지라는 폴더로 감싸놓은 것.

우리는 midi패키지 안에 있는 midiOut 노드를 사용해보자.

그리고 또 함께 사용해주어야 할 노드는 noteOut노드이다. 이 두개를 추가해보자.

 

 

이렇게 연결을 해준다.

NodeOut의 두번째 인풋 노트넘버는 0부터 120까지 있고 음을 나타낸다 (60->C(도))

Velocity 노드는 0부터 1까지로 음의 크기를 결정한다.

첫번째 인풋은 boolean인데 그대로 자동 iobox를 만들어보면 toggle이라는게 있다. (네모난거)

그거 추가해서 오른쪽 마우스로 가운데를 눌러보면 소리를 들을 수 있다. (왼쪽 마우스 아님!!)

 

 

CircleContaionsPoint의 아웃풋 boolean값과 NoteOut의 bolean인풋값을 연결하면

우리는 원에 마우스가 닿을때마다 음을 들을 수 있다.

 

 

- 이제 하나의 원이 자동으로 어느정도 움직이는 것을 만들어보자.

wonderer노드 추가.

wonderer노드란? 파티클이나 오브젝트 등.. 약간 idle느낌으로 알아서 랜덤하게 움직이는 모양새를 

만들어줄 수 있는 노드!

우리는 지금 2d를 하고 있으니까 Wanderer(2D)를 추가해주면 된다.

 

 

 

Wanderer의 아웃풋 (랜덤 백터값)을 circle의 인풋(포지션)과 연결시켜준다.

그리고 circle(join)의 center에도 연결해주어야 한다! (그래야 움직이는 원과 소리인식이 연결이 된다.)

 

 

 

- 이제 우리가 만든 원을 여러개를 만들어야 한다.

loop노드를 검색하면 여러개의 loop들이 뜬다.

우리는 만든걸 그대로 여러개 반복해서 복사할거기 때문에 repeat노드를 선택한다.

 

 

- 만든 것들 중에 어떤 노드들을 반복해야 할까? 

위 사진에서 선택되어 있는 노드들이 repeat안의 공간에 들어가야 한다.

반복해야 하는 노드들을 드래그해서 선택한 뒤, 대표적으로 하나의 노드를 잡고 당긴 뒤 스페이스바를 누르면서

repeat 안에다가 넣는다. (뺄때도 원하는 노드들을 선택하고 쭉 당겨서 스페이스바 누르면서 꺼내면 된다.)

 

 

그러면 이렇게 안으로 들어간다. 그런데 circle의 아웃풋이 끊겨 있을 것이다.

그리고 그룹에 다시 연결하려고 해도 안될 것이다.

circle의 아웃풋에는 너무 많은 레이어들이 나오고 있고 (반복되는 원들) group에서 요구하는

인풋은 하나의 레이어이다. 이 많은 레이어들을 나눠서 넣어야 한다.

 

circle의 아웃풋을 클릭하면 repeat네모 맨 아래에 두개의 단이 있다.

그 중 아래 단에 끌어다가 놓는다. Spread<Layer>이라고 뜨는 곳에 놓으면 된다.

그러면 저 튀어나온 부분의 윗부분에 마우스를 가져다대면 Layer이고 

아래 부분에 Spread<Layer>라고 쓰여져 있는 것을 볼 수 있다. (circle아웃풋 끝에 사다리꼴 모양)

즉, 여러개의 circle의 레이어가 각각 분리되어 나오고 있는 중.  (시퀀스 레이어로 나오는 중)

 

 

- 하지만 지금도 group에다가 연결할 수 없다. 나누어져 있는 시퀀스 레이어들을 다시 한장씩 

그룹에다가 넣어야한다. 그러기 위해 필요한 노드는 Group(spectral)이다.

Circle의 아웃풋을 그대로 빼서 Group(spctral)인풋에 넣고 아웃풋은 다시 원래 있던 group 인풋에 연결한다.

그래도 아직은 화면에 아무것도 볼 수 없다.

 

 

 

그 이유는 우리가 얼마나 반복할지 정해주지 않았기 때문이다.

Repeat의 아웃풋을 빼서 놓으면 반복할 숫자를 쓸 수 있다.

10을 쓰면 오른쪽처럼 화면에 10개의 원이 생긴걸 볼 수 있다. (음도 들을 수 있다.)

 

 

모두 다른 음을 낼 수 있게 하려면 어떻게 해야할까?

NoteOut의 NoteNumber을 랜덤값으로 설정하면 될까?

이러면 원마다 고유한 음을 가지는 것이 아니라 매번 다른 음이 호출하게 된다.

 

 

각 원들이 고유한 음을 가지기 위해서는 index노드를 추가해야 한다.

index노드는 loop안에서만 작동하는 특별한 노드이다.

 

 

NoteOut의 NoteNumbers를 Index와 연결한다.

+ 노드를 추가해서 반복때마다 인덱스가 하나씩 늘어나도록 하자.

반복 될때마다 index가 0부터 하나씩 올라간다. 

음의 최저값은 60으로 설정한다. 

확실히는 모르겠지만 5번 반복한다면 0번 원에 60노트, 1번 원에 61노트, 2번 원에 62노트,

3번 원에 63노트, 4번 원에 64노트 이렇게 만들어지는 것으로 보인다.

 

 

 

- 만약 Radius의 값을 더욱 세세하게 바꾸고 싶다면 Radius노드를 휠버튼으로 누른다.

그러면 오른쪽 설정창에서 Precision을 볼 수 있는데 이 값을 높이면 표현할 수 있는 자리값이 늘어난다.

 

 - 참고로 2d로는 그다지 수준 높은 파티클을 만들 수 없다..

고퀄의 파티클 작업을 하고 싶다면 3d로 만들어야 한다고..

 

 

 

- 색을 넣는 것은 FromHSL노드에 Fill노드를 연결해서 이를 다시 Circle의 인풋에 넣는다.

(참고로 아웃풋에서 줄 뺀다음 바로 fill치면 더블클릭 없이도 빠르게 노드를 만들고 연결할 수 있다.)

 

 

 

 

- 색을 랜덤으로 해주고 싶으면 RandomSpread노드를 추가해준다.그리고 RandomSpread노드의 가장 끝 인풋, count에 현재 공의 개수 (repeat value)를 연결한다.이후 RandomSpread의 아웃풋을 FromHSL에 연결해준다.간혹 안될때가 있다.이때는 FromHSL이 refeat범위에 들어오지 않았을 가능성이 크다.. (유독 얘만 이런듯)FromHSL이 repeat범위 안에 들어가 있는지 잘 확인해본다.(스페이스바 눌러서 다시 넣어보자.)

 

색의 계열을 바꾸고 싶다면 RandomSpread의 세번째 인풋 seed의 값을 조정해보자.현재는 1로 해둔 상태.(굳이 IObox로 따로 안빼고 직접 핀을 조정해서 (왼쪽 마우스 드래그) 바꿔도 결과는 같다.)

*참고: 어떤 특정 노드만 다른 노드로 갈아끼우고 싶다면 해당 노드를 누르고 더블클릭해서

바로 다른 노드를 검색하면 된다.

 

 

최종 노드&결과물

 

 

 

- 이제 마지막으로 vvvv에서 결과물을 Export 해보자.

우리가 지금 보고있는 작업 화면의 왼쪽 상단을 보면 네모 버튼이 보이는데 (약간 회색) 

그 버튼을 누르면 Export가 있다. 

 

 

파일 이름을 정해주고 저장될 위치는 그냥 기본으로 지정해주는 폴더로 두었다.

이제 Export만 누르면 마무리인데 Export를 누르니 컴퓨터가 터졌다.

화면이 꺼지고 재부팅되는 현상이 발생했다. 

 

정확한 이유는 모르겠지만 튜토리얼에서 설치 당시 visualstudio를 선택하는 부분을 꼭 체크해주어야 한다고 했고

했는지 안했는지 기억이 안나서 다시 최신버전으로 설치하기로 했다.

 

 

두번째 체크박스 Install Microsoft Build Tools가 체크 되어있는지 꼼꼼이 살피고 재설치 했다.

 

다행히 재설치하자 무리없이 Export가 되었다. 

 

 

출력된 exe파일은 저장 경로를 변경하지 않았다면 위와 같이 gamma폴더 안에 Exports안에 

파일 이름 폴더 안에 있다.  

 

 

 

- 우리가 만든 파티클을 노드화 해보자.

이렇게 만든 파티클을 하나의 노드처럼 만들면 자유롭게 복제도 가능하고 언제든지 불러올 수 있다는 장점이 있다.

(프로그래밍으로 따지면 클래스와 비슷한 역할을 하는 것 같다.

에프터이펙트로 따지면 프리 컴포지션으로 묶어버리는 느낌)

 

 

 

우선 하나로 묶을 애들을 드래그해준다. (여기서는 Renderer, Mouse, 마우스와 연결된 Group 노드를 제외한 나머지 애들.)

그리고 ctrl+x (잘라내기)를 눌러주면 애들이 다 사라져 버린다.

 

 

 

 

 

더블클릭해서 내가 붙이고 싶은 노드 이름을 적고 "Node"를 클릭한다.

만들어진 myParticles노드에 오른쪽 마우스클릭하고 "open" 을 눌러준다.

 

 

 

myParticles 노드 내부가 열리면 텅 비어있는데 ctrl+v를 눌러서 아까 잘라내준 노드 친구들을 다시 붙인다.

이제 메인 페이지의 노드들과 끊긴 인풋들과 아웃풋들을 다시 연결해줄 수 있도록

myParticles노드에 인풋과 아웃풋을 달아주는 작업을 해야 한다.

 

우선 myParticles노드를 다시 Renderer와 연결해야 줘야 하기 때문에

Group아웃풋을 쭉 빼서 ctrl을 누르면서 클릭한다.

 

인풋이 될 Iteration Count도 클릭 후 ctrl을 누르면서 놓으면 input이 생긴다.

(인풋 이름은 자유롭게 바꿔줘도 된다. 이후에는 딱히 직접적인 인풋으로 연결되지는 않는데 

튜토리얼에서 만들길래 따라 만들어본다..)

 

 

CircleContainsPoints의 인풋은 다시 마우스 포지션과 연결해줘야 하므로 

마찬가지로 인풋을 만들어준다.

 

 

 

메인 패치로 돌아가서 myParticles의 인풋에는 마우스를 아웃풋은 다시 그룹과 연결해준다.

다시 잘 작동되는 렌더러 화면을 볼 수 있다.

 

그러면 이 myParticles는 어디에 저장되는걸까?

신기하게도 myParticles 노드를 삭제하고 다시 더블클릭해서 myParticles를 검색해보면

노드로 아예 검색이 가능하다. 삭제해도 언제든지 추가가 가능한 것이다. 물론 여러개 추가도 가능하다!

 

 

 

메인 버튼인 회색 네모 옆에 현재 열려있는 파일 이름이 떠있는데 거기를 누르면 탭이 하나 나온다.

그리고 그 중에 Applications와 Definitions이 있다.

Applications을 누르면 메인페이지(패치화면)가 나온다.

Definitions을 누르면 myParticles가 있는 공간이 나온다.

튜토리얼에 따르면 메인 페이지의 뒷장이라고 생각하면 편하다고 한다. (양면 종이처럼..)

 

 

덩그러니 있는 myParticles 노드..

만약 여기에서 myParticles노드를 삭제하면 영구적으로 삭제되어버린다.

더이상 노드로도 추가 불가능하다.

 

 

 

 

- 이 노드가 뭔지 설명이 필요할 수도 있다.

설명 달기도 물론 할 수 있다. (주석 비슷한 개념인 것 같다.)

 

 

노드 추가하듯이 패치 아무데나 더블클릭해서 원하는 설명을 쓴다.

그리고 엔터버튼을 누른다.

 

 

설명이 달린 것을 볼 수 있다.

더블 클릭하면 내용을 수정할 수도 있다. 

 

 

 

 

하나하나가 너무 낯설지만

언젠간은 멋지게 활용할 수 있기를 바래본다.