VVVV gamma Audible Data / VVVV 튜토리얼

오늘은 vvvv로 데이터를 받아 오디오화하는 방법에 대한 튜토리얼을 따라해볼까 한다.

튜토리얼 주소: https://thenodeinstitute.org/courses/node20-vvvv-workshop-bundle/lessons/diving-into-topics/topic/audible-data/

The NODE20 VVVV Workshop Bundle - The NODE Institute

* 로그인 후 시청이 가능하다. (무료)

 

 

최신버전인 vvvv gamma 2021.4.12 버전으로 하다가 무언가 잘못되었다는 것을 깨달았다.

AudioEngine이나 HTTPGet같은 노드들이 신버전에서는 조금 많이 달랐다.

튜토리얼을 보고 따라하는데 지장이 커서 튜토리얼에서 보여주는 버전과 제일 비슷한

vvvv gamma 2020.2.0버전을 다운 받아 진행하였다.

https://thegraybook.vvvv.org/changelog/2020.2.html

vvvv gamma 2020.2.6 | vvvv gamma documentation

 

 

 

- 그 다음으로는 오디오와 관련된 Nuget을 먼저 다운받아야 한다.

Nugets은 뭘까? 아직은 잘 모르겠지만 vvvv에서 다운받아서 쓸 수 있는 외부라이브러리로 보인다.

 

Nugets을 다운받기 위해서는 우선 어떤 Nugets들이 있는지 살펴보고 이름을 알아둘 필요가 있다.

vvvv메인 설정창?으로 생각되는 왼쪽 상단의 회식네모를 눌러준다.

많은 항목들 중  Manage Nugets에서 Find on nuget.org를 누른다,

 

그러면 인터넷 창이 오픈된다. 

우리가 설치해야 하는 nuget은 VL.Audio이다.

검색하면 가장 상단에 vvvv에서 만든 VL.Audio nuget이 나타난다.

 

 

 

 

현재 최신버전은 1.0.15 (프리뷰제외)이다.

튜토리얼은 0.2.3-alpha버전으로 진행하고 있고 최신판과 많이 달라서

나도 0.2.3-alpha 버전을 받았다.

 

https://www.nuget.org/packages/VL.Audio/0.2.3-alpha

VL.Audio 1.0.15

 

 

vvvv를 최신버전이 아닌, 2020버전으로 다시 깐 이유도 여기에 있는데

왠진 모르겠지만 최신판은 이미 디폴트로 상위버전의 VL.Audio Nuget이 깔려있어서 

알파버전을 받아도 최신버전으로 자꾸만 노드를 보여주었다.

(아직 해결능력이 많이 부족하다보니 최대한 튜토리얼과 똑같은 상황을 만들어서 가기로 했다.)

 

 

- 이제 VL.Audio nuget을 추가해보자.

다시 vvvv창으로 돌아온다.

아까 눌렀던 회색네모에서 다시 Manage Nurgets를 들어간다.

이번에는 Commandline을 눌러준다.

 

그러면 검은 커멘드 창이 나타난다.

벌써부터  멀미가 날 것 같았지만.. 참고 따라해본다..

>끝에 nuget install (이름 붙여넣기)를 하고 엔터를 누른다.

뒤에 버전을 따로 입력하지 않고 VL.Audio만 쓰면 최신 정식 버전을 받아주는 듯 하다.

나는 구버전이 필요해서 옆에 버전을 따로 명시해주었다.

 

 

그러면 쭉 코드들이 뜨고 설치가 완료된다!

 

 

 

- 이제 오디오 데이터를 다운받는다.

정확히는 오디오 데이터가 아니라 그냥 데이터를 받아서 이를 오디오화 하는 것 같다.

튜토리얼에서 추천해준 데이터 수집 사이트이다.

 

 

https://www.atnf.csiro.au/research/pulsar/psrcat/

The ATNF Pulsar Catalogue

들어가면 수많은 선택지들이 나온다.

지금으로서는 정확히 잘 모르겠지만 천체를 관측한 데이터 값들인 것 같다.

그 중에서 우리가 만들 오디오에 필요한 Frequeny와 Strength를 담당해줄 친구들을 골라본다.

(이 두 데이터를 사운드로 변환할 모양이다.)

 

 

선생님 말씀대로 따라가 본다.

FO와 DM에 체크를 하고

 

 

 

