KKcorps/code-film

코드로 그려진 영화(code-drawn films)

이 스킬은 (f, seed)에서 프레임 f를 그리는 하나의 HTML 페이지와, 동일한 방식으로 계산된 사운드트랙, 그리고 MP4를 만듭니다. 영화가 무엇에 관한 것인지, 어떻게 보이고 움직이는지는 여러분이 결정합니다. 이 스킬은 세 가지를 담고 있습니다: 먼저 작성하는 의도(intent), 여러분이 판단하는 기준이 되는 취향(taste), 그리고 완성된 영화가 의도를 충족했는지 확인하는 검증(checks)입니다.

설정

새 머신에서 bash assets/doctor.sh를 한 번 실행합니다. Chrome(또는 CHROME 경로), Node 22 이상, ffmpeg, Python 3 및 numpy와 Pillow가 설치되어 있는지 확인하고, 누락된 항목을 해결하는 방법을 알려줍니다.

1. 의도 쓰기

assets/intent.md를 페이지 옆에 piece.intent.md로 복사합니다. 먼저 핵심 메시지(takeaway)와 감정(feeling)을 작성합니다: 한 번 본 후 새로운 시청자가 말할 수 있는 것과, 영화가 끝날 때 느끼는 감정입니다. 스케치가 선택될 때까지 나머지는 비워둡니다. 먼저 작성된 카드는 아이디어를 고정시키고, 스케치는 그 아이디어의 외형만 바꿀 수 있기 때문입니다. 이것이 바로 ledger(원장) 영화의 세 가지 스케치가 하나의 아이디어를 세 가지 다른 겉모습으로 표현한 방법입니다.

스케치가 선택되면 카드를 완성합니다. Judged 라인에는 우리가 따를 것, 주제가 줄 수 있는 유일한 포인트, 외형과 그 이유, 텍스트의 유무와 방식, 배우는 갤러리 영화들, 끝이 시작에 어떻게 답하는지가 포함됩니다. Measured 라인에는 길이, 템포, 사운드와 비트가 포함됩니다. 이후의 모든 선택은 이 카드를 따릅니다. 작업 결과 카드가 잘못되었음을 보여주면 카드를 변경하고 그 사실을 명시합니다.

2. 갤러리로 판단하기

reference/gallery.md에는 Claude가 모든 프레임을 코드로 그린 29편의 영화(뮤직, 설명, 스토리, 실험)와, 좋은 평가를 받은 영화들의 공통점이 담겨 있습니다:

• 모든 장면을 관통하는 하나의 대상이 있습니다.
• 모든 그림은 무언가를 말합니다. 단지 다양성을 위해 존재하는 그림은 없습니다.
• 시작했던 곳에서 변화하여 끝납니다.
• 현재 위치를 보여주는 무언가가 있습니다: 게이지, 카운터, 시계.
• 외형은 실제 재료이며, 그 결함과 함께 사용되고, 이 이야기를 위해 선택되었습니다.
• 소리와 그림은 하나입니다.
• 텍스트는 드물고, 크며, 세계의 일부입니다.
• 관점과 약간의 온기가 있습니다.
• 아이디어만큼 짧습니다.

이것은 규칙이 아니라 판단입니다. 카드에 이유가 있다면 하나를 깨도 됩니다. reference/taste.md에는 이 스킬의 작성자인 Kartik이 제작 과정에서 수정한 내용이 담겨 있습니다: 시작점이 되는 취향이지, 여러분의 취향이 아닙니다. 갤러리와 의견이 다르면 그 사실을 말하고 영화를 만드는 사람에게 물어보세요.

3. 결과물 검증하기

전달 노트(delivery note)에 세 가지 계층을 모두 보고합니다.

