-
vvvv gamma : Audio Visualization (with FFT) #1 / week5Graphics/VVVV gamma 2023. 11. 19. 07:39
기본개념을 토대로 조금 더 화려한 비주얼을 만들어보자.
이번에는 FFT 노드를 활용해볼 것이다.
vvvv gamma 패치 리뷰 : 오디오 데이터 받아오기 / Audio visualization 오디오 시각화 (1)
버전: vvvv gamma 5.0 오늘은 과제로 제출했던 Selbstporträt의 vvvv gamma파일을 다시 풀어 어떻게 만들었는지, 배운 내용을 복습하고 메모해두려 한다. 우선 결과 이미지는 보라색계열의 점과 선들이 원
leere.tistory.com
FFT 관련해서는 다른 프로젝트에서 활용했던 내용이 있어 관련 포스팅을 첨부하는 것으로 대체한다.
먼저 위와 같이 오디오에 반응하는 원을 만들어볼 것이다.
이과정까지의 패치, 전체 모습이다.
이부분은 FFT를 활용하는 기본 템플릿 같은 구조이다.
GetSlice는 ToMono와 같은 역할을 한다. (=ToMono를 사용해도 된다.)
두채널 중 하나의 채널의 값만 가져온다는 의미이다.
현재 FFT의 아웃풋은 오디오시그널이다.
FromSequence 노드를 통해 Spread로 변환해 내보내주었다.
CircleSpread를 이용해 원을 만들것이다.
CircleSpread는 count의 개수만큼의 점을 연결하여 원을 만든다.
FFT 주파수 개수만큼 원을 만들기 위해 Count(Spread) 노드로 Spread의 개수를 받아온 다음,
이를 CircleSpread의 Count 인풋에 연결했다.
원을 이루는 점들에 각각 사각형들을 만들어준다.
원을 이루는 각 점들에 사각형이 반복적으로 생성되는 구조이다.
사각형의 포지션은 점의 포지션, X스케일은 소리의 크기에 반응하도록 할 것이다.
먼저 TransformSRT의 Rotation 인풋에 ToPolar 노드를 거쳐 CircleSpread를 연결했다.
ToPolar는 사각형들의 중심축을 센터로 옮겨주는 역할을 한다.
기준점을 World 좌표에서 Local 좌표로 바꿔준다고 이해하면 편할 것 같다.
자주 쓰인다고 하니, 기억해두자!
ToPolar 적용 전 ToPolar 적용 후 (약간 태양빛처럼 중심축을 기준으로 뻗어나가는 사각형들을 볼 수 있다.)
Rectangle 노드를 TransformSRT에 연결했다.
유의할점은, Stride의 경우 TransformSRT 아웃풋을 오브젝트와 연결하지만
Skia는 반대로 오브젝트 아웃풋이 TransformSRT와 연결된다.
(= 위 아래 연결이 반대)
Rectangle의 Scale에 관한 부분이다.
Ractangle의 가로길이(x)가 소리가 클수록 길어지고 작을수록 짧아진다.
LinToLog (exmperimental node) : 오디오 시그널을 log시그널로 바꿔준다.
(노드 검색시 오른쪽 버튼, include potential future node를 눌러야 나타난다.)
수학적인 내용이라 정확히 이해하지 못했지만, 결과물을 확인해보면 차이가 나타난다.
LinToLog 적용 전 LinToLog 적용 후 (조금 더 부드럽게 바뀌면서도 대비가 커지는 느낌이다.)
LinToLog에서 받아온 Spread 값들을 Map노드를 통해 범위 안으로 맵핑했다.
이 부분에서 막대의 길이를 늘이거나 줄일 수 있다.
'Graphics > VVVV gamma' 카테고리의 다른 글
vvvv gamma : Advanced 3D / week6 #1 (1) 2023.11.24 vvvv gamma : Audio Visualization (with FFT) #2 / week5 (0) 2023.11.20 vvvv gamma : Audio React / week5 (0) 2023.11.16 vvvv gamma : SimplexNoise와 UI / week4 (1) 2023.11.13 vvvv gamma : Stride Sphere와 연결된 Line 만들기 / week4 (0) 2023.11.10