vvvv gamma 노드 리뷰 : Reference Resample (ResampleBSpline 예제)

 

 

 

*버전: vvvv gamma 5.0

 

만들고 싶은 이미지가 있는데 그러기 위해서는 ResampleBSpline 노드 공부가 필요해서 예제를 분석했다.

노드의 예제를 찾는 방법은 간단하다.

설명이 필요한 노드를 클릭하고 F1을 누른다.

 

 

 

 

Reference Resample 예제

 

딱 ResampleBSpline만을 포함하는 내용은 아닌 모양이다.

Reference Resample이라는 이름으로 창이 띄워졌다.

ResampleBSpline을 포함해 다양한 Resample노드들의 아웃풋을 비교해서 한번에 볼 수 있다.

 

 

 

Reference Resample 예제

 

결과적으로는 초록선들이 움직이고 위에는 슬라이더바가 보이는 창이 나타난다.

하나씩 어떻게 작동하고 있는지 살펴보자.

 

 

 

 

가장 먼저 노드의 시작점이 상단 부분을 살펴보면 LFO를 RandomSpread와 연결해둔 것을 볼 수 있다.

LFO의 Cycles 아웃풋 값이 하나씩 늘면서 RandomSpread의 Seed값을 하나씩 높이고 있다.

그러면서 선들이 계속 다른 형태로 이어진다. (계속해서 다른 값의 vector2 아웃풋 호출)

 

LFO (out) Cycles -> RandomSpread(/vector2) (in) Seed

 

그 다음으로 vector2 값들을 ForEach 문으로 Spread하고 각각 Damper에 연결한다.

Damper는 처음 접하는 노드라 간단하게 노트하고 넘어가본다. 이 예제에서는 Damper(2D)를 활용했다.

 

Damper(2D): (in) - Goto Position, Filter Time, Cycle, Jump

(out) - Position, Velocity, Acceleration, Has Changed

=> Filter와 매우 유사한 역할을 한다. input으로 받은 position으로 이동하는데 부드럽게 이동하도록 한다.

그 정도는 FilterTime에서 조절할 수 있다.

 

Dumper에서 내보내는 값들을 BSpline을 통해 실제 곡선으로 만들고 있다.

BSpline: (in) - Control Points, Degree, Resolution

(out) - State Output (BSpline), Spread

=> 여러개의 점을 받아 하나의 곡선으로 이어준다. Degree를 통해 곡선의 정도를 정한다.

(Degree는 특히 직접 조절해보면서 차이를 보는 것이 중요할 것 같다.)

Resolution이 낮으면 직선으로 변한다.

 

BSpline에서 output으로 내보낸 spread Vector2는 GetSpread와 연결된다.

 

 

How to get items out of a spread

 

GetSpread 예제도 열어보면 그 역할을 쉽게 알 수 있다.

 

GetSpread: (in) - Spread, Index, Count

(out) - Spread

=> 수많은 Spread를 받아 index를 기준으로 count 개수만큼 내보낸다.

(index를 1로 하고, count가 3개면 index 넘버 1,2,3 값을 내보냄)

 

예제에서도 이와 같이 index가 5인 값부터 간단한 연산식을 통해 69개의 vector2를 내보내고 있다.

 

 

 

 

 

가장 핵심적인 부분인, spread된 vector2를 Resample 노드를 통해 가시화 시키는 것이다.

예제에 보면 다양한 형태의 Resample 노드들이 있다. 기본적으로 Enabled가 꺼져 있기 때문에, Toggle을 연결해 활성화 시켜준다.

하나씩 살펴보면 아래와 같다.

 

 

 

 

첫번째, 아무런 Resample 노드도 연결하지 않고 오직 points만 이용한 형태이다.

화면 안에서 하얀 점들이 이동하는 형태로 표현된다.

 

Points: (in) - Squence, Size, Shape, Paint, Enabled

(out) - RenderingNode

 

Spread vector2를 연결해 여러개의 점들을 그릴 수 있다.

 

 

 

ResamplePoint

 

두번째, ResamplePoint를 연결한 뒤 points에 연결한 경우다.

비주얼은 완전히 첫번째 point에만 연결한 경우와 일치한다.

 

ResamplePoint: (in) - Spread, Count

(out) - Spread, Interval

 

