メルトといえばあのメルトです。恋に落ちる音がするやつです。冬に売ってる雪のような口どけのやつじゃないです。

そのPVに、以下のようなものがあります。

素敵ですね。

このPVに出てくる時計が可愛いということで、アップロードされた当時はメル時計なんて呼ばれて、実際に作ってみた人やWindows Vistaのサイドバーガジェットにした人、Flashで作った人なんかが現れたのは記憶に新し・・・くはないけれど、今でもよく覚えています。

ふとHTML5 Canvasで何か作りたいなーと思って思い浮かんだのがこのメル時計だったので早速作ってみました。完成品は以下より。

メル時計

秒針もつけました。いいかんじ。

PVの時計のシーンを見ながら作って、サイズはそのままに、色もMacに標準で入っているカラーピッカー DigitalColor Meter を使ってできる限り再現したつもりです。もちろん画像は使ってません。

PVでは左上から光が当たっているので影を付けたかったのですが、あまり綺麗にならなかったのでそれはボツ。

実装に関しては、

1. 背景色でCanvas全体を塗りつぶし
2. 時計の円を色ごとに外側から順番に描画
3. 文字盤代わりの六角形たちを描画
4. 現在の時刻からそれぞれの針の角度を求めて描画

を1秒間隔でやり続けるだけです。

基本的にはただひたすらarcとかfillとかやればいいだけなので簡単ですが、Canvasビギナーの僕には回転 rotate() の扱い方と、長針・短針の角丸化が少しだけ厄介でした。勉強になった。

これについては別記事でメモとして書きます。
HTML5 Canvasの回転と角丸についてメモ

PV確認のついでにメルトを聴いてちょっと懐かしい気持ちになり、投稿日を確認したらもう5年も前で驚きを隠せなかった僕でした。おわり。

Tweet