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 のみ、ライブラリなし、外部アセットなし。