=> 받아온 spread 위치를 기반으로 점을 그려준다. count를 통해 개수를 지정해줄 수 있다.

첫번째 point와 가시적으로 큰 차이가 없었던 이유는 count가 2400으로 설정되어 있기 때문이다.

(이 경우, 찍었던 곳에 또 찍으면서 원의 크기가 커보이는 효과가 있다.)

현재 넘겨준 spread의 개수 69보다 count를 줄이면 점의 개수가 확연히 줄어든 것을 볼 수 있다.

 

이처럼 한번 Resample 해준 다음, Points와 연결할 수 있다.

 

 

 

ResampleLinear

 

 

세번째 ResampleLinear 노드를 활용하는 방법이다.

 

ResampleLinear: (in) - Spread, Count

(out) - Spread, Interval

=> 넘겨 받은 Spread(Vector2)들을 연결해 하나의 선을 만든다.

직선으로 각각의 점들을 연결한다는 것이 특징이다.

count의 값을 높이면 점과 점 사이에 더욱 촘촘하게 다른 점들이 생기면서 점차 점선의 느낌이 아닌 완전한 선으로 보인다.

 

 

 

ResampleRepeat

 

 

네번째, ResampleRefeat 노드를 활용한 경우이다. 색상이 잘 보이지 않아 밝은 보라색으로 바꿨다.

아쉽게도 ResamplePoints와 차이를 찾지는 못했다.

output핀의 interval의 값이 다른다는 것 정도였지만 보기에는 차이가 없었다.

또한, count가 같은 2400이여도 똑같은 곳에 점이 찍혀 두꺼워보이는 효과도 없는듯 했다.. (추측일뿐이다.)

다른 예제에서 이후에 만나게 된다면 내용을 추가해보겠다.

 

ResampleRepeat: (in) - Spread, Count

(out) - Spread, Interval 

 

 

ResampleHermite

 

다섯번째, ResampleHermite 노드를 통해 하나의 선을 만든다.

ResampleHermite: (in) - Spread, Tension, Bias, Count

(out) - Spread, Interval

=> 수학자 에르미트의 보간법으로 선을 만든다. Tension과 Bias 인풋의 값을 바꾸면 더욱 다이나믹한 선을 만들 수 있다.

(현재는 Tension도 0, Bias 0)

 

Tension:5

Bias:5

 

 

 

ResampleBSpline

 

여섯번째, ResampleBSpine 노드를 활용하는 방법이다.

 

ResampleBSpline: (in) - Spread, Close, Count

(out) - Spread, Interval

=> b-spline 보간법으로 하나의 선을 만든다.

Close 인풋을 통해 마지막 점과 점을 이어 하나의 도형을 만들 수 있다는 것이 차별점이다.

 

 

 

BSpline

슬라이더(B-Spline Degree): 0

슬라이더(B-Spline Degree): 35

 

마지막으로 BSpline을 활용하는 방법이다.

또한 ImGpu 안에 Slider를 배치하고 BSpline의 인풋인 Degree를 연결해 화면 상에서 degree를 조절할 수 있게 했다.

 

Slider: (in) - Context, Channel, Label, Min, Max, Format, Flags, Style

(out) - Context, Value

=> 슬라이드 바 UI를 만들 수 있는 노드. 인풋값들을 활용하여 커스터마이징할 수 있다.

 

 

 

 

각각 다른 레이어들을 Group(skia)에 한번 묶어준뒤, TransformSRT로 위치에 연결하여 언제든지 위치를 옮길 수 있게 설정했다.

그리고 다시 그 결과를 Slider와 함께 Group(skia)에 합쳐 최종적으로 Rederer(skia)에 연결하였다.

 

 

 

* 추가노드

예시하단에 ResampleBSpline이지만 아웃풋으로 tangent를 가진 노드가 있어,

이 노드도 연결해보기로 했다.

 

 

 

ResampleBSpline(Tangent)

 

일반 ResampleBSpline과의 차이점은 ouput으로 tangent가 있다는 점이다.

그 노드를 points와 연결하면 위 이미지처럼 안쪽으로 모아진 형태의 끊긴 형태의 연속적인 곡선을 볼 수 있다.

 

ResampleLinear와 비교하면 눈에 띄게 차이가 드러난다.

 

 

 

초록 - ResampleLinear, 분홍: ResampleBSpline(tangent)