vvvv gamma 패치 리뷰 : 오디오 데이터 받아오기 / Audio visualization 오디오 시각화 (3)

 

 

 

 

 

1. 오디오 데이터 받아오기.

2. 원을 만든 다음, 소리에 따라 크기가 반응하게 하기.

3. 그 원의 아웃라인을 따라 점이 만들고 그 사이를 선으로 연결하기.

4. 최종적으로 보여줄 화면에 맞춰 효과를 주거나 값들을 조정하기.

 

 

 

 

 

만든 원 위로 점들이 생겨나도록 해보자.

 

 

먼저 길을 따라 계속 이동하면서 소리가 날때, 그 지점에 원이 찍혀야 한다.

AddPoly의 아웃풋 SKPath이 바로 길이 된다. Path를 순차적으로 따라가기 위해 SamplePath와 연결한다.

(SamplePath에 LFO를 연결하여 반복적으로 패스를 따라 움직이도록 한다.)

 

SamplePath 노드에 관한 내용은 아래에 메모해두었다.

https://leere.tistory.com/83

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

 

마지막으로 Points와 연결된 TansformSRT의 Translation 인풋에 최종적으로 연결해준다.

 

 

 

 

 

 

Point의 구조를 살펴본다.

Points의 첫번째 인풋은 1로 설정해 하나의 점을 찍어주기로 했다.

 

다음은 두번째 Size 인풋이다.

Random 노드에 * 노드를 결합하여 작은 사이즈부터 큰 원사이즈까지 나오도록 했다.

Paint노드 역시 Random 노드를 결합했다.

다만, 그냥 랜덤이 아니라 볼륨을 연결하여 소리에 따라 알파값이 달라지도록 조정했다.

 

Fill과 연결된 Random 노드의 To 인풋을 통해 조절이 가능하다.

FromHSL의 알파 인풋이 볼륨과 연결되어 있다.

 

 

 

 

 

 

Meter의 Level 아웃풋이,

 

 

 

 

 

 

Map으로 들어간다. 

 

Map : (in) - Input(T30), Input Minimum(T30), Input Maximum(T30), Output Minimum(T30), Output Maximum(T30)

(out) - T30

=> 값을 받아 내가 정한 범위의 값으로 맵핑한다.

 

 사실 받아온 값으로 맵핑을 하는 목적보다는, 일정 크기의 이상 볼륨일 경우에만 원을 그리도록 하기 위해 추가했다.

때문에 > 노드가 사이에 끼어있고 0.05의 볼륨치를 넘었을때만 값이 넘어가도록 했다.

 

최소 볼륨 조건을 넘긴 값들은 FromHSL의 알파값으로 연결된다.

 

 

 

 

 

 

Points는 최종적으로 Queue와 연결되어 그룹으로 묶여 렌더링된다.

사실상 이 부분에서 Queue가 하는 역할이 거의 없어서 (테스팅하려고 추가한 것 같다..) 

원을 연결하는 선 부분에서 다뤄보려 한다.

 

 

 

 

 

마지막으로 원과 원 사이에 선이 생기도록 하는 부분이다.

 

 

위쪽 사진에 담긴 부분이, 원과 원을 이어주는 선을 그리는 부분이다.

앞서 다뤘던 Points를 Polygon과 Stroke를 연결한 구조 로 바꾸었다. (선을 생성하는 부분이다.)

 

Stroke : (in) - Input(SkiaPaint), Color(RGBA), Stroke Width(Float32), Join, Cap, Miter(Float32)

(out) - SkiaPaint

=> 선을 그어주는 노드

 

 

 

 

 

Polygon의 인풋에 연결되어 있는 Queue 부분을 살펴본다.

 

 

SamplePath의 아웃풋이 바뀔때마다 Changed가 true가 되면서 Queue에 값이 Insert된다.

 

Changed : (in) - Value(T31)

(out) - Result(Boolean), Changed

=> 인풋이 값이 바뀌면 True가 출력된다.

 

Queue의 Frame Count의 값이 2이기 때문에, 두개의 점(좌표) 사이에 선이 그어지게 된다.

또한 색상은 원과 마찬가지로 볼륨과의 인터랙션으로 이루어진다.

Queue에 대한 노드 설명은 아래를 참고하면 된다.

https://leere.tistory.com/84

vvvv gamma 노드 리뷰 : How To Manage a queue of items (Queue 예제)

 

 

 

 

 

1. 오디오 데이터 받아오기.

2. 원을 만든 다음, 소리에 따라 크기가 반응하게 하기.

3. 그 원의 아웃라인을 따라 점이 만들고 그 사이를 선으로 연결하기.

4. 최종적으로 보여줄 화면에 맞춰 효과를 주거나 값들을 조정하기.

 

 

 

 

 

마지막 단계는 효과를 추가하고 비디오 아웃풋을 다듬는 일이다.

 

 

 

만들어둔 원들과 선을 Group으로 묶은 뒤, Glow 효과를 주기 위해 Camera와 SkiaTexture에 연결했다.

최종 노드는 TextureWindow가 된다.

 

 

 

 

 

 

다음은 프레임레이트를 조절하는 MainLoop를 추가하는 것이다.

vvvv gamma는 기본적으로 1초에 60프레임을 보여준다.

때문에 인위적으로 FPS를 줄여 너무 빠르게 선과 원들이 생겨나는 속도를 줄일 수 있다.

 

 

 

 

 

 

보여줄 것과 보여주지 않을 것을 설정하는 것도 중요하다.

원을 그려주는 두개의 DrawPath들은 Enabled를 false로 설정해 꺼준다.

 

 

 

 

 

 

SkiaTexture의 Clear를 꺼주면 프레임이 새롭게 지워지지 않고, 그렸던 그림에 계속 프레임이 얹혀지게 된다.

새로 리셋하고 싶다면 다시 clear를 켜주면 된다.

 

 

 

 

 

 

최종 결과 영상이다.

영상 속에서는 소리가 들리지 않지만, 실제로는 소리와 함께 인터랙션하고 있다.