-
vvvv gamma : Controlling Patches / VL7.Graphics/VVVV gamma 2023. 10. 8. 06:43
* 아래 영상을 보고 노트한 내용이다.
https://youtu.be/LOX32diUgOQ?si=TZeH1j2nQCxK3nQA
마지막 튜토리얼 영상이다.
마우스와 키보드를 이용한 인터랙션을 진행하는 내용이었다.
우선, 지난번에 Sphere들의 위치로 랜덤하게 움직이는 Box예제를 가져왔다.
1. Mouse
Mouse 노드를 추가해서 RootScene에 추가한다.
(RootScene의 input 핀을 늘이기 위해서는 Ctrl + 를 누른다.)
Mouse 노드의 position in the world 아웃풋을 XYz노드를 추가해 연결한다.
그리고 Box의 TransformSRT의 Translation에 연결한다.
=> 마우스의 위치에 따라 박스가 이동하게 된다.
다음으로는 Switch 노드에 대해 알아볼 것이다.
Switch(/Control): 인풋으로 integer 인덱스를 받아 인덱스 넘버에 따라 0이면 첫번째 값을, 1이면 두번째 값을 호출한다.
(만약 ctrl + 로 값을 하나 늘리면 인덱스도 0,1,2로 늘어난다.)
Switch의 인풋에 Left Pressed를 연결하여 왼쪽 마우스를 누르면 인덱스 1이 호출되고, 누르지 않으면 0이 호출되도록 한다.
값으로 치면, 1이 되면 1.2, 0이 되면 1이 호출된다.
이 Switch의 아웃풋을 TransformSRT의 scale에 연결한다.
=> 화면을 왼쪽 마우스 버튼으로 누르면 박스가 커지고, 마우스를 떼면 크기가 1로 돌아온다.
다음 노드는 Swap이다.
Swap: Switch와 매우 흡사하지만, input으로 두개의 값을 가지고(vector, float, RGBA등) 아웃풋 역시 두개의 값을 가진다.
인풋으로 받는 boolean값으로 값이 전환될때 두개의 아웃풋이 전환되어 호출된다.
Swap의 bloolean 인풋을 Mouse의 LeftPressed에 연결하고 분홍색, 초록색 RGBA 인풋들을 연결했다.
Swap의 두가지 색상 아웃풋중 하나는 Box의 PBRMaterial의 컬러 인풋에 연결하고 다른 하나는 SceneWindow의 배경색에 연결했다.
마우스 왼쪽 버튼을 누르지 않았을 때 마우스 왼쪽 버튼을 눌렀을 때 마우스를 누를때 색상이 전환되는 결과를 볼 수 있다.
마우스를 누르고 있지 않고도, 클릭하면 색상이 바뀌도록 토글 방식으로 전환해보자.
그러기 위해서는 TogEdge와 Toggle을 추가해야 한다.
Toggle: boolean을 인풋으로 받아 눌릴때 마다 0과 1로 전환된 아웃풋을 내보낸다.
TodEdge: boolean 인풋을 받아 1이면 UpEdge가 1이 되고 0이면 DownEdge가 1이 된다.
여기서는 마우스를 누르면 UpEdge가 1이 되고, 마우스를 떼면 DownEdge가 1이 된다.
(이 예제에서는 UpEdge와 DownEdge를 configure에서 bang으로 바꾸었다.)
이 두개를 같이 사용하는 이유는 Toggle만 사용했을때는 마우스버튼을 누르는 순간 vvvv는 60프레임으로 작동하기 때문에
끊임없이 1에서 0으로 전환되는 과정이 반복되고 결과적으로 깜빡거리는 화면이 나타난다.
때문에 여기서는 두개를 같이 사용하여 input으로 마우스 버튼을 받았다.
** 최종 패치 화면
** 최종 결과 영상
2. Keyboard
다시 첫 예제를 가져와 수정하면서 작업해보려 한다.
마우스와 키보드 인터랙션을 함께 사용하는 인터랙션 예제이기 때문에 mouse와 keyboard를 Group(/Stride)에 합치고 RootScene에 연결한다.
Keyboard: keyboard 인터랙션을 위한 노드
KeyPressed: 키보드의 특정 버튼이 눌리면 true를 반환한다. 안풋으로는 keyboard와 키값을 받는다.
마우스 왼쪽 버튼을 누르거나 키보드 스페이스바를 누르면 or문이 true가 되면서 박스가 움직이도록 한다.
TogEdge를 통해 매 프레임마다 연산을 복잡하게 만들지 않고, 깔끔하게 1회만 반응하도록 한다.
OR: 조건 연산자 or와 같은 역할. input들 중 하나만 만족되어도 true가 됨.
** 최종 패치 화면
** 최종 결과 영상
마우스 왼쪽버튼을 누르거나 키보드 스페이스바를 누르면 박스가 이동한다. 'Graphics > VVVV gamma' 카테고리의 다른 글
vvvv gamma 패치 리뷰 : 오디오 데이터 받아오기 / Audio visualization 오디오 시각화 (1) (2) 2023.10.16 vvvv gamma 노드 리뷰 : Reference Resample (ResampleBSpline 예제) (1) 2023.10.11 vvvv gamma : Spreads & Iteratio / VL6. (0) 2023.10.07 vvvv gamma : The Stride Rendering Pipeline / VL5. (1) 2023.10.06 vvvv gamma : Type Conversion / VL4. (0) 2023.10.06