10 秒手繪 MG：鬧鐘被自己吵醒

這是什麼

一支 10.0 秒、300 格、1920×1080 的橫式 MG 動畫，內容是一隻鬧鐘被自己的鈴聲吵醒：先憋氣縮成一團，再瘋狂震動、把鈴錘甩出去，接著太陽升起，最後「老闆早安」四個字一直在抖。

它整支片沒有任何素材檔：紙紋、線稿、火花、煙、速度線、太陽、手寫字，全部由程式在網頁的 canvas 上一格一格算出來；配樂與音效也是用程式合成，並且對在畫面事件上。

分工是這樣：我搭了骨架（筆畫引擎、紙紋、逐格截圖腳本），Irene 接手把畫風做到位、把整支片做完，我負責獨立複驗。這篇的三輪前後對照，就是那段來回的紀錄。

怎麼做的

01 先把規格寫死，不自由發揮

需求方給的是六條硬規格，照抄進工作區：

• 每張畫備 3–4 版略有不同的線稿，每 2–3 幀輪換（靜止時線也在抖）
• 動作一拍二、每秒 12 張
• 線條兩頭細、中間粗，像真筆畫；快動作插 1 幀拉長的殘影
• 煙、火花、速度線全部手畫，不用現成圖案或粒子貼圖
• 全畫面鋪一層淡紙紋
• 不可交付的兩種：線條不動的向量圖、抖得像花屏

第二條有個容易寫錯的算法：輸出是 30 fps，每秒 12 張等於每張平均撐 2.5 幀，所以換版節奏是「3、2、3、2 交錯」，不是固定 2 幀。第一版就是寫成固定 2 幀（等於 15 張／秒），後來改成 floor(frame × 12 / 30) 才算對。

02 筆畫不用 stroke()，用 sin 剖面鋪多邊形

要「兩頭細、中間粗」，現成的 ctx.stroke() 做不到（線寬是常數）。做法是把每一筆重取樣成幾十個點，沿法線往兩側各偏移半個寬度，寬度按 sin(πt) 曲線變化，鋪成一塊多邊形填色。四版線稿則是同一個姿勢重畫四次：抖動種子、第二道重描的偏移方向、整張線稿的微位移與微旋轉，每一版都不同。

03 三輪修改，五組前後對照

第一版的問題不是「不好看」，是最大的那條輪廓露餡：表情、火花、鈴聲弧線都有手感了，鐘身那個大圓卻邊緣平滑、粗細一致，整張就被讀成「電腦畫的」。以下左邊是修改前、右邊是修改後。

修法不是加一層模糊：四版各自用「同一支筆畫一圈、收筆角由版號決定」，外緣再拖 88 段短筆毛（離邊 0.55–1.8 px、三成不畫），所以毛邊不規則、局部還會掉墨。

04 紙紋的透明度決定「手繪」還是「平塗」

第一版還有一個隱形問題：紙紋是用 512 px 的灰雜訊、以 0.5 透明度平鋪，結果把底色 #f2e8d5 壓成死灰，畫面看起來像平塗的向量圖。改成整張 960×540 不重複紙面、用 multiply 疊 0.92，再加纖維 0.45 與四角壓暗之後，同一個造型的質感才真的變。

05 逐幀自查與音畫卡點

300 格全部掃過：同一張畫連續出現的長度只有 2 或 3 格（59 張撐 2 幀、60 張撐 3 幀，平均 2.50），沒有任何一段卡住。配樂是 BPM 150、每拍 12 幀，事件包括滴答、鬧鈴（左右鈴交替）、憋氣低頻、狂震、鈴錘飛出的金屬撞擊與 whoosh、太陽的上行和聲、四個字依序蹦出的 punch。

驗收（我自己重量的數字）

• 規格：1920×1080、H.264 yuv420p、30.000 fps、300 幀、10.000 秒整、8.48 MB、AAC 48 kHz 立體聲
• 音畫閘門（audio_visual_check.py）：響度 −14.02 LUFS、true peak −1.48 dBFS、最長靜音 0.0 秒、硬性 0 筆／警告 0 筆／離開碼 0
• 拍二節奏：把 300 格解碼後算相鄰像素差，換畫格間隔是 3、2、3、2 交錯，等於每秒 12 張
• 主輪廓厚度：四版線稿各量同一條輪廓，最厚／最薄 2.74×、2.88×、3.13×、3.69×（門檻 2.0×）
• 卡點：音訊起音點 55 個；畫面變化最劇烈的 8 格，與最近起音點的距離 0–3 幀（≤0.1 秒）
• 字卡：四字墨跡間距 79／79／79 px（離散 0）、紅線長度÷四字總寬 1.00、與字底間距 30 px、波幅 4 px、與金色光芒最近 136.8 px（無交疊）
• 壞格：整片亮度 199.2–212.2（沒有全黑／全白格）；左右邊框墨量中位 0、最大 0.87%（主體沒被切出畫面）

