안녕! 인터랙티브 미디어아트 (아두이노, 프로세싱으로 컴퓨터와 대화하는 69가지 코딩 기술)

이재민

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

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

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.0p5.js모드로웹문서만들기
-5.6.1.마우스로그림그리는웹사이트
-5.6.2.점묘법그림이그려지는인터랙티브웹미술관
작업노트#인터넷아트
[책속갤러리5]#양산남부시장
[책속갤러리5]#NationonBorder