Leapmotionとp5.js：DEMOと解説

Leapmotion と p5.jsDEMO と解説

浜谷 みつよし

登壇者プロフィール　名前 　　浜谷 みつよし 　所属 　　メーカー勤務 　経歴 　　製造業の技術者 (8 年くらい ) 　　　電子ペーパー開発 　　　車載用パンク修理キット開発 　　　路面状態センシング機能付きタイヤの開発 　　→ IoT 技術に興味を持ち、プログラミングを学ぶため G’s Academy に在籍中。　　　自転車をもっと楽しむ Android アプリを開発中！

趣味：電子工作4 人チームでスマホ接続の吐息伝達ガジェット「 FuuFuu 」を開発出展：　 Maker Faire Tokyo 2014　 Tokyo Design Week 2015

Arduino 互換機程度なら作れます自宅リフローも習得！

これから話すことLeapmotion を使って、ブラウザ上にインタラクティブな作品を作ろう

Leapmotion とは

https://www.leapmotion.com/?lang=jp

https://www.leapmotion.com/?lang=jp

赤外線カメラによる位置検出

https://developer.leapmotion.com/documentation/v2/javascript/devguide/Leap_Coordinate_Mapping.html

座標系

モーション検出が可能な領域：　 XY 平面としては 20inch 弱のモニタくらいの領域 ( 体感的には )

DEMO ：その１

ブラウザ上に文字を手書きで書こう

どうやって実装したかHTMLleapmotion の SDK と p5.js を呼んでおく

どうやって実装したかJavascript[1] Leapmotion に接続するための関数を作っておく： 以下の例ではcaptureLeapmotion()

↑ ポインタの位置を画面描画サイズに合わせている

どうやって実装したかJavascript（つづき）[2] p5.js の setup 内で、さきほどの Leapmotion 接続用の関数を呼ぶ

後は p5.js を使って、ポインタと線を描くようにしておけば OK 。ここでは割愛しますが詳細は github に上げてあります　→　 https://github.com/hamatani63/LeapMemo

DEMO ：その２

ブラウザ上にドラムマシーンを作ろう

どうやって実装したかHTMLleapmotion の SDK と p5.js に加えて、 p5.play.js と p5.sound.js を呼んでおく

Javascript[1] Leapmotion に接続するための関数を作っておく：さっきと同じ[2] p5.js の setup 内で、さきほどの Leapmotion 接続用の関数を呼ぶ：これもさっきと同じ

Javascript

[3] p5.js で、　音を出すための　関数を作る→ これを画面に配置

詳細は github に上げてあります　→　 https://github.com/hamatani63/LeapMusic

まとめLeapmotion と p5.js を組み合わせればインタラクティブな作品を作れます！

おしまい