크리에이티브 코딩 밋업 인사이트 - 2. 식물 🪴

이번 크리에이티브 코딩 밋업의 주제는 <식물>이었다. 이미 정효님은 '자라나는 것들'이라는 코딩 워크숍을 여러차례 진행했었는데 이번 밋업 덕분에 그에 관련된 인사이트를 들을 수 있었다.

 

자라나는 것들(정효) - 마우스 동작에 맞춰 자라나는 식물 그래픽

 

1. 식물이 자라는 모습을 재미있게 표현한 사례

1) 이웃집 토토로

밋업 서두에 나온 이 영상이 너무 귀엽고 반가웠다. 토토로를 보면서 '식물이 자라는 모습을 저렇게 표현했구나' 생각하는 사람이 얼마나 있을까? 식물에 대한 인터렉션에 관심이 있어야만 발견할 수 있는 인사이트일 것이다.

 

 

2) 인터렉션 사례

토토로 영상과 함께 실제 식물 인터렉션 사례들을 함께 소개해주었다. 예전엔 이런 사례들을 보면 마냥 신기하기만 했는데, 이젠 어떤 의도를 가지고 이런 아이디어를 내고, 이렇게 구현해낸 사람들에게 존경심이 든다.

 

Universial Everything

이 사례에서는 전체 화면에서의 식물의 배치, 사람의 움직임에 따른 식물 표현 등이 섬세하게 구현되어 있어 어떤 부분이 작업의 퀄리티를 높여주는지 볼 수 있었다.

 

Eran Hilleli

이 프로젝트는 VR로 식물의 씨앗을 받아 자라게 하는 형태를 가지고 있다. 나는 온오프라인 간의 경험을 교차시키는 작업을 선호하는데 이 작업이 그런 예시 중에 하나였다.

 

이 외에도 식물과 관련된 게임 사례도 여럿 소개해주셨다.

 

2. 식물과 관련된 기후, 문화 분류

완전 창작을 하는 것도 새롭고 재미있지만, 표현하고자 하는 형태에 맥락이 필요하고 설득력을 높이고 싶다면 표현하고자 하는 주제에 대한 조사와 적용도 즐거운 과정이라 생각한다. 정효님은 식물종을 어떻게 단순화할 수 있고, 기후에 따라 분포되는 식물의 형태가 다르다는 점과 문화론에 대해 소개해주었다.

 

1) 단순화된 식물과 식물종

나무를 온라인상에서 표현할 때 종종 아래 영상처럼 형태를 단순화 하곤 하는데, 주로 세 유형으로 표현된다.

• 삼각형 - 가문비나무(spruce), 전나무(fir)
• 둥근형태 - 단풍나무(maple), 참나무(oak)
• 세로로긴 삼각형 / 원형 - 사이프러스(cypress), 사시나무(poplar)

핀터레스트에서 'Tree forms'라는 키워드로 조금 더 구체화된 자료를 찾아보았다. 찾다보니 나뭇잎의 유형을 정리해놓은 자료도 재밌어서 가져왔다.

출처: 핀터레스트

 

2) 쾨펜 기후 분류 체계

나무나 식물의 형태를 결정짓는데 가장 큰 영향을 주는 것이 기후다. 쾨펜 기후 분류 체계라는 좋은 기준을 소개해주셨다.

쾨펜의 기후 구분 - 위키백과, 우리 모두의 백과사전

정효님은 이 기후 분류 쳬계를 가지고 AI에서 이미지를 추출했는데, 표현하고자 하는 배경을 구현하는 과정에 좋은 방법이라고 생각했다. AI에게 제대로 요청할 수 있다면 상상 속의 장면을 설득력있는 정보에 맞춰 구현해주지 않을까 싶기도 한다.

AI에서 추출한 기후 이미지: 순서대로 열대/사막/지중해/온대 숲/북극 및 고산

 

3) 미야지키 하야오 - 조엽수림 문화론

이렇게 분류 체계를 가지고 작품에 적용한 사례가 미야지키 하야오의 원령공주다. 원령공주는 일본의 조엽수림 문화가 잘 드러난 작품이다.

동아시아의 식생과 졸참수림대문화/졸엽수림문화의 영역도

조엽수림: 아열대 삼림의 일종으로, 높은 습도와 상대적으로 안정적이고 온화한 기온을 가진 곳에서 발달한다. 상록 활엽수가 주된 수종이다. 이들 수종의 나뭇잎은 주로 기름진 윤기와 광택이 있다.

 

 

3. 식물 표현하기

식물을 표현한 사례를 보고, 배경 지식도 채웠다면 '어떻게'를 살펴볼 시간이다. '이웃집 토토로'에선 식물이 무럭무럭 무성해지는 모습, '원령공주'에선 조엽수림 배경이 되어 영상으로 구현되었지만 웹에서 식물을 표현할 때는 어떤 방법을 사용할까?

 

1) 인스턴싱을 활용한 잔디 표현하기

잔디처럼 반복적이고 넓은 영역은 복제하는 방법을 많이 쓰는 것 같다. 3D 프로그램인 Spline에선 잔디의 흔들리는 움직임까지 표현하는 방법으로 인스턴싱 instancing을 쓸 수 있었다. 사전 상으로는 instance = 예시, 예를 들어 라는 의미를 가지고 있는데, 한 그룹을 원본으로 복제하기 때문에 이런 용어를 쓰지 않나 싶다.

정효님이 Spline에서 instancing을 활용해 보여준 잔디 예시

 

2) L-system을 활용한 가지 표현하기

식물을 표현하기에 가장 까다로운 부분이 정형화 되지 않고 다양한 형태이지 않을까 싶다. 여러 갈래로 뻗어나가는 나뭇가지도 그 중 하나일텐데, 가지를 위한 연구 선례가 있었다. 그중 하나가 L-system이다. 가지가 펼쳐져 나가는 일종의 프랙탈의 스타일을 정의한다고 이해했다.

L-system - Wikipedia

 

가지가 솟으면 끝점에서 새로운 가지가 몇 도, 얼마나 다시 뻗을지를 정의해서 개발에 적용하면 아래와 같은 형태의 나뭇가지 형태를 얻을 수 있다.

 

3) 움직임 표현하기

식물에서 가장 보기 쉬운 움직임은 바람에 자연스럽게 흔들리는 모습이다. 웹 상에선 바람이 부는 움직임을 표현하기 위해 노이즈와 랜덤을 활용할 수 있었다. 랜덤한 값을 불러오게 설정하거나, 비슷한 원리로 흑백으로 된 노이즈에서 값을 추출해 움직임 값에 적용하는 방법이 있었다. 아래와 같이 대비가 심한 노이즈 이미지는 흔들림이 심할 것이고, 여기에 블러 등을 적용하여 부드럽게 움직임을 추출할수도 있을 것 같다.

활용할 수 있는 노이즈 이미지

 

4. 마치며

Robinsson Cravents

일러스트 기반으로 3D아트 작업을 하는 분이다. 아래 캡쳐한 영상은 p5js에서 3D를 활용해 나무를 구현해볼만한 사례인 것 같아 함께 정리해본다. 홈페이지에는 일러스트레이터와 드로잉, 3D아트라고 기재해두었던데 어떤 툴을 사용했는지 궁금하다.

 

 

둥지 인스타그램 @nest.cc