ouerf-man/hand-drawn-video

手書き動画

画面上のすべては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.mdのステップ5でPython 3.10～3.12から作成します。以下のすべてのコマンドでこれを使用します。存在しない場合は、INSTALL.mdのステップ4～7を実行してください。システムのPythonにはpip installを実行しないでください（Homebrew Pythonは拒否します）。Macではコマンドはpython3であり、pythonではありません。
• インターネット：初回のみ、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	ステップを説明するスケッチノート：ペン画、矢印、淡い塗り、手書きラベル、赤マーカーの効果	usecases/explainer/
story	短いアニメーションストーリー：アクション（スクイーズ、アンティシペーション、目、眉）をする落書きキャラクターと水彩で描かれた世界	usecases/story/
redraw-video	実際の人物クリップを1秒間に12回（スクリーン印刷調または水彩調）でリドローし、実写から手書きへのワイプ効果付き	usecases/redraw-video/
blank	その他のスタイル、または新しいスタイル用：ペン線1本、淡い塗り1つ、ハッチング1つ、手書き文字、描画キット	usecases/blank/

何かを書き始める前に、選択したusecases/<name>/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のlint用にパッチ適用されたp5.brush）、assets/fonts/が存在すること。

4. 自分だけの作品に仕上げる：優れた手書き作品のためのルール

これらのルールはすべてのユースケースと新しいスタイルに適用されます。

1. すべてのフレームは時間の純粋な関数です。 renderAt(t)はhf-seekごとにすべてをクリアして再描画します。Math.random()、Date、タイマー、アニメーションフレームは使用しないでください。
2. 要素ごとに1つのシード（各要素の前にsd(id)）。成長中のストロークは、後続のストロークのテクスチャを変更してはいけません。
3. ペンが先導し、塗りが続きます。 輪郭が最初に描画され、その直後に淡い塗りがフェードインし、ハッチングはbrush.clipで左から右に現れます。淡い塗りはペイント順に線の下に配置されます。
4. 手の速度で描きます。 ストロークは0.2～0.8秒かけて、イーズイン・イーズアウトします。手書き文字は1文字あたり約0.04秒です。何も一度にすべて表示されてはいけません。
5. 動画ごとに1つのツールファミリー。 例：ペン＋水彩＋赤マーカー1つ。3～4種類のインクに加え、紙の色。赤は注目させたいものだけに使用します。
6. 不完全だが、毎フレーム同じ不完全さ。 角のオーバーシュートや線のゆがみは固定のサイン波ノイズで処理し、フレームごとに新しいランダム性は使わないでください。例外：意図的な「ボイル」（線がきらめく効果）では、描画ごとに新しいシードを使用し、2～3フレーム（1秒間に8～12描画）保持します。
7. シンプルな形状ほど早く読み取れます。 キャラクターは丸い頭、点の目、一本の口の線で構成し、体（スクイーズ、アンティシペーション、フォロースルー）と目と眉で演技します。
8. 文字は手書きで、短く、描画の横に配置し、決して描画の上に重ねません。 キットのフォントはCaveat（ラテン文字用）です。アラビア語の場合は、OFL準拠のアラビアフォントをassets/fonts/に追加し、@font-faceで宣言してください。
9. 短く安全に。 クリップあたり5～12秒。9:16の場合、キーとなる描画と文字は上から約170px、下から約400pxの範囲内に収めてください（プラットフォームのボタンやキャプションのため）。 完了条件：シーンが合意した内容を表現し、9つのルールに従っていること。

5. 確認とレンダリング

• npx --yes hyperframes lint：エラー0件。「ファイルが大きすぎる」という警告は単一ファイルシーンでは許容されます。
• npx --yes hyperframes previewでシーク確認、またはレンダリングして最初、中間、最後のフレームを確認します。
• npx --yes hyperframes render . -o renders/video.mp4。
• フレームをステップ4のルールとユースケース固有のチェックに照らして確認し、修正して再度レンダリングします。 完了条件：renders/video.mp4が存在し、そのフレームがチェックに合格すること。

6. ユースケースを追加する（スキルの拡張）

usecases/<name>/に以下を作成します。

• 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を参照。
• redrawユースケースは、正面または斜め向きの1人の人物に最適です。