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

 

 

 

 

 

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

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

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

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

 

지난 글에 이어서, 받아온 오디오 데이터에 반응하는 원을 만들어볼 것이다.

이번 단계에서 최종적인 형태는 아래와 같다.

 

 

 

 

 

화면에 원 하나가 있고, 소리가 커질수록 바깥쪽으로 더 크게 튀어나오게 된다.

3시를 기준으로 시계 방향으로 갈수록 주파수가 낮은 영역대부터 높은 영역대가 분포된다.

 

 

 

 

 

가장 먼저 원의 크기가 소리의 크기에 따라 반응하도록 만들기 위해서 Meter노드의 Level 아웃풋을 가져올 것이다.

 

 

 

 

 

 

소리에 따라 왔다갔다하는 게이지바로 float이 표현되어 있다.

일반적인 float, int와 같은 변수값을 이렇게 게이지바 형태로 표현하기 위해서는 아래와 같이 설정할 수 있다.

 

 

 

 

 

 

IOBox 선택 상태에서 오른쪽 마우스를 눌러 Configure창을 연 후, Show Slider을 True로 설정해주고

Slider Direction은 Vertical로 바꿔준다.

 

 

 

 

 

 

받아온 레벨값은 꽤나 복잡한 연산과정을 거쳐 CircleSpread의 width값으로 연결된다.

 

CircleSpread: (in) - Ceinterr(Vector2), Width(Vector2), Factor(float), Phase(float), Count(integer)

(out) - Spread(Vector2)

=> 원을 만들어준다. Circle 노드와의 차이점은 직접 Count 인풋을 통해 원을 이루는 점의 개수를 정할 수 있다.

또한 Width를 통해 지름의 크기를 정할 수 있으며 Factorr의 값을 높이면 더욱 각진 원의 형태로 바뀌게 된다.

 

 

 

 

 

Factor: 10

 

Factor을 10으로 하니 최종 결과에서 그냥 커지는 것이 아닌, 각진 모양으로 퍼지는 것을 볼 수 있었다.

정확한 이유는 모르겠으나, 복잡한 형태를 만들 수 있다는 점에서 활용도가 높아 보인다.

 

 

 

 

 

 

다시 연산 부분으로 돌아가보면, 레벨을 받아 먼저 * 노드를 통해 3을 곱해준다.

정해진 값이 있는 것은 아니며 값이 너무 작아 공통적으로 곱해주었다.

 

* (Math): (in) - input1, input2 (ctrl + 를 통해 인풋을 추가할 수 있다.)

(out) - 곱셈의 결과 T

=> input들의 곱셈 결과를 반환한다.

 

그 다음에는 두개로 식이 갈리는데 CircleSpread 노드를 통해 두개의 원을 만들 것이기 때문이다.

화면상에는 하나지만, 내부적으로는 두개의 원이 Morph노드를 통해 연결되어 있다.

morph는 컴퓨터 동영상을 이용하여 이미지가 자연스럽게 변하는 것을 의미한다.

 

원의 크기가 소리에 따라 바뀌는 원리는 다음과 같이 구성했다.

작은 원을 큰 원이 감싸고 있는 상태에서 소리가 나면,

작은 원의 기준 크기는 바뀌지 않은 채 원을 구성하는 몇개의 점들이 큰 원의 반경으로 모핑되도록 한다.

 

 

 

패치 화면으로 돌아가보면, 안쪽의 작은 원을 만들기 위해 왼쪽 식에는 상대적으로 작은 값(0.8)을 곱하고 더했다.

반대로 우측 식에는 조금 더 큰값(1.5)을 곱하고 더하여 큰 원을 만들 준비를 마쳤다.

연산결과 왼쪽은 0.82, 오른쪽은 1.54의 값(레벨의 크기에 따라 실시간으로 바뀐다.)이 나오며 약 1.87배 정도 차이가 난다.

 

 

 

 

 

 