• 결함은 빌드를 막습니다. 페이지가 파싱되고, 실행되며, 매번 같은 프레임을 그립니다. 어떤 프레임도 깜빡이거나 컷에서 튀어나오지 않습니다. 믹스는 -28에서 -8 dBFS 사이이며 클리핑되지 않습니다. check.py, seamcheck.py, verify.py 및 build.sh가 이를 강제합니다.
• 의도가 측정됩니다. python3 assets/verify.py piece.mp4는 카드의 Measured 라인을 확인합니다. 불일치는 영화나 카드가 잘못되었음을 의미합니다. 하나를 수정하고 어떤 것인지 명시합니다.
• 시청 테스트는 여러분의 몫입니다. 모든 줄을 두 번 체크해도 여전히 나쁠 수 있습니다. verify.py가 출력하는 다섯 가지 질문에 답하세요: 새로운 시청자처럼 다시 이야기하기, 모든 타일 이름 붙이기, 음소거로 보기, 갤러리 영화 옆에 놓고 보기, 마지막 프레임 판단하기.

lookcheck.py와 soundcheck.py는 절대 빌드를 막지 않습니다. 템포, 색상, 싱크, 비트를 설명하며, 여러분이 카드와 대조해 읽습니다.

워크플로우

각 단계에는 보고 라인이 있어, 어떻게 했는지 말하지 않고 체크할 수 없습니다.

0. 참조를 공유받았다면 먼저 분석합니다. 클립, 정지 이미지 또는 HTML 페이지 모두 해당됩니다. reference/references.md를 읽습니다. 어떤 형식인지, 무엇을 하는지, 어떤 차이를 좁힐 수 있는지, 무엇을 가져가고 남길지 보고합니다.
1. 핵심 메시지와 감정을 작성합니다. 이 두 줄만 작성합니다. 보고합니다.
2. 가장 가까운 갤러리 영화 두세 편을 처음부터 끝까지 시청합니다. 각 영화에서 무엇을 가져가고, 무엇을 복사하지 않을지 보고합니다.
3. 세 가지 다른 이야기를 스틸 이미지로 스케치합니다. 각각은 다른 사건을 한 줄로 표현한 것이며, 같은 아이디어를 세 가지 외형으로 만든 것이 아닙니다. 적어도 하나는 시청자가 살 수 있는 세계여야 하며, 다이어그램이 아니어야 합니다. 각각을 엔진과 인쇄 마감재를 사용하여 완성된 외형으로 그리며, 와이어프레임으로 그리지 않습니다. 스케치는 결함 검사를 건너뛰지만, 장인정신은 건너뛰지 않습니다. assets/sketchcheck.py는 평면적인 스케치나, 승인된 프레임을 --refs로 주었을 때 복사본을 실패 처리합니다. 대상자에게 보여주고 선택하거나 혼합하도록 합니다. 각 이야기의 한 줄을 보고합니다. 그런 다음 카드를 완성합니다.
4. 단어가 있다면 작성합니다. 단락 하나, 하나의 목소리로, 코드보다 먼저 piece.chain.txt로 저장합니다. reference/story.md에서 "목소리처럼 읽히는 단어" 부분을 읽습니다. 단락과 연결 비율(connective ratio)을 보고합니다.
5. 계획을 세웁니다. 순서대로 비트, 각 그림이 의미하는 바를 한 줄로, 현재 위치를 보여주는 것, 결말을 포함합니다. 계획을 보고합니다. 계획은 계약이 아닙니다.
6. 페이지를 빌드합니다. assets/engine.html에서 시작하거나, 아래 계약 조건에 맞춰 자신만의 페이지를 작성합니다. 각 장면을 연결하기 전에 따로 확인합니다. 보고한 후에 다시 그린 내용을 보고합니다.
7. 사운드를 만듭니다. 먼저 TUNE과 SECTIONS에 곡조를 작성한 다음, 이야기의 전환을 위한 4~8개의 악센트를 추가합니다. 또는 자체 piece.score.py, 페이지가 생성하는 piece.wav, 또는 무음을 사용할 수 있습니다. score.py가 출력하는 곡조 시트(tune sheet)와 사운드가 카드에 적합한 이유를 보고합니다.
8. 빌드합니다. assets/build.sh piece.html out.mp4. 앞에 ROUGH=1을 붙이면 초안을 일찍 보여줄 수 있습니다. 숫자를 보고합니다.
9. 검증합니다. 세 가지 계층 모두. 각각을 보고합니다.
10. 새 파일로 전달합니다. 마지막 빌드를 덮어쓰지 마십시오.