Sort on field를 Date로 바꿔 날짜 기준으로 데이터를 정렬하도록 설정한다.

그리고 Output Style은 Short csv without errors로 바꿔주고

Null value도 00으로 바꿔준다. (우리는 integer값을 다룰 것이기 때문에 0으로 바꿔줘야 한다고..)

다 되었으면 "TABLE" 버튼을 눌러준다.

 

 

 

나는 이해할 수 없지만 컴퓨터는 이해할만한 결과 테이블이 나온다.

이 데이터를 받아 오디오화 하기 위해서는 이 페이지의 url이 필요하다.

창을 끄지 말고 다시 vvvv로 돌아간다.

 

 

 

- 새 파일을 오픈해서 튜토리얼을 따라 노드를 하나씩 채워본다.

1) HTTPGet 노드를 검색해서 추가한다.

 

2) HTTPGet의 인풋 URL String의 IO박스를 연결한다. (인풋 클릭 후 쭉 빼서 휠키 누르면서 떼기)

가장 맨 끝에 있는 Refresh(boolean)인풋도 IO박스를 연결한다.

그외 다른 아웃풋들도 모두 IO박스와 연결한다.

* 세번째 아웃풋 "Provider<stream>은 ReallAll(String)노드를 추가해서 연결해준다.

참고로 ReadAll 노드는 그냥 검색하면 안나오고 experiment노드들까지 보겠다는 옵션을 눌러주어야 보인다.

 

 

방향키처럼 생긴 동그라미 4개중에 위 동그라미 말고 오른쪽 방향 동그라미도 눌러야 experiment 노드들이 

포함되어져서 보여진다.

 

그 다음에 ReadAll의 Data:String아웃풋을 IO 박스와 연결한다.

아직은 ReadAll의 아웃풋에는 빈 박스가 연결되어 있을 것이다.

 

 

- Refresh(boolean) 인풋의 토글을 Bang타입으로 바꿔준다. (안바꿔도 크게 상관 없는듯)

저 동그란 부분에 휠키를 누르면 토글 쉽게 타입을 바꿀 수 있다.

그 다음에 Refresh의 동그란 부분을 오른쪽 마우스로 누르면 Data가 ReadAll 아웃풋에 나타난다.

(안 누르면 안나타난다! 새로고침 같은 느낌..)

 

 

 

- ReadAll의 연결된 Data박스를 더블클릭하면 숨겨진 데이터들까지 다 볼 수 있다. 

우리가 웹페이지에서 따왔던 데이터 그대로다.

(박스 크기는 끝에 잡고 늘이면 늘어난다.)

 

 

 

- 본격적으로 오디오와 연결하기 전에 컴퓨터에 오디오 렌더러가 잘 설치되어있는지 확인해본다.

Help창에서 (안보이면 F1) audio를 검색해서 "Play an Audio File"예시 파일을 열어본다.

오디오 렌더러가 잘 작동된다면 노래가 바로 들릴 것이고 없으면 Driver ASIO4ALLv2 부분에 빨간 네모가 뜬다.

그러면 드라이버가 설치가 안되었다는 뜻..

처음에 설치가 안되어있어서 ASIO4ALL 렌더러를 설치해주었다.

한국어는 따로 없어서 English 설치했다.

 

https://www.asio4all.org/

ASIO4ALL Official Home

 

 

 

 

 

 

 

 

- 이제 조금 떨어진 곳에 AudioEngine노드를 만들어 보자.

 

 

1) 먼저 AudioEngine 노드를 추가한다.

(안보인다면 VL.Audio를 검색해본다. 패키지가 안열어져 있어서 그 안에 있는 노드들이 안보이는 듯하다.

VL.Audio.를 누르면 검색창에 순간짧은 메시지가 뜨며 패키지가 열리고 그다음에 다시 검색하면 보인다.)

2) 인풋들을 IO박스와 연결한다.

* Driver가 ASIO4ALL v2인 경우 44100 Sample Rate에서도 잘 작동한다.

하지만 Dante via 같이 외부의 다른 오디오 렌더러를 사용할 경우 Sample Rate를 48000으로 바꿔줘야 한다.

(44100 창에 오른쪽 마우스 누르면 다른 값 선택 가능.)

 

* 혹시 튜토리얼을 켜놓고 동시에 있다면 Play토글을 반드시 끄고 시청을 마저해야한다.

