[클로드 x 모션 그래픽]
영상 초반에 말려있던 티켓이 펴지면서 보여지는 효과는
코드로 어떻게 구현할 수 있을까요?
<답글에 프롬프트를 남겨놓았습니다>
* 아래 영상은 클로드 100% 로 제작되었습니다.
[댓글 @gasket_love]
/
[프롬프트]
WebGL2로 "종이가 말렸다 펴지는 효과(Paper Curl)"를 HTML 파일 하나로 만들어줘.
외부 라이브러리 없이, 주석은 한국어로.
[종이]
- 1200x720 캔버스 가운데에 600x340 크기의 티켓을 Canvas2D로 그려서 텍스처로 쓴다.
(크림색 바탕, 둥근 모서리, 좌우 반원 홈, 절취선, 큰 제목, 바코드 정도)
- 텍스처는 알파 미리곱(UNPACK_PREMULTIPLY_ALPHA_WEBGL=true)으로 올린다.
[원리 — 프래그먼트 셰이더에서 역매핑]
종이가 반지름 R인 보이지 않는 원통에 감기며 넘어간다고 가정한다.
각 픽셀 X에서 "원래 종이의 어느 점이 여기 와 있나"를 거꾸로 계산해 그 색을 읽는다.
- n = 종이가 들리는 쪽 단위벡터, P = 접힘선 위의 한 점
- xp = dot(X - P, n), base = X - n*xp
1) xp < 0 (평평한 구간):
아래 = 종이(X)
위 = 종이(base + n*(PI*R - xp)) ← 반 바퀴 돌아 넘어온 뒷면
2) 0 ≤ xp ≤ R (원통 구간): θ = asin(xp/R)
아래 = 종이(base + n*(R*θ)) ← 원통 앞면, xp/R 클수록 최대 45% 어둡게
위 = 종이(base + n*(R*(PI-θ))) ← 원통 뒷면
3) xp > R: 투명
- 뒷면 색 = mix(종이색*알파, 원래색, 0.18) (인쇄가 살짝 비치게), 약간 어둡게
- 넘어온 뒷면이 없는 평평한 곳은 접힘선 근처에 exp(xp/(0.9R))로 옅은 그림자
- 최종 = 위 + (1 - 위.a) * 아래
- 텍스처 범위 밖 좌표는 투명으로 처리
[접힘선 계산 — 모서리를 끌어오는 모델]
- 끄는 방향 각도 a → n = (-cos a, -sin a)
- 티켓 네 모서리를 n에 투영해 최댓값 hi, 최솟값 lo
- 끄는 거리 D = t * (hi - lo + PI*R) * 2 (t: 0=평평 ~ 0.5)
- 접힘선 위치 s = hi + R - D/2, P = n * s
(접힘선 = 들린 모서리와 끌어온 지점의 수직이등분선)
[애니메이션·UI]
- 3.6초 반복: 말림 1.2초(easeInOutCubic, t 0→0.36) → 유지 0.6초 → 펴짐 1.2초 → 평평 0.6초
- 슬라이더: 말림 정도 t, 끄는 방향(-180~180°, 기본 -145), 반지름 R(8~140, 기본 46), 뒷면 비침(0~1)
- 재생/일시정지 버튼, 슬라이더를 만지면 자동 재생 멈춤
- 어두운 배경, 캔버스는 width:100%로 반응형
