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,不使用任何库,不使用任何外部素材。