VVVV gamma Path oriented Camera Animation / VVVV gamma 패스를 따라 이동하는 오브젝트와 카메라

오늘은 웹캠의 비디오를 받아 하나의 선으로 연결해주는 vvvv 프로그램을 만들어보려 한다.

이 튜토리얼 마치면 지금 제작 중인 작업에 활용할 수 있을 것 같아서! 도전해본다.

 

vvvv version: vvvv gamma 2021.4.12 

 

*Source of tutorial : Takuma Nakata, vvvv gamma Graphics Tutorial | Path Oriented Camer Animation

 

 

 

 

 

 

 

- 우선 가장 먼저 Renderer노드를 VL.Skia 패키지 안에서 꺼내 추가해준다.

그리고 AppPoly 노드를 추가해줄 것인데 그냥 검색하면 노드가 나오지 않는다.

 

 

 

 

 

 

이름 검색하는 곳 왼쪽 옆에 화살표 키 중 아래버튼도 눌러야 AddPoly노드가 보인다.

(Advanced Node여서 그런 것 같다.)

 

 

 

 

 

- 그리고 우선 렌더러에 선을 띄워줄거기 때문에 DrawPath와 LinearSpread라는 노드를 추가한다.

(괄호 뭐 써져있는거 말고 그냥! 생 LinearSpread.) 

우리는 2D 환경에서 선을 그려줄거기 때문에 Vector(join) 2D 노드도 추가한다. 

 

 

 

 

 

 

- LinearSpread의 center width와 count의 인풋에 IObox를 연결해주고

(인풋 클릭 후 바깥에 놓으면서 가운데 휠 놓으면 자동으로 연결된다.)

값을 대략 10, 2로 적어준다.

//사진 속에서는 center와 연결되어 있지만 이후 렌더러에 아무것도 안떠서 재차 확인해보니

count가 아니라 width값을 2로 설정해 주어야하는 것이었다!

 

 

그리고 이제 Vector노드와 연결할 것인데, LinearSpread의 아웃풋이 연결되지 않는다. 

왜일까?

이유는 LinearSpread는 10개의 많은 Vector값을 내보내지만 Vector(join-2d)는 하나씩 받기 때문에.

Vector노드가 반복적으로 각각 LinearSpread값을 받아주도록 만들어보자.

Vector에 오른쪽 마우스를 누른 뒤, Surround - For Each를 눌러준다.

 

 

 

 

 

그리고 각각 LinearSpread의 인풋도 splicer로 (저 사다리꼴 연결 고리가 splicer이다.)

Vector의 아웃풋도 splicer로 빼줘 AddPoly와 연결한다.

 

 

 

 

 

- Vector 노드에 y값도 만들어준다. splicer로 빼준 다음 IOBox와 연결해주고 값은 임의로 10으로 설정한다.

 그리고 핵심적인 부분은 ApplyPoly의 Close아웃풋은 토글과 연결해주고 false로 설정하는 것이다.

신기하게도, Close의 기본값은 true이고 true일때 closed되어 화면에 나타나지 않는다.

그 이유는 close는 마지막 점과 첫번째 점을 이어주겠다는 것인데,

지금은 모두 같은 위치에 있기 때문에 보이지 않는듯 하다.. (추측일뿐.. 정확히는 모르겠다.)

어쨌든 지금은 false로 꼭 바꿔줘야 Renderer에 나타나는 것을 볼 수 있다!

 

 

 

 

 

- Vector y의 아웃풋의 값을 바꿔보면 이렇게 10개의 점을 기준으로 선이 연결된 것을 볼 수 있다.

Vector의 x 인풋에 LinearSpread가 연결되었으므로 x 쪽 방향으로 10개의 선을 만들 것이고,

선들의 y위치는 vector count의 개수(여기서는 10)의 점들로 나누어진다.

 

 

 

 

 

지금은 Close토글을 true로 바꿔주면 마지막 선의 모양이 닫혀있게 되는 것을 볼 수 있다.

 

 

 

 

 

- 이제 선이 꺾이는 부분을 시각적으로 볼 수 있게 점을 찍어보려 한다.

Renderer에 두가지의 인풋을 연결할 수 있도록 Renderer와 DrawPath 사이에 

Group노드를 추가한다. (연결선에 더블클릭하면 바로 노드를 추가할 수 있다.)

 

