vvvv gamma : Definitions 활용하기 / week4

 

 

 

 

 

 

첫번째 예제는 비교적 간단하다.

원이 계속해서 움직이고 마우스를 가져다대면 서서히 작아지며 랜덤한 소리가 들린다.

 

 

 

 

 

 

핵심적인 부분은 이 부분이다.

WandererCircle은 기존에 존재하는 노드가 아닌, 직접 커스터마이즈한 노드이다.

노드를 어떻게 하면 커스터마이즈하여 만들 수 있는지 살펴보자.

 

 

 

Definations 활용하기 

 

vl 파일은 마치 한장의 종이와 같다.

앞면에는 노드 패치(Application)가 있고 뒷면에는 Definations이 있다.

 

 

 

 

 

 

document를 눌러 Definitions을 눌러준다. 숏컷은 Alt+Shift+A

 

 

 

 

 

 

뒷면이 펼쳐지면 process 노드를 추가한다. (이탤릭체로 써있는)

 

 

 

 

 

 

원하는 노드 이름을 지어준다. (더블클릭을 통해 수정 가능)

 

 

 

 

 

 

오른쪽 마우스를 눌러 Open을 누르면 새로운 패치가 열린다.

 

 

 

 

 

 

WanderingCircle 노드를 열어보면 움직이는 원을 만드는 패치 내용이 담겨있다.

 

 

 

 

 

 

중요한 것은 밖의 패치에 다른 노드와 연결할 수 있도록 input핀과 output핀을 만들어주는 것이다.

직접 노드를 검색해서 핀을 추가하고 값을 받거나 내보내고 싶은 인풋/아웃풋 값과 연결해도 되지만,

 

 

 

 

 

 

원하는 인풋을 extend하고 ctrl을 누르며 놓으면 자동으로 인풋핀이 생겨난다.

(아웃풋도 마찬가지로 구성하면  된다.)

 

 

 

 

 

 

 

 

 

 

 

다시 패치가 어떻게 구성되어 있는지 살펴보자.

 

Wandering의 첫번째 인풋 Radius에 RandomSpread가 연결되어있다.

여기서 사용한 RandomSpread는 1차원짜리로 랜덤한 Float Spread를 내보낸다.

 

Center을 0.2, Width를 0.2로 설정하고 개수는 16개로 했다.

이것의 의미는 0.2를 기준으로 width의 절반, -0.1을 뺀 0.1부터 0.1을 더한 0.2까지의 값을 랜덤하게 내보낸다는 의미이다.

이 Spread를 ForEach를 통해 개별로 나누어 Radius값으로 넘겨준다.

 

Speed 인풋 역시 이와 같이 RandomSpread를 이용해 전달하고 있다.

보면 앞선 RandomSpread보다 소수점 4자리까지 더 세세하게 조정하고 있다.

이는 Configure에서 조정가능하다.

 

 

 

 

 

 

또한 눈여겨 볼만한 부분은 Index IOBox의 활용이다.

Index는 for each 문에서만 생성가능한 노드다.

for each 안에 들어오는 값의 개수에 하나씩 인덱스 넘버를 달아준다.

예를 들어, 현재 count값이 16이므로, for each를 거치면서 0부터 15까지의 인덱스가 생성된다.

+를 통해 인덱스값에 60을 더해주어, 60부터 75까지의 숫자가 Wandering Cilrcle에 전달된다.

 

또한 WanderingCircle의 두번째 인풋에는 (MousePosition을 연결했다.

 

 

 

 

 

 

 

 

 

 

 

Wandering Circle 노드를 살펴보자.

 

 

 

 

 

 

Radius는 Circle(join)과 연결되어 있다. Center에는 Wanderer에서 내보낸 원의 위치값을 연결했다.

 

Circle(join) : (in) - Center(Vector2), Radius(Float)

(out) : Circle

 

CircleContainsPoint : (in) - Circle, Point(Vector2)

(out) - Boolean

=> 원안에 포인트가 있으면 True를 반환한다.

 

 

 

 

 

 

CircleContainsPoint의 Boolean 값을 Switch와 연결하여 True면 원의 크기가 1로, False면 0.8로 설정되도록 했다.

이제 마우스가 원위에 있으면 원의 크기가 커진다.

또한 Damper를 통해 한번에 크기가 바뀌는게 아닌 서서히 바뀌는 애니메이션을 추가하였다.

최종적으로 Circle과 연결되어 있는 TransformSRT의 Scaling Input에 연결되어 있다.

 

 

 

 

 

 

원 위 숫자 텍스트가 붙는 부분이다.

input핀의 index값들이 ToString으로 연결된다.

 

ToString : (in) - Input(T3)

(out) - String

=> 인풋을 받아 문자열로 반환한다.

 

 

 

 

 

 

마우스를 가져다 대면 소리가 나오도록 한다.

먼저 미디 노드를 사용하고 싶다면, VL.Midi 라이브러리를 추가해야 한다.

 

NoteOut : (in) - Play(Boolean), Note Number(Float32), Velocity(Float32), Channel

(out) - Result

=> Play가 True가 되면 Note Number의 음을 내보낸다.

 

MidiOut : 음을 들려주는 노드.

 

NoteOut의 Play가 CircleContainsPoint의 아웃풋에 연결되어 있다.

또한 Note Number는 각각 받아온 인덱스 값으로 설정한다.

이는 마우스가 원 위에 있을 때 특정 음을 들려준다.

 

 

 

 

 

하지만 윈도우 밖에 마우스가 나가 있어도 음이 들리는 현상이 있다.

이런 경우를 대비해 원들이 돌아다니는 범위를 더 작게 한정해야 할 것 같다.