한 영화에 두 가지 외형

영화는 리소그래프 장면과 잉크 원장(ledger)처럼 두 렌더러 사이를 전환할 수 있습니다. 두 번째 렌더러에 자체 스코프를 부여하고, { raw: (ctx, u, f, size) => {} } 플레이트 옵션으로 액트를 그리고, EXTRA_CUTS에 컷을 넣습니다. assets/examples/parcel42-day/가 정확히 이 작업을 수행합니다. 또한 전체 워크플로우의 표준 작업 예제이므로 README를 읽고, 방법(method)에 대해 읽되 외형(look)을 복사하지 마십시오.

페이지 계약 조건

이 조건을 충족하는 모든 페이지는 빌드 및 검증됩니다. const FPS = n을 설정합니다. ?capture=1에서는 window.__frames를 프레임 수로 설정하고 window.__render(f)가 프레임 f를 매번 동일하게 그리도록 한 다음, 제목을 capture ready N으로 설정합니다. 첫 번째 스크립트 라인은 오류를 document.title에 기록하여 충돌이 빈 페이지처럼 보이지 않도록 합니다.

엔진을 기반으로 빌드된 페이지는 ?play=1, ?f=N, ?grid=1, ?scene=id 및 ?cuts=1도 지원하며, score.py는 plate()에서 액트를 읽습니다.

파일 목록

파일	설명
assets/intent.md	의도 카드 템플릿
assets/engine.html	선택적 시작점: 프레임 그리드, 액트와 셔츠, 장면 라이브러리, 이동, 리소그래프 프레스, 손글씨 펜, 세 가지 데모 세계
assets/score.py	페이지의 비트 그리드에 기반한 계산된 점수. 악곡별 조성, 화성, 악기 구성, 스윙 및 엔딩 포함
assets/build.sh	게이트, 캡처, 심 검사, 점수, 인코딩, 측정, 검증을 하나의 명령으로
assets/verify.py	영화와 의도 카드 비교, 라우드니스 및 클리핑 검사, 시청 테스트 질문
assets/check.py	페이지 게이트: 파싱, 오류 처리기, 모드, 그리드, 렌더링
assets/seamcheck.py	깜빡임, 컷에서 튀어나옴, 이동 중 덜컹거림, 움직이는 앵커 표류
assets/sketchcheck.py	스토리 스케치: 평면적이지 않음, 승인된 프레임 복사 아님(--refs), 금지된 세계 없음(--world), 남은 스텁 없음
assets/lookcheck.py, assets/soundcheck.py	그림과 사운드 측정값. 카드 및 갤러리와 대조하여 읽음
assets/printcheck.py	프레임이 인쇄되었는지 계산되었는지 참조 이미지와 비교. 와이드 프레임을 중앙 크롭하여 정사각형으로 만듦
assets/refpage.mjs	HTML 페이지인 참조를 분석: 팔레트, 마크, 레이어 및 오디오 키트를 그리는 대로 추출하고, 클립 검사가 작동하도록 MP4도 생성
assets/capture.mjs	CDP를 통한 프레임 캡처. build.sh가 호출
assets/capture-range.mjs, assets/capture-par.sh	모든 너비와 높이로, 여러 Chrome에서 동시에 캡처. 16:9 및 1분 이상 영화용
assets/doctor.sh	머신 준비 상태 확인: Chrome, Node 22+, ffmpeg, numpy, Pillow
assets/examples/parcel42-day/	승인된 영화의 소스. 제작 방법에 대한 README 포함
assets/example-print-still.html	리소그래프 마감 모델

