손으로 그린 비디오
화면의 모든 것은 p5.brush(실제 펜, 연필, 수채화 텍스처를 GPU에서 그림)를 사용하여 HyperFrames 프로젝트 안에서 그려지며, 모든 프레임은 시간의 순수 함수이므로 렌더링이 정확합니다. 아래 사용 사례는 시작점일 뿐, 어떤 손으로 그린 아이디어든 가능합니다. 이 파일의 경로는 이 스킬 폴더를 기준으로 합니다.
1. 설정 (최초 한 번)
- Node.js 18+ (HyperFrames는
npx로 실행됨). - 스킬 Python:
~/.cache/hand-drawn-video/venv/bin/python(Windows%USERPROFILE%\.cache\hand-drawn-video\venv\Scripts\python.exe).INSTALL.md5단계에서 Python 3.10-3.12로 만듭니다. 아래 모든 명령에 이 Python을 사용하세요. 없으면INSTALL.md4-7단계를 실행하세요. 절대 시스템 Python에pip install하지 마세요(Homebrew Python이 거부합니다). Mac에서는python이 아닌python3명령어를 사용합니다. - 인터넷: 처음 실행 시
scripts/brushlib.py가 p5.brush(고정 버전, SHA-256 검증)를kit/.cache/에 다운로드합니다. 모든 프로젝트는 복사본을 받습니다. 렌더링도 cdn.jsdelivr.net에서 GSAP를 로드하므로 인터넷이 필요합니다. - redraw-video 사용 사례는 추가로 필요합니다(MediaPipe, ffmpeg):
USECASE.md를 참조하세요. 완료 조건:npx --yes hyperframes --version이 버전을 출력하고<스킬 Python> scripts/brushlib.py가p5.brush ... ok를 출력합니다.
2. 사용 사례 선택
| 사용 사례 | 제작 결과 | 시작 위치 |
|---|---|---|
explainer | 단계를 설명하는 스케치노트: 펜 드로잉, 화살표, 워시(wash), 손글씨 레이블, 빨간 마커 강조 | usecases/explainer/ |
story | 짧은 애니메이션 스토리: 행동하는 낙서 캐릭터(압축, 예측 동작, 눈, 눈썹), 수채화로 그려진 세계 | usecases/story/ |
redraw-video | 실제 인물 클립을 초당 12번 다시 그림(실크스크린 또는 수채화 방식), 실사에서 그림으로 전환 효과 포함 | usecases/redraw-video/ |
blank | 다른 모든 것, 또는 새로운 스타일: 한 줄 펜, 한 번 워시, 한 번 해칭(hatching), 손글씨 및 드로잉 키트 | usecases/blank/ |
아무 코드를 작성하기 전에 선택한 usecases/<이름>/USECASE.md를 읽으세요. 표에 없는 경우: blank에서 시작하고 references/p5brush-notes.md를 읽으세요.
완료 조건: 사용 사례가 선택되고 내용(단어, 비트, 길이, 9:16 또는 16:9)이 합의되었습니다.
3. 프로젝트 시작
<스킬 Python> scripts/new_project.py <사용 사례> "<Documents>/<새 폴더>"
프로젝트는 사용자의 Documents 폴더(절대 경로, Windows에서는 OneDrive 안일 수 있음)에 두고, 절대 스킬 폴더 안에 두지 마세요. 스킬 업데이트 시 해당 폴더가 교체됩니다. (--list는 사용 사례 목록을 보여줍니다.) redraw-video는 예외입니다. 자체 도구를 실행합니다(USECASE.md 참조).
완료 조건: 폴더에 index.html, assets/vendor/brush.js(HyperFrames 린트를 위해 패치된 p5.brush), assets/fonts/가 있어야 합니다.
4. 나만의 작품 만들기: 훌륭한 손그림 작업을 위한 규칙
이 규칙은 모든 사용 사례와 모든 새로운 스타일에 적용됩니다.
- 모든 프레임은 시간의 순수 함수입니다.
renderAt(t)는 매hf-seek마다 모든 것을 지우고 다시 그립니다.Math.random(),Date, 타이머 또는 애니메이션 프레임을 사용하지 마세요. - 요소당 하나의 시드 (각 요소 앞에
sd(id)). 아직 자라고 있는 선은 그 이후의 선 텍스처를 변경해서는 안 됩니다. - 펜이 먼저, 그림 물감이 따라옵니다. 외곽선이 먼저 그려지고, 워시가 바로 뒤에 페이드 인되며, 해칭은
brush.clip을 사용하여 왼쪽에서 오른쪽으로 드러납니다. 그림 물감은 페인트 순서에 따라 선 아래에 위치합니다. - 손 속도로 그립니다. 선 하나는 0.2-0.8초가 걸리며 느린 시작과 느린 끝을 가집니다. 손글씨는 글자당 약 0.04초입니다. 어떤 것도 한 번에 나타나지 않습니다.
- 비디오당 한 계열의 도구. 예: 펜 + 수채화 + 빨간 마커 하나. 종이 색상에 세 가지 또는 네 가지 잉크를 더합니다. 빨간색은 주목해야 할 한 가지에만 사용합니다.
- 불완전하지만, 모든 프레임에서 동일한 불완전함. 모서리를 지나치게 그리고 선을 고정된 사인 노이즈로 흔들리게 하되, 프레임마다 새로운 무작위성을 만들지 마세요. 예외: 의도적인 "끓어오름"(선이 반짝임)은 그리기당 새로운 시드를 사용하고 2-3프레임 동안 유지합니다(초당 8-12 드로잉).
- 단순한 형태가 디테일보다 빠르게 읽힙니다. 캐릭터는 동그란 머리, 점 눈, 하나의 입 선으로 이루어지며, 몸(압축, 예측 동작, 후속 동작)과 눈, 눈썹으로 연기합니다.
- 단어는 손으로 쓰고, 짧으며, 그림 옆에, 절대 그림 위에 두지 않습니다. 키트 글꼴은 Caveat(라틴어)입니다. 아랍어의 경우
assets/fonts/에 OFL 아랍어 글꼴을 추가하고@font-face로 선언하세요. - 짧고 안전하게 유지하세요. 클립당 5-12초. 9:16 기준으로 주요 그림과 단어는 상단에서 약 170px, 하단에서 400px 사이에 배치하세요(플랫폼 버튼 및 캡션 영역). 완료 조건: 장면이 합의된 내용을 표현하고 9가지 규칙을 따릅니다.
5. 확인 및 렌더링
npx --yes hyperframes lint: 오류 0개. "file too large" 경고는 단일 파일 장면의 경우 괜찮습니다.npx --yes hyperframes preview로 장면을 스크러빙하거나, 렌더링 후 시작, 중간, 끝 프레임을 확인하세요.npx --yes hyperframes render . -o renders/video.mp4.- 4단계의 규칙과 사용 사례 자체 검사에 대해 프레임을 확인하고, 수정 후 다시 렌더링하세요.
완료 조건:
renders/video.mp4가 존재하고 그 프레임이 검사를 통과합니다.
6. 사용 사례 추가 (스킬 확장)
usecases/<이름>/ 폴더에 다음을 만드세요:
index.html:assets/vendor/brush.js를 로드하고assets/fonts/에서 글꼴을 가져오는 작동하는 HyperFrames 컴포지션입니다(시작하려면blank를 복사하세요).USECASE.md: 언제 사용할지, 템플릿에서 무엇을 변경할지, 그리고 자체 확인 사항.new_project.py가 자동으로 이를 찾습니다. 2단계의 표에 행을 추가하세요.
한계
- p5.brush는 WebGL2가 필요합니다. HyperFrames는 Chrome에서 렌더링하며 Chrome은 WebGL2를 지원합니다.
- 수채화 채우기는 완전히 어둡게 할 수 없습니다(실제 수채화처럼). 어두운 영역은 워시를 사용하세요. 더 많은 함정은
references/p5brush-notes.md에 있습니다. - 리드로잉 사용 사례는 정면 또는 3/4 각도 얼굴의 한 사람에게 가장 잘 작동합니다.