정확한 이유는 모르겠지만 컴퓨터 자체의 오디오렌더러랑 충돌을 하는지 vvvv의 소리도 들으면서 (ASIO4ALL)

튜토리얼에서 나오는 소리도 듣는 것은 불가능해보인다.

어쨌든 Play버튼을 계속 꺼가면서 진행해본다.

 

채널들은 스테레오니까 2의 값의 인풋들과 아웃풋 값들을 가지는 듯하다.

 

 

 

 

 

 

 

 

 

- 다시 조금 떨어진 곳에 OSC노드를 추가한다.

오디오 소스를 받고 아웃풋도 오디오 소스인 친구다.

사진처럼 IO박스들을 연결하고 Gain의 값은 소리의 크기값이므로 미리 줄여 놓는다.

여기서는 Sine파를 사용하고 있다.

AudioOut은 실질적으로 오디오를 내보내는 역할인데

OSC의 아웃풋과 직접적으로 연결할 수가 없다.

 

 

이유는 OSC의 시그널은 정말 방대하지만 AudioOut은 하나씩 시그널을 받기 때문에.

(예를 들어 뭔가 느낌이 포토샵에서 폴더 안에 여러 레이어들이 들어있는데 이걸 한방에 주는게 아니라

하나하나 레이어들로 나눠서 넘겨주는 느낌이다..)

그러니 vvvv에서 핵심적인 역할을 하는 Spread타입으로 나눠서 AudioOut에 넣어보자.

FromValue - Spread[Collections] 노드를 추가해서 연결해준다.

그리고 AudioEngine의 Play를 true로 바꿔주면 (오른쪽 마우스로 눌러주면) 삐- 소리가 들린다.

Sine으로 되어있는 Waveform을 Square로 바꾸면 한층 더 또렷이 들린다. (더 시끄럽다.)

 

 

 

 

- 지금 소리가 좀 날카롭게 들리는데 소리를 조금 부드럽게 만들어보자.

OSC 노드와 FromValue 사이의 줄을 더블클릭하면 그 사이에 새로운 노드를 insert할 수 있다.

IIR노드를 추가해준다.

그러면 소리가 더욱 부드러워진 것을 느낄 수 있다.

실제로 OSC의 아웃풋과 IIR아웃풋에 마우스를 가져다대면 신호파 같은게 쭉 지나가는게 보이는데,

신호의 모양이 부드러워진 것을 볼 수 있다.

 

 

 

- Gain값을 편리하게 줄이고 늘일 수 있는 게이지바로 바꿔보자.

Gain값이 써져 있는 네모를 휠마우스버튼으로 누른다. 

우선 Show Slider 옆에 긴 네모를 오른쪽 마우스로 눌러 활성화 해주자.

그리고 Minimum값을 0으로, Maximum값을 .5로 바꿔준다.

 

 

 

Gain창을 늘여서 크기를 키워준다.

그리고 오른쪽마우스로 위아래 움직이면 편리하게 소리 크기를 조절할 수 있다.

 

 

- OSC의 인풋값을 바꾸면 다양한 소리를 들을 수 있다.

Frequency Offset을 1로 바꾸면 Frequency값자체가 1로 바뀌면서 1초에 1번 반복되는 웨이브가 되는 것 같다.

(아니면 samplingRate가 1로 바뀌는건가?)

1초에 한번씩 반복되는 바뀌면서 Waveform이 Square일때, 뚜. 뚜. 뚜, 이렇게 끊겨서 들린다.

복잡해서 정확한 내용은 잘 모르겠지만

Frequency 값이 커지면 끊김 없이 소리가 들리고 (소리가 더 잦아지고)

작아질수록 소리의 주기가 띄엄띄엄 해진다.

 

AudioOut의 아웃풋 Channel Offset은 상당히 중요한 역할을 한다.

값이 0이면 왼쪽?만 들리고 1이면 양쪽이 다 들린다.

(채널이 1개에서 2개로 늘어난것으로 보인다. 채널 0번만 활성화! 에서 채널 0번 1번 활성화! 로.)

만약 방에 스피커를 여러개 설치해놓고 하는 작품 같은 경우.. 스피커의 개수에 맞게 늘려줘야 한다.

스피커가 다 잘 연결되어있는지 확인하려면 Waveform을 WhiteNoise로 바꿔주는게 좋다.