Points 노드를 추가할 것인데, 아마 그냥 검색하면 네모 안에 ... 아이콘이 그려진 노드가 보일 것이다.

그것 말고 아까 눌러놨던 아래버튼을 다시 눌러 해제해보면 일반 노드형태의 

Points노드가 있는데 그것을 추가해야 한다.

그러면 그래프처럼 선과 점으로 이루어진 이미지가 나타난다.

 

 

 

 

 

- 그런데 배열 노드 창이 보기가 조금 불편하다.

좀 더 편리하게 보기 위해서 노드를 누르면 뜨는 오른쪽 쪼그만 네모를 오른쪽 클릭한 다음에 

Configure을 클릭한다.

 

 

 

 

 

- 그리고 Horizontal을 켜주면 (오른쪽마우스 클릭) 게이지 처럼 상하로 길어진 창을 볼 수 있다.

5개값 밖에 안보이니 답답하다. Maximum Visible Entries의 값을 10으로 설정해서 모든 값의 게이지가 보이도록 하다.

 

 

지금 상태는 y값이 작아질수록 (마우스를 아래로 드래그할수록) 점의 위치가 높아지고,

y값이 커질수록 (마우스를 위로 드래그할수록) 점의 위치가 낮아진다.

조금 헷갈리니까 반대로 바꿔보도록 한다.

 

 

 

 

 

- vector y값에 *노드를 사이에 추가한다.

그리고  오른쪽 input을 -1로 해서 y값의 부호를 반대로 바꿔주는 역할을 추가한다.

이제 값이 작아지면 아래로 내려가고, 값이 커지면 위로 올라간다.

조금 더 편리해진듯 싶다.

 

 

 

 

 

- 선을 조금 부드럽게 만들어보자.

ResampleBSpline (여기서는 괄호 안에 아무것도 없는 기본 노드) 노드를 Vector의 아웃풋과

AddPoly사이에 추가해준다. 그리고 Count값을 100정도로 높여주면 부드러운 곡선이 된것을 볼 수 있다.

노드 이름 그대로 날카로운 선을 resampling하여 부드럽게 바꿔주는 역할을 한다.

Count값이 커지면 더 부드러워 진다. 

 

하지만 점과는 매치가 안되어서. (점을 기준으로 부드럽게 휘어지기 때문에)

아까의 딱딱한 선도 다시 만들어서 둘 다 써보자.

 

 

 

 

 

- Group에 새로운 것을 연결하기 위해, ctrl + 를 눌러 인풋을 늘려준다.

AddPoly, Close, Stroke, DrawPath를 복사해서 왼쪽에 두고 다시 Vector와 연결한 뒤,

Group에 연결한다. 구분을 위해 Stroke의 색을 바꾸고, 부드러운 선의 경우 Stroke도 0.02정도로 바꿔주었다.

 

 

 

 

 

- 이제 패스를 따라가는 사각형을 만들어보려고 한다.

Rectangle(괄호없는 일반노드)을 추가하고 아웃풋을 TransformSRT와 연결해준다.

그리고 이미지 속에서는 Group노드의 인풋을 늘려  Rectangle의 아웃풋과 연결했지만

TransformSRT의 아웃풋과 연결해준다! (잘못 연결했다..)

 

 

 

 

 

참고로 TransformSRT 노드는 Skia.Transform으로 눌러준다.

 

 

 

 

 

- 다음으로는 SamplePath 노드를 추가할 것인데 마찬가지로 아래버튼을 눌러 확장시켜줘야 보인다.

 

 

 

 

 

SamplePath에 들어가면 두개가 나오는데 Tangent가 써있는 것을 눌러준다.

 

 

 

 

 

- 우리가 만든 패스와 연결해보자.

SamplePath의 인풋을 AddPoly와 연결해주고 TransformSRT의 Translation 인풋과 연결해준다.

그러면 이미지처럼 네모가 첫 출발점에 서 있는것을 볼 수 있다.

여기서 사각형이 너무 커서 TransformSRT에서 스케일을 줄여주었다.

 

 

 

 

 

- 네모를 패스를 따라 이동시키기 위해서는 SamplePath의 맨끝 아웃풋에 LFO노드(일반) 를 연결해준다.

LFO : 0부터 1까지의 값을 계속 반복시키면서 애니메이팅 시켜주는 노드

손으로 직접 SamplePath의 값을 움직여보면 1일때 선의 끝, 0일때 선의 출발점에 있는 것을 볼 수 있다.

