안녕! 인터랙티브 미디어아트

0. 프로세싱 준비하기

0.1.프로세싱 설치하기

0.2.프로세싱 소프트웨어 살펴보기

0.3.프로세싱 실행하기

0.4.프로세싱 사용 전 필독!



1. 프로세싱으로 그림 그리기

1.1.숫자 표현하기

- 1.1.1.랜덤한 위치에 숫자 출력하기

- 1.1.2.원하는 폰트로 원형 안에 숫자 출력하기

- 1.1.3.특정 숫자의 출력 확률 조절하기

- 1.1.4.원 색깔을 지정하고 이미지로 저장하기

[작업노트] #오프라인 매장의 역습

1.2.문자 움직이기

- 1.2.1.랜덤한 위치에 그려지는 원들을 선으로 연결하기

- 1.2.2.랜덤한 위치에 출력되는 단어들을 선으로 연결하기

- 1.2.3.마우스 클릭한 위치에 '서시'의 한 행을 출력하기

- 1.2.4.키보드의 방향키로 '서시' 이동시키기

- 1.2.5.지정축을 기준으로 '서시' 3D 회전시키기

- 1.2.6.마우스 위치에 따라 '서시' 회전 각도 변경하기

[작업노트] #미술관에서 만난 한글

1.3.이미지 출력하기

- 1.3.1.랜덤한 순서로 이미지 출력하기

- 1.3.2.랜덤한 순서로 출력되는 이미지에 다양한 필터 효과 주기

- 1.3.3.마우스 위치에 따라 이미지 출력하기

- 1.3.4.마우스 위치와 클릭으로 이미지 4등분하여 출력하기

- 1.3.5.마우스 움직임에 따라 이미지 크기 조절하고 회전시키기

- 1.3.6.마우스 클릭으로 랜덤한 이미지 출력하기

- 1.3.7.랜덤하게 출력되는 원형 픽셀로 점묘법 스케치하기

- 1.3.8.빠른 속도로 점묘법 스케치하기

[작업노트] #빛을 기록하는 카메라

1.4.시간 정보 활용하기

- 1.4.1.매초 색깔이 바뀌고 크기가 커지는 시계 만들기

- 1.4.2.도형의 크기와 색깔이 계속 바뀌는 시계 만들기

- 1.4.3.내가 좋아하는 단어가 함께 나오는 시계 만들기

- 1.4.4.연속된 이미지로 셀 애니메이션 만들기

- 1.4.5.마우스를 클릭한 위치에 셀 애니메이션 재생하기

[작업노트] #몰입하는 순간

1.5.수많은 파티클 제어하기

- 1.5.1.랜덤한 방향으로 흩어지는 파티클 만들기

- 1.5.2.눈 내리듯이 하늘에서 떨어지는 파티클 만들기

- 1.5.3.솟아오르는 문자 파티클 만들기

- 1.5.4.마우스 클릭으로 스케치창에 새로운 이미지 추가하기

[작업노트] #다다익선

1.6.이미지 픽셀 변형시키기

- 1.6.1.이미지 픽셀 크기와 개수 조절하기

- 1.6.2.사각형 픽셀로 이미지 그리기

- 1.6.3.원형 픽셀로 이미지 그리기

- 1.6.4.삼각형 픽셀로 이미지 그리기

- 1.6.5.문자 픽셀로 이미지 그리기

- 1.6.6.이미지 픽셀로 이미지 그리기

- 1.6.7.이미지 픽셀의 밝기값에 따라 픽셀 색깔 변경하기

[작업노트] #나무 거울

[책 속 갤러리 1] #혼미한 프로젝트



2. 프로세싱으로 프로젝션 매핑하기

2.1.스마트폰으로 촬영한 동영상 재생하기

- 2.1.1.동영상 반복 재생하기

- 2.1.2.마우스 클릭하는 동안만 동영상 재생하기

- 2.1.3.마우스 클릭으로 동영상 한 번만 재생시키기

[작업노트] #프로젝션 매핑

2.2.마스크 기능 활용하기

- 2.2.1.검은 사각형을 마스크로 활용하기

- 2.2.2.둥근 원형에 매핑하기

[작업노트] #후면투사

2.3.키스톤 라이브러리 활용하기

- 2.3.1.키스톤 스크린에서 마우스를 따라다니는 공

- 2.3.2.키스톤 스크린에 동영상 재생하기