Sine이나 Square은 너무 소리가 세서 어느 스피커에서 나오는지 확인이 힘들기 때문에!

그러면 모든 스피커에서 소리가 잘 나오고 있는지, 확인할 수 있다.

 

 

 

 

 

 

 

- 이제 우리가 http주소에서 받은 데이터를 string으로 옮기고 최종적으로 float32타입으로 바꿔서

오디오화를 하기 위한 준비를 마쳐보자.

우선 Split(String)노드를 만들어서 ReadAll의 아웃풋과 연결한다.

그리고 두번째 인풋의 IO박스를 연결하면 Separator가 나온다.

즉, 어떤 문자를 기준으로 끊을지를 결정하는 역할을 한다. 

; 를 입력해서 세미콜론(;)을 기준으로 데이터들이 끊기도록 설정한다.

 

 

 

- String에서 Float32로 convert해주는 노드인 TryParse를 추가한다.

그리고 오른쪽 마우스를 더블클릭해서 String변수와 Float32변수를 추가해준다.

 

 

이렇게 연결을 마친 후에 text에 적힌 문자가 숫자로 잘 변환이 되는지 테스트해본다.

 

 

예시로 4.5 소수를 적어보면 float32창에 4.50이라고 잘 뜨는 걸 볼 수 있다.

TryParse가 일을 잘하는 것을 확인했으니 이제 우리가 준비한 웹사이트의 데이터를 연결해본다.

그러기 위해서는 TryParse를 반복적으로 실행시켜줘야 한다.

웹사이트의 데이터는 대략 1만개 정도이고 loop를 돌면서 그 데이터들을 모두 받아줘야 하기 때문에

 

String노드와 TryParse노드 그리고 Float32노드를 드래그해서 전체 선택을 하고 (반복할 부분)

오른쪽 클릭해서 Surround안에 있는 For each를 선택한다.

 

 

그리고 가장 위에 있는 string노드를 클릭해서 끌면 위에 2가지 타입의 dock바가 생긴다.

그 중에서 click to insert a splicer를 클릭하면 위 사진처럼 사다리꼴의 연결 고리가 생긴다.

연결 고리를 Split와 연결해주면 string창에 웹사이트 데이터가 넘어와 있는 것을 볼 수 있다.

아무래도 Split에서 넘겨주는 데이터가 만개 정도되니, 받을때도 splicer를 통해 하나씩 나눠서 받는 

역할을 하는 모양이다.

 

 

 

 

Float32의 아웃풋 쪽도 click to insert a splicer로 빼준다. 그리고 휠키누르면서 놓으면 (IO박스 연결)

데이터들이 뜬다. 앞에 0.00들은 웹사이트 앞부분에서 숫자가 아닌 글자들이 있어서 이렇게 뜨는 모양이다.

박스의 크기를 좀 더 늘리고 휠키를 아래로 내려보자.

 

 

 

 

웹사이트에 다시 들어가서 비교해보면 숫자들이 순서대로 잘 들어와있는 것을 확인해볼 수 있다.

(;를 기준으로 잘라서 들어가있다.)

 

 

 

 

- TryParse의 두번째 아웃풋은 Sucess이다. 유의미한 데이터를 받았는지, 아니면 해석할 수 없는 이상한 데이터

(예를 들어 글자들)가 들어왔는지 여부에 따라 True, False 를 반환해준다.

이 아웃풋에 Keep노드를 연결해주면 유의미한 데이터를 받았을때 true가 뜨고 값이 true이면

Keep해주는 과정을 거치는 듯 하다.

연결해주면 0.00와 같은 의미없는 데이터는 사라지고 1.00부터 시작한다.

멋져보인다. 거의 다 온 것 같은 기분.. 

 

 

 

 

- 데이터를 아까 만들어 둔 OSC노드 세팅에다가 연결한다.

우선 10026개의 데이터가 이 HTTP파일에서 넘어왔다. 

 

왼쪽에 Count부분은 왜 하신건지는 잘 모르겠지만? 튜토리얼에서 만들어 두셔서 따라 만들어봤다.

Count 노드를 만들어서 데이터 목록의 노드와 연결한다.

사진에는 보이지 않지만 Count아웃풋에 마우스를 가져다대면 10026이라는 숫자가 뜬다. (integer값)

우리가 가진 데이터 값들을 세서 보여주는 기능인듯 하다.

