メルトといえばあのメルトです。恋に落ちる音がするやつです。冬に売ってる雪のような口どけのやつじゃないです。
そのPVに、以下のようなものがあります。
素敵ですね。
このPVに出てくる時計が可愛いということで、アップロードされた当時はメル時計なんて呼ばれて、実際に作ってみた人やWindows Vistaのサイドバーガジェットにした人、Flashで作った人なんかが現れたのは記憶に新し・・・くはないけれど、今でもよく覚えています。
ふとHTML5 Canvasで何か作りたいなーと思って思い浮かんだのがこのメル時計だったので早速作ってみました。完成品は以下より。
秒針もつけました。いいかんじ。
PVの時計のシーンを見ながら作って、サイズはそのままに、色もMacに標準で入っているカラーピッカー DigitalColor Meter を使ってできる限り再現したつもりです。もちろん画像は使ってません。
PVでは左上から光が当たっているので影を付けたかったのですが、あまり綺麗にならなかったのでそれはボツ。
実装に関しては、
- 背景色でCanvas全体を塗りつぶし
- 時計の円を色ごとに外側から順番に描画
- 文字盤代わりの六角形たちを描画
- 現在の時刻からそれぞれの針の角度を求めて描画
を1秒間隔でやり続けるだけです。
基本的にはただひたすらarcとかfillとかやればいいだけなので簡単ですが、Canvasビギナーの僕には回転 rotate() の扱い方と、長針・短針の角丸化が少しだけ厄介でした。勉強になった。
これについては別記事でメモとして書きます。
HTML5 Canvasの回転と角丸についてメモ
PV確認のついでにメルトを聴いてちょっと懐かしい気持ちになり、投稿日を確認したらもう5年も前で驚きを隠せなかった僕でした。おわり。
シェアする
サポートする（ありがとうございます）
あわせて読みたい
- 2017-05-07
- Hivemall on Dockerを試すぜ
- 2013-12-08
- Poisson Image Editingでいい感じの画像合成ができるやつを作る on Web
- 2013-08-03
- HTML5 Canvasの回転と角丸についてメモ
書いた人: たくち
たくちです。長野県出身、カナダ・バンクーバー在住のソフトウェアエンジニア。これまでB2B/B2Cの各領域で、データサイエンス・機械学習のプロダクト化および顧客への導入支援・コンサルティング、そして関連分野のエバンジェリズムに携わってきました。趣味は旅行、マラソン、登山、ブリュワリー巡り。近況は takuti.me/now より。ブログへのご意見・ご感想など、@takuti または [email protected] までいつでもお気軽にご連絡ください。
※当サイトおよび関連するメディア上での発言はすべて私個人の見解であり、所属する（あるいは過去に所属した）組織のいかなる見解を代表するものでもありません。
過去の人気記事
- 2021-08-12
- いい加減、プロダクトマネージャーという職業に幻想を抱くのはやめよう。
- 2017-12-16
- データサイエンスプロジェクトのディレクトリ構成どうするか問題
- 2017-06-10
- Amazonの推薦システムの20年