[touchdesigner] 웹캠을 활용한 인터랙션

첫 번째 노드

video device in으로 웹캠 화면 가져오기

 

 

 

두 번째 노드

top 오퍼레이터 중 Luma blur

(루마맵은 두 개의 인풋을 받는다. 하나는 웹캠영상, 다른 하나는 luma map)

 

 

 

세 번째 노드

top 오퍼레이터 중 circle

내 웹캠 영상 해상도와 맞춰준다 (방법은 이전 포스팅 참고)

백그라운드 알파를 1로 올려서 뒷 배경 색을 채워준다

 

 

첫 번째 노드와 세 번째 노드를 두번째노드(luma blur)에 선으로 연결해준다.

(루마맵에서 기본값으로 제공하는 효과의 강도가 그다지 강하지 않기 때문에 별 차이 없는 걸로 보인다)

 

 

루마맵을 선택 한 후, 우측상단 UI에서 white filter width의 값을 조절하면,

루마맵에서 흰색에 해당하는 부분에 효과가 적용되는 것을 확인할 수 있다.

 

 

circle 오퍼레이터 대신, ramp 오퍼레이터를 연결해서 어떻게 보이는지 시험해보자! 

 

 

 

---

 

애니메이션 만들기

 

1. speed 오퍼레이터, constant 오퍼레이터(둘 다 chop 섹션에 있음)를 불러온다.

 

2. contant 오퍼레이터 우측 상단 UI에 1을 입력해서, 1초에 1씩 증가하는 값을 생성한다.

 

3. speed와 contant를 선으로 연결해준다.

 

4. 아까 만들었던 Ramp 오퍼레이터에 3번에서 만든 값을 연결해준다.

 

5. speed 오퍼레이터 우측 하단 구석에 있는 별(+) 모양을 눌러 view active를 켜준다.

 

6. 이제 speed 오퍼레이터에 마우스오버를 하면 형광연두색이 되는데, 이 상태에서 그래프를 끌어다가

우측 상단에 있는 ramp 오퍼레이터의 phase 위치에 놓는다.

 

요렇게! (마우스 커서 잘 보기)

 

 

*만약 경계가 딱딱 지는 걸 원치 않는다면, 우측 상단 UI 중 Extend Left 항목을 Mirror로 바꿔주면 된다.

 

 

---

 

 

타임머신 오퍼레이터 사용해보기

 

첫 번째 노드

video device in (웹캠에 나오고 있는 내 모습)

 

 

두 번째 노드

top 섹션에 있는 time machine 오퍼레이터 가져오기

(예전~현재까지의 영상을 한 화면에 배치할 수 있는 기능이다)

 

 

세 번째 노드

top 섹션에 있는 circle 오퍼레이터 가져오기

 

 

 

time machine 오퍼레이터에 내 영상과 circle을 연결해주는데,

두 개의 영상소스를 연결했음에도 불구하고 오류가 뜬다.

 

그 이유는 타임머신 오퍼레이터는 첫 번째 인풋에 3D texture가 필요하기 때문이다.

 

 

오류를 해결하기 위해선 타임머신과 웹캠영상 사이에 하나의 오퍼레이터를 끼워넣어주어야 한다.

 

video device in에 나오는 웹캠영상을 한 번 저장시켜서, 시간대별로 정리한 후에 타임머신으로 받아주는 것이다.

 

video device in과 timemachine을 연결해주는 라인 우클릭

> insert operator 선택

> top 섹션에 있는 texture 3D 선택

 

 

그러면 빙고판 같이 생긴게 새로 뜨고, 타임머신 오퍼레이터에 뜨던 오류가 없어진다.

 

 

texture 3D 오퍼레이터 우측상단 UI에서 cache size를 32개에서 100개로 늘려본다.

(=좀 더 예전 시간대 영상까지 사용하겠다는 것)

 

 

이 상태에서 timemachine 오퍼레이터를 확인해보면,

흰 영역에는 현재의 내 모습이, 검은영역에는 100프레임 이전(과거)의 내 모습이 출력되는 것을 확인할 수 있다.