그리고 나눠도 본다. / 노드를 추가해서 값을 나눈다. /(intiger)를 추가한다.

/의 오른쪽 인풋의 값을 3으로 설정했더니 10026을 3으로 나눈 값, 3342가 나온다. 

 

메인 작업으로 넘어가본다.

데이터 목록 노드를 GetSlice와 연결한다.

그리고 오른쪽 index 인풋에 값을 정한다. 

이는 우리가 가진 수만개의 데이터 중 몇번째 인덱스 값을 받아올건지 결정하는 것이다.

(GetSlice가 목록 속 데이터들을 배열 값에 할당해주는 역할을 해주는 것처럼 보인다.)

사진 속에서는 1로 정했다. 첫번째 배열값, 즉 1.40의 값이 연결된다.

이를 Frequency Offset에 연결하면 Frequency값이 1.40인 것을 볼 수 있다.

 

3번째 인덱스값인 26.76 같은 것들이 연결되면 엄청 시끄러우니 반으로 나눠본다.

/ 노드를 추가한다. (/(integer)이 아닌, 그냥 /노드 추가하면 된다.)

그리고 아까와 마찬가지로 오른쪽 인풋 (input2)에 나눌 값을 정한다. 2로 설정했다.

간격이 훨씬 띄엄 띄엄한 것을 들을 수 있다.

 

이렇게 하나의 데이터 값을, 주파수와 연결해보았다.

 

 

 

 

 

- 이제 여러개의 데이터를 연결해보자.

 

드래그 해놓은 부분이 추가된 부분이다.

GetSlice와 index를 연결해놓은 부분(하나의 데이터만 받을 수 있는 부분)을 모든 데이터를 받을 수 있도록 바꿀 것이다.

 

1) 우선 GetSlice와 연결된 목록을 ValuesToVectors(3D)노드와 추가한다.

받은 float값들을 Vector로 바꿔주는 역할을 한다.

우리가 사용 중인 데이터는 3가지 타입이다 Id값, 그리고 F0값 (튜토리얼 상에서 Period라고 설명한다.)

마지막 DM값 (튜토리얼상에서는 Brightness, Stength라고 표현한다. 아무래도 사운드를 레이저로 표현할 때가 많은데

이때 레이저 강도를 표현할때 적용할 값인가보다.)

때문에 이 세가지를 한쌍으로 묶어주기 위해 3D를 선택하는 것이다. (x에는 id값, y에는 F0, z에는 DM값이 담긴다.)

 

 

2) ValuesToVectors에 담긴 수많은 백터값들을 하나씩 받아준 뒤, 넘겨줘야 한다.

그 역할을 담당하는 것이 Vector(Split) 3D 노드이다.

노드를 추가하면 ValuesToVectors과 바로 연결할 수 없는 것을 볼 수 있다.

 

그 이유는 ValuesToVectors에는 수많은 백터값들이 있고 현재 Vector는 하나의 세트만 받을 수 있기 때문에.

그렇기에 loop를 돌려서 계속해서 값을 받아올 수 있도록 해야한다.

Vector을 오른쪽 마우스로 눌러 아까와 마찬가지로 Surround-forEach를 눌러 반복문에 넣어준다.

인풋과 아웃풋도 마찬가지로 Click to insert splicer로 빼준다. 값을 나눠서 받고 아웃풋으로 건네줄 때에도 

하나씩 내보내야 하기 때문에.

여기서 Vector의 두번째 아웃풋을 빼주었다. 마우스를 아웃풋쪽에 가져다대면, y value라는 것을 볼 수 있다.

즉 3쌍의 값(x,y,z)중 2번째 값을 이번에는 사용해보려는듯 싶다.

 

3)  Vector의 아웃풋은 GetSpread노드와 연결해준다.

GetSpread의 두번째 인풋과 세번째 인풋에 IO박스를 연결해주면 각각 Index와 Count를 볼 수 있다.

index는 몇번째의 y값을 볼 것인지를 결정한다. 시작은 0부터이다.

만약 사진 속에 값을 0에서 1로바꾸면 1.40은 못보고 0.27부터 볼 수 있다.

Count는 index넘버를 기준으로 몇개의 index값을 가져올지를 결정한다.

사진 속에서는 3이라고 쓰여있어서 총 3개의 값을 보여주고 있다.

 

 

 

 

