vvvv gamma 노드 리뷰 : How to Sample a path (SamplePath 예제)

 

 

 

 

 

 

오늘은 길을 따라 움직일 수 있도록 만들어주는, SamplePath의 예제를 분석해볼 것이다.

 

 

 

유의할 점은 먼저 VL.Skia 라이브러리를 눌러 설치해주어야 하고,

 

 

"Include low level nodes"를 체크해주어야 볼 수 있다.

 

 

마지막으로 Tangent 아웃풋이 있는, 위에 것을 선택했다.

 

 

 

 

 

How To Sample a path 예제 (SamplePath)

 

예제를 열어보면 위와 같은 패치로 구성되어 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Cons 노드를 통해 노란 사각형이 만들어질 곳들의 좌표를 구성한다.

 

Cons는 세부 선택에 따라 어떤 인풋과 아웃풋을 받을지 달라지는 노드이다.

Array를 선택한다면 array 인 아웃, Spread를 선택한다면 spread 인 아웃을 가지게 된다.

위 예제에서 사용한 타입은 Spread이다.

 

Cons : (in) - input<T>, input<T>... (Ctrl + 로 추가 가능)

(out) - output<T>

=> 여러개의 Input으로 받아, 하나의 out으로 합쳐 내보내준다. (배열처럼)

 

 

 

 

 

 

Cons로 내보낸 6개의 Vector2가 Point노드를 통해 6개의 Square 점으로 만들어진다.

 

 

 

 

 

 

MoveTo로 Center 좌표를 정한다.

위 사진에서 Center과 되는 좌표는 10시 방향에 있는 점이다.

 

MoveTo : (in) - Input(SKPath), Point(Vector2)

(out) - SKPath

=> Vector2를 받아 이를 Path의 시작점으로 변환해준다.

 

내보낸 시작점은 CubicTo 노드로 연결된다.

(Cubic은 입방체라는 뜻을 가진다.)

 

CubicTo : (in) - Control Point1(Vector2), Input(SKPath), Control Point2(Vector2), EndPoint(Vector2)

(out) -  Output(SKPath)

=> Control Point들은 직접적으로 닿지 않고 핸들의 역할을 하는 포인트들이다.

Input과 EndPoint는 직접적으로 시작점과 끝점으로써 사용된다.

 

위 사진에서 Control Point1은 7시 방향의 점이고, Input은 받아온 10시 방향의 점, Control Point2는 6시 방향의 점이다.

EndPoint는 4시 방향의 점이다.

 

 

 

 

 

 

위의 CubicTo의 패스를 다시 시작점으로 Cotrnol Point2는 2시 방향의 좌표를, EndPoint로 12시 방향의 좌표로 연결하여 형태를 마무리했다.

 

 

 

 

 

 

마무리된 패스를 DrawPath를 통해 그려준다.

(미리보기를 위해 색상을 하얀색에서 살짝 변경했다.)

 

 

 

 

 

 

마지막으로 가장 핵심적인 Path를 따라 움직이는 사각형을 만든다.

 

SamplePath : (in) - Path(SKPath), Force Closed(Boolean), Res Scale, Position(Vector2)

(out) - Position(Vector2), Tangent(Vector2), Sucess(Boolean)

=> 패스를 받아 샘플링하여 포지션과 Tangent 값 등을 반환하는 것으로 보인다.

(* LFO와 같이 주기적으로 변환하는 값을 연결하면 애니메이팅이 가능하다.)

 

CubicTo를 통해 최종적으로 만든 Path를 SimplePath의 첫 인풋으로 넣고,

LFO를 통해 반복적으로 패스를 돌도록 했다.

이때, ForceClosed를 True로 해주지 않으면 경로를 이탈하는 모습을 보였다.

 

패스를 따라 움직일 Rectangle을 추가하고 TransformSRT에 연결한다.

Transform의 Rotation에는 Tangent를 angle로 변환한 값을 넣고, Translation 인풋에는 Position을 넣으면 

사각형이 패스를 따라 움직인다.

 

 

 

 

 

 

최종적으로 Group으로 모아 Renderer에 연결한다.