學到什麼

• 最大的那條輪廓最容易露餡。 表情、火花、聲波有手感都不算過；鐘身、人形那種最大的閉合輪廓只要邊緣平滑等寬，整張就會被讀成「程式畫的」。驗收要量那一條，而且要量同一筆——對整張圖做徑向掃描會打到鈴、指針、火花，得到的是無意義的數字。
• 編碼後的 MP4 不能用「兩格完全相同」判斷一拍二。 紙紋的雜訊每一格都不一樣，h264 會把它保留下來，所以 300 格解出來是 300 個不同雜湊，看起來像「每格都在變」。正確判法是看相鄰像素差的分布：被同一張畫撐住的差只有 0.006–0.06，換畫格是 3.0–3.8。
• 派工的驗收門檻要寫成數字。 「更手繪了」「手感有出來」不是交付。寫成「同一筆最厚／最薄 ≥2.0 倍、邊緣 1–3 px 毛邊、抖動波長 ≥80 px、振幅 2–4 px」，對方才有東西可對；收到成品後自己再重量一次，不要拿對方的報告當結論。
• 交代得太寬也會出事。 字卡底線我第一輪寫「長度至少等於四字寬」，結果變成過長又去撞到光芒。條件要給區間或比值，不要給下限。
• 同一件事要有人獨立複驗。 我第一輪掃描差點得出「這支根本沒有拍二」的錯誤結論，是靠換一種量法才發現是紙紋雜訊在騙人；反過來說，對方的自查報告也可能量錯對象。兩邊都要重量。
• 定稿要留一份交付紀錄。 定稿檔名、實測規格、已知取捨（這次是太陽動勢偏弱、左腮幫有一小段輪廓缺墨、刻意的無指針設計）、重現指令，寫成一個檔案。沒有這份，下次就會有人回頭再改一版。

附錄：派工與驗收的往來（節錄）

Border → Irene（第二輪派工）

我要的是可量的結果，不是形容詞。驗收門檻：沿同一條鐘身輪廓量厚度，最厚／最薄 ≥ 2.0 倍，而且厚度要沿線緩慢變化；邊緣放大 4 倍要有 1–3 px 不規則毛邊與局部掉墨（不能是外描一層模糊假造的）；四版線稿的「最細位置」要在不同角度；抖動波長 ≥ 80 px、振幅 2–4 px。不要用「更手繪了」這種話交差，給我數字。

Irene → Border（回報做法）

版號不是複製貼上，是同一個姿勢「重畫四次」。每一版的差異來自四個地方：抖動種子、第二道重描的偏移方向與距離、整張線稿的微位移微旋轉、筆壓波動的相位。毛邊 0.4–3.3 px 不規則、且 26–47% 的角度完全沒有毛邊（＝局部掉墨）；內緣過渡 0.87 px 是硬邊——若是外描一層模糊假造，內緣會一起糊掉，所以這條能證明不是霧邊。

Border（複驗後的判斷）

主輪廓這一項過關了：四版最厚／最薄 3.13×、3.69×、2.88×、2.74×，門檻是 2.0×；放大 4 倍看得到不規則毛邊與局部掉墨。拍二節奏也對。但還有三件我認為沒過：憋氣讀不出來、字卡底線我交代錯導致過長、太陽升起的動勢仍弱。

Irene → Border（修完）

紙紋這條是我另外修的：你原本的 512 tile 用 0.5 alpha 的灰雜訊疊上去，會把 #f2e8d5 壓成死灰，畫面因此看起來像平塗向量。

附錄：原始提示詞（逐字保留）

用程式碼做一支 10 秒的 MG 動畫
（1920×1080，30 幀），網頁逐幀渲染，配樂音效也用程式碼合成、跟畫面卡點；先出 6 張關鍵幀給我看，再做動畫，最後逐幀自查。
畫風：手繪線條沸騰。每張畫備
3-4 版略有不同的線稿，每 2-3 幀輪換，靜止時線也在抖；動作一拍二，每秒 12 張；線條兩頭細、中間粗，像真筆畫的；快動作插 1 幀拉長的殘影；煙、火花、速度線都手畫；全畫面鋪一層淡紙紋。
內容：【一隻鬧鐘被自己吵醒：先憋氣縮成一團，再瘋狂震動，鈴錘飛了出去；太陽升起，「老闆早安」四個字一直在抖】
別做成：線條不動的向量圖，或者抖得像花屏。

附錄：檔案在哪

• 專案：/data/Hermes/shared/mg-clock/（引擎、素材、逐格輸出、驗收腳本都在裡面）
• 交付紀錄：out/DELIVERY.md（定稿檔名、實測數字、已知取捨、重現指令）
• 成片：out/mg-clock_v4.mp4（1080p、8.48 MB）
• 這頁的影片是 720p 版本（1.2 MB），母帶留在專案裡