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