Educational Re-creations · 교육용 재현

미디어아트
재현 연작

미디어아트 명작을 실제로 동작하게 재현합니다. 설명이 아니라 돌아가는 구현입니다 — 웹캠 앞에 서면 바로 반응합니다.

브라우저에서 그대로 열립니다. 설치도 빌드도 없습니다.
카메라·마이크가 없어도 데모 모드로 전부 시연됩니다.

흰 패널 세 장에 검은 실루엣과 새떼가 보이는 삼면화
I

The Treachery of Sanctuary

Chris Milk · 2012

세 폭 제단화. 그림자가 새떼로 흩어지고, 새떼가 그림자를 쪼아 없애고, 그림자에 날개가 돋는다. 원작은 Kinect 3대 + openFrameworks + Unity3D였습니다.

  • 웹캠
  • MediaPipe
  • Canvas2D
  • Boids
  • fal.ai 에셋

배우는 것 — 실루엣 필드 하나로 세 화면을 굴리기. 같은 무리 엔진, 파라미터 하나로 갈리는 성격.

원작 영상

milk.co/treachery ↗

종이 같은 바탕에 다각형 윤곽선이 띠를 이루며 오른쪽으로 흘러가다 옅어지는 화면
II

Messa di Voce

Golan Levin & Zach Lieberman · 2003

목소리가 형태가 되어 흘러가며 옅어집니다. 음정이 각의 수와 높이를, 음량이 크기를 정하고, 침묵은 빈 자리로 남습니다. P 로 물리 판(천장에 쌓였다가 무너져 몸에 부딪힘)과 오갑니다.

  • Web Audio
  • NSDF 피치
  • 궤적
  • PBD 물리
  • MediaPipe Pose

배우는 것 — 소리라는 두 번째 축. 같은 매핑을 두 태도로 놓고 보면, 매핑이 아니라 태도가 작품을 가른다는 것.

원작 영상

flong.com · 퍼포먼스 ↗ · 설치 버전 ↗

빨간 관절 골격과 검은 위상 골격이 겹쳐진 화면
III

Ghost Pole Propagator

Golan Levin · 2007

실루엣을 뼈대로 줄이고, 그 뼈대가 벽에 남아 걸어다닙니다. 같은 사람을 두 방법으로 뼈대로 만들어 나란히 놓습니다.

  • WebGL2 셰이더
  • Jump Flooding
  • 거리변환
  • 중심축 추출

배우는 것 — 같아 보이는 두 알고리즘이 전혀 다른 미감을 낸다. GPU로 생각하기.

원작 영상

flong.com · GPP I ↗ · GPP II · 2016 ↗

좁은 골목 사이에 낀 창 없는 콘크리트 정면, 가운데 현관만 열려 있다
IV

스미요시 나가야 — 손으로 걷는 집

안도 타다오(安藤忠雄) · 1976 · 건축 편

폭 3.6m 집의 가운데 3분의 1을 지붕 없이 비운 집입니다. 침실에서 화장실을 가려면 비를 맞습니다. 그 사실을 설명하지 않고 걸어서 겪게 합니다.

  • Blender 스크립트
  • three.js r169
  • MediaPipe 손
  • glTF
  • fal.ai 에셋

배우는 것 — 모델을 손으로 빚지 않고 코드로 짓는다. 치수가 곧 소스이고, 형태는 그 결과다.

조작

  • 걷기 오른손 폈다 오므리기 — 한 번이 한 걸음 · 키보드 W A S D
  • 시선 왼손 좌우·위아래 · 마우스 (화면 클릭 후)
  • 날씨 박수 — 맑음 · 비 · 눈 · 낙엽 · Space

안도 타다오 공식 ↗ · 프리츠커상 1995 ↗

Curriculum

10주 커리큘럼에서의 자리

앞의 다섯 작품이 조각을 하나씩 가르치고, 6주차에 합쳐지도록 짰습니다. 굵게 표시된 것이 여기 구현되어 있습니다.

  1. 01 Text Rain Utterback & Achituv · 1999
  2. 02 Rain Room Random International · 2012
  3. 03 Body Movies Lozano-Hemmer · 2001
  4. 04 Videoplace / Critter Myron Krueger · 1974~
  5. 05 Ghost Pole Propagator Golan Levin · 2007
  6. 06 The Treachery of Sanctuary Chris Milk · 2012
  7. 07 Messa di Voce Levin & Lieberman · 2003
  8. 08 Wooden Mirror Daniel Rozin · 1999
  9. 09 Learning to See Memo Akten · 2017
  10. 10 The Wilderness Downtown Chris Milk · 2010

About

각 폴더의 README.md 에 기술 사양과 만들면서 밟은 함정이 정리되어 있습니다. 결과 화면만 보면 안 보이는 부분이라, 수업에서는 그쪽이 더 쓸모 있습니다.

여기 있는 코드는 원작의 저작물이 아닙니다. 작동 원리를 수업에서 보여주기 위해 새로 작성한 재현물이며, 각 작품의 크레딧은 해당 폴더의 README 하단에 있습니다.

추후 ai-immersive.art 로 합류 예정.