- GetSlice 노드를 지워주고 OSC노드와 연결해줄 준비를 한다.

현재 GetSpread는 여러개의 Float32 값들을 넘겨주고 있다.

값이 하나가 아니기 때문에 각각의 값에 대해서 마찬가지로 loop문을 돌려야 한다.

Gain은 어차피 공통적인 음량값이기 때문에 loop문에서 제외하고 나머지 친구들만 For Each문에 넣어준다.

(반복영역 드래그 - 오른쪽 마우스 - Surround - For Each)

IIR의 아웃풋은 값을 각각 하나씩 넘겨줄거기 때문에 Splicer에 통과시켜 빼준다.

 

이제 FromValue 노드는 지워줘야  AudioOut과 연결할 수 있다.

FromValue의 인풋을 살펴보면 AudioSignal 자체를 통으로 받지만

우리는 For Each 문을 통해 각각 나눠서 주고 있기 때문에.

 

 

 

- 아직 데이터 목록의 값을 Frequency Offset에 넘겨주지는 않았지만, 

분명히 Frequency Offset에는 1이라는 값을 설정해 주었으므로 소리가 들려야 하는데.. 소리가 들리지 않는다!

그 이유는 튜토리얼에서 설명하는 바로는.. 루프가 계속 돌고 있기 때문에 계속해서 값을 넣어주어야 하기 때문이다.

저 1이라는 고정 값이 모든 루프마다 계속 값을 넘겨주지는 않나보다. 

(loop밖으로 빼주면 해결될 수도 있다는데 빼 본 결과 그래도 소리는 나지 않는다. 아니면 한번 짧게 나고 꺼졌거나..)

 

 

 

 

- 우리의 원래 목표대로 데이터목록을 Frequency Offset의 인풋으로 넘겨주자.

확인해본 결과, 저렇게 2.67와 0.77 두개의 값이 넘어간 경우,

각각의 소리가 동시에 계속 난다.

뚜(2.67/2값)  뚜(2.67/2값)  뚜(0.77/2값) 뚜(2.67/2값)  뚜(2.67/2값)  뚜(0.77/2값) 이런식으로 

각자의 템포에 맡게 동시에 소리가 들려온다.

3개면 3개가 동시에 4개면 또 4개가 동시에.. 이런식으로 순서없이 마구 들린다.

 

 

- (선택) 소리를 좀 더 부드럽게 만들어보기.

너무 큰 주파수들은 상당히 시끄럽게 들리기도 한다. (소음공해급)

Filter노드를 사용하면 소리를 좀 더 부드럽게 걸러줄 수 있다.

FilterNode를 만들고 OSC와 IIR과 연결시켜 준다.

중요한 역할을 하는것은 V2A노드인데 Value to Audio의 준말인지 싶다.

말 그대로 Value값을 Audio값으로 바꾸는 것이다. 이 노드를 추가해서 인풋값을 설정한다.

(튜토리얼에서는 20으로 설정했으나 1이나 20이나 차이가 없다.. 0만 아니면 되는것 같다.

0은 필터 추가를 안한 것과 똑같다.)

인풋을 추가한 V2A노드를 Filter의 2번째 인풋 Frequency와 연결한다.

 

또 중요한 부분은 Filter의 마지막 인풋의 값을 Low Pass에서 High Pass로 바꿔주어야 한다!!

(이유는 모르겠지만 그래야 이 예제에서는 필터가 작동한다.)

 

 

이렇게 하면 소리가 좀 더 작아?진 것을 느낄 수 있다. 

지금의 소리가 마음에 든다면 필터를 사용하지 않아도 전혀 무관하다. 

 

 

 

 

 

 

 

 

=> 지금부터는 지금 들리는 오디오 값을 비주얼화하는 방법이다.

 

 

- 우선 A2V노드를 추가해서 OSC아웃풋과 연결해준다.

A2V는 Audio to value로 오디오 값을 flloat 값으로 바꿔주는 역할을 한다.

A2V노드도 각각 spread해서 넘겨줘야하므로 For Each 루프에서 splicer로 빼준다.

 

 

- 그 다음으로는 Renderer 노드를 추가한다. (Renderer는 출력 화면을 만들어주는 노드이다.)

그런데 Renderer가 보이지 않는다. 2021.4.12버전에서는 바로 떴던 것 같은데..

