leapmotionとp5.js：demoと解説
TRANSCRIPT
Leapmotion と p5.jsDEMO と解説
浜谷 みつよし
登壇者プロフィール 名前 浜谷 みつよし 所属 メーカー勤務 経歴 製造業の技術者 (8 年くらい ) 電子ペーパー開発 車載用パンク修理キット開発 路面状態センシング機能付きタイヤの開発 → IoT 技術に興味を持ち、プログラミングを学ぶため G’s Academy に在籍中。 自転車をもっと楽しむ Android アプリを開発中！
趣味：電子工作4 人チームでスマホ接続の吐息伝達ガジェット「 FuuFuu 」を開発出展： Maker Faire Tokyo 2014 Tokyo Design Week 2015
Arduino 互換機程度なら作れます自宅リフローも習得！
これから話すことLeapmotion を使って、ブラウザ上にインタラクティブな作品を作ろう
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 を組み合わせればインタラクティブな作品を作れます！
おしまい