[touchdesigner] 터치디자이너 영상소스 합성하기
1. 합성할 영상 2개를 불러온다.
(빈 공간을 더블 클릭해서 Movie file in을 선택하거나, 바탕화면에서 드래그앤드롭으로 가져올 수 있음)
2. 빈 공간 더블클릭 > Top 섹션의 composite를 클릭한다.
그리고 1번에서 불러온 영상 소스들을 선으로 연결해준다.
*소스파일 2개를 가져올 때 따로 설정값이 없으면 두 번째 소스파일의 비율에 맞춰지게 된다.
(ex. 첫번째 소스는 1:1, 두번째 소스는 3:4 비율이라면 composite된 영상은 3:4 비율로 만들어짐)
3. 영상의 비율을 맞춰주고 싶다면, 우측 상단에 있는 UI 중 transform을 클릭해서 조정할 수 있다.
- Fixed layer : 이 탭에 표시된 영상의 비율에 맞춰진다.
- Pre-fit overlay
-fill : 화면에 넘치거나 잘리지 않는 선에서 영상을 찌그러뜨려 우겨넣어짐
-fit horizontal : 기준 영상의 가로폭에 맞춰짐 (영상이 찌그러지지 않음)
-fit vertical : 기준 영상의 세로폭에 맞춰짐 (영상이 찌그러지지 않음)
-fit best : 화면이 넘치지 않는 선에서 안으로 채워짐. horizontal, vertical의 혼합
-fit outside : 영상이 잘리는 한이 있더라도 꽉 채워서 들어감
-native resolution : 영상 소스의 기존 픽셀대로 들어감
4. 우측 상단에서 composite 탭 > operation은 포토샵의 블렌더 기능과 같다.
(기본값은 multiply, 두 영상의 색상영역을 곱한다는 의미)
[실습하기]
첫 번째 노드
1. 더블클릭 > video device in 오퍼레이터로 내 모습이 나오고 있는 웹캠 영상 가져오기
두 번째 노드
2. 더블클릭 > rectangle로 사각형 만들기
세 번째 노드
3. 더블클릭 > composite으로 앞에서 가져온 두 영상 겹쳐주기! 이 때 해상도를 맞춰줘야 한다.
(2번에서 만든 사각형 선택 후, 오른쪽 상단 UI의 common 탭에서 resolution을 내 모습이 찍히는 영상의 해상도와 같게 설정해준다. 내 모습 해상도는 마우스 우클릭 > info에서 알 수 있다)
>>> 여기까지 하면, 내 얼굴이 rectangle 안에 들어가있는 모습을 확인할 수 있다.
네 번째 노드
4. 더블클릭 > chop 탭에서 speed 오퍼레이터를 선택한다.
chop 오퍼레이터는 숫자를 다루는 오퍼레이터다.
이 중 speed는 값을 일정하게 증가시키거나 감소시키는 역할을 한다.
speed 오퍼레이터는 자기 혼자서는 작동하지 않는다.
input에다가 1초에 얼만큼 증감시킬지에 대한 숫자 데이터를 연동해주어야 한다.
이 역할은 constant라는 오퍼레이터가 해준다.
다섯 번째 노드
5. 더블클릭 > chop 탭에 있는 constant 오퍼레이터를 만든 후, speed 오퍼레이터와 선으로 연결해주기
6. constant 오퍼레이터를 선택한 후, 우측 상단에 있는 UI에서 45이라는 값 넣어주기
(그러면 speed 창의 숫자가 올라간다. 45도씩 돌아가게 하겠다는 의미이다.)
(7, 8번이 조금 복잡)
7. rectangle 오퍼레이터를 선택한다.
8. speed 오퍼레이터의 오른쪽 하단을 보면 별(+) 모양이 있다.
이걸 클릭하면 마우스오버 시 연두색으로 바뀐다. (다른 곳에 끌어다 놓고 값을 활용할 수 있다는 의미)
그 상태에서 별(+)에서 선을 끌어다가 rectangle 오퍼레이터의 오른쪽상단에 떠있는 UI 중
rectangle > rotate에 갖다 붙인다.
드래그 후 드랍하는 순간 탭 3개가 뜨는데, 그 중 2번째 탭(chop reference)을 선택한다.
(대박.. 이 포스팅 쓰다가 안건데, 캡쳐 막는 게 터치디자이너가 아니라 콜로소 동영상 재생프로그램에 붙어있던 거구나... 나 터치디자이너 화면 폰카메라로 찍으면서 뭐한거임...)
'한 걸음 > Creative coding' 카테고리의 다른 글
[p5.js] 기본 활용법 + 도형 만들어보기 (0) | 2023.02.21 |
---|---|
[touchdesigner] 웹캠을 활용한 인터랙션 (0) | 2023.02.21 |
[touchdesigner] 터치디자이너 시작하기 (1) | 2023.02.20 |
[Nature of Code] processing 9. 파티클 시스템 (0) | 2023.02.07 |
[Nature of Code] processing 8. 파동 (0) | 2023.02.06 |