2020.2.0버전에서는 VL.Skia 패키지를 열어줘야 그 다음부터 보이는 듯 싶다.

VL.Skia 패키지를 연 후에 Renderer를 추가한다.

 

 

 

- 튜토리얼에서 Help창 속 Randomwalk them Circles예시를 기반으로 비주얼화를 진행한다고 한다.

 

 

 

- 소리에 맞춰 사각형이 나타나도록 해보자.

Renderer 노드에 우선 Group(Spectral)노드를 연결한다.

우리가 넘겨줄 사각형은 엄청 여러개이므로 Group으로 받고 하나씩 나눠서 Renderer에 넘겨줘야 한다.

그리고 Rectangle노드를 추가한다.  Group노드가 여러개의 사각형을 반복적으로 받을 수 있도록 

splicer 아웃풋으로 연결해준다.

각각의 소리값을 반복적으로 받아줄 것이므로 Rectangle은 ForEach loop로 묶어준다.

 

 

- 뚝 뚝 소리에 맞춰 네모가 나타났다 사라졌다 하도록 노드를 추가하였다.

사각형의 투명도를 조절해서 나타났다 안나타났다 하도록 하는것이므로, 

Paint - SetAlpha 노드를 추가한다.

그리고 Rectangle의 Paint 인풋과 연결을 한다.

SetAlpha의 인풋을 A2V와 연결하기 위해서 인풋 연결 마디도 splicer로 빼준다.

하지만 A2V와 직접적으로 연결할 수가 없다. 왜일까?

이유는 A2V의 아웃풋은 Float64이고 SetAlpha가 요구하는 인풋은 Float32이다.

때문에 ToFloat32노드를 추가하여 A2V와 splicer 아웃풋 사이에 껴넣어준다. 

그러면 SetAlpha와 연결이 가능하다!

하지만 Renderer화면에는 회색, 흰색 이런식으로 뜬다. 완전히 블랙과 화이트가 아니다..

 

우리는 하얀색 네모가 깜빡 깜빡이도록 하고 싶기 때문에 Changed노드를 추가한다.

Changed 노드는 input을 Float32를 받고, output은 Boolean으로 내보내준다.

신기하게도 사이에 추가를 하자 사각형이 깜빡 깜빡한다.

아무래도 오디오 시그널을 value로 바꾼거기 때문에  값이 들어올때에만 True로 바뀌고 

그 외에 조용할때는 False값을 리턴해주는 모양이다.

 

 

 

여기까지 하면 하나의 사각형이 박자에 맞게 깜빡이는 모습을 볼 수 있다!

 

 

(주의할 점은 count를 1개로 해줘야 깜빡이는 모습을 제대로 볼 수 있다. 

너무 frequency값이 높아버리면 사각형이 사라짐 없이 계속 나타난다.)

 

 

만약 네모가 보이지 않는다면 다음과 같은 노드를 추가하면 된다.

MainLoop노드에 Max FPS 인풋 값을 바꿔주는 것이다.

이마 처음 IOBox를 연결하면 60으로 나타날 것인데 10으로 바꿔주면 소리가 들린다고 한다.

(나는 안해도 잘 들렸지만.. 튜터님은 안됐다. 혹시 나중에 비슷한 노드 만들 일 있으면 참고하기!)

 

 

 

 

 

 

지금부터는 화면에 얼룩말 무늬처럼 가로로긴 선들이 소리에 맞춰 나도록 바꿔보려고 한다.

 

 

- 가장 먼저 추가해야 할 노드는 TransformSRT이다. 

TransformSRT 노드는 Layer을 받아 Scale, Rotation, Transform을 바꿔주는 노드이다.

먼저 쪼끄만한 네모를 화면의 가로는 꽉채우고, 세로는 우리가 가진 데이터 값으로 유동적으로 줄이려고한다.

그 과정을 위해 TransformSRT의 두번째 "Scale인풋"에 Vector(join)[2D]노드를 연결한다.

Vector(join)[2D]노드는 두개의 x,y좌표를 하나의 벡터로 만들어주는 노드이다.

(번외로 Vector(split)[2D]노드는 벡터 하나를 인풋으로 받아 x,y,좌표로 나누어주는 노드.)

 

Vector(join)노드의 x값은 4 (대략 화면의 가로를 꽉 채우도록 크게 잡았다.)

