데브허브 | DEVHUB | You NEED to try ASCII ANIMATIONSYou NEED to try ASCII ANIMATIONS
- 기존 ASCII 애니메이션 구현 방식(이미지 변환, After Effects, 3JS)의 한계점(비효율성, 비디오 출력, 라이브러리 의존성)을 분석하고 대안을 모색했습니다. 🧐
- 발표자는
ffmpeg으로 비디오 프레임을 추출하고 ImageMagick으로 픽셀 밝기를 분석하여 ASCII 문자를 삽입하는 독자적인 Bash 스크립트 솔루션을 개발했습니다. 💻
- 이 스크립트는 폰트 비율, 밝기 임계값, ASCII 문자 세트, 출력 FPS 등 다양한 파라미터 조절을 통해 ASCII 변환의 디테일을 세밀하게 제어할 수 있습니다. 🎛️
- 애니메이션 소스 비디오는 검은색 배경이 권장되며, LY와 같은 플랫폼에서 에셋을 얻거나 직접 제작할 수 있습니다. 🎞️
- React/Next.js 환경에서
AnimationManager 클래스를 사용하여 생성된 ASCII 텍스트 프레임들을 requestAnimationFrame 기반으로 60FPS의 부드러운 애니메이션으로 렌더링합니다. ✨
- 렌더링된 ASCII 애니메이션에
mix-blend-mode와 색상 오버레이(그라디언트)를 적용하여 시각적으로 풍부하고 다채로운 효과를 구현할 수 있습니다. 🌈
- 이 솔루션은 Ghosty 웹사이트에서 영감을 받아 개발되었으며, 사용자가 직접 제어하고 상호작용할 수 있는 네이티브 ASCII 애니메이션 구현을 목표로 합니다. 💡