크리에이티브 코더 정효 Details
커리큘럼을 보여드려요
- SECTION 01
TouchDesigner 시작하기: 2D 그래픽과 인터랙션
01.오리엔테이션: 인터랙티브 작업물의 다양한 표현과 매체- 연사 소개와 작업 포트폴리오 소개 - 매체에 따른 인터랙션의 종류와 예시들 - 상황에 따라 적합한 툴을 선택하는 방법
02. TouchDesigner : 인터페이스와 노드 코딩- TouchDesigner UI 설명 - 마우스와 단축키 조작 방법 - Node - 오퍼레이터와 컴포넌트 설명 - Movie File In / Level / Transform 오퍼레이터 연결해 보기
03. TouchDesigner : TOP 오퍼레이터 다루기- Composite 오퍼레이터로 영상 합성해 보기 - Rectangle / Circle 오퍼레이터와 Composite 오퍼레이션 옵션의 원리 - Luma Map으로 영상 마스킹 하기
04. TouchDesigner : 웹캠을 활용한 인터랙션- Luma Blur 오퍼레이터와 Luma Map 활용 - Displace 오퍼레이터와 Luma Map 활용 - Time machine / Texture 3D 오퍼레이터와 Luma Map 활용
05. TouchDesigner : TOP 오퍼레이터 활용 아트웍 제작- 3D 씬 구현을 위한 컴포넌트 3요소 - 일렁이는 구체 만들기 - Luma Blur / Displace 응용하여 효과 주기 - 파라미터 값에 따라 다른 느낌 주기
- SECTION 02
TouchDesigner 활용하기: 3D 그래픽과 인터랙션
06. TouchDesigner : SOP 오퍼레이터 다루기- 다양한 입체도형 오퍼레이터와 정점의 개념 - Geometry 적용하기 - Camera / Light 다루기 - Mat 오퍼레이터와 질감 표현
07. TouchDesigner : CHOP 오퍼레이터 다루기, 사운드 인풋- Speed 오퍼레이터로 변하는 값 만들기 - LFO 오퍼레이터로 반복되는 값 만들기 - 사운드 인풋을 활용하여 그래픽에 변화 주기
08. TouchDesigner : SOP 오퍼레이터 활용 아트웍 제작- Particle 오퍼레이터 활용하기 - Instancing으로 원하는 개체 복사하기 - 3D 모델 형상으로 생성되는 파티클 효과 만들기 - 파라미터 값에 따라 다른 느낌 주기
09. TouchDesigner : DAT 오퍼레이터와 통신- Touch In Out 오퍼레이터로 통신 하기 - Wifi 내 다른 컴퓨터간의 통신 - 다양한 통신 방법에 따른 장단점 소개
- SECTION 03
p5js 기초: 기본 도형으로 인터랙티브 아트웍 만들기
10. p5js : 웹에디터 인터페이스와 코딩 시작하기- p5js 소개 - 웹에디터 인터페이스 설명 - canvas 생성과 background 함수로 배경색 칠하기, 색상 값 입력 방법
11. p5js : 기본 도형 그리기- rect / circle 함수로 사각형과 원 그리기 - fill / stroke 함수로 도형에 스타일 입히기 - point / line / triangle의 꼭짓점 입력과 도형 그리기 - push / pop / translate를 활용해 도형들을 레이어화 하기
12. p5js : 함수 호출과 인터랙션- mouse 관련 호출 함수와 인터랙션 - keyboard 관련 호출 함수와 인터랙션 - draw 함수 호출을 이해하고 애니메이션 만들기 - frameCount / mouseX / mouseY 시스템 변수 활용하기
13. p5js : 인터랙티브 아트웍 제작- frameCount로 일정하게 변하는 그래픽 만들기 - 마우스를 따라오는 그래픽 만들기 - 인터랙티브 아이디어들과 좋은 인터랙션 만드는 방법
- SECTION 04
p5js 심화 : 변화하는 값과 인터랙션
14. p5js : 변수와 조건문- p5js 소개 - 웹에디터 인터페이스 설명 - canvas 생성과 background 함수로 배경색 칠하기, 색상 값 입력 방법
15. p5js : 상태에 따라 변화하는 그래픽 만들기- 상태에 따라 점층적으로 변하는 그래픽 디자인하기 - 최댓값 제한 주기 - 값 초기화를 통해 인터랙션 반복시키기
16. p5js : Vector를 활용한 복잡한 인터랙션- dist 함수를 활용한 인터랙션 - Vector의 개념과 createVector 함수 - Vector로 사칙연산하기 - limit 매소드로 움직임 제한하기
17. p5js : 인터랙티브 아트웍 제작- 캐릭터 얼굴 디자인하기 - 마우스를 따라 움직이는 모션 만들기 - 부분별로 범위 조절하여 입체적인 느낌 만들기 - 인터랙션 별로 추가적인 변화 만들기
- SECTION 05
원격제어를 활용한 인터랙티브 아트웍
18. 웹서버 구현하기- glitch 서비스 소개 - 웹페이지에 내 p5js 프로젝트 올리기 - 인터랙션에 따른 통신 적용하기 - 통신된 값으로 그래픽 변화 주기
19. p5js로 웹앱 만들기- 버튼 구현하기 - 슬라이더 구현하기 - 컨트롤러로 p5js 프로젝트와 인터랙션 하기
20. p5js 모바일 웹앱을 활용한 TouchDesigner 제어- TouchDesigner 아트웍에 socket.io 오퍼레이터 연결하기 - 파라미터에 따라 다른 인터랙션 적용하기 - 원격 인터랙션 아이디어와 사례들 소개