ドゥードゥルミュージックリール

フォーマット：方眼紙のシートと、それを横切る黒い線。誰かが波を描くと、その線がそれを演奏する。丘を追加すると、第二の楽器が加わる。茎が伸びると、それが登っていくのが聞こえる。最後には全体の絵と全体の曲が完成し、両方が同じ線から生まれている。誰も話さず、読むものもない。参考リールは1250万回再生を記録した。

なぜ効果的なのか：「これは何になるのか？」と「これはどんな音になるのか？」という2つの疑問が同時に進行する。新しい線が描かれるたびに両方の答えが少しずつ明らかになり、誰も絵が完成するまでスワイプしない。そして最後の10秒が報酬となる。

template/ にはエンジンと5つの完成した描画が含まれている。これをコピーし、新しい描画を書き、1つのコマンドを実行する。

フォーマットの仕組み

参考リールからフレーム単位で計測。エンジンは以下の数値に従う。

パーツ	動作
再生ヘッド	左から右へスイープし、その後ジャンプして戻る。1スイープは2小節：100 BPMで4.8秒
線の高さ	ピッチ。下から上へ3オクターブのペンタトニックスケール、15音
スナップ	線は最も近い音にスナップし、約60ミリ秒でそこにスライドする。新しいアタックは発生しない
各交差点	1つの声部。黒い点が付く。円を再生ヘッドが横切ると2音が同時に鳴る
線が音を出し始めるタイミング	ペンが再生ヘッドを通過した後のみ。描画だけでは音は出ない
色	各色は1つの楽器。すべて柔らかい音色で、純粋なサイン波に近い
レベル	声部が重なっても一定に保たれ、約-16 dB
順序	ページ全体を横切る波、次に大きな形状、その後にディテール。各レイヤーの間に1～2スイープのリスニング時間を入れ、最後に新しい要素がない状態で約2スイープ

手順

主題を決める。 ユーザーが何を描いてほしいか言っていない場合、drawings.md から3つ提示する。最初は成長するものから始める。コーナーのハンドルはオプションで、ほとんどのリールにはないため、ユーザーが要求した場合のみ追加する。
テンプレートをコピーする： cp -r ~/.claude/skills/doodle-music-reel/template ~/doodle-reel && cd ~/doodle-reel && npm i puppeteer
描画を書く： drawings/<name>.js に記述する。最初に drawings/sunflower.js を読むこと。これがモデルである。ルールは以下に記載。
曲を読む： node make.cjs drawings/<name>.js --check を実行する。音は聞こえないため、このノートテーブルで読む。警告があれば修正する。「ノートテーブルの読み方」を参照。
見てみる： node make.cjs drawings/<name>.js --stills 4,12,20,30,40 を実行すると、out/<name>-stills/ に画像が書き出される。ノートテーブルの最初の行に表示される動画全体の長さにわたる時間を選び、最後の1枚は最後のストロークの後にする。すべてを開く。描画が意図したものとして読めるか、ページからはみ出していないか、ストロークが偶然衝突していないかを確認する。
レンダリング： node make.cjs drawings/<name>.js を実行すると、out/<name>.mp4（約1分）が書き出される。
最終結果のコンタクトシートを作成し、受け渡す前に確認する： ffmpeg -i out/<name>.mp4 -vf "fps=1/3,scale=216:-1,tile=7x2" -frames:v 1 out/sheet.jpg
ユーザーに音をオンにして聞くように伝える。 あなたはノートを読めるがミックスは聞こえないため、ユーザーの耳が最終判断を下す。

描画の書き方

DRAW((E) => ({
  name: 'snail',       // 出力ファイル名
  key: 'D',            // 任意のキー：C, C#, D, Eb, E, F, F#, G, Ab, A, Bb, B
  scale: 'pentatonic', // pentatonic（明るい）, minor（陰鬱）, major（7音、ぶつかる可能性あり）
  bpm: 100,            // 1スイープは8ビート
  hold: 2,             // 新しい要素がないまま終了するスイープ数
  // handle: '@yourapp',
  steps: [
    E.stroke('blue', E.wave(0, 1000, 1012, 34, 4), { speed: 430 }),
    E.wait(1.2),       // 秒、または E.wait('wrap') で次のスイープまで待つ
    E.stroke('green', [[500, 1000], [490, 800], [510, 600]], { speed: 200, width: 12 }),
  ],
}))

ページは 幅1000、高さ1320 で、y = 0 が上部。x はノートが鳴るタイミング、y はどのノートかを示す。

点と形状。 ストロークに4〜8個の点を与えると、滑らかな手描きの曲線になる。