언제 무엇을 읽을지

각 파일 전체를 한 번의 호출로 읽습니다. Codex 실행은 출력 한도 아래에서 호출당 세 개 또는 네 개의 스킬 파일을 읽었습니다. 읽기 중간에 약 13k 토큰을 인지하지 못한 채 손실했으며, 여기에는 gallery.md의 절반도 포함되었습니다. 읽기 시 토큰이 잘렸다는 메시지가 표시되면 해당 파일을 단독으로 다시 읽으십시오.

• 의도 카드 전과 무엇이든 보여주기 전에, reference/gallery.md를 읽습니다. 그런 다음 reference/taste.md를 읽습니다.
• 참조 클립, 정지 이미지 또는 HTML 페이지를 공유받았을 때, reference/references.md를 읽습니다.
• 스토리를 계획하거나 캡션을 작성할 때, reference/story.md를 읽습니다.
• 그림과 소리가 비트 그리드를 공유할 때, reference/time.md를 읽습니다.
• 전환이나 카메라를 계획할 때, reference/moves.md를 읽습니다.
• 외형이 리소그래프 또는 인쇄물일 때, reference/press.md를 읽고, 텍스처 조정 전에 reference/surface.md를 읽습니다.
• 손글씨를 추가할 때, reference/hand.md를 읽습니다.
• 사운드를 만들 때, reference/sound.md를 읽습니다.
• 빌드할 때, reference/export.md를 읽습니다.
• 영화가 1분을 초과할 때, reference/export.md의 끝을 읽습니다.
• 영화가 YouTube용 나레이션 강의일 때, 이 스킬을 기반으로 하는 lesson-film 스킬을 사용합니다.
• 함정(traps): 지금까지 이 스킬이 고장난 모든 경우에 대한 체크리스트(단계별). 카드와 스케치 전, 그리고 무엇이든 보여주기 전에 reference/traps-story.md. 페이지를 빌드하기 전에 reference/traps-page.md. 이동, 카메라 또는 비트 그리드를 계획할 때 reference/traps-motion.md. 외형이 인쇄물일 때 reference/traps-print.md. 사운드를 만들 때 reference/traps-sound.md. 첫 번째 전체 빌드 전에 reference/traps-build.md.

이 스킬 변경하기

의도와 판단을 명시하고, 결과물이 의도에 부합하는지 확인합니다. 한 영화의 스타일을 규칙으로 만들지 마십시오: 그렇게 하면 모든 작품이 하나의 참조를 복사한 것이 됩니다. 교훈은 그것을 소유한 하나의 파일에 들어가고, 다른 모든 파일은 그 파일을 한 줄로 가리킵니다. 누군가 승인한 새로운 영화는 갤러리의 Ours 섹션에, 왜 효과가 있는지와 함께 들어갑니다.

감사의 말 (차용)

평면 채우기-클리핑 마감 모델과 wob, crayon, hatch, grain, dotScreen 및 scribble의 형태는 alesha-pro의 hand-drawn-canvas-animation 스킬(MIT, github.com/alesha-pro/tools)에서 가져왔습니다. 텍스처가 그라데이션이 아닌 마감재이며, 도형의 채우기와 외곽선이 절대 일치해서는 안 된다는 규칙이 이 스킬의 인쇄 외형을 가능하게 한 핵심입니다.

좋은 결과물의 기준

새로운 시청자가 한 번 보고 다시 이야기할 수 있으며, 그 이야기가 핵심 메시지와 일치합니다. 연속 사진(contact sheet)의 모든 타일은 의미 있는 것을 보여주는 그림입니다. 갤러리 영화 옆에 놓여도 복사본처럼 보이지 않아야 합니다. 마지막 프레임이 영화를 끝냅니다. 결함은 0이며, 카드와 일치하고, 여러분이 어쨌든 시청한 것입니다.