Heptapod B Encoder

상세 레시피

완성된 코드에서 거꾸로 읽어 낸 조립 과정입니다. 단계마다 어떤 데이터와 이미지, 컴퍼넌트를 조합했는지 보여 줍니다.

1. 01

   장면 데이터를 스크롤 시간표로

   여섯 장면의 영상 구간과 카피, 장면별 스크롤 길이를 정리하고 스크롤 위치를 영상 시간으로 바꾸는 시간표를 만듭니다.

   데이터

   HERO_STORY_BEATS, HERO_SCRUB_TIMELINE

   결과

   스크롤한 만큼 영상이 앞뒤로 움직이고, 장면마다 머무는 스크롤 길이가 따로 정해집니다.

2. 02

   이름을 되돌릴 수 있는 형태 값으로

   지원 문자로 이루어진 이름을 링의 굴곡과 틈, 가닥, 무게중심, 잉크 덩어리 값에 나눠 담는 규칙을 만듭니다.

   데이터

   reversibleCodec, buildModelReversible

   결과

   같은 이름은 항상 같은 형태가 되고, 용량 안의 이름은 그 형태에서 원래 이름으로 복원됩니다.

3. 03

   형태 값을 잉크 입자로 그리기

   형태 값의 링과 덩어리를 잉크 입자로 펼치고, 이 입자를 캔버스 애니메이션으로 그리는 부품을 만듭니다.

   데이터

   buildModelReversible, logogramParticles

   컴퍼넌트

   LogogramRendererCanvas

   결과

   원형 글리프가 잉크 입자로 그려지고, 같은 이름은 다시 그려도 같은 배치로 나타납니다.

4. 04

   입력부터 저장까지 한 화면의 인코더

   이름 입력과 인코딩, 분석, 단계별 분해, 저장과 공유를 글리프 부품 위에 조립하고, 기기 성능과 모션 감소 설정에 맞춰 애니메이션 동작을 조절합니다.

   데이터

   buildModelReversible, logogramParticles, detectRenderTier, exportLogogramPng

   이미지

   인코딩 순간에 합성해 내는 전환음

   컴퍼넌트

   LogogramRendererCanvas, HeptapodEncoderPage

   결과

   이름을 확정하면 글리프가 새로 그려지고, 분해할 수 있는 글리프를 누르면 하위 단위가 나타납니다.

5. 05

   시네마틱 인트로와 인코더 연결

   스크롤 시간표를 읽어 영상과 카피, 사운드를 맞춘 인트로를 만들고, 인트로가 끝나는 자리에 인코더를 잇습니다.

   데이터

   HERO_STORY_BEATS, HERO_SCRUB_TIMELINE

   이미지

   스크롤로 탐색하는 시네마틱 영상(가로형과 세로형), 영상 준비 전에 보이는 첫 프레임 포스터, 배경음 루프와 장면별 사운드 클립

   컴퍼넌트

   HeptapodHeroIntro, HeptapodEncoderPage, App

   결과

   START를 누르면 스크롤에 맞춰 영상과 카피, 사운드가 흐르고 마지막 장면 뒤에 인코더가 이어집니다. 이름이 담긴 링크는 인트로 없이 인코더를 바로 엽니다.