도출된 값들을 CircleSpread의 Width 인풋과 연결하기 위해 Vector(join / Vector2)노드로 Vector2값으로 변환해주었다.

만들 원은 타원이 아닌 모든 지름의 크기가 같은 원이기 때문에 x,y값을 동일하게 둔 후 Width 인풋에 연결했다.

 

CircleSpread의 Count인풋에는 BufferSize와 동일하게 210으로 맞춰주었다.

모든 값들을 개별 점들로 표현하고 싶어서 똑같은 값으로 설정했다.

또한, BufferSize가 바뀌면 자동으로 맞춰 바뀌도록 IOBox는 Select의 아웃풋과 연결했다.

 

 

 

 

 

 

CircleSpread의 Center 인풋에는 Wanderer를 연결시켜주었다.

원이 가만히 있지 않고, 랜덤하게 움직인다.

Wanderer는 아래 포스팅에서 따로 정리해두었다. 

https://leere.tistory.com/74

vvvv gamma 노드 리뷰 : How to generate a random walk (Wanderer 예제)

 

 

 

 

 

 

210개의 Float값, 두개의 CircleSpread 값은 For Each문으로 각각 하나씩 들어오게 된다.

그리고 Morph 노드로 합쳐진다.

아쉽게도 Morph에 대한 제공 예제는 없었다.

 

Morph : (in) - Scalar, Input(T30), Input2(T30) (Ctrl + 를 통해 인풋 추가 가능)

(out) - Output (T30)

=> Scalar를 통해 모핑의 양을 결정할 수 있다. 이 값이 크다면 Input2의 값에 가까워지는 것이다.

인풋과 아웃풋이 모두 T이다. 백터값만 넣을 수 있는게 아니라 다양한 변수값을 넣을 수 있다.

 

 

 

 

 

 

Morph 아웃풋은 For Each문을 빠져나와 두개의 DrawPath로 나뉜다.

두개의 결과 모습은 거의 비슷하지만 약간의 차이가 있다. 두개의 방식으로 나눠서 테스트해본 것 같다.

 

 

 

 

 

 

먼저, ResampleBSpine을 연결하지 않고 진행한 방식이다.

 

Output 영상 스틸컷

 

 

 

 

AddPoly노드는 VL.Skia 라이브러리가 다운된 상태에서 "Include low level nodes..."가 체크되어 있어야 나타난다.

(= 왼쪽에 동그란 방향키에서 아래 방향키가 눌려있어야 함.)

 

AddPoly 역시 예제는 없었다. Help창에서 볼 수 있는 노드에 대한 설명은 아래와 같다.

 

 

"선으로만 구성된 새 윤곽선 추가"

 

AddPoly : (in) - SKPath(skia패스), Points(Sequence, Vector2), Close(Boolean)

(out) - SKPath

=> Points로 여러개의 좌표를 받아 연결, Close로 마지막 점과 첫번째 점의 연결 여부를 결정할 수 있다.

 

AddPoly의 아웃풋 SKPath는 DrawPath와 연결된다.

 

DrawPath : (in) - Path(SKPath), Paint(SkiaPaint), Enabled(Boolean)

(out) - PathLayer

=> Path를 Layer로 변환해주는 노드

 

 

 

 

 

 

두번째는 ResampleBSpline 노드를 거친 방식이다.

ResampleBSplie 노드에 관한 예제는 아래에 정리해두었다.

https://leere.tistory.com/66

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

 

 

 

 

 

Spread Vector를 바로 AddPoly에 연결하지 않고 ResampleBSpline의 인풋으로 받으면,

ResampleBSpline의 Count를 조절해 점의 개수를 인위적으로 줄일 수 있다.

 

 

아래는 Count가 30일때의 모습이다.

30개의 점만으로 원을 이루기 때문에 상당히 각지면서도 추상적인 형태가 된다.

 

RssampleSpline - Count : 30