LFO를 통해 자동재생처럼 계속 따라가는 모습을 루프시켜 보여준다.

 

 

 

대략 이런 모습으로 왔다갔다 거린다.

 

 

 

 

SamplePath의 중간 아웃풋 Tangent에 Angle노드(Angle - 2D)를 연결하고 TransformSRT의

Rotation인풋과 연결하면 경사에 맞게 회전되어 내려오도록 바뀐다.

 

 

 

 

 

Renderer에 Camera노드를 연결해주면 렌더창을 확대, 이동해서 볼 수 있다.

(휠: 줌인 줌아웃 / 오른쪽 클릭 드래그: 화면 이동)

네모가 조금 삐그덕 거린다고 생각되면 ResampleBSpline의 Count값을 높여줘서

선을 더 부드럽게 만들어준다. (200정도로 높여주었다.)

 

 

 

 

다음 스텝은 새로운 창을 만들어 그 안에 또 작업을 이어가는 것이다.

 

 

 

 

 

- VL.Skia - stride - SceneWindow을 추가한다.

그러면 창이 하나 더 생기는 것을 볼 수 있다.

 

 

 

 

 

- camera - stride.cameras도 추가한다.

초기 설정은 마치 유니티에서 봤던 초반 화면 세팅을 해주는 것과 비슷하다.

 

 

 

 

 

- RootScene을 추가해 SceneWindow와 연결해주고,

SkyBoxLight와 DirectionalLight는 Group을 눌러 stride를 클릭해 추가한 뒤, 노드에 묶어준다.

그리고 사진과 같이 연결한다.

 

 

 

 

 

- Camera아웃풋도 RootScene과 연결해준다.

stride 윈도우에서 F4를 누르면 다음과 같은 조정화면을 볼 수 있다.

왼쪽 클릭해서 화면도 돌릴 수 있고 오른쪽 마우스로는 줌인 줌아웃, 휠 누르고 드래그하면

화면 이동도 가능하다. 까만 카메라도 보인다..

 

 

 

 

마지막으로 카메라의 움직임을 아까 만든 윈도우 속 네모와 똑같이 만들어보자. 

 

 

TransformSRT - 3D.Tersform을 눌러 노드를 추가한뒤, 카메라 노드에 연결한다.

 

그리고 SamplePath의 아웃풋과 연결하고자 하는데 SamplePath의 아웃풋은 2d Vector이고

TransformSRT가 요구하는 인풋은 3d Vector이기 때문에 변환해주어야 한다.

xyz노드를 이용하면 가능한 듯 싶지만, (튜토리얼상)

우리는 어차피 앞 뒤 위 아래로만 움직이면 되기 때문에 (x좌표가 필요없다.)

Vector(Split)2D 노드를 우선 SamplePath와 연결해주고

Vector(join)3D 노드를 TransformSRT(Translation인풋)와 연결해준다.

그리고 2d vector의 x값을 3d vector z에 (앞뒤) y값을 y에 연결해준다. 

 

카메라의 각도 역시 사각형처럼 왔다갔다 하게 만들어보자.

Vector(join)3d 노드를 다시 추가해 TransformSRT의 Rotation과 연결한다.

그리고 인풋은 x 인풋값에 (위 아래로 각도 변경) 연결해준다.

지금은 카메라 center의 좌표가 중앙에 맞춰져 있어서 굉장히 큰 폭으로 움직인다.

카메라 local 좌표로 바꿔줘야 할 것 같다. 이 튜토리얼에서는 크게 중요하지 않아 넘어갔다.

 

 

카메라 시점. 이렇게 보여도 엄청 열심히 움직이고 있다!

 

 

마지막으로 F4를 다시 누르면 네모의 동선과 각도에 맞게 카메라가 움직이는 것을 볼 수 있다.

만약 카메라가 너무 삐그덕 거린다는 듯이 움직이면, ResampleBSpline counter값을 더 높여서

길을 부드럽게 만들어준다.

 

 

 

 

다음은 최종 패치화면이다.

 

 

 

두 가지 방식으로 라인 path에 따라가기 끝!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

필요한 내용이 여기까지라 후반 몇분은 스킵했지만

뒤에 작업내용들도 꽤 흥미로운듯 하다.

비주얼을 더 만들고 싶으면 나중에 참고해보자!