LeapMotion LeapJS

LeapMotionを使ったアプリは、Javascriptを使っても簡単に作れるそうだ。

ここに、サンプルが公開されている。

http://js.leapmotion.com/examples

例えば、Hand and Finger 3D Visualizerを試してみる。

左手をかざすと、それぞれの指の位置にあわせて物体が表示された。

指をいったん隠して再び表示させると、色がランダムに変化する。

もう一つ、1,048,576 Particles これは、粒子がたくさん。

表示には、WebGLを使用しているらしい。

SafariはデフォルトでWebGLが無効になっていたので、

http://cross.hvn.to/?p=1031　を参考にして有効にしたらちゃんと表示された。

これらアプリに必要となる”leap.js”はGitbubに公開されている。

https://github.com/leapmotion/leapjs

さっそくダウンロードした。

examplesには、dumper.htmlとvisualizer.htmlが入っていた。

dumper.htmlを実行

leapmotionからの戻り値が出力された。

visualizer.htmlを実行

あれ、何も表示されない。

なぜ？？？

結局原因は不明のまま。

これでは改造しようがないので、

同じアプリと思われる、Hand and Finger 3D Visualizerのソースをダウンロード。

Chromeブラウザで表示して、

ファイル＞ページを別名で保存＞ウェブページ、完全＞保存

sample.htmlとsample/leap.min.jsの２つのファイルが保存された。

ローカルに保存したsample.htmlを実行。

今度はちゃんと表示されました。

見た目も同じで、何が違うの？

ソースの比較だけしてみよう。

まず、比較ツールのゲットから。

Perforce Visual Merge and Diff Tools

http://www.perforce.com/perforce/products/merge.html

から、

Perforce ClientsのP4Merge: Visual Merge Toolをダウンロード。

この中から、p4mergeを実行。

比較。

大きく異なっていたのが、使用しているJavaScript。

leap.js と leap.min.js。

あとは、

hand.palmPosition

hand.rotation

pointable.tipPosition

pointable.direction

の各XYZ軸の値を取得する際のメンバの指定方法が違ってる。

確かに動かない方は、書式が間違っている。古いコードなのかな？