E.wave(x0, x1, y, amp, bumps, seed) 波線
E.circle(cx, cy, r, startDeg, seed) および E.oval(cx, cy, rx, ry, startDeg, seed) 手描きの円/楕円。終点は始点を越えて描かれる。startDeg はペンが着地する位置：-90で上部、0で右。デフォルトは-100
E.leaf(x0, y0, x1, y1, fat) 基部から先端へ往復するループ
E.line(x0, y0, x1, y1) および E.arc(cx, cy, r, deg0, deg1)
E.path(svgPathString, { fit: [x0, y0, x1, y1] }) 任意のSVG輪郭。{ sharp: true } を指定して描画
その他は自分で点のリストを記述する。雲の場合は、sunflower.js の10個の点をコピーして移動する

ストロークオプション。 speed は1秒あたりの単位（デフォルト520）。gap はその後のポーズ（デフォルト0.22）。width はピクセル単位（デフォルト10）。sharp: true で角を保持。closed: true で終点を始点に接続。wobble は手ブレ（デフォルト2.2、0で定規のように真っ直ぐ）。

色（それぞれが1つの楽器）。 ink, red, orange, yellow, leaf, green, sky, blue, purple, pink, brown。

ペンタトニックスケールの高さ。 キーDの場合、以下の15段階で、88単位間隔。他のキーでは名前が変わり高さは同じ。

y	ノート	y	ノート	y	ノート
0	D6	440	D5	880	D4
88	B5	528	B4	968	B3
176	A5	616	A4	1056	A3
264	F#5	704	F#4	1144	F#3
352	E5	792	E4	1232	E3
				1320	D3

2つのノートの中間は中間点：1012はA3とB3の間、1100はF#3とA3の間。major は15段階ではなく21段階なので、ノートテーブルで高さを読むこと。

良いものにするためのルール

最初のストロークはページ全体を横切り、2つのノートの中間線上にあること。 E.wave(0, 1000, 1012, 34, 4) は動画全体を通してA3とB3の間を行き来する。これが曲の基盤となる。1つのノートに留まるとドローンになり、途中で止まると曲に穴ができる。

低いものから高いものへ、レイヤーで構築する。 基盤、次にページ中央の大きな形状、次に上部のディテール。各レイヤーは新しい1色。レイヤーの後に1〜2スイープ待ち、何が追加されたかを人々が聞こえるようにする。

ゆっくり成長するものを描く。 茎や幹には速度170〜250で、人々が登っていくのを見守る。輪郭には速度400〜500。短いダッシュには速度250〜350。

形状は音である。

長く緩やかな線は持続するメロディー。
ほぼ垂直な線は速い音の連なり、再生ヘッドが茎に当たったときの「ウープ」音。
円は開閉する2音。小さい円は素早い2音ヒット、大きい円はフレーズ全体。
短いダッシュは1音。ビートライン（125ごと）上のダッシュはパルスを作る。ページの下部はベース、上部はきらめき。

同時に保持する声部は10以下に抑える。 チェックで数が表示され、超えた場合は原因のストロークが名前で示される。声部数は、同じxの上にあるすべてのストロークで増加するため、1列に形状を積み重ねると増加する。また、深い起伏のある輪郭も、xで折り返す各起伏が声部を追加するため注意。10を超えると濁る。形状を横にずらす、起伏を浅くする、またはストロークを分割する。

30〜50秒に収める。 30秒未満だと曲が構築されず、50秒を超えると人々は終わる前に離脱する。長さは自動計算される：最後のストロークがそのスイープの終わりに切り上げられ、さらに hold スイープ分が加算される。そのため、描画が変わると長さも変わり、常にスイープが終了するタイミングで終わる。

子供の絵のように見えなければならない。 シンプルで、認識しやすく、数色。ラベルが必要なら、別のものを描く。

ノートテーブルの読み方

--check はストロークごとに1行を出力する：色、描画タイミング、横方向の範囲、生成する声部数、演奏するノート。以下を確認する：

ストローク #1 は2つ以上のノートを持ち、x 0〜1000にわたって実行されている。
ストロークは低音、中音、高音に分散している。 すべてが1オクターブに収まっている場合、一部の形状を上下に移動する。
メロディーとして意図した形状は3つ以上のノートを持っている。 1音だけの長い線はドローンになる。高さを増やすか、ノートラインを横切るようにシフトする。
「スイープの無音部分」は0またはそれに近い。
最後のストロークは 動画終了の約2スイープ前で終わっている。

問題の修正

描画がおかしい： 点を変更して --stills を再実行する。数秒で完了するので、数回繰り返す。
セクションが薄く聞こえる： ダッシュレイヤーを追加するか、新しい色でページ全体に低い線を追加する。
Puppeteerが見つからない： make.cjs があるフォルダで npm i puppeteer を実行する。
ffmpegが見つからない： インストールする（Macの場合 brew install ffmpeg）。--check と --sound はffmpegなしで動作するが、動画には必要。

あなた自身のものとして保持する

フォーマットをコピーして、自分自身の描画を作成してください。他のクリエイターのハンドル、彼らの描画、または彼らのアプリの画面を使用しないでください。また、獲得していない視聴回数を動画に表示しないでください。

doodle-music-reel