Javascript勉強中

Pebbleの特徴といえばズバリ、文字盤を自分で制作できるところです。

Home | My Pebble Faces

f:id:Red-Comet:20150310225640j:plain

カスタマイズではなく、Javascriptで一から作ってしまえるところがガジェット感があってたまらないところだと感じています。Appleはねー。嫌いじゃないんだけど結構お固いんだよねー。

家に来る前に

そんなわけで、PebbleTimeが到着する前にJavascriptの勉強を始めてみました。

ゼロからわかる JavaScript超入門

ゼロからわかる JavaScript超入門

 

やってみたら意外と書けたのでよく考えてみたら、前に触ったことのあるUnityもJavascriptなのでした。思い出しながらサクサクと、普通に書けて楽しい楽しい。

そんなわけで、この本は第6章以降のゲームプログラミングに惹かれて購入したものの、途中で横道にそれて自分勝手に作ってしまいました(^_^;)

世界時計

はてなブログにはJavascriptを貼ることができると聞いたのですが、どうにもうまくいかないのでjsdo.itを使ってみました。三角を押すと動き始めます。

カシオのAEシリーズに影響を受けて、世界地図とデジアナ時計を乗っけた時計にしてみました。このガジェット感!

 地図と時計は配列で四角を描いて楽勝だったんですが、アナログ時計が難しく、「Javascript アナログ時計」で検索すればいくらでも作例は出てくるんですが自分で納得出来ないものをただパクってくるのは心苦しくて散々悩んだ末に、

「そうだ! 単位円はsinθ,cosθだ!」

ということを思い出しました。

いやー、数学をやっててよかった。数学なんてやって将来何の役に立つんだよ、とか言ってる奴に言ってやりたいね。まあ、そーゆー人はプログラミングなどならないでしょうけど(^_^;)

詳しくはソースにありますが、時分秒のそれぞれでラジアンを出して、半径にsinやcosをかけた点までラインを引いて、なんとか実装できました。

難したっかのはアナログ表現。例えば9時だったらデジタル的には9の位置を短針が指しています。ところが9時30分だったら9時と10時のちょうど半分を指しているのが普通なので、そこをデジタル的にアナログに見せるようにしたところは、謎解きみたいで楽しかったです。

特に秒針の動きをクォーツ的ではなく、ミリセカンドから取ってスイープ運針にしたあたりが、機械式時計好きのこだわりのポイント。

 

世界地図は元々のプログラムでは時差と都市名を表示させるようにして、上下キーで切り替わるものにしていたのですが、実際のPebble Facesではボタン操作を受け付けないということで単なるアニメーションにしてしまいました。

それと曜日なんですが、これはセイコー5の影響を受けて、土曜日は水色、日曜日は赤色で表示するようにしています。

こんなところまで自分好みで作れちゃうのが面白いですね~。

自分で作った文字盤を、はやくスマートウォッチで動かしたい。届くのまだかな~(5月です)。

次はいよいよゲームかな

簡単なプログラムをひとつ仕上げたので、次はゲームを作ってみたいと思っています。いや、この調子で第二第三のFacesを作ったっていいんですけどね。

時計を作るんだったら、秒や分が変わるときにアニメーションさせたり、もう少し工夫をしてみたいですね。

ゲームを作るとすると、ボタンが二個しかないところでゲーム性を出すところが腕の見せどころ。

でもまあ早いとこ、買った本の課題を最後まで終わらせたほうがいいですね、きっと(^_^;)

広告を非表示にする