Leapmotionとp5.jsを組み合わせて、インタラクティブな作品を作ろう

1. Leapmotionとp5.js
DEMOと解説
浜谷 みつよし

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

3. 趣味：電子工作
4人チームで
スマホ接続の吐息伝達ガジェット
「FuuFuu」を開発
出展：
Maker Faire Tokyo 2014
Tokyo Design Week 2015
Arduino互換機程度なら作れます
自宅リフローも習得！

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

5. Leapmotionとは
https://www.leapmotion.com/?lang=jp

6. https://www.leapmotion.com/?lang=jp
赤外線カメラによる位置検出

7. https://developer.leapmotion.com/documentation/v2/javascript/devguide/Leap_Coordinate_Mapping.html
座標系
モーション検出が可能な領域：
XY平面としては20inch弱のモニタくらいの領域(体感的には)

8. DEMO：その１
ブラウザ上に文字を手書きで書こう

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

10. どうやって実装したか
Javascript
[1] Leapmotionに接続するための関数を作っておく： 以下の例ではcaptureLeapmotion()
↑ポインタの位置を画面描画サイズに合わせている

11. どうやって実装したか
Javascript（つづき）
[2] p5.jsの setup内で、さきほどのLeapmotion接続用の関数を呼ぶ
後はp5.jsを使って、ポインタと線を描くようにしておけばOK。ここでは割愛しますが
詳細はgithubに上げてあります → https://github.com/hamatani63/LeapMemo

12. DEMO：その２
ブラウザ上にドラムマシーンを作ろう

13. どうやって実装したか
HTML
leapmotionのSDKとp5.jsに加えて、p5.play.jsとp5.sound.jsを呼んでおく
Javascript
[1] Leapmotionに接続するための関数を作っておく：さっきと同じ
[2] p5.jsの setup内で、さきほどのLeapmotion接続用の関数を呼ぶ：これもさっきと同じ

14. Javascript
[3] p5.jsで、
音を出すための
関数を作る
→ これを画面に配置
詳細はgithubに上げてあります → https://github.com/hamatani63/LeapMusic

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