Create a single self-contained index.html: a ~2-minute animated short called "the last piano", in a hand-drawn crayon and watercolor style.
Scene: a small rusty robot with one glowing eye walks through a dark, empty city in the rain and finds an old upright piano under a broken streetlamp. Later a black cat shows up to listen.
Music: compose an original piano piece (Am - F - C - G) and synthesize it in Web Audio. It starts with one unsure note and grows into full chords.
Sync: one timeline drives both. The robot's hands hit the keys that are actually sounding. Every note turns on a window in the city, the rain turns to snow, and the final chord lights up everything that's left.
Rules: Canvas 2D only, no libraries, no external assets.
中文翻譯
創建一個單一的自包含 index.html:一部約 2 分鐘的動畫短片,名爲“the last piano”,採用手繪蠟筆與水彩風格。
場景:一臺鏽跡斑斑的小機器人,只有一隻發光的眼睛,在雨中穿過一座黑暗、空蕩的城市,在一盞壞掉的路燈下發現了一架舊的立式鋼琴。後來一隻黑貓出現,來聽它彈奏。
音樂:創作一段原創鋼琴曲(Am - F - C - G),並用 Web Audio 合成。它從第一個不確定的音符開始,逐漸發展成完整的和絃。
同步:一條時間軸同時驅動兩者。機器人的手敲下的正是實際發聲的琴鍵。每一個音符點亮城市裏的一扇窗,雨變成雪,最後一個和絃點亮剩下的一切。
規則:僅使用 Canvas 2D,不使用任何庫,不使用任何外部素材。