読者です 読者をやめる 読者になる 読者になる

LeapMotion LeapJS

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

 

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

http://js.leapmotion.com/examples

 

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

f:id:marchantime:20130829011222p:plain

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

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

 

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

f:id:marchantime:20130829013949p:plain

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

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

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

 

 

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

https://github.com/leapmotion/leapjs

 

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

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

 

dumper.htmlを実行

f:id:marchantime:20130829010805p:plain

 

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

 

visualizer.htmlを実行

f:id:marchantime:20130829011026p:plain

 

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

なぜ???

結局原因は不明のまま。

 

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

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

Chromeブラウザで表示して、

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

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

 

ローカルに保存したsample.htmlを実行。f:id:marchantime:20130903211739p:plain

 

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

 

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

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

 

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

Perforce Visual Merge and Diff Tools

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

から、

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

f:id:marchantime:20130903213959p:plain

 

この中から、p4mergeを実行。

 

 

比較。

f:id:marchantime:20130903214408p:plain

 

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

leap.js と leap.min.js。

 

あとは、

hand.palmPosition

hand.rotation

pointable.tipPosition

pointable.direction

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

 

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