y값 (하얀 네모의 세로값)은 인터랙티브하게 줄어들도록 해본다.

y의 IObox에 /(integer)노드를 추가해 연결해준다.

나눠질 값은 2(화면의 세로로 추정되는값)로 정한다. (1을 받으면 2/1 = 2, 2를 받으면 2/2 = 1이 된다.

나눠질 값은 / 노드의 왼쪽 인풋을 조정하면 된다.)

그리고 / 노드는 저어 위에 count노드와 연결해준다.

 

 

 

우리가 받아온 데이터 개수를 조절하는 Count노드와 연결해줌으로써

현재 인덱스의 개수는 3이므로 2/3 = 약 0.67이 된다.

 

 

 

이렇게 지금 가로의 크기는 꽉차게, 세로는 개수에 따라 얇아지도록 설정했다.

 

여기까지 하면 위의 사진과 같은 위치에서 선(?)이 깜빡 깜빡하는 것을 볼 수 있다.

이제 좀 다이나믹하게 움직이도록 바꿔보자.

 

 

 

 

 

 

- TransformSRT의 마지막 인풋 Translation에 마찬가지로 Vector(join)[2D]노드를 연결한다.

받아오는 x,y값에 맞춰 위취를 바꿔주는 역할을 하는듯 하다.

선을 세로로 왔다갔다하게 만들 것이므로 y값을 담당하는 오른쪽 아웃풋을 splicer로 뺀다.

 

선을 자유롭게 뿌려주는 역할은 LinearSpread노드이다.

vector의 인풋과 연결시켜준다.

LinearSpread의 두번째 인풋은 width이다. 

정해진 width값 범위 (range)안에서 count값으로 나눠 나타나도록 한다.

count는 마찬가지로 우리가 정한 데이터의 개수, GetSpread의 count아웃풋과 연결되어 있다.

이 개념이 이해가기가 좀 어렵고 지금도 완전히 이해하지는 못한 것 같다.

 

LinearSpread의 Width는 현재 2이다. 

그리고 Count는 현재 2이다.

2라는 범위 안에서 동일한 간격에서 두개의 선을 그리겠다는 얘기이다. 

LinearSpread의 아웃풋을 확인해보면 -0.50, 0.50이다.

VVVV의 좌표계는 맨왼쪽상단에 -1,-1 이고 아래로, 오른쪽으로 가면서 점점 커지는 구조이다.

(하지만 세로의 값은 무조건 0에서 1사이의 값이다. / 세로가 기준 가로는 상관없음.) 

세로의 너비가 현재 1이라고 생각했을때 2개의 선을 동일한 간격에 그리기 위해서는

각각 선의 y좌표가 -0.5 그리고 0.5가 되는 것이다.

(세로의 scale도 너비값 2를 기준으로 count의 값으로 나누도록 했으니 딱 알맞게 선이 채워지는 것이다.)

 

 

 

 

 

 

 

 

count값이 2일때

 

 

 

- count 개수 (우리가 설정한 받을 데이터 개수)를 2로 하면 다음과 같은 결과가 나온다.

두개의 선이 소리가 날때마다 하얗게 그려진다.

언뜻보면 선이 이동하는 것처럼 보이지만 선들의 영역은 고정이고 소리가 날때마다 그리는 것이다.

 

 

여기까지가 튜토리얼의 2시간 10분정도 까지의 분량이다.

나머지 파트는 질문 시간이랑 이것저것 정보 위주여서 따로 적지는 않았다.

노드에 대해 헷갈리는게 많을 때 다시 이후를 보면 좋을 듯하다!

 

 

 

 

 

 

<최종 결과물 & 코드>

 

count 값이 10일때

count 값을 10으로 하자 10개의 선들이 각각의 index 넘버 주파수가 울릴때마다 하얗게 나타난다.

(비디오에는 소리가 담기지 않았지만 소리에 맞춰서 생기는 중이다.)

count값을 다양하게 바꿔보면서 결과를 보는 것은 꽤 흥미롭다.

 

 

 

 

두 시간 분량 이해하고 정리하는데 3일은 걸린 것 같다.

그래도 튜토리얼이 있어서 너무 다행이다 싶다..!

시간 박치기를 해서라도 vvvv에 점점 익숙해질 수 있다면..

이제 배우는 내용을 바탕으로 데이터 시각화에 도전해봐야겠다.