Workspace

지난번에 만든 예제를 기반으로 객체지향형으로 작동하도록 만들어볼 것이다. 여기서 객체지향형이란, 각각 다른 기능을 가진 코드(노드)들을 함수처럼 묶어주어 어디서든 활용이 가능하도록 하는 편리한 기능이다. Definitions에 Process(함수와 유사)노드를 추가해, RandomSphere 라고 이름 붙였다. RandomSphere 안에 전 예제에서 원의 크기와 위치를 바꿔주는 내용을 옮겨 붙였다. 메인 패치와의 연결을 위해, Sphere의 아웃풋핀을 만들어준다. (Ctrl 누르면서 놓기 -> 아웃풋/인풋핀 생성) 메인 패치로 돌아와 Randomsphere 노드를 두개 만든 뒤 그룹지어 연결했다. 화면에 나타나며 정상적으로 작동하는 것을 볼 수 있다. RandomSphere을 오른쪽 마우스 누른 뒤, ..

7주차에는 조건문(if)을 사용한 예제와, 객체지향형 프로그래밍을 위한 구조 설계에 관한 내용을 배웠다. 먼저 왼쪽은 마우스를 빠르게 움직일수록 큰 원이 생겨나는 예제다. 첫번째 예제는 지난주에 배운 Pad를 복습하는 내용이다. Pad는 프로그래밍으로 치면 변수를 생성하는 것과 같다. 왼쪽의 Positon 변수는 실시간으로 값이 바뀌는 반면 오른쪽 Position은 다음 프레임에서 업데이트 된다. 때문에 전 프레임과 현재 프레임의 마우스 위치가 크기가 많이 차이날수록 큰 원이 생겨나는 것이다. 두번째 예문은 if를 활용한 것이다. if 오른쪽에 condition이 true가 되면 값이 if 안의 내용이 실행된다. if 문을 사용할때의 주의할 점은 아래와 같다. 첫번째, input값은 연결된 선을 눌러 오..

5주차의 첫 예제는 마우스에 반응하여 움직이는 원들이다. 중요한 부분은 현재 마우스의 위치 뿐만 아니라 그 전의 위치까지, 원이 생겨나는 것이다. 또한 퍼져나가는 효과 역시 특징적이다. 결과 영상 Circle(/Stride.Textures.Source)를 추가한다. Skia.Layers circle과 두드러지게 다른 점이 있다면 직접 해상도를 결정지을 수 있다는 점이다. Circle의 Position, Radius, Fil(Color) 요소가 어떻게 연결되어 있는지 살펴보자. - Position Mouse Position에 x에는 1, y에는 -1을 곱한 후 Circle Position과 연결하였다. -1을 곱해주지 않으면 정확한 마우스 위치에 원이 생기지 않는다. (이 이유는 정확히 알 수 없다고 한다..

이어서 두번째 내용이다. 글리치같은 효과를 추가되었고, 소리에 따라 원들의 크기가 커지며 여러개가 생겨난다. 전체 패치 모습이다. 효과를 추가하기 위해 SkiaTexture을 연결한다. SkiaTexture와 TextureWindow를 추가하기위해서는 VL.Stride 라이브러리를 열어야한다. (Skia와 관련된 노드인데 왜 Stride 안에 들어있는지 의문이지만 꼭 VL.Stride를 추가해주자!) ShiftRGB : RGB 색상으로 레이어가 번지도록 하는 효과. 데시벨을 가져오는 Meter와 연결하여 소리가 클수록 더욱 강하게 번지도록 했다. Info(/Textures.Utils) : 텍스처의 여러 정보값들을 보여주는 노드. 볼륨이 일정 값을 넘으면 배경색이 하얗게 바뀌도록 하는 부분이다. SkiaT..

기본개념을 토대로 조금 더 화려한 비주얼을 만들어보자. 이번에는 FFT 노드를 활용해볼 것이다. https://leere.tistory.com/73 vvvv gamma 패치 리뷰 : 오디오 데이터 받아오기 / Audio visualization 오디오 시각화 (1) 버전: vvvv gamma 5.0 오늘은 과제로 제출했던 Selbstporträt의 vvvv gamma파일을 다시 풀어 어떻게 만들었는지, 배운 내용을 복습하고 메모해두려 한다. 우선 결과 이미지는 보라색계열의 점과 선들이 원 leere.tistory.com FFT 관련해서는 다른 프로젝트에서 활용했던 내용이 있어 관련 포스팅을 첨부하는 것으로 대체한다. 먼저 위와 같이 오디오에 반응하는 원을 만들어볼 것이다. 이과정까지의 패치, 전체 모습이..

지난번에 Audio 관련된 프로젝트를 개인적으로 만들었었는데, 이번에 조금 더 구체적으로 배웠다. 이런 형태인데 오디오의 크기에 반응하여 주전자(Teapot)의 크기가 변한다. 또한 일정 볼륨이 넘어가면 파란색에서 분홍색으로 색이 바뀐다. 전체적은 패치는 위와 같다. AudioPlayer를 통해 오디오 파일을 불러와준다. 이미지 파일과 마찬가지로 맥에서 불러올때에는 맥 경로가 아닌, 윈도우 경로를 통해 불러와주어야 경로 이탈 문제가 생기지 않는다. AduioPlayer는 AudioOut과 연결되어야 소리가 들린다. ToMono는 지금 오디오가 좌우 사운드를 다 가지고 있는 스테레오 타입이므로 편리한 오디오 데이터 사용을 위해 모노로 바꿔주는 과정이다. 또한 Meter 노드도 상당히 생소한데 Help창의 ..

week3 마지막 내용이다. 결과물은 위와 같다. 주파수 모양의 아웃풋에 위에 있는 슬라이드 바로 여러가지 값들을 바꿀 수 있다. 4개의 점으로 이어진 폴리건을 만들어준다. 여기서 여러 수학적 주파수를 이용해, 다양한 테스팅을 이어가볼 것이다. include low level node를 포함해 sin 노드를 검색해 추가한다. Sin(/Math) Sin을 Y에 연결시킨뒤 count와 Width 값을 높이면 사인파 모습이 어렴풋이 보인다. sin 노드 대신 SimplexNoise 노드로 대체하였다. 가로선에 노이즈가 생겨나는데 이때 LinearSpread의 Count값을 높이면 선이 부드럽게 변한다. SimplexNoise의 Octaves, Frequency, Persistance(지속) 값을 조정하여 그래..

두번째 예제는 3D를 다루었다. 3차원 공간에 구들이 있고 그 사이로 선들이 연결되어 있다. 구와 구 사이의 거리가 멀수록 선이 연하다. (알파값이 낮다.) 구를 만드는 부분은 늘 반복해오던 구조이다. 눈여겨 볼만한 부분은 RandomSpread(Vector3)의 Center와 Size의 값의 차이가 클수록, 구들이 더 멀리 떨어져있다는 점이다. Wanderer의 Position(Vector3) 아웃풋들이 ConnectAll과 연결된다. ConnectAll 노드가 이해하기가 좀 까다로웠다. 구체적인 메커니즘은 잘 모르겠지만 Vector3 Spread값들을 받아 그 사이를 연결하는 시작점과 끝점을 만든다. Threshold가 높을수록 각각의 Vector값들이 모든 Vector들과 개별적으로 연결된다. (결..