Social network-based Media Art 쇼셜 네트워크 기반 작품 제작 및 전시
저자 - 강태욱, 정성철, 양예은, 임진택, 최유진, 김현수 오픈아키텍쳐 디렉터 – 김호중 2015-2-29
OAW
Table of Contents 머리말
1
서평
3
1.
개요
6
2.
피지컬 컴퓨팅 도구 – 강태욱
7
2.1
개요
7
2.2
아두이노 보드
8
2.3
전자회로
2.4
2.5
2.6 3.
12
2.3.1
개요
12
2.3.2
옴의 법칙
12
2.3.3
전자 소자
14
2.3.3.1
브래드보드 ....................................................................................................................................... 14
2.3.3.2
저항 ..................................................................................................................................................... 14
2.3.3.3
LED ...................................................................................................................................................... 16
2.3.4
전자회로소자 기호
16
2.3.5
전자회로 개발 준비
17
아두이노 IDE
18
2.4.1
LED 점멸
19
2.4.2
서보모터 제어
20
프로세싱
22
2.5.1
개요
22
2.5.2
실습
22
결론
25
프로젝션 맵핑 - 강태욱
26
3.1
개요
26
3.2
VPT
27
3.2.1
개요
27
3.2.2
인터페이스
27
3.2.3
실습
29
3.2.3.1
레이어 생성 ..................................................................................................................................... 29
OAW
3.3 4.
3.2.3.2
소스 추가/설정 ............................................................................................................................... 30
3.2.3.3
코너 핸들 위치 설정 .................................................................................................................... 31
3.2.3.4
프로젝션 맵핑 설정 저장 ........................................................................................................... 31
3.2.3.5
여러 레이어 설정 .......................................................................................................................... 32
3.2.3.6
컨트롤 탭 설정 ............................................................................................................................... 32
3.2.3.7
마스크 생성 ..................................................................................................................................... 33
3.2.4
기타 기능
35
결론
38
작품 제작/전시
39
4.1
개요 – 강태욱
39
4.2
Cell Bloom – 글쓴이: 강태욱, 작가: 강태욱/강선우
40
4.3
4.4
4.2.1
작품 주제
40
4.2.2
작품 디자인
41
4.2.3
작품 제작 계획
44
4.2.4
작품 제작
44
4.2.5
작품 테스트
55
4.2.6
작품 전시
56
Listening to the light – 글쓴이/작가: 양예은
58
4.3.1
작품 주제
58
4.3.2
개념 디자인
58
4.3.3
작품 제작
59
4.3.4
작품 개발
60
4.3.5
작품 최종 통합
63
4.3.6
작품 동작 테스트
63
4.3.7
작품 전시
64
도시건축의 새로운 상상력 (Collage towards the dream of a city)– 글쓴이: 정성철, 작가:
정성철/정상철
66
4.4.1
작품 주제
66
4.4.2
작업 그룹 개발
67
4.4.3
아이디어 디자인 과정
68
4.4.4
작품 디자인
71
4.4.5
작품 제작 계획
75
4.4.6
제작 과정
77
4.4.7
테스트 과정
80
4.4.8
작품 전시
82
Social network-based Media Artwork
P 2 of 135
4.5
4.6
4.7
MIRROR+BLUR – 글쓴이: 임진택, 작가: 임진택/최형은
83
4.5.1
작품 주제
83
4.5.2
개념 디자인
84
4.5.3
작품 제작
85
4.5.4
작품 개발
86
4.5.5
작품 최종 통합
88
4.5.6
테스트 전시
89
4.5.7
작품 전시
90
Particle Fountain – 글쓴이/작가: 최유진
91
4.6.1
작품 주제
91
4.6.2
개념 디자인
91
4.6.3
작품 제작
92
4.6.4
작품 개발
92
4.6.4.1
사용자 이벤트파티클 스터디 전개과정 ............................................................................... 92
4.6.4.2
Max/MSP/Jitter .............................................................................................................................. 92
4.6.4.3
VVVV .................................................................................................................................................. 93
4.6.4.4
Processing ........................................................................................................................................ 94
4.6.4.5
키넥트 센서 스터디 전개과정.................................................................................................. 95
4.6.4.6
드라이버의 설치 ............................................................................................................................ 95
4.6.4.7
라이브러리 찾기 ............................................................................................................................ 96
4.6.4.8
센싱 데이터 얻기 .......................................................................................................................... 96
4.6.5
작품 최종 통합
4.6.5.1
센싱 값의 반영 ............................................................................................................................... 97
4.6.5.2
전시 패턴에 따른 작품의 작동 방법 구현 .......................................................................... 97
4.6.5.3
색상의 구현 ..................................................................................................................................... 97
4.6.6
작품 동작 테스트
4.6.6.1
센서의 위치 및 범위 테스트..................................................................................................... 98
4.6.6.2
센서의 인식 조명 조건과 배경 rgbImage .......................................................................... 99
4.6.7
테스트 전시
4.6.7.1
현장의 설치 조건 .......................................................................................................................... 99
4.6.7.2
관객과의 인터렉션 유도 장치.................................................................................................. 99
4.6.8
작품 전시
97
98
99
100
Geo-Mapping Experiment – 글쓴이/작가: 김현수
101
4.7.1
작품 주제
101
4.7.2
작품 주제
102
Social network-based Media Artwork
P 3 of 135
4.7.3
작품 제작
103
4.7.4
작품 개발
104
4.7.5
작품 최종 통합
106
4.7.6
작품 동작 테스트
107
4.7.7
테스트 전시
107
4.7.8
작품 전시
108
5.
전시 후기
113
6.
레퍼런스
116
7.
부록: RGB-D 키넥트 센서 사용을 위한 MAX/MSP - jit.openni 설명
118
7.1
개요
118
7.2
어플리케이션 환경
119
7.3
라이센스
119
7.4
다운로드와 설치
120
7.5
설치 상 문제 해결
120
7.6
Mac OSx에서 설치
121
7.7
기능
121
7.8
Max 메시지 지원
121
7.9
속성들
122
7.10
사용자와 뼈대 출력
124
8.
7.10.1
사용자 이벤트
124
7.10.2
물체 데이터의 중심
125
7.10.3
Scene Floor Data
125
7.10.4
뼈대 조인트 데이터
126
부록: 리비전 히스토리
129
Social network-based Media Artwork
P 4 of 135
머리말 2014 년 2 월, ‘BIM기반 건축 협업디자인’(2014.1, SpaceTime) 책의 Beyond Design 챕터의 내용을 현실에서 쇼셜네트웍 기반으로 이야기해 보자는 김호중 소장님의 의견으로, Open Architecture Workshop(OAW) 첫 세미나가 시작되었다. OAW는 김호중 소장 등을 주축으로 하여, 건축과 기술에 대한 공개적인 지식 공유와 토론을 지향하는 쇼셜네트웍 기반 모임이었다.
OAW 모임(2014.2, http://openarchitecture.kr/?p=125, http://openarchitecture.kr/?p=192, Open Architecture) 최초에는 Beyond Design챕터에서 소개하는 우리가 할 수 있는 많은 것들에 대해 이야기를 나누는 것 정도로만 생각하였으나, 그때 모임의 열기가 뜨거워, 향후 워크샵 및 연말 전시까지 진행하기로, 즉석에서 결정되었다. 이 워크샵과 전시준비 작업은 Media Art를 만들고 싶은 건축가, 디자이너, 예술가 등을 대상으로 2014 년 10 월까지 진행되었고, 2014 년 12 월에 EURO Design Center에서 그 동안 연구한 내용을 바탕으로 Media Art 전시회를 4 일간 열었다. OAW의 소그룹인 인터렉티브 디자인은 본인이 워크샵 진행을 맡아, Arduino, Processing, Grasshopper, VPT등 사용법과 예제 실습을 진행한 후, 참여자 모두 예제을 따라하는 과정을 거친 후, 이런 도구들을 이용해 각자 본인의 작품을 구상하였다. 워크샵 참여자가 많았으므로, 5 월경쯤 관심사를 피지컬 컴퓨팅, 프로젝션 맵핑 등으로 구분하여, 팀을 구성하였다. 팀별로 팀장이 각 팀원별 관심사를 조율하였으며, 작품에 필요한 기술적 지식은 각 팀에서 조사 공부하고, 페이스북(www.facebook.com/groups/oaw.id)을 통해 내용을 공유하며, 도움을 받는 식으로 진행되었다.
Social network-based Media Artwork
P 1 of 135
전시공간은 7 월경부터 섭외하기 시작하였는 데, 이 시점은 전시 공간을 섭외하기에 빠듯한 시점이었다. 각자 네트웍을 통해, 관련 공간을 탐색/방문/조사해 토론하는 과정을 거쳐, 여러가지 제약조건과 희망사항에 맞는 전시공간이 최종 결정되었다.
OAW ID 워크샵 진행 과정(www.facebook.com/groups/oaw.id/) 참여자들은 Media Art 전공/비전공자를 구분하지 않았다. 최초에는 40 명 가까이 모였으나, 강한 열정을 가지고 있는 최후의 12 인이 남아, 작품과 전시를 완성했다. 이 워크샵은 건축가 모임을 중심으로 시작했지만, 굳이, 어느 분야를 전공한 사람을 한정하지는 않았다. 본인은 이런 타이틀이 그 사람의 능력을 설명해 줄 수는 없다고 생각한다. 본인 경험상, 무엇에 대한 순수한 호기심, 열정을 바탕으로, 꾸준히, 지속적으로 노력하는 사람이 다른 누구보다 더 좋은 작품을 세상에 공개하고, 사람들에게 영감과 감동을 주고, 세상이 긍정적으로 변화하는 경우가 많았다. 어떤이들의 실체는 없고 말만 있는 것은 참으로 공허한 것이다. 작가, 메이커라면, 직접 구상하고 만든 작품으로, 전달하고 싶은 비전과 메시지를 명확히 설명할 수 있을 때, 세상에서 좀 더 의미있는 가치를 만들 수 있다고 생각한다. 이러한 작가의 작품과 메시지는 사회에 작은 변화들을 줄 수 있다. 한국건축이 어려운 여건에서도 건축의 정체성을 탐구하는 OAW그룹을 이끌고, 후원을 해주신 김호중 소장님께 감사드리며, 이 모든 과정을 끝까지 함께 한 12 인의 작가들에게도 감사한 마음을 전하고 싶다. - 강태욱(laputa99999@gmail.com), 2015.1.11
이 저작물은 Creative Commons Lisence 를 따릅니다. 각 마다 장 글쓴이와 작품 작가명을 표시하였습니다.
Social network-based Media Artwork
P 2 of 135
서평 우선 오픈아키텍쳐(Open Architecture)가 무엇인지, 건축가들이 모여 왜 인터렉티브디자인이라는 업역의 경계를 넘나드는 일에 도전했는지 변을 해야겠다. 오픈아키텍쳐는 건축가 그룹 안에 내재한 자성적 사고를 끄집어 내어 세상을 향하게 하고 그 시대적 역할을 찾고자 주창된 운동이다. 그렇다면 왜 Open인가! 건축의 시작을, 혹은 모든 것의 시작을 '여는 것'에 있다고 말해 본다면 어떨까. 닫힌 상태의 내부는 여는 상태를 상정하지 않고서 의미를 득하지 못한다. 자연계의 창발(emerging)은 곧 창작의 시작이기도 하거니와, 단단히 닫힌 무에서 열림의 시작이 세상의 시작임은 최근 속속 드러나는 과학적 사실의 영역에서 조차 정의내려주는 근거이기도 하다. 개구부를 뚫어 문과 창을 여는 것을 건축의 물리적 오픈이라 하자면, 건축이 건축 아닌 것과 구분되는 접점을 여는 행위는 건축의 존재적 오픈이라 하겠다. 이는 건축이 타자와의 관계를 맺는 주체의 경계지움의 노력이고, 사회적 실천 영역으로의 확장을 가능케 하는 접점이다. 사람도, 사물도 이름 지어진 모든 것은 그것과 그것 아닌 것으로부터의 경계지움으로 정의 가능해 질 것이므로, 건축영역의 경계를 궁구하는 것이 곧 건축 본질을 찾아 나서는 첫 걸음이리라. 오픈아키텍쳐란 이름은 이렇게 유추되었다. OAW(Open Architecture Workshop)은 이러한 경계를 찾아 나서는 실천의 영역이다. 그 첫 번째 시도가 인터렉티브디자인 이다. 왜 인터렉티브디자인인가. 동시대 건축 표현행위의 경계를 살펴보면 건축 정의의 견고한 벽에 이미 균열이 나고 있음이 감지된다. 건축가들의 예술에의 도전은 이 중 하나를 차지한다. 이미 우리는 수 년전부터 건축을 미술관에 전시하는 일에 열을 올려 왔던 터다. 건축 불황의 영향이 컸으리라 보이는 이 현상은 건축가가 건축보다 전시에 더 매진을 하는 듯한 인상을 남긴다. 최근 찾은 건축전시장에는 수십개의 작업중 겨우 두세개만이 건축물이고 나머지는 설치미술에 가까운 구조물 또는 개념 미술이었던 것은 이러한 현상을 단적으로 대변한다. Social network-based Media Artwork
P 3 of 135
항구의 세월을 지켜온 건축의 경계는 건축이 차지했던 견고한 영토에 난 균열된 틈을 비집고 변화를 예고한다. 무릇 건축 재영토화의 시대라 칭할만하지 않은가. 우리는 그 지점을 예리하게 관찰 하고자 했다. 건축이 오랜 세월 격리되어 왔던 예술과의 경계의 벽에 구멍을 열 수 있었던 데는, 세상의 변혁에는 항상 빠지지 않고 원인의 자리에 서 왔던 '기술'이 역시 거기에 있었다. 3 차원 공간을 차지하고 있는 건축물을 오랜 세월 동안 2 차원 면 이외에는 표현할 방법을 갖추지 못하던 건축가는 최근 IT 기술의 발달로 3 차원 공간을 차지하고 있는 건축물의 모습을 생략없이 있는 그대로 표현 할 수 있는 완벽한 수단을 갖게 되었다. 더 나아가 가상에 완성된 형상은 단절된 현실과의 경계를 끝없이 허물고자 시도 되었고, 센싱 기술은 그 둘(현상과가상)을 연결짓는 단초를 제공하고 있다. 보이지 않는 것을 인지 가능한 영역으로 끌어옴으로서 텅빈 듯한 공간을 일깨울 수 있었고, 죽은 듯 잠자는 벽이요, 창, 천정을 우리, 사용자로 하여금 반응하게 하였다. 인터렉티브 아키텍쳐의 시작이다. 건축은 건축의 모든 요소, 벽, 기둥, 바닥, 창, 문을 구속으로부터 해방시켜 평면의 자유, 입면의 자유, 공간의 자유를 구하는데 오랜 세월을 바쳤다. 새로운 기술의 접점에 이른 우리는 물리적 해방을 넘어 건축의 요소, 공간에 정신적 구속의 해방을 꿈꾼다 그 노력의 자리에, 우리는 서 보려고 했다. 첫 시도의 결과로서 전시와 출판이 이루어졌으니, 이는 모두 워크샵 전체를 주도적으로 나서주신 강태욱 박사님의 절대적인 공이다. 이 도움으로 바쁜 건축가로서의 길을 가고 있는 건축가 제현 여러분이 열정을 표출할 수 있었다. 그리고 건축에서 예술의 영역을 향하고 있을 때 예술에서 건축을 향해 마주 바라봐 주신 양예은 박사님의 노력에도 경의와 박수를 드린다.
오픈아키텍쳐(http://openarchitecture.kr) 디렉터 김호중 (ABIM건축연구소 대표)
Social network-based Media Artwork
P 4 of 135
참여 작가 - 강태욱, 강선우, 양예은, 임진택, 최형은, 정성철, 정상철, 최유진, 선우영진, 김주훈, 심재원, 김현수 - 2014.12
표지 디자인 – 김주훈
Social network-based Media Artwork
P 5 of 135
1.
개요 최근 유행하고 있는 파라메트릭 기반 디자인, 알고리즘 디자인, 인터렉티브 미디어 아트, 3D 프린팅과 같은 정형화된 디자인과 틀을 넘어서 사람들의 감성에 좀 더 가까이 다가가려는 노력들은 최신 컴퓨터 기반 디자인 기술들 활용하고 있다. 이러한 비정형적이고 감각적인 디자인을 위해 그래스호퍼, 프로세싱, 아두이노 뿐 아니라 직접 컴퓨터 그래픽 라이브러리나 게임 엔진을 활용하는 사례도 늘어나고 있다. 이 책은 Media Art 작업에 관심이 많은 사람들을 위해, 이러한 기법들을 소개하고, OAW로 진행한 워크샵 내용과 연말 전시 작품의 메커니즘을 공유하기 위해, 관련 내용들을 기술한다. 2, 3 장에서 소개할 것은 OAW ID(Interactive Design)에서 진행했었던 워크샵 내용들의 일부로써, 미디어 아트 작업을 하기 위해 필요한 도구와 기술이다. 이 책에서 언급되지 않은 내용들은 OAW.ID 페이스북 그룹(www.facebook.com/groups/oaw.id/)에서 찾아볼 수 있다. 지면상의 한계로, 모든 내용을 기술하지 못하였으나, 이 책에는 기술하지 않은 그래스호퍼, VVVV, PCL(Point Cloud Library) 및 키넥트(Kinect), 각종 센서, 엑추에이터등의 도구들을 이용해 매우 훌륭한 결과물을 만들어 낼 수 있다는 점을 이야기하고 싶다. 키넥트와 센서의 모든 내용을 다루지는 못하였으나, 이 또한, 페이스북의 관련 그룹 등을 통해, 그 사용법을 쉽게 확인할 수 있을 것이다. 이 책에서는 대부분 오픈소스나 프리웨어를 사용해 작품 제작이 가능하도록, 해당 도구들을 소개한다. 상세한 내용을 공부하고 싶은 독자들을 위해, 참고할 수 있는 사이트 링크를 표시했으니 참고하길 바란다. 여기에서 소개하는 것보다 깊은 내용은 해외 아두이노, 프로세싱, VPT 등 관련 사이트의 수많은 예제들을 참고할 수 있다. 작품 별 챕터에서는 각 작품을 제작할 때, 모티브와 이 모티브를 작품으로 발전시켜 나가는 과정들을 담았다. 디지털 기반 작업들이 많아, 스크립트 코드는 가능한 그대로 담을려 하였으나, 지문 한계 상 핵심적인 부분만 정리하였음을 밝힌다. 이에 대해 문의가 있다면, OAW.ID페이스 북에 요청하길 바란다. 이런 예제들만 잘 분석하고, 공부하더라도, 좋은 작품들을 만들어 낼 수 있을 것이다.
Social network-based Media Artwork
P 6 of 135
2.
피지컬 컴퓨팅 도구 – 강태욱
2.1
개요 피지컬 컴퓨팅(physical computing)은 아날로그 세계의 데이터를 센싱하고 그에 대한 반응을 물리적으로 만들어 낼 수 있는 소프트웨어와 하드웨어를 사용하여, 상호반응적인 물리 체계를 만들어 내는 방법을 의미한다. 최근 발표된 HoloLens나 Microsoft XBox의 Kinect는 이런 피지컬 컴퓨팅 소프트웨어 및 하드웨어의 좋은 예이다.
그림. HoloLens (Eric Limer, 2015.1, Microsoft's Audacious Plan to Make Anywhere a Holodeck) 피지컬 컴퓨팅은 다음과 같이 물리적인 아날로그 환경에서 센서를 통해 데이터를 취득하고, 이를 소프트웨어가 해석하여, 사용자가 원하는 물리적 환경을 아날로그적으로 구현하는 과정을 거친다. 그러므로, 본인과 세상을 구성하는 객체의 관계를 상호반응적으로 만들 수 있다(강태욱, 김호중, 2014.1, BIM기반 건축 협업디자인, SpaceTime). 다음 그림은 이런 과정을 보여준다.
Social network-based Media Artwork
P 7 of 135
그림. 상호반응적인 피지컬 컴퓨팅
피지컬 컴퓨팅을 위해서는, 데이터를 취득하는 센서와 물리적인 현상을 만들어 내는 액추에이터(actuator)도 중요하다. 센서는 환경의 온도, 습도, 풍속, 풍향, 압력, 중력, 자세(기울기), 신축(strain), 전력 등 대부분의 물리적 아날로그 데이터를 디지털 데이터로 변환하는 역활을 한다. 액추에이터는 물리적 현상을 만들어 낼 수 있는, 모터, 스피커, 조명, 프로젝터 등을 말한다. 이는 소프트웨어를 통해 제어할 수 있다. 이 장에서는 센서에서 데이터를 취득하고 처리하는 데 필요한 소형 컴퓨터인 아두이노, 데이터 처리를 하는 알고리즘을 구현할 때 사용하는 소프트웨어 중 하나인 프로세싱을 간단히 살펴보도록 한다. 2.2
아두이노 보드 아두이노 보드(arduino board)는 물리적인 세계와 디지털 세계를 효과적으로 연결할 수 있는 오픈 소형 하드웨어 플랫폼이다. 마이크로 컨트롤러 보드와 이를 실행할 수 있는 소프트웨어를 포함한 전자 프로토타이핑 플랫폼으로써 많은 분야에 기여하고 있다. 아두이노는 활용 목적에 따라 여러가지 보드 종류를 제공하고 있는 데 여기서는 아두이노 우노(ARDUINO UNO)를 사용할 것이다. 아두이노 우노는 아래와 같은 특징이 있다.
Social network-based Media Artwork
P 8 of 135
표. 아두이노 우노보드 스펙 항목
내용
마이크로 컨트롤러
ATmega328
구동전압
5V
입력 전압
7~12V
디지털 입출력 핀
14(이 중 6 개는 PWM출력)
아날로그 입력 핀
6
입출력 핀의 DC전류
40mA
3.3V 핀의 DC전류
50mA
플래시 메모리
32KB(이중 부트로더가 0.5KB 사용함)
SRAM
2KB
EEPROM
1KB
클록속도
16MHz
이 장에서는 여러분이 아두이노 보드와 이를 사용할 수 있는 지식을 어느 정도는 가지고 있다고 가정한다. 만약 그렇지 않다면, 먼저 http://www.arduino.cc 와 유명한 Getting Started with Arduino(Massimo Banzi 저, O’Reilly) 책을 이용해 기본적인 학습을 해야 할 것이다. 데이터는 프로세싱 시리얼(Serial) 라이브러리를 이용해 프로세싱 스케치와 아두이노 보드 사이에 전달될 수 있다. Serial 은 두 장치 간에 한번에 한 바이트(byte)씩 데이터를 보내는 프로토콜(protocol. 약속)이다. 아두이노에서는 byte는 자료형이며, 0 에서 255 가지 값을 저장할 수 있다. 바이트는 int와 유사하지만 좀 더 작고, 큰 수를 전달해 주기 위해서는 바이트 열로 그 수를 쪼갠 다음 나중에 재조합해야 한다.
Social network-based Media Artwork
P 9 of 135
그림. 아두이노 우노 보드(Wikipedia) 아두이노 보드에 프로그램을 올리기 위해서는 아두이노 IDE(Integrated Development Environment. 통합개발환경) 프로그램 설치가 필요하다. 설치는 해당 홈페이지의 다운로드(http://arduino.cc/en/Main/Software)에서 받아 설치하면 되고 설치와 동시에 구동에 필요한 드라이버 등은 자동 설치된다.
그림. 아두이노 IDE 프로그램(Wikipedia)
Social network-based Media Artwork
P 10 of 135
컴퓨터와 아두이노의 통신은 COM포트를 통해 처리되는 데, 윈도우 운영체계 환경의 경우, 보통 설치후 COM3 로 설정되어 있을 것이다. 이는 [도구][시리얼 포트]에서 확인할 수 있다. 참고로 [도구][보드]에서 현재 아두이노 보드를 설정할 수 있다. 아두이노 IDE는 프로그램 개발을 위해 다양한 라이브러리를 사용할 수 있다. 아두이노는 인터넷 접속을 위한 Ethernet, 디스플레이 소자 출력을 위해 LiquidCrystal, 로봇 제어를 위한 Robot_Control, Robot_Motor, 서보 모터 제어를 위한 Servo, WiFi 통신을 위한 WiFi등 다양한 라이브러를 제공하고 있으며, 이 시점에도 라이브러리 개수는 증가하고 있다. 이런 라이브러리도 아두이노 IDE를 통해 개발하여, 직접 우리가 추가할 수 있다.
그림. LCD라이브러리를 이용해 LCD를 제어하는 예(www.flickr.com)
이제 아두이노를 실행하고 [파일][예제]에 있는 예제파일들을 확인해 본다. 예제 중에 Blink예제를 선택해 아두이노 IDE에 소스 파일을 로드해 본다. 이 예제에 대한 설명은 http://arduino.cc/en/Tutorial/Blink?from=Tutorial.BlinkingLED 에서 볼 수 있다.
그림. Blink 예제 소스
Social network-based Media Artwork
P 11 of 135
다음은 LED 예제에 대한 회로도이다.
2.3
전자회로
2.3.1 개요 아두이노 보드는 마이크로프로세스, 메모리, 입출력 포트 등으로 구성된 자체적인 전자회로를 가지고 있고, 우리가 개발해야 할 미디어 아트 작품들도 센서, 액츄에이터, 저항, 메모리, 트랜지스터 등의 전자회로로 구성될 것이다. 이런 이유로, 전자공학의 기본요소인 저항, 전류, 전압을 계산하는 방법이나, 전자회로에서 가장 많이 사용되는 전자소자들의 역할 등을 미리 알고 있다면, 이런 작업들을 수월하게 진행할 수 있다.
2.3.2 옴의 법칙 이 장에서는 전자회로를 구성하는 데 필요한 몇가지 부품 및 구동 원리를 설명할 것이다. 전자회로를 구성하는 각 전자소자는 소모하는 전류와 자체 저항 등을 가지고 있다. 이는 아래와 같은 옴의 법칙으로 계산할 수 있다. V(전압) = I(전류)x R(저항)
Social network-based Media Artwork
P 12 of 135
1. 전압(Voltage) 전압과 전류의 차이는 수압(전압)과 물(전류)이 흐르는 것과 유사하다. 수도 파이프를 가정해 보자. 파이프의 물을 어느 곳에 보낼려면, 수압을 줘야 한다. 만약, 수압이 없다면, 물은 파이프 내에서 이동하지 않을 것이다. 전압의 발생은 전위차에 의해 발생하며, 이는 한쪽이 고전압일 때, 다른 한쪽이 저전압이라면, 전류는 고전압에서 저전압 방향으로 흐르게 될 것이다. 이 개념이 전압이다. 전압에 단위는 Voltage 이다. 1v 는 1 줄(joule) 의 에너지가 1C(coulomb) 의 전자들을 움직일 수 있는 압력이다. 위의 C 는 단순한 전자들의 갯수를 의미한다.
2. 전류(Current) 전류는 전자의 흐름, 그 자체를 이야기 한다. 전선에 전압을 주면 전자가 이동하는 데 그것이 바로 전류이다. 전류의 단위는 A 암페어(Ampare)이다. 1A 는 1 초에 1C 만큼의 전자가 흐른다는 것을 정의한 개념이다.
3. 저항(Resister) 전류의 흐름을 방해하는 요소이다. 저항이 너무 크다면 전류는 흐를 수 없다. 저항이 하나도 없으면 전류는 매우 잘 흐른다. 만약, 저항이 매우 클 때 전류를 흐르게 할려면, 전압을 높이면 된다. 저항의 단위는 1 옴(Ohm) 이다. 1Ohm은 1v 를 전압에 걸렸을 때 1A 의 전류만 흐르게 하는 저항이다. 저항이 전혀 없다면, 1V 의 전압을 줬을 때 무한대의 전류가 흐르게 된다. 이런 경우, 그 전류가 지나가는 소자는 과전류로 고장이 날 수 있다. 참고로, 전자소자나 전선 등은 고유의 저항을 가지고 있다.
Social network-based Media Artwork
P 13 of 135
2.3.3 전자 소자 2.3.3.1 브래드보드 전자회로를 쉽게 만들고 구동하기 위해 필요한 부품으로, 다음 그림의 좌측과 같은 모습을 가진다. 브래드보드를 분해해보면, 그림 우측과 같이 회로가 배선된 것을 알 수 있다. 브래드보드는 미리 이렇게 배선이 되어 있어, 전류를 흘러 보내야 할 소자들을 적절히 배치함으로써, 손쉽게 소자들을 배선하고 동작시킬 수 있다.
그림. 브레드보드(좌: 실제 모습, 우: 내부 전선 연결 모습) 다음 그림은 브래드보드를 이용해 전자회로를 만든 모습이다. 브래드보드가 없다면, 우리들은 소자들간 배선과 납땜 작업을 힘들게 해야 했을 것이다.
그림. 브래드보드를 이용한 회로 구성 예(Wikipedia)
2.3.3.2 저항 저항은 회로의 전압이나 전류를 제어할 때 활용한다. 각 전자소자가 동작하기 위해서는, 허용 전압과 요구되는 전류가 입력되어야 한다. 그렇지 않을 경우, 소자가 과부하로 재대로 동작되지 않고, 고장이 난다. 이를 조정할 때 저항은 유용한 방법이 된다. 저항 중 크기가 작은 것은 아래와 같이 색상코드로 저항값을 표시하고 있다.
Social network-based Media Artwork
P 14 of 135
그림. 실제 저항 모습과 저항 색상코드(Resistor color-coding, Wikipedia) 앞의 그림에서 첫번째 밴드(1st band), 두번째 밴드(2st band)는 두자리 십진수를 나타낸다. Multiplier는 이 십진수에 곱할 승수, Tolerance는 허용오차이다. 아래는 색상코드이다. 이를 이용해, 저항값을 계산할 수 있다. 각 소자가 연결되는 회로 지점의 전류, 전압, 저항 계산은 앞서 언급한 옴의 법칙으로 계산할 수 있다. 온도에 따라 저항값이 달라지나, 특수한 환경이 아니면, 보통 무시하고 계산한다. 표. 저항 표준 색상코드(EN 60062:2005, Wikipedia) Color
Significant figures
Multiplier
Tolerance
Black
0
×100
–
Brown
1
×101
±1%
Red
2
×102
±2%
Orange
3
×103
–
Yellow
4
×104
(±5%)
Green
5
×105
Blue
6
Violet
Temp. Coefficient (ppm/K) 250
U
F
100
S
G
50
R
15
P
–
25
Q
±0.5%
D
20
Z
×106
±0.25%
C
10
Z
7
×107
±0.1%
B
5
M
Gray
8
×108
±0.05% (±10%)
A
1
K
White
9
×109
–
Gold
–
×10−1
±5%
J
–
Silver
–
×10−2
±10%
K
–
None
–
–
±20%
M
–
–
예를 들어, 적색-적색-오랜지색-금색은 22,000 ohm±5% 저항값을 가진다. Social network-based Media Artwork
P 15 of 135
2.3.3.3 LED 빛을 내는 발광 다이오드이다. 한쪽 방향으로만 전류를 흘러보낸다. 전류가 흐르면서 발광부에서 빛이 나는 소자이다. 디스플레이부터 회로 동작 여부 확인 등 다양한 목적으로 활용한다.
그림. LED소자 모습 및 구조(Wikipedia)
2.3.4 전자회로소자 기호 이외에 전자적 스위치인 릴레이, 메모리 소자인 플립플롭/래치/레지스터 등 많은 것들이 있다. 각 소자는 회로도에 표시할 때, 다음 그림과 같이 편의상 약속된 기호를 사용한다.
그림. 전자회로 기호(wikipedia)
Social network-based Media Artwork
P 16 of 135
다음은 이 기호를 사용해, 회로도를 디자인한 예이다. 이런 전자회로 기호를 사용하면, 사람이 훨씬 보기 편해지고, 회로의 기능과 소자의 입출력 연결을 쉽게 파악할 수 있다. 또한, 이렇게 회로도를 디자인하면, 회로기판 제작업체 등에 설계도를 전달하여, 회로기판을 제작할 수 있다.
그림. 전자회로 디자인 예(wikipedia) 회로도는 소프트웨어로도 디자인할 수 있고, 저렴하고 널리 쓰이는 Eagle CAD(http://www.cadsoftusa.com/) 등을 사용할 수 있다.
2.3.5 전자회로 개발 준비 전자회로를 개발하기 위해서는 몇가지 준비물이 필요하다. 1. 테스터기: 회로나 소자의 전압, 전류 등을 측정할 수 있는 기기로 몇만원 이하로 구입할 수 있다. 2. 인두기 및 실납: 회로에 소자를 접합시키기 위해 납땜을 할 수 있는 도구이다. 3. 전선 및 니퍼(nipper) 4. 소자 부품 상자 기타로 시간에 따른 전압과 전류의 변화를 측정할 수 있는 오실로스코프가 있으면 좋다. 다만 가격이 비싸다. 중고장터 등에서 저렴하게 구할 수 있다.
Social network-based Media Artwork
P 17 of 135
2.4
아두이노 IDE 아두이노 IDE는 아두이노 보드를 이용해 프로그래밍을 할 수 있는 통합개발환경(integrated development environment) 소프트웨어이다. C언어와 유사한 방식으로 프로그래밍한다. 다음은 아두이노에서 간단한 프로그래밍 구조이다. 프로그램에 기술된 스크립트 코드는 각 함수에서 위에서 아래로 실행된다. setup() 함수는 아두이노에 의해 프로그램 시작시 한번만 자동으로 실행된다. 이 함수는 초기 프로그램 설정과 관련된 루틴을 실행하는 데 사용하려는 목적으로 제공된다. loop() 함수는 아두이노에 의해 전원이 꺼지지 않은 한 무한지 자동 실행되는 함수이다. 이 안에 원하는 수행 로직을 코딩하면 된다.
#define LED 13
// 상수 정의
int val = 0;
// 정수형 전역변수 정의
void setup() { pinMode(LED, OUTPUT);
// 13 번 핀을 출력핀으로 설정하도록 함수 호출
}
void loop() { val = analogRead(0);
// A0 에서 신호를 읽음
digitalWrite(LED, HIGH);
// D13 에 HIGH신호를 출력시킴
delay(val);
// 읽은 신호만큼 동작을 지연시킴
Social network-based Media Artwork
P 18 of 135
digitalWrite(LED, LOW);
// D13 에 LOW신호를 출력시킴
}
2.4.1 LED 점멸 간단한 LED 점멸을 실습해 보기로 한다. 이를 위해 가변저항을 이용해 이에 따라 점멸 주기가 바뀌도록 프로그램해본다. 우선 아날로그 입력핀 A0 에 가변저항 2 번째 핀을 연결한다. 가변저항 1 번째는 5V, 가변저항 2 번째는 GND를 연결한다. LED는 디지털 출력 D13 번과 GND를 각각 연결한다. D13 이 HIGH가 될때마다 LED는 커질 것이다(*주: LED에 과부하를 방지하기 위해 저항을 사용해야 하나 가변저항을 사용해 부하를 줄였으므로 직접 연결한 것이다. 하지만 부하가 많은 부품을 직접 아두이노 보드와 연결하면 부품이 망가질 수 있으니 이때는 적절히 저항이나 다이오드를 연결해야 함에 주의한다).
#define LED 13 int val = 0;
void setup() { pinMode(LED, OUTPUT); }
void loop() { val = analogRead(0); digitalWrite(LED, HIGH);
Social network-based Media Artwork
P 19 of 135
delay(val); digitalWrite(LED, LOW); delay(val); }
2.4.2 서보모터 제어 이 장에서는 서보모터를 제어하는 방법을 설명한다. 서보모터는 엑츄에이터의 일종으로 제어 명령에 따라 정확한 위치와 속도를 제어할 수 있는 모터이다. 서보모터 제어를 이해하기 위해, 아두이노 예제 중 Knob(http://arduino.cc/en/Tutorial/Knob)를 실습하기로 한다. 실습을 위해서는 아두이노 보드, 서보모터, 가변저항(Potentiometer), 전선, 브래드보드가 필요하다. 서보모터는 3 개 전선 인, 전원, 그라운드, 시그널 선이 있다. 전원선은 보통 적색이며, 아두이노 보드 5V 핀과 연결한다. 그라운드는 보통 검정색이며, 아두이노 보드의 그라운드 핀과 연결한다. 시그널은 보통 노란색이나 오랜지색이며, 아두이노 보드의 9 번 핀과 연결한다. 가변저항은 세개의 핀이 있으며, 이 중 양쪽의 두개는 아두이노 보드의 5V 전원과 그라운드 핀에 연결된다. 중간핀은 아두이노 보드의 아날로그 입력 0 번 핀과 연결한다.
Social network-based Media Artwork
P 20 of 135
그림. 회로 구성 모습 소스 코드는 다음과 같이 입력한다. // Controlling a servo position using a potentiometer (variable resistor) // by Michal Rinott <http://people.interaction-ivrea.it/m.rinott> #include <Servo.h> Servo myservo;
// 서보 객체 생성
int potpin = 0;
// 가변저항 연결을 위한 아날로그 핀 번호
int val;
// 아날로그 핀에서 읽는 값을 저장하는 변수
void setup() { myservo.attach(9);
// 서보 객체의 시그널과 연결된 핀 번호 설정
} void loop() { val = analogRead(potpin);
// 가변 저항에서 0 에서 1023 까지 저항값을 읽어온다
val = map(val, 0, 1023, 0, 179);
// 저항값을 0 에서 180 사이로 스케일처리한다
myservo.write(val);
// 서보모터에 스케일된 값을 설정한다
delay(15);
// 서보모터가 해당값으로 회전할때까지 대기한다
}
Social network-based Media Artwork
P 21 of 135
2.5
프로세싱
2.5.1 개요 프로세싱은 이미지 애니메이션 그리고 그의 상호작용을 처리하기 위해 만들어진 소프트웨어이다. 프로세싱은 대화형 그래픽 작성을 통해 프로그래밍을 배울 수 있는 방법을 제공한다. 프로세싱에서 그래픽을 만들어내는 과정을 스케치라고 한다. 프로세싱은 특히 미디어아트나 알고리즘 기반 그래픽 형상 생성 연구 등에 많이 활용되고 있으며, 시뮬레이션, 컴퓨터 비전 등 그 활용범위가 매우 넓다. 실습하기 전에 https://processing.org/download/ 에서 프로세싱을 다운로드 받아 설치한다.
2.5.2 실습 이 실습은 아두이노 보드와 연결된 광센서로 부터, 시리얼 포트로 컴퓨터에 광센서 데이터를 받아, 그 값을 원모양으로 시각화해주는 예이다. 이 실습은 ‘손에 잡히는 프로세싱(케이시 리아스, 2011, 인사이트)’의 예제를 일부 편집하여 활용하였음을 밝힌다. 광센서에서 조도값을 얻기 위해, 회로도를 다음과 같이 구성한다.
그림. 광센서 회로도 구성(learn.adafruit.com/photocells/using-a-photocell)
Social network-based Media Artwork
P 22 of 135
프로세싱과 아두이노를 시리얼 포트를 이용해 연결해본다. 이를 위해서는 먼저 아두이노 IDE에서 광센서와 연결된 아날로그 0 번 핀에서 신호를 읽어 시리얼포트로 전송해주는 간단한 코드를 설치해야 한다. 아래와 같이 코딩한 후 아두이노 보드에 전송해 본다.
// Note: This is code for an Arduino board, not Processing int sensorPin = 0; // Select input pin int val = 0; void setup() { Serial.begin(9600); // Open serial port }
void loop() { val = analogRead(sensorPin) / 8; // Read value from sensor Serial.print(val); // Print variable to serial port delay(100); // Wait 100 milliseconds }
이제, 프로세싱에서 다음과 같이 시그널을 입력받아 데이터를 그래픽으로 가시화하는 예제를 만들어 보자. 아래의 코드를 프로세싱에 입력해 본다.
import processing.serial.*; Serial port; // Create object from Serial class float val; // Data received from the serial port
Social network-based Media Artwork
P 23 of 135
float angle; float radius;
void setup() { size(440, 440); frameRate(30); strokeWeight(2); smooth(); String arduinoPort = Serial.list()[0]; port = new Serial(this, arduinoPort, 9600); background(0); }
void draw() { if ( port.available() > 0) { // If data is available, val = port.read(); // read it and store it in val // Convert the values to set the radius radius = map(val, 40, 60, 0, height * 0.45); } int middleX = width/2; int middleY = height/2; float x = middleX + cos(angle) * height/2; float y = middleY + sin(angle) * height/2;
Social network-based Media Artwork
P 24 of 135
stroke(0); line(middleX, middleY, x, y); x = middleX + cos(angle) * radius; y = middleY + sin(angle) * radius; stroke(255); line(middleX, middleY, x, y); angle += 0.01; }
문제가 없다면, 프로세싱에서 광센서 조도값에 따라, 원모양으로 그려지는 그래픽 패턴을 볼 수 있을 것이다.
2.6
결론 지금까지 피지컬 컴퓨팅에 대해 간단히 살펴보았다. 이장의 내용을 좀 더 깊이 살펴보고 싶다면, 아래 사이트나 책을 참고하길 바란다. 1. 아두이노 홈페이지(www.arduino.cc) 2. 프로세싱 홈페이지(www.processing.org) 3. 그래스호퍼 홈페이지(www.grasshopper3d.com) 4. Firefly 홈페이지(www.fireflyexperiments.com) 5. 마시모 밴지, 2012.7, 손에 잡히는 아두이노, 인사이트 6. 채진욱, 2011.3, 아두이노 for 인터랙티브 뮤직, 인사이트 7. 케이시 리아스, 벤 프라이, 2011.3, 손에 잡히는 프로세싱, 인사이트 8. Interactive Prototyping – An introduction to physical computing using arduino, grasshopper, and firefly
Social network-based Media Artwork
P 25 of 135
3.
프로젝션 맵핑 - 강태욱
3.1
개요 프로젝션 맵핑(projection mapping)은 컴퓨터 그래픽 영상을 특정 물체나 벽면의 표면에 투사하여, 스크린으로 활용하여, 특수한 영상 효과를 주는 방법이다. 프로젝션 맵핑은 몇 년 전부터 활용되기 시작한 기법으로, 마케팅/광고, 엔터테인먼트, 미디어아트 등에 널리 활용되어, 관객들에게 인상적인 영상 효과를 주고 있다. 요즘에는 프로젝터만 있다면, 본인만의 프로젝션 맵핑을 손쉽게 개발할 수 있다. 영상을 물체 표면에 맵핑할 때 MadMapper, Resolume Arena, Max/MSP/Jitter 등 프로젝션 맵핑 도구를 사용하나, VPT(https://hcgilje.wordpress.com/vpt), VVVV(www.vvvv.org), MPM(Multi-Projector-Mapper, robotized.arisona.ch/mpm)와 같은 오픈소스 기반 도구들도 많이 활용되고 있다. OAW-ID 워크샵에서는 VPT, VVVV, Max/MSP/Jitter 및 RGB-D(Depth) 센서인 키넥트(kinect)를 위주로 진행하였다. 이 장에서는 맵핑 작업을 쉽게 체험할 수 있는 VPT를 중심으로 내용을 설명한다.
그림. 프로젝션 맵핑 예(P. Warrener in Lyon, 2008, Projection mapping at Fête des Lumières. Wikipedia, 2011, Vivid Sydney projection display)
Social network-based Media Artwork
P 26 of 135
3.2
VPT
3.2.1 개요 VPT는 Video Projection Tool(VPT)로써, 무료로 쓸 수 있는 실시간 프로젝션 소프트웨어이다. 현재 7.0 버전까지 나왔으며, 오픈소스기반 멀티플랫폼을 지원하고 있다. 프로그램 다운로드는 https://hcgilje.wordpress.com/vpt/ 에서 할 수 있다. 이 장의 내용은 VPT 7 manual을 참고하였음을 밝힌다.
그림. VPT (VPT7 manual)
3.2.2 인터페이스 인터페이스는 미리보기 윈도우(preview), 출력 윈도우(output), VideoProjectionTool (VPT)윈도우로 구성되어 있다. 출력 윈도우는 프로젝션된 결과가 표시된다.
그림. VPT 인터페이스
Social network-based Media Artwork
P 27 of 135
VPT윈도우의 전체화면(fullscreen) 버튼을 눌러서, 출력을 전체화면으로 할 수 있다. VPT윈도우는 다음과 같이 세부적으로 구성된다.
그림. VPT윈도우 화면 구성 VPT작업 개념은 다양한 프로젝션 소스(동영상, 이미지 등)들을 채널에 할당하고, 각 채널을 레이어로 오버레이하여 겹쳐 보여주는 방식이다. 각 레이어는 프로젝션할 영역을 어떻게 맵핑할 지에 대한, 맵핑 영역 등을 관리하고 있다. VPT 제어바(control bar)는 세부적으로 다음과 같은 버튼들로 구성되어 있다.
그림. VPT 제어바
Social network-based Media Artwork
P 28 of 135
3.2.3 실습 3.2.3.1 레이어 생성 VPT를 실행한 후, 왼쪽 상단의 레이어 생성 인터페이스에서 '+'버튼을 클릭해, 레이어를 하나 추가한다.
그럼, 레이어 번호가 있는 노란색 원이 나타날 것이다. 미리보기 및 출력 윈도우에서는, 레이어 모서리를 제어할 수 있는 코너 핸들(corner handle)이 나타난다. 현재는 아무런 프로젝션 소스를 설정하지 않았으므로, 검은색으로만 표시될 것이다
우측 하단의 레이어 관리 윈도우에는 생성된 레이어가 표시된다.
Social network-based Media Artwork
P 29 of 135
3.2.3.2 소스 추가/설정 레이어에 프로젝션할 컨텐츠 소스를 채울려면, 우측 상단의 소스 윈도우에 소스들 중 하나를 활성화해야 한다. 'on'버튼을 클릭하고, 우측 영역을 클릭해, 다음과 같이 컨텐츠(예 - vpt07.png)를 선택한다.
선택된 소스를 미리보기하기 위해, 그 옆의 'monitor'버튼을 클릭한다.
활성화된 소스를 생성된 레이어에 사용하기 위해서, 레이어가 어떤 소스를 사용할 지를 설정해 줘야 한다. 생성된 컨텐츠 소스는 자동으로 1video, 2video 식으로 라벨이 붙여진다. 이 이름을 이용해, 다음과 같이 레이어에 출력하고자 하는 소스 라벨을 설정한다. 그럼, 설정된 컨텐츠 소스가 미리보기 및 출력 윈도우에 보여질 것이다.
Social network-based Media Artwork
P 30 of 135
3.2.3.3 코너 핸들 위치 설정 각 레이어의 컨텐츠 소스가 출력될 위치를 결정하기 위해, 코너 핸들을 클릭하고 드래그한다. 만약, 코너를 위치하다, 취소하고 싶을 때는 ^Z(ctrl-Z)키를 눌러, 이전 위치로 되돌릴 수 있다. 레이어를 이동하기 위해서는, shift-클릭과 드래그를 통해 이동할 수 있다. 레이어를 스케일하기 위해서, alt-클릭과 드래그를 할 수 있다.
3.2.3.4 프로젝션 맵핑 설정 저장 지금까지 작업한 프로젝션 맵핑 작업 설정을 저장한다. VPT는 presets에 기반한 설정 정보 저장을 지원하며, 1 번 preset부터 저장할 수 있도록 되어 있다(0 번은 특수한 preset으로 되어 있어, 사용하지 않는 편이 좋다). 다음 그림과 같이 1 번 preset으로 맞춘 후, 'store'버튼을 클릭해 저장한다.
다음에 VPT를 실행할 때, 다음과 같이 저장된 preset이 리스트에 표시될 것이다. 선택해, 그때 작업 상태를 로딩할 수 있다.
Social network-based Media Artwork
P 31 of 135
3.2.3.5 여러 레이어 설정 앞서 언급한 방식으로 여러개의 레이어와 컨텐츠 소스를 추가할 수 있다. 레이어 관리 윈도우에서 선택된 레이어는 작업 시 활성화 레이어로 취급되어, 코너 핸들 등을 조정할 수 있다.
다음은 이렇게 여러 개의 레이어에 컨텐츠 소스를 설정해, 프로젝션한 예이다.
그림. 프로젝션 예(*주: 집에서 소파위에 간단히 프로젝션 맵핑해 보았다)
3.2.3.6 컨트롤 탭 설정 좌측 하단의 컨트롤 탭(control tabs)에는, 레이어에 설정된 컨텐츠 소스에 대해 다양한 제어를 할 수 있는 많은 옵션들이 있다. 왼쪽의 탭리스트를 선택하여, 해당 파라메터를 설정할 수 있으며, 투명도, 색상, 컨텐츠 출력 영역 지오메트리(geometry)와 마스크(mask), 텍스쳐, 명도, 채도, 메쉬 왜곡(distortion), 스케일링(scaling), 플리핑(flipping), 회전(rotation), 블러(blur), 모션(motion) 블러 등의 이펙트를 줄 수 있도록 되어 있다.
Social network-based Media Artwork
P 32 of 135
3.2.3.7 마스크 생성 마스크를 생성하기 위해, 마스크의 형상을 편집해야 한다. 다음과 같이 마스크 에디터(editor)를 선택한다.
이제, 마스크 편집 에디터 다이얼로그가 표시된다.
Social network-based Media Artwork
P 33 of 135
우측에 표시된 마스크의 외곽선(outline)을 클릭하면, 그 지점에 정점이 추가되며, 이를 클릭&드래그함으로써 외곽선의 모양을 수정할 수 있다. 정점을 삭제하기 위해서는, 정점을 선택하고, delete키를 누르면 된다.
마스크를 생성하였다면, 마스크에 이름을 주고, 'save mask'버튼을 클릭해, 마스크를 저장한다. 마스크는 png포맷으로 저장되며, 프로젝트 폴더 내 mask 폴더에 저장된다.
그리고, 'mask'버튼을 클릭해, 해당 레이어에 작업한 마스크를 설정한다.
마스크 에디터 윈도우의 'mask.blur'및 'circle.diameter'를 이용하면, 경계선을 흐리게 하거나, 원모양의 마스크를 만들 수 있다.
Social network-based Media Artwork
P 34 of 135
이런 방식으로 다음과 같은 복잡한 마스크를 만들어, 컨텐츠 소스들을 출력할 수 있다.
3.2.4 기타 기능 이외에 다양한 효과를 설정할 수 있다. 1. 컨텐츠 소스 메쉬 맵핑 - 다음은 컨텐츠 소스를 메쉬로 맵핑한 결과이다.
2. 외부 프로그램 소스 연결 - 맥킨토시 버전에서는 프로세싱, OpenFrameworks, MaxJitter, VDMX, Modul8 등을 소스로 가져올 수 있는 syphon 프레임웍을 지원한다.
Social network-based Media Artwork
P 35 of 135
3. 루프 효과 - 비디오 소스를 선택해, 루프(loop) 포인트를 설정하거나, 컨텐츠 소스의 플레이 순서를 'play list'를 통해 제어하는 등의 효과를 줄 수 있다.
4. Cuelist 기능 - 다음 그림처럼, 저장된 preset들을 이용해, cuelist를 만들어, 각 present의 프로젝션 출력 순서와 효과를 설정할 수 있다.
Social network-based Media Artwork
P 36 of 135
5. 시리얼 통신 제어 - 미디 컨트롤러 등을 이용해, 출력 소스에 대해 다양한 파라메터를 실시간으로 컨트롤하거나, 아두이노와 같은 마이크로컨트롤러와 시리얼 통신(serial communication)을 통해, 센서나 스위치 값을 받고, VPT의 프로젝션 동작을 제어할 수 있으며, 반대로, VPT의 출력값(예 - 음량)을 시리얼 통신으로 아두이노에 전달해, LED나 모터를 제어할 수 있다.
그림. 시리얼 통신 기능
그림. 아두이노 제어용 LED출력 및 모터 제어 소스 코드
Social network-based Media Artwork
P 37 of 135
이외에, 비디오 및 사운드 트리거 기능을 통해, 비디오에 특정 배경이 검출되면, VPT 프로젝션 동작을 컨트롤할 수 있는 기능 등을 지원한다.
그림. VPT 비디오 트리거 기능 이와 관련된 상세한 내용은 VPT manual(https://hcgilje.wordpress.com/vpt/)을 참고하길 바란다. 3.3
결론 프로젝션 맵핑을 위해, 무료로 사용할 수 있는 VPT를 설명하고, 간단히 실습해 보았다. 이외에도, VVVV, MadMapper, Max/Msp/Jitter와 같은 좋은 도구들이 있다. 프로젝션 맵핑을 위한 이런 도구를 사용하기 전에, 적절한 프로젝션 맵핑 디자인과 맵핑 소스 개발이 선행되어야 한다. 맵핑 소스는 포토샵, 프로세싱 등 다양한 컴퓨터 그래픽스 영상을 생성할 수 있는 프로그램을 이용해 개발할 수 있다. 프로젝션 맵핑 컨텐츠와 맵핑 디자인이 모두 개발되었다면, 현장의 전시 장소에서 테스트하여, 맵핑 상의 불일치 등의 문제를 해결할 필요가 있다. 상업용으로 제작되는 큰 공간의 프로젝션 맴핑은 고해상도 맵핑 소스, 여러대의 고안시(1 만 안시 이상) 프로젝터 등을 사용한다. 하지만, 실내 소규모 공간에서는 3 천안시 정도의 프로젝터와 1024x768 정도의 해상도로도 충분한 프로젝션 맵핑이 가능하다.
Social network-based Media Artwork
P 38 of 135
4.
작품 제작/전시
4.1
개요 – 강태욱 작품 제작과 전시를 위해서는 여러가지 고려사항이 필요하다. 우선 작품 주제(철학)를 결정해야 한다. 좋은 작품 주제는 사람들의 관심을 이끌고, 공감을 얻어 낼 수 있는 것이면 좋다. 주제를 결정하였으면, 주제를 효과적으로 구현할 수 있는 매체와 방법을 디자인한다. 작품 디자인을 통해, 미디어 아트 작품의 형태를 결정하고, 어떻게 관객과 상호작용을 할 지에 대해서도 고민하는 단계가 된다.
Design Interactive Attraction Mechanism
Sight
Design Philosophy + Object Interactive Taste
Hearing
Five senses
Smell
Design Philosophy = Design Parameters
Touch
인터렉티브 작품 매력도 디자인 요소
Object Interactive = Sensor + Design DNA + Actuator
Design DNA = Design Algorithm
이제, 실제 작품을 제작하기 위한 상세 계획을 세운다. 계획은 상세하면 할 수록 좋다. 각 단계의 이정표에 어떤 산출물이 나와야하는 지를 적어둔다. 팀끼리 이 이정표에 합의를 하였다면, 작품을 최소한의 비용으로 최대의 효과와 품질을 얻을 수 있는 전략을 만들고, 작품을 제작한다. 작품 제작 시 전시 공간이 이미 모델링되어 있다면, 이를 고려해, 작품의 배치, 관객 동선에 따른 조명과 센서의 배치 등을 미리 고민할 수 있다. 작품이 제작되었다면, 작품을 테스트하여, 전시 시 작품이 다운되는 불행한 사태를 미리 방지한다. 테스트 후 보완을 하면, 전시 공간에 세팅하고, 최종적으로 리허설을 한다. 이 전체의 과정은 매우 주의깊게 진행되어야 하고, 특히, 팀간 조율이 필요한 부분(공간 배분, 작품별 공간 배치, 작품별 간섭 체크, 공간 대여 비용, 작품 설치 및 철거 비용 배분, 세미나 다과 비용, 워크샵 비용 등)은 서로 감정이 상하지 않도록 조율되어야 하는 부분이다. 다수의 사람들이 모여 하는 일이다 보니, 서로간의 이해와 희생이 없이는 그룹전시는 쉽지 않은 일이다. 그러므로, 그룹전시에서는 각자의 이해와 서로간의 신뢰가 필수적이다. 이 과정들은 페이스북, 구글 캘린더 및 드라이브, 오프라인 모임(워크샵 이후 몇개월 동안은 3 주에 한번씩, 김호중 소장님 건축소에서 저녁에 모임을 가짐)등을 통해 정보를 공유하며, 문제를 해결해 나갔다.
Social network-based Media Artwork
P 39 of 135
4.2
Cell Bloom – 글쓴이: 강태욱, 작가: 강태욱/강선우
4.2.1 작품 주제 2014 년도는 국내에 많은 사건들이 있었다. 그 중에, 세월호와 같은 안타까운 사고도 있었다. 우리는 이런 비슷한 사고들을 경험한 적이 꽤 많다. 우리 사회에 계속 반복되는 이런 사고들은 누구나 겪을 수 있다. 이런 관점에서, 무엇이 이런 사건을 촉발했을까라는 생각을 해 보았다.
그림. 삼풍백화점 붕괴사고(최광모, commons.wikimedia.org) 우리의 환경은 국가 주도 산업을 통해 급격히 발전했지만, 미처 함께 발전하지 못한 것들이 있는 데, 특히, 인간 보다는 경제를 우선시 하는 논리들은 인간을 소외시키고, 부품화하여, 사람의 안전뿐 아니라, 다양성까지도 앗아가는 결과를 가져왔다고 생각한다. 우리 사회가 희망적이려면, 이런 풍토가 변화되어야 한다.
그림. 사회적 토양의 변화와 희망(Mark Knobil, 2006, Education in Vietnam, Wikipedia. PH2 Elizabeth A., Edwards, Children smile and gather for a group photo in the town of Lamno, commons.wikimedia.org)
Social network-based Media Artwork
P 40 of 135
우리가 선진국으로 발전하기 위해서, 사회적 안전과 다양성 확보는 필수적인 것이다. 이런 관점에서 Cell Bloom의 작품 주제를 생각해 보았다. “생물학적 생태계를 구성하는 가장 작은 단위인 세포(Cell)란 개념으로, 환경 변화에 따라 반응하는, 꽃이 만개하는(Bloom) 형상을 표현한다. 좋고 나쁜 환경에 따라 반응하는 Cell은 현재 우리의 모습을 담고 있다” 세포는 하나의 작은 오토마타라 할 수 있다. 세포가 모여 생물 체계를 이룬다. 생물 체계는 입력과 출력의 기능을 하게 되는 데, 좋거나 나쁜 외부 환경에 반응하고 영향을 준다. 좋은 환경은 서로가 서로를 신뢰하고, 따스한 온기로 서로를 포옹할 수 있는 사회이다. 나쁜 환경은 서로가 불신하며, 차가운 시선으로 서로를 바라보고, 경쟁한다. 이를 표현하기 위해, 세포 오토마타를 파라메트릭하게 모델링하고, 입력과 출력을 표현하여, 환경에 영향을 주고 받는 지를 구현하기로 하였다. 세포(Cell)과 생태계 관점에서, 이를 우리들 세상으로 비춰 보고 싶었다. 아시다시피, 이 둘의 관계는 명확하다. 생태계 환경이 좋지 않은데, 개별 세포가 성장하고, 발전할 수 있는가? 참고로, 이 작품은 이전 작품으로 2014 년 Maker Faire에서 전시된 Cell automata의 연장선으로 진행된 것이다. 그러므로, Cell automate 1.0 버전을 업버전한 2.0 버전이 Cell Bloom으로, 기존의 프레임웍을 갱신하는 방향으로 작품을 개발하였다. 이 작품의 디자인과 제작 및 전시는 본인과 본인의 딸(강선우)이 함께 작업 하였다. 개인적으로 마음에 들지 않았던, 주입식 교육 시스템에 대한 대안으로도, 메이커 교육을 시험해 보고 싶은 생각에, 기본적인 디자인과 제작 과정을 알려주고, 아이가 할 수 있는 작업 프로세스를 분리해, 함께 작업을 진행하였다. 2014 년 Maker Faire에서도 같은 방식으로 함께 진행하였는 데, 그 과정을 경험해 본 결과, 아이들을 동등한 메이커로 대하고, 함께 작업한다는 것은 크게 어렵지는 않았다. 다만, 아직 발육이 덜된 근육과 뼈, 그리고 초등학교 2 학년 수준으로 교육을 받은 수학적 지식을 고려해야 했다. 어려움은 있었지만, 워낙 작업 자체가 흥미로운 것들이라 잘 따라와 주었다.
4.2.2 작품 디자인 최초에 생각했던 작품에 대한 이미지들은 다음과 같았다.
Social network-based Media Artwork
P 41 of 135
그림. Cell Automata 최초 이미지 스케치 및 참조 이미지(Wikipedia) 주변 환경을 센싱하는 역할은 키넥트와 아두이노 보드에 연결된 광센서, 온도센서 등을 통해 데이터를 얻는다. 얻은 환경 데이터는 프로세싱으로 전달되어, 적절한 그래픽을 생성하고, 프로젝션한다. 버전 1.0 의 경우 델라우니 삼각화를 통해, 보로노이 다각형 기반 세포 모양의 그래픽을 모델링하였으나, 버전 2.0 Cell Bloom의 경우, 광센서에 따라, 배경 이미지가 달라지고, 키넥트 동작 인식을 통해, 배경 이미지가 드러나도록 하였다. 동작 방식은 다음과 같다. 1. 관객이 Cell Bloom 컨트롤 박스 위에, Distrust(불신)키를 놓는다. 박스 위에는 광센서가 설치되어 있어, Trust키를 그 위에 놓으면, 광센서의 조도값이 낮아진다.
그림. 컨트롤 박스
Social network-based Media Artwork
P 42 of 135
이 값을 이용해, 사회가 서로를 믿지 못하면, 어떤 일이 발생하는 지를 이미지로 표현할 수 있다. 2. 조도값을 컨트롤 박스안에 광센서와 연결된 아두이노 보드를 통해, 노트북으로 전달받는다. 3. 노트북의 프로세싱 스케치에서, 조도값을 읽어, 조도가 밝을 때는, 미리 준비된 밝은 이미지로 프로젝션하고, 어두울 때는, 어두운 이미지를 프로젝션한다. 이때, 이미지가 변경되는 시점을 알려주는 사운드 효과를 준다. 4. 이미지는 아직 검은 색으로 덮혀 있다. 이미지를 보기 위해서는, 관객이 프로젝션되는 벽면으로 가까이 다가가, 손으로 검은 색 영역을 지워나가도록 하였다. 손 동작을 검출하는 것은 키넥트 센서를 사용하였다.
그림. 키넥트 박스(적색 박스)와 컨트롤 박스(우측 하단 박스) 5. 아울러, 아두이노 보드에 연결된, 온도센서를 통해, 이미지 위에, 꽃이 만개하는 모습을 애니메이션한다. 이 꽃들은 온도가 높아질수록 모양이 커지고, 아름다워지도록 한다.
그림. 온도센서와 연결된 하트 모양의 버튼
Social network-based Media Artwork
P 43 of 135
4.2.3 작품 제작 계획 작품 제작을 진행하기 위해서, 다음과 같이 일정을 대략적으로 계획하였다. 이 계획표는 작품 제작 진행이 제대로 되고 있는 지를 체크하는 용도로 사용하였다. 단계
작업기간
시작
끝
완료율%
내용
계획
0.5
8/31
50
Cell Bloom 작품
0.5
9/1
30
Body(Points, Edges, RGB), Cell(Points, Edge, RGB) =
구상/디자인
f(light, distance-density, noise, time)
알고리즘 디자인
1
9/15
5
Sequence flow
하드웨어 제작
4
10/1
0
작품, 공간, 장비, 포장 등
프로그래밍
3
10/15
0
Processing, Arduino, Kinect
테스트
1
11/1
0
설치/현장 테스트
0.5
12/8
12/8
0
연말 전시
4.5
12/8
12/12
0
총합
15
필요한 작품 제작 재료와 비용은 다음과 같이 계획하였다. 프로젝터 (3500 안시 이상, 1200 명암비 이상), Dual CPU 이상 노트북, 프로세싱, 키넥트, 3x3m 공간, 아두이노 우노, 환경 센서(일반적인 광센서, 온도센서), Cell Bloom 박스 제작용 MDF 5T, 작품 박스 MDF 5T 전체 비용은 50~70 만원으로 추정하였다.
4.2.4 작품 제작 작품을 제작하기 위해서는 전시될 환경을 고려해 기구를 디자인해야 했다. 디자인을 위해 라이노(Rhino)와 오토캐드를 이용하였다. 라이노는 3 차원 모델링 도구로 손쉽게 다양한 형체를 만들 수 있다. 전체 작품 모델 디자인은 강태욱이 하였고, 모델의 세부적인 편집 및 컨트롤 박스 제작은 강선우가 하도록 하였다.
Social network-based Media Artwork
P 44 of 135
이 작품에서 디자인된 것은 작품의 아두이노 메인보드를 보관하고, 센서를 부착할 컨트롤러 역활의 Cell Bloom 컨트롤 박스였다. 컨트롤 박스의 컨셉은 외부 환경의 변화를 받아들이고 변화한다는 느낌을 주도록, 특정 패턴으로 void를 주었으며, 키 모양을 디자인하여, 키가 컨트롤 박스 위에 놓여 질 수 있도록 하였다.
3 차원 모델링 후 각 면을 2 차원 캐드 도형으로 변환하는 과정을 거친다. 변환된 캐드 도형은 DXF파일로 저장되어, 레이저 커팅 프로그램에서 불러들여 지며, 어떤 순서로 레이저 가공할 지, 레이저의 강도는 얼마로 할 지 등을 레이어 별로 설정한 후, 레이저 커팅을 시작한다.
레이저 커팅된 패널은 조심스럽게 뜯어 내어, 지그와 공업용 본드를 이용해 부착하였다. 레이저 커터기에 오차가 있는 경우 부재를 조립할 시 서로 안맞는 경우가 생긴다. 서로 안맞는 부재는 드레멜, 줄과 같은 목공 도구를 이용해 가공하였다.
Social network-based Media Artwork
P 45 of 135
모두 조립된 컨트롤 박스 및 기타 전시물은 표면을 좀 더 매끄럽게 연마하고, 원하는 색을 페인트하는 등의 작업을 거쳤다.
이 작품에는 화면이 전환될 때 마다, 사운드 효과가 있다. 다음 그림과 같이, 마스터키보드와 사운드 녹음 프로그램(게러지 밴드, LogicX등)을 이용해, 사운드를 녹음하고, 적당한 효과음이나 악기음을 할당해, wav파일로 저장하였다.
이 wav파일은 프로세싱에서 배경 이미지가 변경해야할 때 마다, 관객에게 컨텍스트가 변하였음을 알려주는 신호음으로 사용하였다. 다음은 최종 제작된 Cell Bloom 컨트롤 박스(우측 작은 박스)와 키넥트 박스(적색 박스)의 모습이다.
Social network-based Media Artwork
P 46 of 135
프로세싱 스크립트는 다음과 같이 객체를 정의하여, 각 객체의 메소드(method)와 속성들을 구현하였다. 객체는 환경(Environment), 환경을 지원하고 있는 아두이노 및 키넥트 객체가 있으며, CellBloom객체를 지원하는, 오디오를 지원하는 플레이어 및 Minim, 이미지 렌더링을 지원하는 PImage, Flower 그래픽 렌더링을 지원하는 Flower 등으로 구성된다. Flower 그래픽은 OpenProcessing 사이트의 스케치(http://www.openprocessing.org/sketch/1405)를 참고하였으며, 나머지는 직접 스케치하였다. AudioPlayer Arduino Minim
Environment
CellBloom PImage
+setup() +sensing()
+init() +draw()
Kinect
Flower
* RandomOscillator
그림. 객체 다이어그램 (UML) 각 객체를 동작시키는 스크립트는 다음과 같으며, 전체 소스 라인수가 700 라인을 넘어가기 때문에, 핵심적인 부분만 표시하였다. /** * Cell Bloom */ import java.util.Iterator; import ddf.minim.*; AudioPlayer soundHope; Minim minimHope;
// 사운드 처리용 객체 선언
PApplet pg; ArrayList flowers; int imgDarkIndex = 0; int imgHopeIndex = 0; int imgIndex = 0;
// 플라워 배열
int brightMap[] = new int[2048 * 1024];
// 이미지 비트맵 픽셀 배열 선언
Social network-based Media Artwork
P 47 of 135
PImage img; PImage img1[] = new PImage[5]; PImage img2[] = new PImage[5];
// 이미지 객체 선언
class Environment {
// 센싱 환경
// 온도 센서 관련 변수 선언 public float r = 0; public float g = 0; public float b = 0; public float meanTrans = 0; int transIndex = 0; float transList[] = new float[10]; public int imageRadius = 50; // 광 센서 관련 변수 선언 public float meanRadius = 0.0; int meanPhotoIndex = 0; float meanPhotoList[] = new float[10]; public int petalCount; public int pointsPerPetal; public boolean reset = false; public int imgIndex = 0; // 키넥스 센서 관련 변수 선언 public int kinectPosX, kinectPosY; int lightSensor = 0; int contactSensor = 0; public void setup() { setup_kinect(); setup_arduino(); }
// 환경 설정
public void sensing() {
// 센싱
update_arduino();
// 아두이노 센싱값 갱신
float trans = map(_arduino_NTC_502F397_value, 10, 20, 48, 255); // 투명값으로 사용할 센서 데이터 if(transIndex < 10) { transList[transIndex] = trans; transIndex++; } else { float average = 0.0;
Social network-based Media Artwork
P 48 of 135
for(int i = 0; i < 10; i++) average += transList[i]; average = average / 10.0; meanTrans = average; for(int i = 0; i < 9; i++)
// 센서 데이터 평균값 처리
transList[i] = transList[i + 1]; transList[9] = trans;
// 센서 노이즈 데이터를 평활화하는 효과가 있음
} // photo sensor if(meanPhotoIndex < 10) // 광센서 처리 { meanPhotoList[meanPhotoIndex] = (float)_arduino_PHOTO_value - 20.0; meanPhotoIndex++; } else { float average = 0.0; for(int i = 0; i < 10; i++) average += meanPhotoList[i]; average = average / 10.0; meanRadius = average; for(int i = 0; i < 9; i++) meanPhotoList[i] = meanPhotoList[i + 1]; meanPhotoList[9] = (float)_arduino_PHOTO_value - 20.0; } if(meanRadius < -13) { imgIndex = 0; meanRadius = -50; } else imgIndex = 1; // kinect sensor if(activeKinect) {
// 키넥트 센서 처리
kinectPosX = (int)rhandPos.x; kinectPosY = (int)rhandPos.y;
// 키넥트 동작 중심위치는 가려진 배경을 지우는 중심점이 됨
} else { kinectPosX = (int)centerBodyPos.x; kinectPosY = (int)centerBodyPos.y; } } public void draw()
Social network-based Media Artwork
P 49 of 135
{ draw_kinect(); } }; Environment env = new Environment();
// 환경 객체 생성
void setup() { // CellBloom 객체 설정 size(1024, 768, P3D); smooth(); noStroke(); colorMode(RGB); context = new SimpleOpenNI(this); env.setup();
// 포인트 클라우드 획득을 위한 SimpleOpenNI 생성
initSound(); initFlowers(); initImages(); } void initSound() // 이미지 변화시 플레이되는 이펙트 사운드 로딩. { minimHope = new Minim(this); soundHope = minimHope.loadFile("CellSoundsHope.wav", 2048); } void initImages() // 이미지 초기화. 총 10장의 이미지가 있음(희망적 이미지, 절망적 이미지로 구분) { for(int i = 0; i < 5; i++) { String file = "KoreaDark" + (i + 1) + ".jpg"; img1[i] = loadImage(file); img1[i].resize(width, height); file = "Hope" + (i + 1) + ".jpg"; img2[i] = loadImage(file); img2[i].resize(width, height); } imgIndex = 0; changeImage(); } void changeImage() { if(imgIndex == 0) { if(imgDarkIndex > 4) imgDarkIndex = 0;
// 배경 이미지 변경. 이미지는 계속 로테이션되도록 하였음.
Social network-based Media Artwork
P 50 of 135
img1[imgDarkIndex].loadPixels(); img = img1[imgDarkIndex]; imgDarkIndex++; } else { if(imgHopeIndex > 4) imgHopeIndex = 0; img2[imgHopeIndex].loadPixels(); img = img2[imgHopeIndex]; imgHopeIndex++; soundHope.play(); soundHope.rewind(); }
for(int i = 0; i < brightMap.length; i++) brightMap[i] = 0; loadPixels(); // 이미지의 픽셀값을 픽셀 배열에 로딩함 } void updateImages() // 가려진 배경 이미지는 키넥트에서 센싱된 위치를 중심으로 보여지게 됨 { for (int x = 0; x < img.width; x++) { for (int y = 0; y < img.height; y++ ) { // Calculate the 1D location from a 2D grid int loc = x + y * img.width; // 이미지로부터 RGB값 획득 float r, g, b; r = red (img.pixels[loc]); g = green (img.pixels[loc]); b = blue (img.pixels[loc]); // 키넥트 센싱 중심점에서 상대적인 밝기 계산 float maxdist = 70; float d = dist(x, y, env.kinectPosX, env.kinectPosY); float adjustbrightness = 255 * (maxdist - d) / maxdist; if(brightMap[loc] > 0) adjustbrightness = brightMap[loc]; r += adjustbrightness; g += adjustbrightness; b += adjustbrightness; if(brightMap[loc] < 128 && r > 0) brightMap[loc] = 8; // 0에서 255 범위를 넘어가는 RGB값 조정함. r = constrain(r, 0, 255);
Social network-based Media Artwork
P 51 of 135
g = constrain(g, 0, 255); b = constrain(b, 0, 255); // 새로운 색상 값을 적용 color c = color(r, g, b); pixels[y * width + x] = c; } } updatePixels(); // 픽셀 배열을 렌더링 이미지로 업데이트함 } void draw() { // CellBloom 렌더링 함수 background(16, 64, 16); env.sensing(); if(env.imgIndex != imgIndex) { imgIndex = env.imgIndex; changeImage(); } env.draw(); updateImages(); for(Iterator i=flowers.iterator(); i.hasNext();) { Flower flower = (Flower)i.next(); flower.drawFlower(); } } void mouseClicked() { initFlowers(); } void keyPressed() { switch(key) { case 'i': initFlowers(); break; case ' ': changeImage(); break; } }
// 키 이벤트 처리
void initFlowers() { // Flower 객체 초기화 flowers = new ArrayList(); int petalIndex = 4; int numX = 5; int numY = 5; int stepX = (int)width / numX; int stepY = (int)height / numY;
Social network-based Media Artwork
P 52 of 135
for(int i = 1; i < numX; i++) { for(int j = 1; j < numY; j++) { if(i == j && (i == 2 || i == 3)) continue; if(i == 2 && j == 3) continue; if(i == 3 && j == 2) continue; int x = i * stepX; // - stepX / 2; int y = j * stepY; // - stepY / 2; int r, g, b; if(i == j) {
// 아래 값들은 전시실 주변 조도 등을 고려해서 설정된 경험값임.
// 이 값들은 전시 환경에 따라 캘리브레이션 되어야 함. r = (int)random(32) + 255 - 32; g = (int)random(64) + 128; b = (int)random(64) + 128;
} else if(i == 4 && j == 1) { r = (int)random(32) + 128; g = (int)random(32) + 128; b = (int)random(32) + 255 - 32; } else if(i == 1 && j == 3) { r = (int)random(64) + 128; g = (int)random(32) + 255 - 32; b = (int)random(64) + 128; } else { r = (int)random(32) + 255 - 32; g = (int)random(32) + 255 - 32; b = (int)random(64) + 128; } petalIndex = petalIndex + 1; color c = color(r, g, b); float meanRadius = (float)stepX * 0.3; int petalCount = petalIndex; int pointsPerPetal = (int)(3 + random(6)); // 랜덤값으로 입 모양 등을 결정해 애니메이션 처리. Flower f = new Flower(x, y, meanRadius, petalCount, pointsPerPetal, c); flowers.add(f); } } }
Social network-based Media Artwork
P 53 of 135
...
앞의 스케치 코드 중 전시 시 몇 가지 고려해야할 점은 다음과 같다. 1. 센서 값들은 전시 환경에 따라 달라지므로, 전시 환경에 따른 캘리브레이션이 필요 2. 스케치 코드의 상수값들은 의미를 알 수 있도록, 기호화하는 것이 필요 3. 너무 많은 전역 변수의 활용은 작품의 스크립트 코드 유지보수, 디버깅(debugging)을 어렵게 만들므로, 적절히 모듈화, 객체화하는 것이 필요 4. 렌더링 속도를 고려해, 렌더링 객체 수를 결정해야 함 각 객체들은 유기적으로 연계되어 있다. 환경 객체는 센서에서 데이터를 센싱하여, CellBloom에 데이터를 전달하면, 이 데이터를 이용해, 적절한 이미지와 그래픽을 생성한다. 전체적인 제작 과정은 다음 동영상 링크를 통해 확인할 수 있다.
그림. 작품 제작 과정(www.youtube.com/watch?v=udSfoElVg8g&list=UUuwStBfS2mptEWSA04IjA9Q)
Social network-based Media Artwork
P 54 of 135
4.2.5 작품 테스트 원칙적으로, 테스트는 설치되는 전시공간에서 해야 하는 게 맞지만, 실제로는 전시공간의 대관상태 및 운영 규칙 등에 따라, 100% 똑 같은 전시 환경에서 테스트를 진행하기가 어렵다. 그러므로, 본인의 경우, 주로 집에서 작품을 설치하고, 테스트를 해보았다. 그리고, 작품이 실제 전시될 공간에서 어떻게 보여질 지 확인하기 위해, 라이노에서 실제 전시 공간 치수를 바탕으로 모델링해, 다음과 같이 공간감 등을 확인해 보았다.
최종 테스트는 작가 모두 바쁜 직장인이었으므로, 전시 시작 당일에 하기로 하였다. 만들어진 작품을 전시실에서 설치하는 데 오전 9 시부터 3 시간 정도 걸렸으며, 조명효과 등을 주거나, 센서를 통해, 프로젝션을 하여, 큰 문제가 없는 지를 오후 4 시까지 테스트해 보았다. 정식 전시 시작은 오후 4 시였다.
Social network-based Media Artwork
P 55 of 135
4.2.6 작품 전시 전시는 오후 4 시부터 작가 오프닝 세미나 형식으로 시작하였다. 이후 4 일동안 작품을 기동하고, 저녁이되면, 전원을 내리고, 종료시켜야 하므로 각 작품을 구동하는 설명서가 필요했다. 이를 위해, 페이스북에 작품 구동 매뉴얼을 공유하고, 각 작가가 하루마다 돌아가면서, 작품 구동을 책임지도록 하였다. 아울러, 그 작가는 전시 방문객에게 각 작품들을 관객들에게 설명하고, 혹시 작품 동작에 문제가 생겼을 때 해당 작가에 연락하는 등으로 전시 작품을 관리하였다.
그림. 작품 설명 모습 다음은 작품 전시 과정을 만든 동영상이다.
그림. 작품 전시 과정 (https://www.youtube.com/watch?v=gmWkWLzbcs&index=1&list=UUuwStBfS2mptEWSA04IjA9Q)
Social network-based Media Artwork
P 56 of 135
다음은 전시과정에서 경험한 것들이다. 1. 조명 효과는 관객의 관심을 끄는 데 도움이 된다. 2. 즉각적인 반응이 없으면, 관심도는 매우 떨어진다. 3. 인터렉티브 작품은 사용자의 개입 과정이 매우 단순해야 한다. 예를 들어, 3 초내에 그 동작 방법을 자연스럽게 느낄 수 있도록 해야 한다. 4. 관객의 인터렉티브에 따른, 작품의 동작이 크고, 화려할수록 관객의 호응도는 높아지는 경향이 있다. 5. 현장에 작품 설치 후 전시시, 작품이 완성도 있게 동작되려면, 사전 테스트가 필수이다. 6. 작품의 내구성도 중요하다. 하루 이틀만 동작하고, 고장나지 않아야 한다. 7. 작품 중 키넥트와 같은 동작 센서를 사용하는 작품들이나, 음향을 사용하는 작품들은 공간의 간섭을 고려해 설치해야 한다. 8. 작품 전시 일정, 테스트 및 설치를 위한 작가간 조율은 매우 중요하다. 미리 협의해 놓지 않으면, 전시가 실패할 수도 있다. 9. 작품 제작 및 전시 과정을 모두 기록해 놓을 필요가 있다. 기록은 차후 유용하게 활용할 수 있다. 10. 그룹 전시는 작품의 구성이 어느정도 유기적인 부분이 있는 것이 좋다. 전시의 통일감을 주는 것이 좋다. 11. 전시 중간에, 작품을 어떻게 제작했는 지에 대한 뒷이야기나 작품을 만드는 데 필요한 기술은 무엇인지 이야기를 나누는 세미나 혹은 쉽게 따라할 수 있는 워크샵 등을 준비하면, 관객의 참여율을 높일 수 있다. 마지막날, 작품 엔딩파티를 하면서 느낀 것은, 작품을 제작하고 전시를 준비하느라 많은 시간과 비용이 들어갔지만, 그만한 보람은 충분히 느낄 수 있었다는 것이다. 또한, 딸아이와 함께 작품 제작했던 과정과 추억은 덤으로 나에게 주어진 선물이다. 다음 전시에는 좀 더 오픈된 공간에서, 다양한 사람들과 파티를 즐기며, 작품들이 연주하는 유로 비트의 자유로움을 느끼고 싶다.
Social network-based Media Artwork
P 57 of 135
4.3
Listening to the light – 글쓴이/작가: 양예은
4.3.1 작품 주제 본 전시는 건축과 미술의 경계에서 새로운 가능성을 모색하고 그것을 작품이라는 결과물로 표현하고자 했던 것이 취지였던 것 만큼, 건축이라는 즉 우리를 둘러싸고 있는 도시적 환경에 대한 문제를 미디어아트라는 방법으로 풀어내보고자 하였다. 사실 우리를 둘러싸고 있는 환경의 모든 요소들은 각자 독립적으로 존재하는 것이 아닌 서로 상호작용하며 공생한다고 할 수 있다. 도시의 다양한 물리적인 요소들 뿐 아니라 그것들과 인간과의 상호작용도 끊임없이 발생하고 있다. 이러한 상호작용은 우리 내부에서도 일어나고 있지만 외부와의 영향을 주고받으며 지금 이 순간에도 적응, 변화하고 있다. 상호작용이라는 것은 나와 네가 존재할 때, 즉 둘 이상의 존재가 있을때 발생된다. 본 작품은 이러한 상황을 상징적으로 표현하고자 하였다. 도시를 구성하는 물리적인 요소 즉 건축물들을 의미하는 오브젝트를 기본으로 하여 그 각각의 오브젝트들 사이의 관계, 뿐만 아니라 그것들과 우리 인간과의 관계들을 빛과 소리라는 비물질적 요소로 나타내고자 하였다.
4.3.2 개념 디자인 도시를 구성하는 인자, 건축물을 상징하는 집형태의 오브젝트를 여러개 제작하여 배치한다. 오브젝트 내에 LED와 빛센서(LDR)를 설치하여 관람객이 다가와 임의의 오브젝트에 핸드폰 등을 이용해 빛을 주게 되면 그 빛을 시작으로 나머지 모든 오브젝트에 순차적으로 빛이 들어오게 된다. 즉 도시라는 공간과 그 안의 다양한 요소들은 인간의 존재로 인해 그 의미를 얻게되는 것이므로, 관람객이 빛을 비추는 행위는 도시의 모든 인자들이 존재의 가치를 얻는 시작임을 의미한다. 그로 인해 모든 요소들의 관계, 상호작용이 발생된다.
Social network-based Media Artwork
P 58 of 135
그림. 아이디어 스케치 여기서 중요한 것은 임의의 한 오브젝트에 빛을 주면 해당 오브젝트 하나에만 빛이 들어오지만, 동시에 두개 이상의 오브젝트에 빛을 비추게 되면 도시 전체에 빛이 모두 켜진다. 빛이 모두 들어오게 되면 공간 전체를 감싸는 큰 울림의 사운드가 플레이된다. 즉 관계, 상호작용이라는 것은 둘 이상의 존재가 있을때만이 성립되고 그 의미와 가치를 더하게 됨을 뜻한다.
4.3.3 작품 제작 여러개의 집형태의 오브젝트는 반투명한 PVC 보드로 제작하였다. 오브젝트 내부에 들어가는 부재들은 다음과 같다. LED, LDR, Arduino Mega or Due, Resistor, wire 등
Social network-based Media Artwork
P 59 of 135
그림. 사용된 작품의 부자재
4.3.4 작품 개발 1.각 오브젝트 내부에 위의 부재들을 포함하는 기판 모듈을 만들어 설치하고, 이와 아두이노보드을 연결한다. 2.아두이노보드에 신호를 주고받기위해 Arduino IDE 프로그램 스케치보드에 필요한 코드를 작성한다. 3. 오브젝트에 모든 빛이 들어오게 되면 사운드라 플레이되게 하기 위해 Arduino 와 연동하여 Processing 프로그램에 코드를 작성한다.
그림. 작품에서 사용된 아두이노 객체 연결 다이어그램
Social network-based Media Artwork
P 60 of 135
각 오브젝트 내부에 있는 빛센서 (LDR)를 Arduino Due Board 1 의 아날로그 단자에 하나씩 할당시킨다. LED 또한 Arduino Due Board 1 의 디지털 단자에 각각 할당해준다. Arduino Due Board 1 에는 0~9 번, Arduino Due Board 2 에는 10~19 번까지 할당하고, skatch 1 과 2 에 동일한 코드를 입력한다.
<Arduino IDE 코드-Skatch 1> // LDR 을 아날로그 단자에 각각 할당 int LDR0=A0; int LDR1=A1; int LDR2=A2; . . int LDR9=A9; // LED 를 디지털 단자에 각각 할당 int LED[ ] = {22,23,24,25,26,27,28,29,30,31}; . . // 각 센서에 200 이상의 수치가 입력되면(빛이 감지되면) LED가 on 상태가 되도록 한다 //수치는 주변환경의 조도를 감안해서 여러번의 실험을 통해 적당한 세기의 빛이 비추면 LED 가 켜질 수 있도록 한다. //0 번부터 9 번까지 이 과정을 반복한다. if (LDRVal 0>200){ digitalWrite(LED[0],HIGH); numofLightOn++; } else {
Social network-based Media Artwork
P 61 of 135
digitalWright(LED[0],Low); } . //위의 코드처럼 0 번부터 9 번까지 이 과정을 반복했을때, 만약 2 개이상의 빛이 켜지면 모든 LED가 on상태가 되도록 한다. if(numofLightOn>1){ digitalWrite(LED[0],HIGH); digitalWrite(LED[1],HIGH); . . } <Processing code> // Arduino Due Board 1,2 에 각 다른 시리얼 포트를 할당하고, 1 과 2 를 합해 두개 이상의 빛이 감지되어 모든 LED가 on 상태가 되면 미리 저장해 놓은 사운드 4 가지 중 하나가 렌덤하게 플레이되도록 한다.
Social network-based Media Artwork
P 62 of 135
4.3.5 작품 최종 통합 각 오브젝트내부에서 나오는 전선(5V, ground, LED, LDR)들을 브레드보드에 연결하고, 연결한 선들을 다시 Arduino Due Board 1 과 2 에 각각 연결시겼다. 특히 전선의 갯수가 상당히 많으므로 종류별로 레이블링하는 것이 중요한 작업내용 중 하나였다.
4.3.6 작품 동작 테스트 전시 현장에 가서 주변 조도를 확인하고 평소 밝기의 수치를 체크하였다. 그런 다음에 관람객에 의해 인위적으로 발생될 빛의 조도의 최소값을 여러번의 실험을 통해 산정하였다. 즉 최소값이 몇 이상일때만 LED가 on 상태가 되도록 하였다.
Social network-based Media Artwork
P 63 of 135
4.3.7 작품 전시 약 20 개의 오브젝트를 전시장 바닥에 설치하였다. 관람객이 다가와 가지고 있던 핸드폰 빛을 통해 오브젝트에 빛을 비추게 되면 해당 오브젝트에서 빛이 켜지게 된다. 두사람 이상의 관람객이 동시에 빛을 주게 되면 모든 오브젝트 즉 도시 전체에 빛이 들어오며 공간을 감싸는 듯한 조용하고 울림있는 사운드가 플레이된다. 관람객은 몇번의 체험을 통해 두사람 이상이 있어야지만 작품 전체가 반응함을 스스로 알게 된다.
Social network-based Media Artwork
P 64 of 135
복잡하지 않은 인터랙션 구조로 관람객들의 흥미를 유발할 수 있었다. 같은 공간에 있는 서로 낯선 관람객이 함께 행위를 함으로서 도시전체에 빛을 밝힐 수 있으며, 그러한 도시를 내려다 봄으로서 인간과 인간, 인간과 도시의 관계에 대해 생각해볼 수 있는 기회가 되었으면 한다.
Social network-based Media Artwork
P 65 of 135
4.4
도시건축의 새로운 상상력 (Collage towards the dream of a city)– 글쓴이: 정성철, 작가: 정성철/정상철
4.4.1 작품 주제 워크샵 이후 팀을 이루어 별도의 모임을 가지며 초반은 작품과 전시회를 위한 다양한 의견을 나누었다. 작품의 주제는 활용가능한 디지털 미디어와 테크닉을 감안하며 여러가지 아이디어와 제안이 었었다. 우리는 건축, 도시, 공간에 대한 이야기를 나누다가 우리가 살고 있는 서울의 도시건축을 작품의 배경과 주제의 대상으로 정했다. 먼저 우리나라와 1000 만 인구가 살고 있는 서울은 우리에게 어떤 의미의 도시와 공간인지 통계를 통해 살펴보았다. 2014 년 세계번영지수에서 한국은 살기좋은나라 25 위 였고, 2014 년 머서의 삶의 질 평가조사에서 서울은 살기좋은도시 74 위에 머물고 있다. 한편 2013 년 유엔 세계행복보고서에 따르면 한국의 행복지수는 41 위 였는데 그 중 주거환경과 공동체생활 부분에 있어서는 특히 낮은 점수로 조사되었다. 이러한 평가의 배경은 급속한 현대화와 개발의 시대를 거치며 우리의 도시와 공간이 정치와 자본의 논리와 주도로 성장되었기 때문이라고 생각한다. 여기에는 건축과 도시를 계획하는 사람들의 책임도 없지 않다. 결과적으로 메가시티 서울은 양면적 얼굴을 가진 도시환경과 삶의 만족도가 낮은 회색도시의 이미지로 각인되었다. 다행스러운 것은 최근들어 시민들의 도시건축에 대한 관심과 이해가 높아지고, 새로운 도시공간을 만들어가는 사회적 분위기와 직접 참여하는 기회가 많아지고 있다는 것이다. 이번 작품을 시작함에 있어서 현대의 도시는 건축가의 계획에 의해서만 이루어지는게 아니라 다양한 주체가 만드는 집합체라는 사실과 이론에 주목하였다. 건축설계를 하면서 거주자나 사용자들의 생각을 담고자 한다. 이번 작품에서도 건축과 도시의 모습에 다양한 사람들의 생각과 행위를 담고자 했다. 다양한 관람자의 무작위적 행위가 도시를 입체적으로 변화시키는 현상을 보여줌으로써, 모든 시민이 도시 생활공간의 구성원이면서 스스로 주변환경을 변화시키는 주체라는 사실을 인식할 수 있도록 하였다.
Social network-based Media Artwork
P 66 of 135
워크샵을 진행하면서 아두이노를 활용한 많은 인터렉티브 디자인 사례와 디지털 테크닉을 접하게 되었다. 이러한 새로운 디지털 기술은 디지털 디자인의 중요한 도구와 방법론이 되면서 작품 주제를 구현함에 있어서 하나의 큰 요소가 되기도 한다. 이번 작품에서도 작품주제를 선정하면서, 이를 구현하기 위한 방법으로 디지털 도구와 테크닉을 활용하였다. 작품의 개념은 모듈화한 삼각형 패널로 서울 지도를 형상화하고, 도시의 주요 거점은 기계적 메커니즘과 시민참여를 통해 자연스럽게 입체적 공간을 형성하게 된다. 공간은 시간과 경험의 누적을 통해 끊임없이 변화하고 우리 삶에 적합한 방향으로 지속되어 나아가게된다는 것이다.
그림. 서울 지도와 나무 이미지를 오버랩한 컨셉 이미지
4.4.2 작업 그룹 개발 워크샵을 마무리하면서 메커니즘을 주제로 팀이 구성되었다. 4 명으로 출발해 최종적으로 정성철, 정상철 2 명이 전시회를 함께 준비했다. 팀모임을 시작하면서 먼저 몇가지 계획을 세우고 자료를 공유했다. 팀명칭, 진행일정, 주요 고려사항, 부품 및 장비구입처에 관한 기본 정보를 공유하고 아두이노 관련 참고 사이트를 통해 미디어 아트 사례를 조사하고 스터디 하였다.
Social network-based Media Artwork
P 67 of 135
작품준비를 위한 주요 고려사항으로는 작품주제, 활용 가능한 소프트웨어, 작동시스템, 센서, 구조 및 구동방식, 재료, 제작방식, 제작도구, 제작 개수와 사이즈, 제작비용, 전시관 설치, 히스토리북 제작 등에 관한 이야기를 나누었고 진행과정에서 지속적으로 검토하였다. 2014 년 4 월부터 팀모임을 시작하여 2~3 주마다 모임을 가졌고, 두 사람 모두 본업과 병행하여 작품준비를 하다보니 주로 야간이나 주말에 만나 함께 작품을 준비했다. 컨셉설정과 디자인 과정은 함께 스터디 하였고, 중간과정에서 패브리케이션과 센서 및 코딩은 각각 분담하여 효율적으로 작업을 진행하였다.
4.4.3 아이디어 디자인 과정 워크샵 과정 중 아두이노와 그레스호퍼를 연동하는 Firefly를 사용하여 조광센서에 따라 삼각형 패널을 열고 닫게하는 방식을 스터디해 볼 수 있었다. 이러한 방식에 착안하여 초기 아이디어 과정에서는 실시간 데이터를 입력하여 모듈화한 패널의 입체적인 변화에 대한 스터디가 있었으나 실제적으로 인터넷을 통해 실시간으로 얻을 수 있는 파라미터값을 얻기에는 아직 실시간 데이터와 기술적 한계가 있었고, 건축패널화를 위해서는 복잡한 시스템에 대한 보다 많은 연구와 노력이 필요함을 알 수 있었다.
그림. 아두이노와 그레스호퍼 연동 스터디
그림. 입체적 건축패널
사례(Media Architecture Institute, 2008, FLARE-Kinetic Membrane Façade, http://www.mediaarchitecture.org/flare-kinetic-membrane-facade/)
Social network-based Media Artwork
P 68 of 135
모임과 스터디를 하면서 작품 진행에 도움이 될만한 미디어를 활용한 인터렉티브 디자인 전시회가 있어서 팀원들과 함께 전시회를 관람하며 국내 미디어 아티스트들의 다양한 작품과 아이디어를 볼 수 있었다.
그림. ‘미디어아트-감각의 확장’전 (성남아트센터) 전시회 관람(RVTR, 2011, Resonant Chamber, http://www.rvtr.com/research/resonant-chamber/) 또한 작품 주제를 선정하기에 앞서 기존의 많은 사례를 조사하고 의견을 나누었다. 최근 들어 미디어 아트와 디자인에 대한 많은 관심으로 온라인 검색을 통해서도 다양한 미디어 아트 작품과 인터렉티브 사례를 찾아볼 수 있었다. 사례를 통해 작품에 담긴 메시지와 더불어 작동 원리와 구동방식에 대해서도 스터디 하였다.
그림. 센서를 활용한 인터렉티브 삼각형 건축패널(RodrigoRubio, Margen-Lab, 2011. Aedas, 2012. Al Bahar Tower Responsive Façade, ArchDaily)
Social network-based Media Artwork
P 69 of 135
그림. 삼각형 패널, 톱니바퀴, 서보모터 등을 활용한 인터렉티브 디자인 사례(Yannik Bontinckx, Elise Elsacker, Lisbon workshop 2011. David Letellier, LAb(au), 2010. Agata Ł. Wierzbicka, Kama Kośka, Łukasz Iwan, Leszek Włochyński, Dorota Adamowicz, 2012. dECOi, MIT, 2011. Qiufan Wu, Amelia EinbenderLieber, Nicole Keroack, 2011. Nachetz, 2012) 초기 작품 주제 아이디어 회의에서는 건축적 공간과 구조(벽, 천장), 조형물, 한반도의 주요 도시 등에 대한 다양한 이야기가 있었고, 최종적으로는 서울의 도시건축 움직임을 주제로 디자인을 진행하였다. 주제 선정 후 구체적인 디자인에 앞서 다음과 같은 몇가지 전제조건을 정리하였다. -
관람자가 참여하는 인터렉티브 디자인
-
유사 사례를 참조하여 톱니바퀴와 삼각형 모듈시스템 디자인
-
아두이노를 활용 다중서보모터 제어
-
작품 디자인 및 제작에 적합한 센서 테스트와 적용
-
3D 모델링을 통한 도면화와 디지털 장비를 활용한 패브리케이션
-
전시장과 작품 연출을 감안한 조명과 빔프로젝터용 동영상 제작
이러한 전제조건에는 경제적인 부분과 제한된 시간 내에 작품 제작 가능해야함도 포함되며, 작품 제작 과정도 기록하여 이후 활용할 수 있는 자료로 정리하기로 했다.
Social network-based Media Artwork
P 70 of 135
그림. 삼각 모듈화 시스템 스케치와 모델링 이미지 삼각형 모듈화 시스템은 Agata Ł. Wierzbicka의 City Carpet을 참고하여 작품 형상 및 크기와 아크릴 재료에 적합하도록 변경하여 전체 형상의 기본 모듈로 삼았다.
4.4.4 작품 디자인 서울이라는 도시건축이 시민들 스스로 만들어가는 과정으로 연출하고자 했다. 정치와 자본의 논리가 우선시 되어 현재 진행형으로 공사 중인 서울이 시민들의 참여를 통해 시민의 삶의 터전이 되는 공간으로 진화하기를 바랬다. 삼각형 패널로 이루어진 평면형 서울에 8 개의 주요지점을 설정하고 서보모터와 톱니를 연결하였다. 삼각형은 가장 최소단위의 평면 기하학이면서 집합을 이루어 자연스런 곡면형상을 만들어낸다. ‘도시건축의 새로운 상상력’의 작동 메커님즘은 다음과 같다. 적외선 근접물체 감지센서에 반응하여 서보모터가 작동하게 되며, 코딩된 회전각도에 따라 톱니는 상하운동으로 변형, 반복한다. 아크릴로 만들어진 삼각형 패널이 조합된 곡면은 자연스럽게 서울의 입체적 도시건축을 형성하게 된다.
그림. 작동 메커니즘 개념도
그림. 아두이노로 서보모터
제어하기(wiki.vctec.co.kr/opensource/arduino/servocontrol)
Social network-based Media Artwork
P 71 of 135
작품주제와 작가의 의도대로 작동을 하기 위해서는 코딩작업이 수반된다. 기본적인 작동은 사례를 통해 테스트해 볼 수 있었지만 다중서보모터의 복합적인 구동을 위해서 주변 전문가의 도움받아 아래와 같이 알고리즘을 완성했다.
int angle1, angle2; int step1, step2; int beginMotionTime = -1; int cycleTime;
// milli
int SpeedFunc() { int MaxTime = 10 * 1000; double Section = MaxTime / 6; if(0 <= cycleTime && cycleTime <= Section) return 25; if(Section <= cycleTime && cycleTime <= Section * 2) return 20; if(Section <= cycleTime * 2 && cycleTime <= Section * 3) return 15; if(Section <= cycleTime * 3 && cycleTime <= Section * 4) return 10; if(Section <= cycleTime * 4 && cycleTime <= Section * 5) return 15; if(Section <= cycleTime * 5 && cycleTime <= Section * 6) return 20;
Social network-based Media Artwork
P 72 of 135
return 25; }
void loop() { int input1 = digitalRead(button1); int input2 = digitalRead(button2);
if(input1) { if(step1 == 0) step1 = 1; else if(step1 == 1 && angle1 >= 60) step1 = -1; else if(step1 == -1 && angle1 <= 0) step1 = 1; } else step1 = 0;
if(input2) { if(step2 == 0) step2 = 1; else if(step2 == 1 && angle2 >= 60)
Social network-based Media Artwork
P 73 of 135
step2 = -1; else if(step2 == -1 && angle2 <= 0) step2 = 1; } else step2 = 0;
angle1 = angle1 + step1; angle2 = angle2 + step2;
if(step1 != 0) servo1.write(angle1); if(step2 != 0) servo2.write(angle2);
if(step1 != 0 || step2 != 0) { if(beginMotionTime == -1) beginMotionTime = currentTime(); cycleTime = currentTime() - beginMotionTime; if(cycleTime >= 10 * 1000) beginMotionTime = -1;
int delayTime = SpeedFunc(); delay(delayTime);
Social network-based Media Artwork
P 74 of 135
} }
4.4.5 작품 제작 계획 작품 제작을 진행하기 위해서 초기에 전체 일정을 대략적으로 계획하였다. 이후 전시 예정일 2 개월을 앞두고 전시 준비 일정에 맞추어 좀 더 세부적인 일정을 계획하여 진행하였다. 1 차 일정계획 4~5 월 : 주제, 작품방향 (컨셉디자인) 5~8 월 : 시스템 설계 및 프로그래밍, 부품구입 및 테스트 9 월 : 조립 및 제작, 시안 모델 완성 10 월~11 월 : 본 모델 작업 2 차 일정계획 10/03(금) 전시장 답사 10/07(화) 팀미팅 10/21(화) 전체 온라인 미팅 10/22(수) 팀미팅 11/01(토) 팀미팅 (모델링 완료) 11/04(화) 전체미팅 11/21(금) 팜플렛 이미지 전달, 작품제작완료 11/24(월) 팜플렛 인쇄 12/08(월)~12(금) 전시회
Social network-based Media Artwork
P 75 of 135
삼각형 패널은 초기에 3D 프린팅으로 계획하여 테스트 출력을 해 보았다. 실물 사이즈와 접합 디테일에 대한 스터디가 되었으나, 실제 작품 제작에 있어서는 시간적인 문제와 결과물의 품질이 만족스럽지 않아 아크릴로 재료를 변경하였다.
그림. 3D 프린팅으로 기본 삼각 패널 조립 테스트
어두운 전시장과 조명 효과를 위하여 기본 재료는 투명아크릴을 사용하였으며, 단면이 원형인 연결 링 제작이 어려워 동대문 시장 악세서리 코너에서 적당한 사이즈의 금속 고리를 직접 구매했다. 기타 필요한 작품 제작 재료와 비용은 다음과 같이 계획하였다.
1. 주요 재료 1) 아크릴판(투명, 검정) : 삼각패널, 베이스판, 톱니 등 2) 아두이노 2 개, 브레드 보드 2 개, 연장용 전선 3) 서보모터 8 개, 적외선 근접센서 8 개 4) 건축 및 공간 모델, 조명갓 : 3D 프린팅 5) 철재 프레임 2 SET, 고정용 고무줄 6) 빔프로젝터 (스토리 디스플레이용, 500 안시) 1 대 2. 비용
Social network-based Media Artwork
P 76 of 135
모임비용을 포함하여 전체 비용을 약 150 만원으로 책정하였다. 실제 제작에 있어서는 재료 테스트와 변경 제작 등의 과정을 거치면서 대략 200 만원이 소요되었다.
4.4.6 제작 과정 작품 디자인과 형상 이해를 위하여 디자인과 제작과정에 있어서 라이노(Rhino, Grasshopper)와 오토캐드를 이용하였다. 라이노를 활용하여 3 차원 모델링 작업을 하면서 작품의 전체적인 형상과 스케일을 물론 전시장 부스를 고려한 받침대도 제작치수를 고려하여 디자인하였다. 그레스호퍼의 간단한 알고리즘을 이용하여 원형, 직선형 톱니바퀴가 서로 잘 맞물리어 움직이는지 시뮬레이션 해보았고, 서울 지도 경계선에는 조명 효과로 패턴이 되는 다수의 원을 자동으로 생성할 수 있었다.
그림. 라이노 3D 모델링과 그레스호퍼 알고리즘을 활용한 톱니바퀴 테스트
Social network-based Media Artwork
P 77 of 135
그림. 제작을 위해 3D 모델링에서 추출하여 변환한 2D 전개도 3D 모델링은 재료, 가공, 제작을 고려하여 완성하였고, 디지털 장비를 활용한 제작을 위하여 2D 도면으로 변환하였다. 2D로 변환한 전개도면은 오토캐드에서 불러들여 레이져 컷팅을 위해 레이어를 정리하고, 재료 낭비를 줄이기 위해 재료 크기 범위 내에서 다시 정렬 하였다. 작품을 위해 사용한 디지털 장비는 레이져 커팅기, 평판 플로터, 3D 프린터 세가지이다.
그림. 디지털 장비로 가공, 제작 (레이져 커팅기, 평판 플로터, 3D 프린터)
Social network-based Media Artwork
P 78 of 135
레이져 커팅기는 삼각 패널과 톱니바퀴 등 아크릴 재료를 가공하는 데 사용하였다. 1 차 테스트 컷팅 후 몇가지 조정을 하였다. 좀더 자연스러운 곡면 형상을 위하여 삼각형 모듈 사이즈를 축소하여 개수를 늘였고, 컷팅 작업시 장비의 특성상 양쪽으로 0.1mm 줄어들게 되어 이를 조정했다. 아크릴 조립에는 크로로포름이라는 투명 아크릴 본드를 사용하여 접합부가 노출되는 것을 최소화 했다. 평판 플로터는 한강을 표현할 회색 비닐을 커팅하는 데 사용하였다. 접착력이 있는 비닐을 한강 지도에 맞게 컷팅하여 삼각형 아크릴 패널에 붙였다. 전체 삼각 패널은 몇일에 걸쳐 주변의 도움을 받으며 수작업으로 완성했다.
그림. 아크릴 삼각패널 조립 3D 프린터는 관람자의 행위가 이루어지는 작은 건축 모형들과 파라메트릭 패턴으로 적절한 확산광이 되는 조명갓 제작에 사용하였다. 3D 프린터는 로킷사의 에디슨 플러스를 사용했는데 건축모형(3x3x5 ㎝) 출력에는 각각 1 시간 정도 소요되었으며, 조명갓의 경우 출력에 12 시간 소요되었다.
그림. 3D 프린터로 제작한 건축모형과 조명갓
Social network-based Media Artwork
P 79 of 135
이밖에 전시용 철재 프레임은 을지로 철공소에 제작도를 출력하고 전달하여 제작하였고, 관람자가 직접 작동하는 작은 서울 모델에 놓일 사각 철재 블록도 인근 금속 가공업체에서 가공, 제작 하였다. 3D 프린터로 제작한 조명갓에 적합한 전등과 전원장치는 인근 세운전자상가에서 별도로 구입하였다. 2 개의 아두이노를 2 개의 브레드 보드에 연결한 후 8 개의 센서와 8 개의 서보모터를 전선으로 했다. 테스트 때는 짧은 전선으로 임시 연결하였다가 전시를 앞두고 롤 형태의 긴 전선을 구입, 설치하여 작동판과 작품본체가 일정거리 이격되도록 하였다. 마지막까지 고민한 부분이 센서이다. 센서는 작동원리에 따른 디자인과 관람자의 행위와 반응이 따르는 인터렉티브 디자인의 핵심요소이다. 압력센서를 먼저 테스트해 보았으나 민감도와 오작동 문제가 있어서 최종적으로는 적외선 근접물체 감지센서를 사용하였다. 금속블록과 직접 접할 시 오류가 발생하여 금속블럭 바닥에는 종이를 덧대어 제작하였다.
그림. 브레드 보드에 연결된 전선(좌)과 적외선 근접센서(우)
4.4.7 테스트 과정 워크샵 과정을 통해 아두이노와 간단한 브레드보드 전선 연결을 통해 서보모터를 작동해 보았지만 작품 구현을 위해 다중모터를 계획대로 작동시키는 것은 쉽지 않았다. 몇가지 나타난 오류와 해결 방법은 다음과 같다.
Social network-based Media Artwork
P 80 of 135
첫째, 삼각형 평판 패널 연결로 3 차원 곡면을 형성함에 있어서 삼각형 패널 사이의 간격과 연결 링의 사이즈가 일정한 유격을 가지며 자연스러운 형상을 가지게 된다. 초기 모형 제작을 통해 삼각형 사이의 간격이 협소하여 간격을 증가시켰고, 원형 고리 또한 삼각형 패널의 핀 두께를 고려하여 조절하였다. 둘째, 톱니바퀴의 회전각도에 따라 각 포인트에서 수직톱니가 상하운동을 하게 되는데 초기에 각도 값이 너무 커서 한 부분의 지점이 상승하면서 다른 포인트의 지점이 이탈하게 되는 문제가 발생하였다. 여러 차례 테스트 후 입체적 효과를 내기 위한 가장 적합한 회전 각도를 찾아 적용하여 문제를 해결하였다. 그럼에도 불구하고 이후 완벽한 지점 고정이 이루어지지 않아 테두리 부분에 고무줄을 설치하여 적절한 인장력으로 각 지점이 이탈되지 않도록 조정하였다. 셋째, 서버모터가 지속적으로 작동되는 과정에 서버모터에 부탁된 원형판이 탈락되는 현상이 발생했다. 이를 해결하기 위해 서보모터의 회전축과 원형판을 접착제로 고정시켰다. 전시에는 문제가 없었으나 이후 서보모터는 재활용이 어렵게 된 것이다. 넷째, 아두이노-브레드보드-센서-서버모터를 연결하는 다수의 전선을 연결함에 있어서 땜질이 아닌 수작업으로 전선을 연결하다 보니 접지가 제대로 이루어지지 않기도 했다. 센서가 작동이 안될 경우 일단 센서에 문제가 있는지 확인한 후 다음으로 8 개의 연결된 전선을 하나씩 확인하며 접지에 문제가 있는지 확인하며 오류가 생기지 않도록 하였다.
그림. 작동 테스트와 제작과정
Social network-based Media Artwork
P 81 of 135
4.4.8 작품 전시 복잡한 작동시스템으로 전시기간 동안 문제가 발생하지 않을까 우려했는데 다행히 큰 문제없이 잘 작동되었다. 워크샵을 계기로 아노이노를 활용한 미디어 아트에 처음 도전하게 되었고, 팀을 이루어 함께 작업하면서 과정의 즐거움을 나눈것도 이번 전시회의 큰 보람이다. 워크샵과 전시회 준비에 힘써주신 강태욱 박사님과 김호중 대표님께 다시한번 감사드린다. 또한 전시에 함께 참여하신 모든 작가분들과 ‘투정투철(透情鬪哲)’이라는 팀명으로 끝까지 함께 고생한 정상철군에게 깊이 감사한다. 이번 워크샵 1 기와 전시를 계기로 더 흥미롭고 새로운 주제로 워크샵 2 기가 탄생하기를 기대한다.
그림. 완성 작품과 전시
Social network-based Media Artwork
P 82 of 135
4.5
MIRROR+BLUR – 글쓴이: 임진택, 작가: 임진택/최형은
4.5.1 작품 주제 주제를 선정하고 구체화하는데 있어 두 가지를 고려하였다. 첫째, 건축과 관련된 개념적 주제를 선정하고 이를 표현할 수단으로서 인터렉티브미디어를 접근한다. 둘째, 주제를 표현하는데 있어 주 재료는 건축적인 것을 사용한다. 우선 개념적 주제를 선정하는 부분에 있어 건축인 으로서 자기 자신을 여러 관점에서 바라보고, 생각해보는 과정으로부터 시작했다. 자기 자신을 바라보는 과정에서 “자신을 바라본다.”라는 말은 자기 자신을 어떻게 인식 할 것인가의 물음으로 되돌아왔다. 우리는 우리 자신을 어떻게 인식하고 있는가? 일차적으로 추상적은 개념보다는 구체적인 구상적 대상(매체)을 찾는 과정에서 우리자신을 들여다보는 도구인 “거울”이라는 매체에 대하여 좀 더 고민해보았다. 거울에 비추어진 모습은 자기의 모습인가? 거울이라는 대상에 비추어진 자신을 인식하는 것이 자신을 인식하는 것인가? 때로는 타자가 인식하는 자신의 모습이 곧 자신의 모습으로 받아들여지고 있지 않은가?
그림. Snow White And The Huntsman, 2012
Social network-based Media Artwork
P 83 of 135
현대건축의 대표적인 재료로는 철, 유리, 콘크리트 등을 들 수 있다. 그 중 현대건축발전의 상징인 마천루는 유리라는 주 재료로 파사드를 구성하고 있다. 이 유리는 때로는 투과하고 때로는 반사한다. 강남의 테헤란로를걷다보면 많은 건물들이 우리 자신의 모습, 대한민국 건축의 현재모습을 서로 비추고 있는 듯하다.
그림. 강남 테헤란로(네이버지도 거리뷰) 거울과 마천루의 유리가 가지는 상징성은 서로 유사한 관계로 해석될 수 있다. 이 둘의 관계와 유사성을 통해 건축인 으로서의 자신의 모습을 바라보는 거울을 만들고자 하였다. 지속적으로 다가가 바라보지만 그 실체, 본 모습을 잘 보여주지 않는 거울.
4.5.2 개념 디자인 거울이미지에 적합하면서 인터렉티브한 효과를 줄 수 있는 건축재료의 선정이 중요하였다. 고민하던 중 일반적으로 인테리어의 마감과 광천장에 주로 쓰이는 “바리솔”이라는 재료를 활용하기로 하였다.
Social network-based Media Artwork
P 84 of 135
바리솔 필름의 재료 중 크롬도장이 되어있는 “미러바리솔”은 거울과 유사하다. 또한 필름재질이기 때문에 그 표면에 물리적 힘을 가하면 변형을 일으킬 수 있을 것으로 기대되었다. “미러바리솔”에 자신(관람객)의 모습 비추어 자세히 바라보려 접근하거나 움직이면 거울면이 진동하여 자신의 모습을 볼 수 없게 된다. 자신의 모습을 보려 열심히 움일수록 더욱 더 자신의 모습을 보여주지 않는다.
그림. BLUR
4.5.3 작품 제작
그림. 작품제작 스케치
Social network-based Media Artwork
P 85 of 135
크기 1,200 x 1,200 사이즈의 “바리솔프레임”을 3 개 제작하여 연속으로 전시한다. 프레임 하부에는 센서(PIR, 초음파거리센서 등)를 설치하고 이 센서를 통하여 사람의 움직임을 인식하고 인식된 결과에 따라 액추에이터(survo, DC Motor등)가 반응하여 바리솔필름을 진동시킨다.
그림. “바리솔프레임” 스케치. PIR 센서(Rev B) (http://www.fribot.com 구매)
4.5.4 작품 개발 바리솔프레임은바리솔 업체에 800x800 사이즈의 프레임을 주문 제작하였다. 여기에 본 주제에 부합하는 상호작용을 표현하기 위하여 아두이노를 기반으로 여러 가지 센서를 테스트 하였다. 그중 PIR(인체동작 감시센서)를 선정하였다.(http://www.fribot.com 구매) 그리고 PIR 센서를 작동하기 위한 기본예제를 응용하여 작품에 적용하였다
그림. 센서 기본에제(출처:http://fribot.blog.me) PIR센서를 구동하는 스크립트 코드는 다음과 같다.
Social network-based Media Artwork
P 86 of 135
void setup(){ Serial.begin(9600); pinMode(4, OUTPUT); pinMode(10, OUTPUT); Serial.println("Warming up ....."); delay(20000); } void loop(){ Serial.print("D2IN = "); Serial.println(digitalRead(2), DEC); if (digitalRead(2) == 1) { tone(4, 3000, 1000); digitalWrite(10, HIGH); delay(10); } digitalWrite(10, LOW); delay(200); }
액추에이터는 초기 survo motor를 활용한 필름을 움직임을 구상하였으나, 그러기위한 메커니즘 개발시간이 부족하여 안마기나, 핸드폰 등에 쓰이는 진동모터를 기반으로 떨림을 만들기로 결정하였다. 코인형, 실린더형 등 여러 가지의 진동모터가 있었으나 코인형은 진동이 약하여 필름에 강한 떨림효과를 주지 못하였다. 몇 가지의 실린더형 모터를 시험하던 중 “실린더형 DVM6C”를 선정하였다.
그림. 실린더형 DCVM6C모터(http://www.ds-parts.co.kr) Social network-based Media Artwork
P 87 of 135
4.5.5 작품 최종 통합
그림. 바리솔프레임 뒷면 아두이노, PIR센서, 진동모터, 건전지box 설치모습 개별적으로 테스트 되었던 결과물을 바탕으로 바리솔프레임 뒷면에 아두이노, PIR센서, 진동모터, 건전지box를 통합하여 설치하였다. 통합설치시 전동 모터의 부착위치에 따러서 필름의 진동정도가 많이 상이하여 여러번 위치를 이동하여 선정하였다.
Social network-based Media Artwork
P 88 of 135
그림. 바리솔프레임 작업
4.5.6 테스트 전시 최종 만들어진 작품을 전시실에 설치하는 과정에서 처음에 예상했던 위치에서 다른 곳으로 변경 되어 처음 계획에서 의도했던 일렬로 프레임을 걸지 못하여 순차적으로 거울이 반응하는 효과는 볼 수 없게 되었다.
그림. 바리솔프레임 설치과정
Social network-based Media Artwork
P 89 of 135
전시물 자체를 액자형으로 어디든 걸 수 있도록 처음부터 기획하였기 때문에 건전지를 사용하는 형식으로 제작되었다. 그러나 전시기간동안 매일 9V건전지를 갈아야 만 되었다. 9V 어댑터를 구매하여 연결하려고도 하였으나 하부 배선이 보기 좋지 않아 매일 갈아주는 수고를 감수하기로 하였다.
4.5.7 작품 전시
그림 10. 최종전시물 현대 미술을 보면 많은 미디어아티스트들이 공간과 건축을 다룬다. 그들의 눈을 통해서가아닌 건축가의 시선으로 미디어아티스트들의 기법을 빌려 공간과 건축을 표현하는 자리였다는데 큰 의미가 있었다고 생각한다. 또한 개인적으로 많은 관심을 가지고 있던 인터렉티브 미디어아트부분에 한발자국 걸음마를 내딛는 기회를 가지게 되어 의미 있는 전시였다. 본 전시를 통해 표현하고자 했던 부분 중 많은 부분이 여러 가지로 부족하여 잘 표현되지 못하였지만 다음기회는 차근차근 준비하여 더 좋은 결과물을 만들고 싶다. 전시기간 중 한분께서 본 작품을 보시고 하신말씀이 기억에 남는다. “자신의 모습을 보려 움직이면 보이지 않지만 가만히 서서 바라보면 결국 자신을 보여 준다.” 나보다 내 작품을 더 잘 이해하신듯하여 기분이 좋다.
Social network-based Media Artwork
P 90 of 135
4.6
Particle Fountain – 글쓴이/작가: 최유진
4.6.1 작품 주제 소품의 주제를 선정하는 기간이 오래 걸렸다. 6 월 말에 모임에 참석하기 위해 지나다 잠시 쉬던, 혜화동 로터리의 분수를 바라보다 어렴풋이 생각을 얻을 수 있었다.
그림. 2014.6.24pm7:35 파티클 시스템을 이용한 분수였다. 지나가는 사람들의 키높이에 따라 분수의 높이를 변하게 한다. 단순한 생각 만큼이나 전달하려는 메시지도 단순했다. 분수대로 살자. 첫 작품의 부담을 덜고, 아이들이 즐거워할 소품을 권했던 애들 엄마의 생각도 담았다.
4.6.2 개념 디자인 Particle Fountain System은 초기 개념 표현방식은 아니었다. 분수 이미지의 동영상을 지나가는 사람들의 키높이를 센싱하여 반영하고, 프로젝션 매핑을 통해 표현하는 것이 초기 구상이었다. 첫 프로포설을 발표하고 거듭된 모임에서의 피드백을 통하여, 파티클 시스템을 구상하게 되었다. 개념은 단순했지만, 구현하기 위해서 공부하고 실험해야 할 부분은 상당한 분량이었다.
Social network-based Media Artwork
P 91 of 135
우선 키높이를 센싱하는 방법과 도구들에 대한 연구가 필요했다. 센서로는 아두이노와 적외선 센서와 키넥트 센서 등을 고려하였으며, 최종으로 키넥트 센서를 선택하였다. 센서를 구동하고 파티클을 생성하는 프로그램으로는 Max/MSP/Jitter를 검토하다가 VVVV를 거쳐서 결국 Processing을 사용하였다. 프로젝션 매핑은 최종적으로 사용하지 않았다. Max/MSP나 VPT7 을 활용할 계획이었다. 관련 구현 도구들을 스터디하면서, 표현의 방법과 최종 연출 구상이 구체화 되었으며, 키넥트로 손을 인식하여 프로세싱으로 파티클을 생성하고, 프로젝터로 디스플레이하는 단순한 시스템으로 구성할 수 있었다
4.6.3 작품 제작 파티클은 분수의 형상과 성질을 잘 표현할 수 있어야 한다. 센서는 파티클의 위치와 크기를 결정할 값을 읽기 위한 것으로, 대상인물의 액션에 따라 필요한 센싱값을 읽을 수 있어야 한다. 센싱 데이터를 파티클에 반영하는 방법이 있어야 한다. 센서의 위치와 작동 PC, 화면과 대상인물의 위치 등의 관계를 고려하여 작품을 설치해야 한다.
4.6.4 작품 개발 4.6.4.1 사용자 이벤트파티클 스터디 전개과정 파티클 시스템을 구현할 SW와 라이브러리를 찾고, 키넥트 라이브러리와 연동시키는 과정으로 스터디를 진행하였다.
4.6.4.2 Max/MSP/Jitter 기능과 라이브러리, SW의 완성도 면에서 Media Art 프로젝트를 작성하기에 가장 적절한 Tool로 여겨졌다. 파티클 샘플과 키넥트를 적용한 프로젝트 등의 다양한 샘플을 참조할 자료들도 찾을 수 있었다. 트라이얼 버전으로 스터디하면서 전시회까지 사용하려면 구입해야 했다. 대안으로 유사한 환경의 Open SW인 VVVV를 고려하게 되었다. Max/MSP Jitter나 VVVV 모두 Patch라는 소스 파일 단위로 작성된다.
Social network-based Media Artwork
P 92 of 135
4.6.4.3 VVVV 상업용이 아닌 경우, 사용상의 제약은 없으며 국내의 몇몇 작가들과 강좌 샘플을 인터넷에서 구할 수 있었다. 첫 스터디는 everyware의 VVVV basics 강좌였다. 설치부터 UI, renderer, spread, texture mapping, animation 까지 제목처럼 충분한 기본기를 다질 수 있는 강좌였다. 특히 spread부분은 vvvv의 독특한 배열처리부분으로 파티클 시스템을 구현하는 중요한 개념을 담고 있었다. 두번째 스터디로 VVVV사이트의 Video Tutorials를 파고들었다. 첫 번째 예제부터 파티클 시스템이 기본이 되는 흥미진진한 예제들로 구성되어 있었다.
그림. 파티클(VVVV) 현란한 마우스 클릭의 UX가 당황스럽기도 하지만, 익숙해지면 그 스마트함에 빠져들 수 밖에 없다. 예제를 따라하면서 공헌작가(contributor) 들의 예제에서 선험적인 파티클 시스템이 구현되어 있었음을 발견하였다. 이런 시스템을 개선하여 이번 프로젝트에 맞도록 수정하려 하였다. 프로젝트를 진행하며 작성됐던 파티클 모듈들은 C#이나 C++등으로 작성되어 컴파일된 .dll파일들의 라이브러리로 제공된다. 해당 모듈에서 지원하지 않는 기능은 직접 개발하던지, 개발을 요청하던지 해야한다. 기본 제공 파티클 시스템 모듈이나, DX11 용 개발버전에 포함된 모듈에서 파티클 개개의 방향을 세밀하게 조절하는 방법을 찾지 못했다. 전시회를 두 달여 남겨놓은 시점에서 Processing의 파티클 예제를 탐색하기 시작했다.
Social network-based Media Artwork
P 93 of 135
4.6.4.4 Processing 스터디는 VVVV와 동일하게 everyware의 Processing Lectures 강좌로 시작했다. 프로그래밍 입문과정으로서도 추천하고 싶다. 전체 동영상을 반복해서 보고, 따라해본 후, 프로세싱 기본 예제들 중 파티클 관련 부분을 살펴보았다. 다행하게도 기본 파티클과 파티클 시스템 예제가 이번 프로젝트에 적용해서 수정하기에 적절함을 발견했다. File > Examples > Topics > Simulate 아래의 두 예제 “SimpleParticleSystem” 과 “MultipleParticleSystems” 을 분수를 표현할 원형 파티클 시스템으로서 사용했다 (참고 - Daniel Shiffman, http://shiffman.net/). 소스파일을 직접 다룰 수 있어서, 작자의 의도대로 변경이 가능했다.
그림. MultipleParticleSystem (Daniel Shiffman, http://shiffman.net/) “SimpleParticleSystem” 예제는 Particle Class와 ParticleSystem Class의 기본 구현 및 파티클을 표현하는 본체 모듈로 구성되어 있으며, 이번 프로젝트의 개별 분수의 기본 형태를 나타내도록 변형을 가하였다. 분수(Fountain)의 시작점과 분수의 상단과 퍼짐의 폭, 사라지는 파티클의 시간조절 값 들을 조정하여 원하는 형상을 표현했다. 작품의 결과물이 원형 샘플과 그다지 크게 다른 모습은 아니다. 따라서 구현의 난이도가 높지 않다. 그러나 처음 접해보는 도구와 방법으로 생각하는 바를 표현하는 경험은 난이도를 떠나서 짜릿한 느낌으로 다가왔다. 마르셀 뒤샹의 “샘(Fountain)”과 비교할 바는 아니지만, 적어도 작자 개인에게는 커다란 충격이었다. (헉! 내가 이런 작품을 … ) 내가 만든 것은 기성제 Class Object(오브제) 의 변형이었다. 자바의 객체지향 표현에서 Particle Class와 ParticleSystem Class가 Object의 구현이 된다. 좀 신기한 우연인 듯...(음!….^^;;;)
Social network-based Media Artwork
P 94 of 135
“MultipleParticleSystems”예제는 여러번의 마우스 클릭 위치에서 파티클 시스템이 생성되록 구현되어 있었다. 이 즈음에서 작품 구현 방법의 전체적인 윤곽이 구체적으로 잡혔던것 같다. 마우스 클릭을 키넥트 센싱 위치로 대신하여 그 위치에 파티클을 구현하기로 했다. 키넥트 센서의 작동과 값을 취하는 라이브러리는 Max/MSP Jitter에서의 dp-kinect 라이브러리, VVVV의 기본 Kinect command, Processing의 SimpleOpenNI, Kinect4WinSDK 라이브러리 등을 검토, 사용하였다.
4.6.4.5 키넥트 센서 스터디 전개과정 용산의 게임샵에서 Xbox360 Kinect와 PC연결용 전원 아답터를 구입하고, Kinect for Windows 사이트에서 SDK와 개발 툴킷을 받아 설치하였다. OpenNI와 PrimeSense NiTE도 서핑으로 찾아서 설치하였다. (http://structure.io/openni ) VVVV와 Processing 모두 MS와 OpenNI 드라이버를 사용할 수 있는 라이브러리가 있다. 키넥트의 전반적인 개발 환경과 기능, 조작방법은 Kinect for Windows 개발도구와 예제를 통하여 스터디하였다. 실제 작품에는 Processing과 Kinect 연동 샘플에 사용된 SimpleOpenNI 라이브러리를 사용했다.
4.6.4.6 드라이버의 설치 윈도우 환경에서 두가지 대표적인 드라이버인 Kinect SDK 와 OpenNI 의 버전별 조합에 따라 여러가지 대안으로 설치할 수 있다. 둘 중 한가지 만으로도 작품을 작성할 수 있다. 네이버 카페 openkinect에서 드라이버 조합을 참조할 수 있다. 필자는 첫 번째 조합으로 설치하였다.
그림. Kinect SDK (Microsoft)
Social network-based Media Artwork
P 95 of 135
4.6.4.7 라이브러리 찾기 Processing kinect particles 라는 검색어로 찾은 위키스페이스의 프로젝트 kinectsen.wikispaces.com/Kinect+Processing+Sketches 사이트에서 Hand Tracking Particles 예제에서 Shiffman particle sketch와 손바닥 트랙킹 포인트를 조합한 코드를 찾을 수 있었다. SimpleOpenNI 라이브러리를 Processing에 추가하여 사용할 수 있다. 라이브러리 설치폴더에서 함수와 상수들을 참고할 수 있다. 버전이 오래된 예제들은 함수이름과 사용 절차가 달라진 경우가 있으므로 예제와 라이브러리 설명서를 참고하여 적용한다. (사용하려면 OpenNI 설치가 필요함.) 참고할 만한 다른 라이브러리로는 Kinect4WinSDK (by Bryan Chung 대만에 사는 중국작가)의 예제들도 참고할 수 있다. Prime Sense사가 애플에 소속되면서 OpenNI 드라이버 보다는 Kinect SDK를 사용하는 라이브러리가 늘어가는 추세로 보인다.
그림. Hand Tracking Particles (https://kinectsen.wikispaces.com/Kinect+Processing+Sketches)
4.6.4.8 센싱 데이터 얻기 관객의 키높이를 센싱하여 분수의 크기를 결정하려던 초기 계획과 달리, 관객이 손을 흔드는 제스처를 감지하고 트래킹하는 것으로 변경하였다. 여러개의 파티클 분수를 표현하려면 키넥트가 여러명을 동시에 감지해야 하나, 키넥트 한대당 두명까지의 제한이 있어서 여러대의 센서가 필요했다. 센서는 누구의 손이든 흔드는 제스처를 감지한 후 트래킹하지 않고, handID와 position 벡터를 넘기고, 계속 다음 제스처를 감지하도록 했다. 감지한 손의 중심점의 벡터는 X좌표로 분수의 위치를 Y좌표로 분수의 높이를 결정하는 값으로 사용했다.
Social network-based Media Artwork
P 96 of 135
그림. 센서 데이터 획득 및 처리
4.6.5 작품 최종 통합 4.6.5.1 센싱 값의 반영 키넥트에서 센싱한 position벡터는 y성분은 Particle 객체의 가속도(acceleration), 속도(velocity), 형상의 퍼짐값(spread) 에 반영했다. x성분은 location 벡터의 X좌표에 반영했다. 감지한 손을 트래킹하지 않고, 최초 제스처 포착시 한번만 벡터값을 읽도록 했다.
4.6.5.2 전시 패턴에 따른 작품의 작동 방법 구현 파티클의 생성조건과 소멸조건은 표현되는 개체가 다섯개 까지로 제한되도록 하였다. 너무 많은 파티클이 화면을 어지럽게 하기전에 가장 먼저 생성된 파티클을 삭제하였다. HW의 부하가 증가하여 파티클의 표현이 느려지는 시점이기도 해서 다섯개로 정했다. 삭제된 파티클은 분수의 노즐을 갑자기 잠갔을 때 처럼, 노즐 끝에서부터 물줄기가 사라지는 모습으로 파티클을 표현했다. 관객 한 명 또는 한 팀이 자기만의 다섯개의 분수 형상을 만들고, 기념촬영을 하고, 다음 관객이 또 다른 다섯개의 분수들의 형상을 만들기를 바랬다.
4.6.5.3 색상의 구현 원형 파티클이 색상값이 없이 명도 변화만을 표현하여 단조로왔다. 강태욱 박사님의 조언대로 색상을 구현하는 코드를 삽입했다. 배경이미지로 depthImage나 rgbImage를 반영해보기도 했으나, display 속도에 영향이 있는 듯 하여, 표현에서 제외했다.
Social network-based Media Artwork
P 97 of 135
그림. 중간 개발 과정
4.6.6 작품 동작 테스트 4.6.6.1 센서의 위치 및 범위 테스트 키넥트는 TV 테이블 높이에서 센싱하도록 되어있는 장비이다. 센싱 깊이도 고려해야 한다. Kinect SDK에 포함되어 설치되는 도구로 Kinect Studio가 있으며, 센서가 감지하는 상하좌우, 깊이까지 프레임으로 표현해 준다.
그림. RGB-D 센서에서 획득한 포인트 클라우드
Social network-based Media Artwork
P 98 of 135
4.6.6.2 센서의 인식 조명 조건과 배경 rgbImage 키넥트 센서의 RGB카메라에 너무 밝은 빛이 들어올 경우, 손의 흔들림 제스쳐 인식율이 떨어지는 경향을 보였다. 전시화면 전면의 조명으로 인하여 배경 이미지로 rbgImage를 사용할 수 없는 상황이 되기도 했다.
그림. 테스트 모습
4.6.7 테스트 전시 4.6.7.1 현장의 설치 조건 전시 Display 스크린 전면에 자리한 키넥트의 위치는 감지대상과의 거리와 스크린의 폭과 높이를 감안하여 설치했다. 키넥트의 상,하 기울임 모터를 제어하여 스크린 아래에서 올려다보는 각도로 맞추었다. 스크린의 폭의 중앙에 위치하도록 설치했다. PC와 프로젝터, 키넥트의 위치에 따른 설치 조건은 다음 프로젝트에서도 중요하게 고려해야 할 부분이다.
4.6.7.2 관객과의 인터렉션 유도 장치 관객이 스크린에서 적절한 거리에 위치하여, display되는 파티클을 충분히 감상하고, 키넥트가 관객의 손 흔드는 제스처를 정확하게 감지할 수 있도록 해야했다. 관객의 위치를 라인테이프로 바닥에 표기해 두었다. 핀 조명도 관객의 위치에만 떨어지도록 조정했다. 손을 흔드는 방법에 따라 키넥트가 제스처로 인식하는 비율이 다른 만큼, 사전에 관객들이 정확한 제스처를 취할 수 있도록 설명이 필요했다. 손목을 고정하고 손바닥을 3 번이상 좌우로 Bye Bye를 하는 제스처였다. Hi! Hi! Hi! 라는 설명문구를 써놓았으나 이해에는 좀 부족한 듯 했다.
Social network-based Media Artwork
P 99 of 135
4.6.8 작품 전시 스크린 밖으로 발산하지 않고, 안에서 변곡점을 이루어야 원만한 분수의 모습을 하게되는 파티클을 만들었다. 분수는 크던 작던 , 인생이나 프로젝트도 끊임없이 중력에 이끌림으로 인하여 욕망은 변곡점을 맞이하게 된다. 내 인생의 분수는 어떤 크기이고 언제 변곡점을 맞이하면서 어떤 느낌의 욕망 곡선을 그려낼 것인지 궁금했었다. 내 작업의 거의 모든 부분이 현실의 건축행위와 구축물들을 컴퓨터 안으로 끌고 들어오는 모사행위다. 분수의 모사행위를 통하여 이런 작업들이 갖는 공통의 특징들을 찾아볼 수 있었던 기회를 갖었다. 일이 이루어지기 위해서는 꼭 필요한 절차처럼 역경과 고난과 희열이 조금씩이나마 빠짐 없이 들어가는 것 같다. 끓어오르는 욕망을 잘 다스려서 정점에서 멋진 변곡점을 만들기를 바란다. 인생에서든 일에서든. 분수에서 생명을 느끼다.
[2014.12.10pm1:45]
Social network-based Media Artwork
P 100 of 135
4.7
Geo-Mapping Experiment – 글쓴이/작가: 김현수
4.7.1 작품 주제 1 년간의 OA 워크샵스터디과정을 거치면서건축의 프리젠테이션과 인터렉티브 디자인의 접점을 찾고자하였다. 여러 실험 과정들중에서 프로젝션 맵핑은 프로젝터와 소프트웨어,그리고 오브젝트만 있으면 간단한 실현이가능하며, 2D/3D 및 그 이상의 표현을 자유롭게 할 수 있어 건축의 프리젠테이션에 적합하리라 판단하였다. 뿐만아니라그동안 테스트하여온 arduino, osc, servo motor, kinect등을 조합하면 인터렉티브한 작업을 구현할 수도 있다. 다음 그림은 이와 관련된 화면이다.
그림. arduino 실습 (2014.3.19)
그림.kinect 실습 (2014.5.27) Social network-based Media Artwork
P 101 of 135
그림.osc 실습 (2014.7.11)
4.7.2 작품 주제 주제를 설정하기 위해, 다음과 같이, 다양한 프로젝션 맵핑 컨텐츠를 분석해 보았다.
그림. The Alchemy of Light (A dandypunk, 2012, projection mapping, YouTube)
그림. Bottle Mapping (The Light Factory, 2013, projection mapping, YouTube)
Social network-based Media Artwork
P 102 of 135
그림. Construction BIM City Video (Neoscape, 2013, projection mapping, YouTube)
4.7.3 작품 제작 작품은 건축의 가상 모델링 프로세스와 컨텐츠를 동적으로 프로젝션 맵핑하는 것으로 설계하였다. 컨텐츠는 큐브의 각 면에 프로젝션된다. 각 큐브 배치는 다음과 같다.
1 개의 오브젝트와 3 개의 면을 projection mapping의 대상으로 설정하고 전시장도 맵핑배경의 일부가 될 수 있다.. 오브젝트에는 건축물을, 면에는 텍스트와 이미지를 대응시킨다. Interactive한 요소로서 OSC, Servo Motor, Tablet등을 고려해보았다. 전시장은 다음과 같은 형태로, 미리 사전 답사하여, 프로젝션 맵핑할 공간을 모델링해 보았다.
Social network-based Media Artwork
P 103 of 135
그림. 전시장 분석
4.7.4 작품 개발 프로젝션 맵핑 프로그램을 검토하기 위해, 다음과 같은 프로그램을 분석해 보았다. 표. 프로젝션 맵핑 프로그램 검토 Program
OS
price
Homepage
Max
windows/mac
$399
https://cycling74.com
VPT
windows/mac
free
https://hcgilje.wordpress.com/vpt
VVVV
windows
free
http://vvvv.org
Mad Mapper
mac
$359.6
http://www.madmapper.com/
워크샵과정과 전시준비기간 동안 상기 프로그램 중 Madmapper를 제외한 나머지를 테스트해보았다. Max와 VVVV는 매우 다양한 기능을 제공하지만, Max의 경우, 라이선스 비용이 발생하고, VVVV의 경우, 프로젝션 맵핑을 위한 기능이 VPT에 비해 부족한 면이 있다.
Social network-based Media Artwork
P 104 of 135
그림. Max 실습 (2014.4.28)
그림. VPT실습 (2014.7.14)
그림. VVVV실습 (2014.9.8)
Social network-based Media Artwork
P 105 of 135
Max와 VVVV는 유사한 인터페이스를 가지고 있으며 Visual Programming Language로써 사용이 쉽고사용자층이 다양하고 두텁다. MadMapper가 전문적인 맵핑툴로써매력적이나 Windows를 지원하지않아 나머지 3 가지의 프로그램중 비교적 사용이 쉽고 무료인 VPT가선정되었다. Projector는 단초점렌즈, 3000ansi 이상, XGA 해상도(1024X768) 의 조건하에 선정하였다. 전시장에서는 관람객이 오브젝트에의 투사를 방해하기 때문에 투사거리가 짧은 단초점렌즈가 필요하며 ansi가 높아야 선명한 칼라를얻을 수 있다. 또한 영상이 텍스트와 도면을포함하고 있어 높은 선명도가 요구되었다.
4.7.5 작품 최종 통합 맵핑은 특성상 전체 프로세스 중 자료의핸들링(수집, 편집 및 제작)에 상당한 시간이소요된다. 영상의 수집은 유튜브(https://www.youtube.com)와 비메오(https://vimeo.com)에서 대부분 이루어졌으며, 맵핑의 마지막부분에 출처를 표기하였다. 영상 제작에는 Adobe사의 Premiere와 After Effect가 사용되었고, Google Earth의 동영상은 동영상캡쳐프로그램으로 캡쳐링하였다. 표. 작업계획 No 1
Scene count
Content Counting
1면
2면
3면
4면
5면
Tool
-
Count
-
-
-
After Effect
line
line
line
line
Line
After Effect
leader 2
Intro
3
Title
제목
-
Title
-
-
-
After Effect
4
Architect
건축가
architect
Photo
-
-
-
After Effect+Premiere
5
Project
건축물
building
photo
-
-
-
After Effect+Premiere
6
Site plan
배치도
Title
Location
Site
-
-
plan
Social network-based Media Artwork
After Effect+Google
P 106 of 135
Earth 7
Plan
평면도(1~4 층)
Title
Interiror
Plan
-
-
After Effect+Premiere
8
Elevation
입면도(4 면)
Title
exterior
-
Ele1
Ele2
After Effect+Premiere
9
Section
단면도(종횡)
title
-
-
Sec1
Sec2
After Effect+Premiere
10
Source
출처
source
Image
-
-
-
After Effect
4.7.6 작품 동작 테스트 프로젝션맵핑의 많은 부분이 현장에서 작업이 이루어지며 또한 현장여건에 따라 상당한 수정을 거칠 수도 있기 때문에 시간적 여유를 가지고 현장에서의 사전테스트를 가지는 것이 중요하였다. 또한 프로젝터의 밝기/선명도를 체크하는 것이 중요하며, 여러 작가들과 전시를 같이 할 때는 서로간에 간섭이 생길 수 있는 부분들에 대한 섬세한 조율이 필요하다. 프로젝터는 작업실에서 적당한 밝기를 보여주었으나 전시장에서의 테스트에서는 주변의 밝기때문에상대적으로 어두워보여 더 높은 ansi의 제품으로 교체하였다. 전시장의 기존 조명도 프로젝터의 위치에 따라 이동시키거나 제거를 하였다. 콘센트로부터 프로젝터, 노트북까지의 배선계획 및은폐를 위한 고려가 필요하였다. 노트북 또한 전시기간동안 안정적인 작동을 보여주는지가 중요하였다. 전시장에서 테스트결과 노트북에 부하가 많이 걸려 몇 가지 수정을 해야했다. 전시기간 동안 VPT의 동작과정을관람객에게 보여주고자 계획하였으나 노트북의 발열문제로 인하여 동영상캡쳐링한 것으로 대체하였다. 또한 사운드나 카메라의 작동도 빼기로 하였다.
4.7.7 테스트 전시 1 차 테스트 -투사거리, 배선, 밝기, 선명도, 프로젝터의 거치방식 등을 테스트하였다.
Social network-based Media Artwork
P 107 of 135
그림. 전시장 테스트 (2014.11.21) 2 차 테스트는 최종 작업물의 현장맵핑작업을 통해 테스트하였다. (참고 https://www.youtube.com/watch?v=4nHsNH4RtIs)
그림. 전시장 테스트 (2014.12.2)
4.7.8 작품 전시 두번의 전시테스트를 거치면서 최대한 노트북의 부하를 줄이고자 하였고, 그 결과 전시기간중 몇번의 초점 재조정외의 문제는 발생하지 않았다. 다음은 프로젝션 맵핑과 그때의 VPT설정 화면을 프로젝션 맵핑 시퀀스에 따라 리스트한 것이다 (참고 - https://www.youtube.com/watch?v=YrZN2dEmH44).
Social network-based Media Artwork
P 108 of 135
No.
Output
Interface
1
2
3
Social network-based Media Artwork
P 109 of 135
4
5
6
Social network-based Media Artwork
P 110 of 135
7
8
9
Social network-based Media Artwork
P 111 of 135
10
Social network-based Media Artwork
P 112 of 135
5.
전시 후기 쇼셜 네트워크 기반의 미디어 아트 작업은 그 결과보다 과정이 훨씬 흥미진진하다. 직접, 작품을 만들어 보는 과정에서, 많은 창발적인 사고가 작품에 긷들고, 작가 자신도 그 과정에 많은 영향을 받는다. 최근, 많은 미디어 작품들이, 오픈소소와 커뮤니티 등의 쇼셜 네트워크 기반으로 만들어지고 있다. 한번 동참해, 자신이 사회에서 말하고 싶은 메시지를 미디어 아트 형식으로 외쳐보는 것이 어떠한가. 예술적 자아로써 성장뿐 아니라, 지루해 질 수 있는 삶에 좋은 자극제가 될 수 있고, 더불어, 사회에 작은 긍정적인 변화를 줄 수도 있는 기회가 된다. 전시는 성공적으로 마무리되었고, 기간 동안 많은 분들이 우리들의 작품을 감상하고 피드백을 주었다.
Social network-based Media Artwork
P 113 of 135
그림. 전시 후기 영상(참여 작가 - 강태욱, 강선우, 양예은, 임진택, 최형은, 정성철, 정상철, 최유진, 선우영진, 김주훈, 심재원, 김현수, 2014.12, http://www.youtube.com/watch?v=gmWkWLzbcs&list=UUuwStBfS2mptEWSA04IjA9Q) 전시 기간 동안, 우리는 우리가 작품을 만들어 온 과정을 설명하는 세미나를 개최하였고, 작품을 만들기 위해, 공부했었던 내용들을 워크샵 형태로 개최하였다.
그림. 전시 기간 중 워크샵 그리고, 전시 기간 중 모은 연말 불우이웃 돕기 성금을 구세군에 전달하였다.
Social network-based Media Artwork
P 114 of 135
여기에 참여한 작가들은 대부분 건축이나 미디어 분야에 종사하는 직장인이며, 처음 작품을 만들어 낸 분들도 많다. 누구에게는 이 각박한 세상에 살아가기도 바쁜데, 1 년 동안 진행 된, 이런 과정들이 낭비, 사치 혹은 잉여짓처럼 보여질 수도 있다. 그리고, 어느 전문가분의 눈에는 이 과정들이 모두 허술해 보일 수도 있다. 하지만, 우리들은 세상에서 삶을 좀 더 다양하게 살고 싶었고, 회색인으로 살면서 본인이 잊고 있었던, 다양한 자신의 색상을 스스로 발견하고 싶었으며, 사회에 작은 모습으로나마 미디어 아트 형식으로 메시지를 전달하고 싶었다. 그리고, 작품을 만들어 나가는 과정을 누구나 경험할 수 있음을 이렇게 공유하고 싶었다. 관심과 열정만 있다면, 누구나 본인의 메시지를 세상에 외칠 수 있는 작가가 될 수 있음을 증명한 또 다른 사례로 생각해 주길 바란다. 이 글을 통해, 1 년간 함께 작업을 진행한 작가분들께 감사드리며, 이 작업을 후원해 준 OAW의 김호중 소장님에게도 감사드린다. 아울러, 우리에게 창작의 충동질과 용기를 준 예술계의 대선배 ‘뒤샹’씨에게도 감사드린다.
Social network-based Media Artwork
P 115 of 135
6.
레퍼런스 1. 아두이노 홈페이지, www.arduino.cc 2. 프로세싱 홈페이지, www.processing.org 3. 그래스호퍼 홈페이지, www.grasshopper3d.com 4. Firefly 홈페이지, www.fireflyexperiments.com 5. 마시모 밴지, 2012.7, 손에 잡히는 아두이노, 인사이트 6. 채진욱, 2011.3, 아두이노 for 인터랙티브 뮤직, 인사이트 7. 케이시 리아스, 벤 프라이, 2011.3, 손에 잡히는 프로세싱, 인사이트 8. 강태욱, 김호중, 2014, BIM기반 협업디자인, Spacetime 9. Interactive Prototyping – An introduction to physical computing using arduino, grasshopper, and firefly 10. everyware, everyware.kr/home/category/lectures/vvvv-basics/ 11. everyware, everyware.kr/home/category/lectures/processing/ 12. René Westhof, vvvv.org/documentation/video-tutorials 13. Daniel Shiffman, processing.org/examples/simpleparticlesystem.html 14. Daniel Shiffman, processing.org/examples/multipleparticlesystems.html 15. openkinect, cafe.naver.com/openkinect/3418 16. Simple Particle System by Daniel Shiffman. kinectified by A.Rhys and J.Winchester for SEN use, kinectsen.wikispaces.com/file/view/kinect_particles_rhys_fs.zip/356998666/kinect_part icles_rhys_fs.zip 17. Max Rheiner, code.google.com/p/simple-openni/ 18. Bryan Chung, www.magicandlove.com/blog/research/kinect-for-processinglibrary/
Social network-based Media Artwork
P 116 of 135
19. Media Architecture Institute, 2008, FLARE-Kinetic Membrane Façade, http://www.mediaarchitecture.org/flare-kinetic-membrane-facade/ 20. RVTR, 2011, Resonant Chamber, http://www.rvtr.com/research/resonantchamber/ 21. RodrigoRubio (Margen-Lab), 2011, Endesa Pavilion, http://www.margen-lab.com/ 22. Aedas, 2012, Al Bahar Tower Responsive Façade, ArchDaily, http://www.archdaily.com/270592/al-bahar-towers-responsive-facade-aedas/ 23. Yannik Bontinckx, Elise Elsacker, Lisbon workshop 2011, Kinetic Pavilion, http://www.sabeoma.com/cases-study/ 24. David Letellier, LAb(au), 2010, Tessel(Kinetic Sound Installation), http://www.davidletellier.net/#TESSEL 25. Agata Ł. Wierzbicka, Kama Kośka, Łukasz Iwan, Leszek Włochyński, Dorota, Adamowicz, 2012, City Carpet, http://agatawierzbicka.com/ 26. dECOi, MIT, 2011, HypoSurface Installation, http://www.hyposurface.org/ 27. Qiufan Wu, Amelia Einbender-Lieber, Nicole Keroack, 2011, Interactive Pandora, https://softsurfaces.wordpress.com/2012/05/15/1867/ 28. Nachetz, 2012, Arduino Aplications on design and prototyping of interactive, systems, with Grasshopper & Firefly (Kinect), Fablab Sevilla #19 https://vimeo.com/groups/168658 29. Servo control, Arduino, http://wiki.vctec.co.kr/opensource/arduino/servocontrol 30. Max/Msp Jit.OpenNi, https://github.com/diablodale/jit.openni/wiki 31. Adafruit, learn.adafruit.com/photocells/using-a-photocell 32. VPT 7 manual, https://hcgilje.wordpress.com/vpt/ 33. Eric Limer, 2015.1, Microsoft's Audacious Plan to Make Anywhere a Holodeck
Social network-based Media Artwork
P 117 of 135
7.
부록: RGB-D 키넥트 센서 사용을 위한 MAX/MSP - jit.openni 설명
7.1
개요 Max/msp는 미디어아트 작업에서 많이 사용되는 프로젝션 도구이다. 이 도구는 다양한 플러그인이 있는 데, 그 중에 jit.openni는 3 차원 깊이 맵을 얻을 수 있는 깊이맵 센서인 키넥트에서, 3 차원 포인트 클라우드(point cloud)를 획득하기 위한 플러그인이다. 이 장은 이 도구에 대해 설명하도록 한다. 원출처는 https://github.com/diablodale/jit.openni/wiki 임을 밝힌다.
이 플러그인은 다음과 같은 환경에서 실행된다. Windows 32-bit 호환 OS. Windows 7 (32 or 64 bit) Mac OSx 10.6.8 or newer
*역자주: 이 가이드 문서를 보기 위해서는 몇가지 컴퓨터 그래픽스와 프로그래밍에 대한 기본 지식이 필요하다. 예를 들어, 지역좌표계, 전역좌표계의 개념은 컴퓨터 그래픽스에서 모델링할 때 사용되는 개념이다. Int32 와 같은 용어는 32 비트 정수란 뜻으로 프로그래밍에서 사용되는 개념이다. Depth맵은 깊이 맵을 의미하는 것으로 카메라로 부터 물체까지 상대적인 깊이를 각 픽셀마다 표현한 값이다. 픽셀은 사진과 같은 이미지를 구성하는 최소 단위로 색상을 나타내며, RGB값으로 구성되어 있다. 픽셀은 이미지의 가로 해상도 X 세로 해상도 만큼 있으며, 이 픽셀 데이터는 카메라가 한번 장면을 찍을 때마다 얻어진다. 수치적 연산을 편리하게 다루기 위해 물체의 회전과 이동을 행렬값으로 표현하는 경우가 많다. 이 객체에서 얻어진 사람 뼈대의 조인트(접합점, 뼈마디)는 이런 회전 행렬로 방향을 표현한다. 이 라이브러리에 포함된 객체들은 주로 3 가지 형식으로 데이터를 받고 출력하는 데, 객체에 입력하는 inlet, 출력하는 outlet에 입출력되는 표현 형식을 정할 수 있다. 이 부분은 속성 설정값으로 정의할 수 있다. 자세한 내용은 다음 본문을 참고하도록 한다.
Social network-based Media Artwork
P 118 of 135
마지막으로, 이런 종류의 라이브러리를 사용하기 위해서는 몇가지 키넥트 관련 드라이버를 설치해야 하는 데, 윈도우즈 버전에서는 서로 버전에 맞지 않는 드라이버를 설치하면 동작이 안될 수 있다. 그러므로, 미리 관련 드라이브 버전을 다운로드 받아 보관해 놓는 현명함이 필요하다.
7.2
어플리케이션 환경 ji.openni는 Max 어플리케이션 플랫폼의 확장 기능이다. Max는 Cycling 74 사에 의해 개발되었다. Max는 여러분이 여러분 자신의 음악, 사운드, 비디오, 인터렉티브 미디어 어플리케이션을 만드는 것을 도와준다. 좀 더 자세한 사항은 http://cycling74.com 을 방문해 보라. (*역주: 좀 더 개선된 기능을 가진 객체를 dp.kinect로 배포하고 있다. http://hidale.com/dp-kinect/)
7.3
라이센스 free software로 GNU General Public License나 version 3 of the License(http://www.gnu.org/licenses/gpl-3.0.html)에 의해 얼마든 배포하고 수정할 수 있다.
Social network-based Media Artwork
P 119 of 135
https://github.com/diablodale/jit.openni/wiki 를 참고하라.
7.4
다운로드와 설치 http://hidale.com/jit-openni/#download 에서 OS에 맞는 소프트웨어 버전을 다운로드한다. 그리고 다음 순서로 각 키넥트 센서 드라이버나 라이브러리를 구글에서 검색, 다운로드하고 설치한다. 1. Mac OS일 경우에는 libusb-1.0.9 를 다운로드하고 설치해야 한다. 2. OpenNI 1.5.4.0 설치 http://s3.amazonaws.com/hidale/webcontent/openni/OpenNI-Win32-1.5.4Redist.zip 3. PrimeSense NITE 1.5.2.21 설치 (*역주: 현재 MS에서 지원을 하지 않는 것으로 이 wiki에서는 기술되고 있다) 4. PrimeSense Sensor Kinect Mod v0.93 (based on 5.1.2.1) 설치 http://s3.amazonaws.com/hidale/webcontent/openni/SensorKinect093-Bin-Win32v5.1.2.1-OpenNI-1.5.4.0.zip https://www.cayim.com/forum/index.php?/topic/117-openni-sample-module/ 5. Max 6.0.7 혹은 상위 버전 설치 http://hidale.com/wp-content/uploads/2012/09/jit.openni.v0.88_Win32.zip
7.5
설치 상 문제 해결 윈도우 8 혹은 상위 버전에서는 드라이버 설치 시 드라이버 시그니쳐를 요구한다. Sensor KinectMod 개발자는 이를 포함하지 않았다. 이런 이유로, 윈도우 8 에서는 이 드라이버가 설치되지 않는다. 이럴 경우 윈도우 8 드라이버 시그니쳐 확인 설정을 임시로 disable하고 설치해야 한다. 이와 관련된 자세한 내용은 http://www.fablitec.com/user-manual/installation-instructions/ 사이트를 참고한다.
Social network-based Media Artwork
P 120 of 135
7.6
Mac OSx에서 설치 1. libusb-1.0.9 패키지를 설치 2. OpenNI 를 설치 (sudo ./install.sh) 3. NITE 설치 (sudo ./install.sh) 4. SensorKinect 설치 (sudo ./install.sh)
7.7
기능 1. OpenNI XML에 의한 OpenNI 구동 2. 4-plane 모드에서 RGB24 출력 이미지 맵 지원 (char jitter matrix) 3. 1-plane DepthMap 출력 지원 (long, float32, float64 jitter matrix) 4. 1-plane IrMap 출력 지원 (long, float32, float64 jitter matrix) 5. 1-plane UserPixelMap 출력 지원 (long, float32, float64, jitter matrix) 6. User event 지원 (user screen, user lost 등) 7. 인식된 사용자의 중심점 획득 8. 바닥면 인식 9. 뼈대 조인트 인식 10. 사용자 이벤트, 물체 중심 획득, 뼈대 조인트를 OSC 포맷으로 획득. max route friendly format OSCeleton legacy format 지원 11. 신뢰성 있는 위치와 방향 기반 데이터 필터링, OpenNI smoothing API에 의한 뼈대 데이터 smoothing 처리 12. Field of View 카메라 지원
7.8
Max 메시지 지원 속성을 얻고 설정할 수 있는 Max/jitter 메시지 방식을 지원함. dumpout을 지원함.
Social network-based Media Artwork
P 121 of 135
[bang] 은 inlet으로 no waiting/blocking 조건에서 갱신된 데이터에 대한 질의를 위해 보내지는 메시지로, outlet으로 부터 메트릭스, 사용자 이벤트, 물체 중심, 사용자 뼈대 등을 outlet으로 출력한다. [read] 메시지는 OpenNI XML 설정 파일을 읽어, jit.openni객체를 초기화한다. 특정 객체 실행을 위해 파라메터를 메시지로 포함해 전달할 수 있다.
read myconfigfile.xml
<--- example message sent to jit.openni inlet
read myconfigfile.xml 1
<--- example message sent out of dumpout outlet
[read] 메시지는 lit.qt 외부 dumpout 출력 포맷으로 다음과 같이 그 결과를 출력한다.
read filename success filename: the string "<none>" without the quotes or the filename jit.openni attempted to load success: an integer where 0 = file not loaded and 1 = file successfully loaded
여러분은 OpenNI 기능을 사용하기 전에, OpenNI XML 설정파일을 [read]해야 한다. [getversions]는 jit.openni와 OpenNI버전을 다음과 같이 dumpout한다. version_jit.openni 0 7 7 version_openni 1 5 4 0
7.9
속성들 [distmeter] 는 [0, 1]의 값을 갖으며, 0 은 밀리미터 거리를, 1 은 미터 거리를 메시지로 전달하도록 설정한다. [position_confidence_filter] 는 [0.0 - 1.0]의 값을 가진다. 이 필터값보다 같거나 큰 포지티브 값을 갖는 OSC 데이터가 출력된다.
Social network-based Media Artwork
P 122 of 135
[orient_confidence_filter] 는 [0.0 - 1.0]의 값을 가진다. 이 필터 값보다 크거나 같은 회전값을 가진 OSC 데이터가 출력된다. [output_skeleton_orientation] 은 [0, 1] 값을 가진다. 0 은 디폴트값이며, 방향 데이터를 출력하지 않는다. 1 은 방향 데이터를 출력한다. [skeleton_smooth_factor]는 [0.0 - 1.0]값을 가지며, 0.0 이 초기값이다. 0.0 은 smoothing처리를 의미한다. 1.0 은 무한대의 smoothing을 의미한다. 0.0 에서 1.0 사이로 smoothing강도가 정해진다. [output_depthmap]은 [0, 1]값을 가진다. 1 은 초기값이다. depthmap 행렬 출력을 활성화한다. depthmap은 밀리미터 단위이다. [output_imagemap]은 [0, 1] 값을 가진다. 1 은 초기값이며, imagemap 행렬 출력을 활성화하여 outlet으로 보낸다. [output_irmap]은 [0, 1]값을 가진다. 1 이 초기값이다. 이 경우 IRmap 행렬을 irmap outlet으로 보낸다. [output_usermap]은 [0, 1]값을 가진다. 1 이 초기값으로 사용자 픽셀 맵을 usermap outlet으로 보낸다. [output_skeleton]은 [0, 1] 값을 가진다. 1 이 초기값이며, 뼈대 joint를 skeleton outlet으로 보낸다. [output_scene_floor]는 [0, 1]값을 가진다. 0 은 초기값이며, 각 bang에 대해 OSC outlet으로 데이터를 출력할 때 scene floor 데이터를 비활성화한다. 1 은 이 데이터를 활성화해 해당 outlet을 출력하도록 한다. [scene_floor] 는 6 개 실수 배열이며, 첫 3 개는 평면의 x, y, z 좌표를 의미한다. 두번째 3 개 값은 x, y, z으로 법선 벡터를 의미한다. floor OSC 메시지 방식으로 해당 값들을 출력한다. [skeleton_format] 은 [0..2]값을 가진다. 0 은 초기값이며, jit.openni OSC 포맷, 1 은 max's route object 포맷, 2 는 OSCeleton legacy 포맷으로 값을 출력한다는 의미이다.
Social network-based Media Artwork
P 123 of 135
[skeleton_value_type]은 [0..2]값을 가진다. 0 은 초기값이며, OpenNI 값을 밀리미터 단위로 출력하며(OSCeleton -xr옵션과 동일), 1 은 OpenNI값을 프로젝티브 코디네이트(projective coordinate)형식으로 출력하며, 2 는 OSCeleton의 디폴트 방식으로 정규화된 값들을 출력한다. [depth_fov]는 2 개 실수쌍 배열이며, 깊이 카메라의 수평과 수직 FOV(field of view)를 표현한다. 7.10
사용자와 뼈대 출력
7.10.1 사용자 이벤트 사용자 이벤트는 XML에 설정된 사용자 생성기에 의해 만들어진다. 이벤트는 메시지나 OSC 방법에 의해 정의된 것으로 int32 값으로 OpenNI userID로 표현된다. 8 개의 이벤트는 다음 3 가지 형식이 있다.
native OSC
max route
OSCeleton legacy
-------------------------------------------------------------------------/new_user userID /lost_user userID /calib_pose userID /calib_start userID /calib_success userID /calib_fail userID /exit_user userID /reenter_user userID
new_user userID
/new_user userID
lost_user userID
/lost_user userID
calib_pose userID
/pose_detected userID
calib_start userID
/calibration_started userID
calib_success userID calib_fail userID exit_user userID reenter_user userID
/new_skel userID
/calibration_failed userID /exit_user userID /reenter_user userID
OSC 출력 예는 다음과 같다
/new_user 2 /calib_pose 2 /calib_start 2
Social network-based Media Artwork
P 124 of 135
7.10.2 물체 데이터의 중심 물체 중심은 XML로 설정된 사용자 생성기에 의해 만들어진다. 사용자가 생성기에 의해 확인되면, 여러분은 물체의 중심값을 메시지로 받을 수 있다. Primesense NITE 사용자 생성기는 사용자를 인식하지 못할 때는 erratic 데이터를 던져 주며 (0, 0, 0)값이 출력된다. /user_exit와 /user_reenter 이벤트는 불완전한 데이터에서 사용자를 인식하는 기능을 지원하지만, 완벽하지 않다.
Examples of output given value of skeleton_format attribute: native OSC
max route
OSCeleton legacy
-------------------------------------------------------------------------/user/userID x y z
user userID x y z
/user/userID x y z
[userid]는 int32 값으로 OpenNI의 userID를 표현한다. [x, y, z]는 float32 값이며, [skeleton_value_type] 속성에 의해 표현된다.
예를들어 native OSC 형식의 출력은 다음과 같다. /user/2 42.1323 -100.8237 1984.348
7.10.3 Scene Floor Data Scene Floor 인식은 XML에 설정된 생성기에 의해 만들어진다. 바닥이 생성기에 의해 인식되면, [output_scene_floor]속성값에 의해 바닥 메시지를 받을 수 있다. 이 위키 도움말이 쓰여 졌을 때, Primesense NITE scene 생성기는 바닥 포인트의 X값을 항상 0.0 으로 출력하였다. Z값은 349.18811 을 출력하였으며, 나머지 값은 물리적 설정에 따라 값이 달라진다. "getscene_floor"와 같은 max 메시지를 사용해 [scene_floor] 속성값을 질의할 수 있다. 그 결과는 outlet에 출력되며, x, y, z값은 디폴트로 밀리미터로 출력된다.
Social network-based Media Artwork
P 125 of 135
Examples of output given value of skeleton_format attribute: native OSC
max route
OSCeleton legacy
-------------------------------------------------------------------------/floor x y z xn yn zn
floor x y z xn yn zn
/floor x y z xn yn zn
[x, y, z]는 float32 값으로 평면의 좌표값이다. [xn, yn, zn]은 float32 값으로 평면의 법선벡터이다. OSC 형식 출력 예는 다음과 같다.
/floor 0.0 -925.784 349.18811 0.128 0.9721 0.0472
7.10.4 뼈대 조인트 데이터 뼈대 조인트 데이터는 사용자 생성기에 의해 만들어지며, 이 생성기는 XML로 설정할 수 있다. jit.openni 객체는 추적된 뼈대에 대한 조인트 유형을 출력한다. 객체의 조인트 위치(mm)와 원점을 출력한다. 방향 데이터는 9 개 실수값을 출력하며, 3x3 회전 행렬로 구성된다. 이 행렬은 조인트 지역(local) 좌표계와 월드(world) 좌표계 간의 회전을 표현한다. 첫번째 세개 값은 조인트의 +X축의 방향, 두번째는 +Y축 방향, 세번째는 +Z축방향을 의미한다. 회전하지 않는 위치를 "T pose"라 한다. 이 곳은 인간이 센서를 향해 마주 보고 있는 수직 지점을 의미한다. 이 지점은 키넥트가 팔을 T모양에서 팔굽을 굽혔을 때 인식한다. 이 지점으로 부터 다른 조인트 방향이 World Coordinate System으로 정의된다. 이 방향 행렬의 항등 행렬은 (1,0,0,0,1,0,0,0,1) 이다. 이와 관련된 계산 속도를 높이기 위해 다음과 같이 XML파일을 설정할 수 있다.
<Node type="User">
Social network-based Media Artwork
P 126 of 135
<Configuration> <Property type="int" name="SkeletonHeuristics" value="0"/> </Configuration> </Node>
OSC 메시지 형식인, skeleton_format=0 인 경우 다음과 같이 출력된다.
/skel/userid/jointname x y z confidPosition Xx Xy Xz Yx Yy Yz Zx Zy Zz confidOrient
max route 형식인, skeleton_format=1 인 경우 다음과 같이 출력된다. skel userid jointname x y z confidPosition Xx Xy Xz Yx Yy Yz Zx Zy Zz confidOrient
OSCeleton 형식인, skeleton_format=1 인 경우 다음과 같이 출력된다. /joint jointname userid x y z
[userid]는 int32 값으로 OpenNI userID값이다. [jointname]은 OpenNI 뼈대 조인트 유형으로 정의된 문자열 중 하나를 나타낸다. 모든 숫자는 [skeleton_value_type]속성으로 정의된다. [jointname]은 다음과 같다.
head
neck
torso
waist
l_collar
l_shoulder
l_elbow
r_collar
r_shoulder
r_elbow
l_hip
l_knee
l_ankle
r_hip
r_knee
r_ankle
l_wrist r_wrist
l_hand r_hand
l_fingertip r_fingertip
l_foot r_foot
Social network-based Media Artwork
P 127 of 135
OSC 출력형식으로 skeleton_format=0 인 경우 다음과 같이 출력된다. /skel/2/r_shoulder 1200.4 3050.3 4500.6 0.895
조인트 뿐 아니라 방향 데이터까지 출력될 경우 다음과 같이 출력된다. /skel/2/r_shoulder 1200.4 3050.3 4500.6 0.895 1200.4 3050.3 4500.6 1200.4 3050.3 4500.6 1200.4 3050.3 4500.6 0.500
*역주: 최근 dp.kinect란 객체를 지원하는 http://hidale.com/dp-kinect/에 대한 내용이 있다. 이 객체는 최신 Kinect 드라이버를 지원하는 것으로 기술되어 있다.
Social network-based Media Artwork
P 128 of 135
8.
부록: 리비전 히스토리 Revision history Version 0.1
Description 작품 제작 및 전시 프로세스를 공유하기 위해 정리합니다.
Date
Author
2015-01-10
강태욱
2015-1-23
강태욱
초안에 Interactive Design은 Interaction Design과 혼란을 피하기 위해, 수정하였습니다. 작품 개발 과정에 대한 내용을 공유하기 위해, 그룹 전시에 참여한 분들 중에, 시간이 가능한 분들과 함께 저술 작업을 진행합니다. 전체 내용은 100 페이지 내로 생각하고 있으니 참고하시길 바랍니다. 본 책에서 기술된 내용은 가능한 오픈소스만을 사용한 미디어 아트 개발을 지향합니다. 사용한 툴의 매뉴얼을 일일히 다 적는 것 보다는 무엇을 이용하고, 어떤식으로 개발했는 지에 대해 초점을 맞춥니다. 2 장과 3 장은 워크샵에서 사용했던 교재를 일부 정리해 넣을 것입니다. 0.2
온라인 e-book publish 에 참가할 분들이 다 모였습니다. 관련 내용은 페이스북 참고하시길 바랍니다. 1.
앞으로 4 주 정도(원고 마감: 2015.2.25. 일요일) 진행할 계획입니다. 목차는 대략 설정한 것이니, 저술하는 분의 입맛에 맞게 수정하도 무방함을 밝힙니다(목차별로 저자 크래딧을 달 것입니다). 다만, 새로 전시에 참여하실 분들의 입장에서, 작품 제작 과정에서 시행착오한 부분들을 잘 정리해 주시면 좋겠습니다^^
2.
글을 쓰는 것이 계획대로 잘 진행되고 있는 지에 대해 중간에 확인 과정이 있으면 좋을 것 같습니다. 2 주 후에 중간 점검을 할 계획이니, 그때까지 저술한 내용을 저에게 메일로 주십시요.
3.
서식을 꼭 지켜 주십시요. 제목, 문단, 본문 서식이 서로 맞지 않으면, 최종 편집할 때 힘듭니다. 또한, 문체도 본
Social network-based Media Artwork
P 129 of 135
서식에 포함된 것과 유사하게 저술 부탁드립니다. 4.
각 작품을 제작하신 작가분의 성함을 목차에 넣었습니다. 기타 목차 부분에서라도 혹시 참가하고 싶으신 분 있으시면 언제든 손들고, 참여해 주시면 좋겠습니다(일단 제 이름을 달아 놓습니다).
그럼, 화이팅 하시길 바랍니다^^. 0.3
작업 시, 인용한 그림이나 글이 있다면, 꼭 출처를 밝혀 주시길
2015-1-24
강태욱
바랍니다. 0.4
우선 지금까지 정리해 놓았던 것들을 모아서 집어 넣어 보았음.
2015-1-25
강태욱
0.5
VPT 내용 추가.
2015-02-21
강태욱
0.6
Cell Bloom 작품 제작 과정 추가.
2015-02-22
강태욱
0.7
전체적으로 서식 재정리.
2015-02-27
강태욱
0.8
각 작품의 작가 기술 내용 추가 및 서식 재정리
2015-02-28
강태욱
0.9
각 장별 클래딧을 글쓴이와 작가를 구분해 표시하고, 작품
2015-03-02
강태욱
제작/전시의 전과정을 간단히 1 페이지로 요약한 내용을 붙임.
이 저작물은 Creative Commons Lisence 를 따릅니다.
Social network-based Media Artwork
P 130 of 135