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

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

프로세싱은 프로그래밍 전공자가 아닌 학생, 디자이너, 예술가들이 프로그래밍 언어를 배우지 않고도 시각적 이미지와 인터랙션을 구현할 수 있도록 만든 프로그램으로, 2001년 MIT 미디어랩에서 공부하고 있던 케이시 리스Casey Reas와 벤 프라이Ben Fry가 처음 개발을 시작했다.