[작업노트] #매핑의 묘미

2.4.다면 스크린 만들기

- 2.4.1.두 면의 키스톤 스크린 만들기

- 2.4.2.세 면의 키스톤 스크린 만들기

[작업노트] #프로젝션 매핑을 위한 상용 프로그램들

[책 속 갤러리 2] #자연물에 매핑하기



3. 아두이노 센서 정보 활용하기

3.0.아두이노 설치하기

- 3.0.1.아두이노 보드

- 3.0.2.아두이노 소프트웨어

- 3.0.3.아두이노 실행하기

- 3.0.4.아두이노 사용 전 필독!

3.1.수족관 시계

[작업노트] #사물인터넷

3.2.촛불 무드등

[작업노트] #아두이노 관련 추천 사이트

3.3.채소 합창단

[작업노트] #컴퓨터가 걸어간 길을 따라 걷고 있는 3D 프린터

3.4.바람 불어 그리기

[작업노트] #넛지 효과

3.5.관객의 키를 막대그래프로 그리기

[작업노트] #베란다 창업

[책 속 갤러리 3] #한강을 타고 남산을 돌아본다



4. 웹캠으로 입력되는 실시간 비디오 활용하기

4.1.웹캠으로 바라보기

- 4.1.1.실시간 비디오 캡처하기

- 4.1.2.마우스로 실시간 비디오 움직이기

- 4.1.3.이미지와 실시간 비디오 합성하기

- 4.1.4.녹화된 동영상과 실시간 비디오 합성하기

[작업노트] #거울 효과

4.2.실시간 비디오 픽셀 정보 활용하기

- 4.2.1.실루엣 이미지 만들기

- 4.2.2.스마트폰 플래시로 어둠 속 그림 밝히기

- 4.2.3.색깔 팔레트 만들기

- 4.2.4.사각형 픽셀로 실시간 비디오 재생하기

- 4.2.5.문자 픽셀로 실시간 비디오 재생하기

[작업노트] #컴퓨터 비전

4.3.관객의 얼굴 정보 활용하기

- 4.3.1.살바도르 달리의 콧수염

- 4.3.2.행운의 2달러 포토존

[작업노트] #스마트한 카메라, 키넥트 센서

[책 속 갤러리 4] #나비 발생기



5. 실전 프로젝트

5.1.감지된 만남

- 5.1.1.키 입력으로 인터랙션하기

- 5.1.2.아두이노에 인체 감지 센서를 2개 연결하여 인터랙션하기

[작업노트] #시대를 앞서가는 인터랙티브 미디어 아티스트 10

5.2.무지개 피아노

- 5.2.1.키보드에서 8개의 키를 입력하여 인터랙션하기

- 5.2.2.아두이노에 충돌 센서 8개를 연결하여 인터랙션하기

[작업노트] #사운드 아트

5.3.자동차 경주

- 5.3.1.프로세싱에서 자동차 조종하기

- 5.3.2.아두이노로 자동차 조종하기

[작업노트] #키네틱 아트

5.4.비디오 신디사이저

[작업노트] #라이트 아트

5.5.떨어지는 파티클 가지고 놀기

[작업노트] #텍스트 레인

5.6.웹 미술관 오픈하기

- 5.6.0 p5.js 모드로 웹 문서 만들기

- 5.6.1. 마우스로 그림 그리는 웹 사이트

- 5.6.2. 점묘법 그림이 그려지는 인터랙티브 웹 미술관

작업노트#인터넷 아트

[책 속 갤러리 5] #양산 남부시장

[책 속 갤러리 5] #Nation on Border

이재민 홍익대학교 광고멀티미디어디자인과를 졸업하고 미국 시카고예술대학교(SAIC)에서 Art & Technology 전공으로 석사학위를 받았다. 시그라프(SIGGRAPH) 2006 Art Gallery에서 빛을 이용한 작품인 'Water Lights'를 발표한 이래 인간의 기술과 자연의 조화를 주제로 꾸준히 작품 활동을 하고 있다. 보이드 미디어아트에서 인터랙티브 미디어 및 창작 프로그램을 개발하고 있으며, 동아대와 전남대에서 학생들을 가르치고 있다. 저서로 《안녕! 미디어아트》(2014)가 있다.



홈페이지 http://jaeminlee.net

안녕! 미디어아트 네이버 카페 https://cafe.naver.com/hellomediaart