-
vvvv gamma : Advanced 3D / week6 #1Graphics/VVVV gamma 2023. 11. 24. 21:28
5주차의 첫 예제는 마우스에 반응하여 움직이는 원들이다.
중요한 부분은 현재 마우스의 위치 뿐만 아니라 그 전의 위치까지, 원이 생겨나는 것이다.
또한 퍼져나가는 효과 역시 특징적이다.
결과 영상 결과 패치 Circle(/Stride.Textures.Source)를 추가한다.
Skia.Layers circle과 두드러지게 다른 점이 있다면 직접 해상도를 결정지을 수 있다는 점이다.
Circle의 Position, Radius, Fil(Color) 요소가 어떻게 연결되어 있는지 살펴보자.
- Position
Mouse Position에 x에는 1, y에는 -1을 곱한 후 Circle Position과 연결하였다.
-1을 곱해주지 않으면 정확한 마우스 위치에 원이 생기지 않는다.
(이 이유는 정확히 알 수 없다고 한다! 우선 기억해두자.)
- Radius
Distance : (in) - Input(T4), Input2(T4)
(out) - Result(Float32)
=> 두 인풋사이의 거리를 float으로 내보내준다.
pad 노드를 추가하여 Position으로 이름 지어준 후, Distance의 첫번째 인풋과 연결해주었다.
pad 노드는 노드의 아웃풋을 변수로 만들어주어서 다른 곳에서도 활용할 수 있도록 한다.
여기서는 Mouse의 위치가 Position에 해당한다.
Distance의 두번째 인풋은 다시 Position을 추가하여 연결하였다.
이때 오른쪽의 Position은 1프레임 전, 마우스의 위치이다.
즉, 첫번째 인풋 Position의 프레임이 최신 프레임, 두번째 인풋 Position의 프레임이 한 프레임 포지션 값이다.
vvvv gamma의 작동 방식을 살펴보면 다음과 같다.
마치 프로세싱의 코드처럼 처음에 모든 변수의 값을 가져와진다.
그 후 중간에 값이 업데이트 되면 다음 프레임을 가져올때 값을 업데이트 해준다.
때문에 현재 마우스위치와 그 전의 마우스위치의 차이가 클수록 더 큰 원이 생겨나게 된다.
- Fill(Color)
Mouse의 LeftPressed(Boolean) 아웃풋을 Switch의 인풋과 연결해주는다.
0일때(마우스가 안눌릴때)는 검은색으로, 1일때는 LFO를 활용하여 무지개색으로 설정했다.
Circle의 아웃풋(Texture)에 효과를 주는 부분이다.
Blend 노드는 아래와 같은 역할을 한다.
Circle의 아웃풋을 Blend의 첫번째 인풋으로 연결한다.
Blend 두번째 인풋에는 Feedback, Blur, Transfom이 순차적으로 연결된 형태이다.
Feedback :
재귀 함수라고 생각하면 쉬울 것 같다.
=> 결과 텍스처를 반환해서 다시 인풋으로 보내주고 이를 무한 반복한다.
(다만 신기한점은 무한반복이면 언제 끝나는지 궁금하긴 하다.)
Feedback을 통해 반복되는 텍스처의 내용이다. :
Blur로 흐림효과를 준 후에, Transform에 UniformScale 0.9를 곱해
바깥쪽으로 퍼져나가는 것처럼 보이도록 했다.
UniformScale은 TransformSRT의 Scale 조정하는 부분을 따로 노드로 만들어준것이라 생각하면 편하다.
조금더 Scale에 특화되어 사용할 수 있다.
'Graphics > VVVV gamma' 카테고리의 다른 글
vvvv gamma : Language Methodologies / week7 #2 (0) 2023.12.05 vvvv gamma : Language Methodologies / week7 #1 (2) 2023.12.02 vvvv gamma : Audio Visualization (with FFT) #2 / week5 (0) 2023.11.20 vvvv gamma : Audio Visualization (with FFT) #1 / week5 (2) 2023.11.19 vvvv gamma : Audio React / week5 (0) 2023.11.16