xiaojinyu0426/doodle-music-reel

塗鴉音樂短片

格式：一張網格紙，一條黑線從上掃過。有人畫了一個波浪，那條線就會演奏它。他們加了一座小山，第二種樂器就加入進來。一根莖生長起來，你聽到它爬升。到最後，你會看到一幅完整的圖畫和一首完整的歌曲，而這兩者都來自於同樣的筆觸。沒有人說話，也沒有任何文字可讀。參考短片獲得了 1250 萬次觀看。

為什麼有效：兩個問題同時在腦中浮現——「這會變成什麼？」和「這聽起來會是什麼樣子？」。每一筆都同時回答了這兩個問題的一部分，因此沒有人會在圖畫完成前滑走，而最後 10 秒就是回報的時刻。

template/ 包含了引擎和 5 幅完成的圖畫。複製它，撰寫新的圖畫，執行一條指令。

格式的運作方式

根據參考短片逐影格測量。引擎遵循這些數字。

部分	運作方式
播放頭	從左到右掃描，然後跳回。一次掃描是 2 小節：在 100 BPM 下為 4.8 秒
線條高度	音高。底部到頂部三個八度，使用五聲音階，共 15 個音符
吸附	線條會吸附到最近音符，並在大約 60 毫秒內滑動過去，不產生新的起音
每次交叉	一個聲部，上面有一個黑點。播放頭交叉過的圓圈一次會發出 2 個音符
筆觸何時開始發聲	只有在筆通過播放頭之後。單獨繪畫不會產生聲音
顏色	每種顏色都是一種樂器。都是柔和的音色，接近純正弦波
音量	隨著聲部堆疊保持平穩，大約 -16 dB
順序	先是一道波浪橫跨頁面，然後是大形狀，接著是細節，圖層之間有 1 或 2 次掃描的聆聽間隔，最後大約 2 次掃描沒有新內容

步驟

1. 取得主題。 如果使用者沒有指定要畫什麼，從 drawings.md 提供 3 個選項，從會生長的東西開始。角落的標記是可選的，大多數短片沒有，所以只在他們要求時才加一個。
2. 複製範本： cp -r ~/.claude/skills/doodle-music-reel/template ~/doodle-reel && cd ~/doodle-reel && npm i puppeteer
3. 撰寫圖畫 在 drawings/<name>.js。先閱讀 drawings/sunflower.js，它是範例。規則如下。
4. 讀取歌曲： node make.cjs drawings/<name>.js --check。你聽不到它，所以這個音符表格就是你讀取它的方式。修正任何警告。請參閱「讀取音符表格」。
5. 查看它： node make.cjs drawings/<name>.js --stills 4,12,20,30,40 會將圖片寫入 out/<name>-stills/。選取橫跨影片長度的時間點（顯示在音符表格的第一行），最後一個時間點要在最後一筆之後。打開每一張圖片。檢查圖畫是否能被辨識為它想要表達的東西，沒有任何東西跑出頁面，且筆觸不會意外碰撞。
6. 渲染： node make.cjs drawings/<name>.js 寫出 out/<name>.mp4（大約 1 分鐘）。
7. 製作最終的聯絡表 並在交付前查看它：ffmpeg -i out/<name>.mp4 -vf "fps=1/3,scale=216:-1,tile=7x2" -frames:v 1 out/sheet.jpg
8. 告訴使用者開啟音量聆聽。 你可以讀取音符但聽不到混音，所以他們的耳朵有最終決定權。

撰寫圖畫

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,            // 一次掃描是 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 是每秒單位（預設 520）。gap 是之後的暫停（預設 0.22）。width 是像素（預設 10）。sharp: true 保留轉角。closed: true 將結尾連接到起點。wobble 是手抖程度（預設 2.2，0 為尺規般筆直）。

顏色（每種都是一種樂器）。 ink, red, orange, yellow, leaf, green, sky, blue, purple, pink, brown。

五聲音階中的高度。 這是 15 個階梯，間隔 88 單位，以 D 調為例。其他調號會改變名稱但保持高度。

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

兩個音符之間的線條是中點：1012 是 A3 和 B3 之間，1100 是 F#3 和 A3 之間。major 有 21 個階梯而不是 15 個，所以從音符表格中讀取其高度。

讓它變好的規則

第一筆橫跨整個頁面，停在兩個音符之間的線上。 E.wave(0, 1000, 1012, 34, 4) 在整個影片中在 A3 和 B3 之間搖擺。它是歌曲的地基。如果它停在一個音符上，會發出嗡嗡聲；如果它半途停下，歌曲就會有個空洞。

分層構建，先低後高。 地基，然後頁面中間的大形狀，最後是高處的細節。每個圖層都是一種新顏色。在一個圖層後等待 1 或 2 次掃描，讓人們聽到它添加了什麼。

畫緩慢生長的東西。 莖或樹幹的速度為 170-250，這樣人們會看著它爬升。輪廓的速度為 400-500。短線條的速度為 250-350。

形狀就是聲音。

• 一條長而平緩的線是持續的旋律。
• 一條接近垂直的線是快速奔流的音符，即播放頭擊中莖時的「嗚」聲。
• 一個圓圈是兩個音符的開合。小圓圈是快速的兩音符擊打，大圓圈是整個樂句。
• 一條短線是一個音符。位於節拍線（每 125 一個）上的短線會產生脈動。頁面底部是低音，頂部是高音。

同時保持 10 個或更少的聲部。 檢查時會印出數量，當超過時，它會指出導致問題的筆觸。每個筆觸如果停留在相同的 x 位置，聲部計數就會增加；因此在同一列堆疊形狀就會造成這個問題，深度起伏的輪廓也一樣，因為每個在 x 上折返的起伏都會增加聲部。超過 10 個就會變成模糊一片。將形狀側移，讓起伏變淺，或者切斷筆觸。

保持在 30-50 秒。 低於 30 秒，歌曲無法充分構築；超過 50 秒，人們會在結束前離開。長度會自動為你計算：最後一筆，向上取整到該次掃描結束，再加上 hold 次掃描。因此它會隨著圖畫而改變，並且總是在一次掃描結束時恰好看完。

它必須看起來像孩子的塗鴉。 簡單、可辨識、幾種顏色。如果需要加上標籤，那就畫別的東西。

讀取音符表格

--check 會為每筆輸出：顏色、繪製時間、橫跨多遠、產生多少聲部、以及演奏哪些音符。請檢查：

• 第一筆 有 2 個或更多音符，且 x 範圍為 0-1000。
• 筆觸分散 在低、中、高音符之間。如果所有東西都集中在一個八度，將一些形狀在頁面上上下移動。
• 你原本打算作為旋律的形狀有 3 個或更多音符。 只有一個音符的長線是持續音。給它更多高度，或者移動它使其穿過音符線。
• 「掃描的靜音部分」為 0 或接近 0。
• 最後一筆結束 大約在影片結束前 2 次掃描。

修正問題

• 圖畫看起來不對： 改變點並重新執行 --stills。只需幾秒鐘，所以可以重複幾次。
• 某個部分聽起來很薄弱： 添加一個短線圖層，或者用新顏色在頁面上添加一條低音線。
• 缺少 Puppeteer： 在包含 make.cjs 的資料夾中執行 npm i puppeteer。
• 缺少 ffmpeg： 安裝它（在 Mac 上是 brew install ffmpeg）。--check 和 --sound 在沒有它的情況下也能運作，但影片需要它。

保持原創

複製這個格式，並製作你自己的圖畫。不要使用其他創作者的名稱、他們的圖畫或他們的應用程式畫面，也不要在影片上放置未經賺取的觀看次數。