완전 초짜 VVVV : 노드와 I/O박스 연결

▷노드박스

 VVVV에서 마우스 왼쪽 더블클릭을 하면 위와 같이 다양한 목록을 확인할 수 있다. 이 다양한 기능을 가진 박스들을 노드라고 한다. 오른쪽 이미지처럼 검색창에서 원하는 기능의 노드를 검색할 수 있다. 더하기 기능을 하는 노드를 활용해 간단한 덧셈식을 만들어보자. 왼쪽의 사진처럼 검색창에 +를 입력 후 첫번째 노드를 클릭한다.

 

 

 왼쪽 사진처럼 +가 적혀있는 작은 박스가 생성되는데 이게 바로 노드이다. I/O박스와 노드 모두 위쪽과 아래쪽에 작은 점이 찍혀있다. 점이 여러개가 찍혀있을 수도 있고, 한개일수도 있다. 이때 위쪽의 점은 인풋(입력)용이고, 아랫쪽의 점은 아웃풋(출력)용이다. 위에 있는 인풋용 점들을 '인풋핀', 아래에 있는 아웃풋용 점들을 '아웃풋핀'이라고 한다. 이제 이 점들을 이용해 I/O박스와 노드를 연결해보자.

 

 

---

 

▷I/O박스와 노드의 연결

 위와 같이 I/O박스와 노드를 인풋과 아웃풋의 순서에 맞춰 연결할 수 있다. 이때 연결은 선으로 나타내진다. 인풋이나 아웃풋점을 클릭하면 선이 나오는데 이 선을 다른 박스나 노드의 선에 연결시키면 두 객체를 연결시킬 수 있다. 넘버박스의 아웃풋에서 +노드의 인풋으로 연결시킨 후 노드의 아웃풋에서 넘버박스의 인풋으로 연결시키면 두 수의 덧셈의 결과를 계산하는 간단한 덧셈식이 완성된다. 이렇듯 VVVV는 코딩을 선을 통한 노드와 박스들의 연결로 직관적으로 표현한다.

 

 

---

 

▷I/O박스와 노드 연결 예제(색 표현하기)

 위와 같이 I/O박스와 노드를 연결해서 색을 표현하는 예제를 만들어 볼 수 있다. 색을 표현하는데는 HSL노드와 RGB노드 같은 서로 다른 노드를 사용해서 표현할 수 있다. 이때 노드에 따라 각 넘버박스가 나타내는 값이 달라진다. HSL노드가 HUE / SATURATION / LIGHTNESS 값을 차례대로 나타낸다면, RGB노드는 RED / GREEN / BLUE 값을 나타낸다. 그렇다면 맨 마지막의 알파는 무엇일까?

 

---

 

▷I/O박스와 노드 연결 예제(색 더하기) 

 알파는 여러색을 더할 때 쓰이는 변수이다. 위에서 만들었던 두 색을 다시 더한다고하면, 알파에 0~1사이의 수를 넣음으로서 색의 조합 비율을 정할 수 있다. 위에는 0.5 / 0.5를 넣었는데, 이는 5대5 비율로 두 색을 더하라는 의미이다. 또한 색을 더할 때는 단순히 +(VALUE)노드가 아니라 +(COLOR)노드를 사용해야 한다.