LT Leap MotionとJavaScriptで遊ぼう!

3,482 views
3,249 views

Published on

福岡Haxe勉強会 feat. HTML5+α @福岡 - 第0x00回
2013年8月25日(日)
LTさせて頂いたときのスライドです。

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,482
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
10
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

LT Leap MotionとJavaScriptで遊ぼう!

  1. 1. 福岡Haxe勉強会 feat. HTML5+α @福岡 - 第0x00回 2013年8月25日(日) Leap MotionとJavaScriptで遊ぼう! ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html 13年8月26日月曜日
  2. 2. 自己紹介 twitterID: itoKami1123 下請け・派遣で福岡をふらふらしてます。 最近はJavascriptメインになってきました。 今年はTDDできる人になりたいです。 福岡の皆で技術の底上げが出来ればと思い たまに初心者向けの勉強会をしてます。 13年8月26日月曜日
  3. 3. たまにみてね! 勉強会のブログしてます。 13年8月26日月曜日
  4. 4. 会社がLeapMotionを貸してくれました! これで業務Web屋も ふぃじかるこんぴゅーてぃんぐ出来る! 13年8月26日月曜日
  5. 5. 自分の手 相手の手 ↑イメージ画像 なので試しにじゃんけんゲームを 作ってみました 13年8月26日月曜日
  6. 6. 【サルでもわかる】LEAP アプリを JavaScript で作るための4つのステップ http://syslog.shimy.net/?p=619 ↓のブログを参考にしています! 13年8月26日月曜日
  7. 7. まずは、https://github.com/leapmotion/leapjs からライブラリを手に入れて この中の leap.min.js を使います! 13年8月26日月曜日
  8. 8. <!-- ↓な感じでライブラリを埋め込むと... --> <script src="js/libs/leap.min.js"></ script> <script> Leap.loop( function(frame){     // 1/60秒毎に // frameにLeap Motionの情報が!! }); </script> 例)index.html 13年8月26日月曜日
  9. 9. frameって何がはいってるの? 13年8月26日月曜日
  10. 10. http://leapmotion.github.io/leapjs/ public Leap.Pointable fingers[] public Leap.Hand hands[] public Leap.Gesture gestures[] public String id public Leap.Pointable pointables[] public Number timestamp public Leap.Pointable tools[] public Boolean valid 色々とれるみたいですが じゃんけんは 指とジェスチャーと手の動きの情報を使いたいと思います! 13年8月26日月曜日
  11. 11. http://leapmotion.github.io/leapjs/ public Leap.Pointable fingers[] 指の情報の配列です!その中に... finger.id finger.length finger.width finger.direction finger.tipPosition finger.tipVelocity finger.tool finger.stabilizedTipPosition finger.valid なんだかいろいろあるんですけど↓を使いました。 finger.tipPositionは Leap原点からの指先座標(mm) 13年8月26日月曜日
  12. 12. http://leapmotion.github.io/leapjs/ public Leap.Hand hands[] 手の情報の配列です!その中は..今は使ってません.. 詳しくは ↓ http://syslog.shimy.net/?p=619 今回は手があるかのどうかだけ判別がしたいので 配列が > 0の時で判定してます。 13年8月26日月曜日
  13. 13. http://leapmotion.github.io/leapjs/ public Leap.Gesture gestures[] ジェスチャーの情報の配列です! その中は.. 詳しくは ↓ http://syslog.shimy.net/?p=619 今回は手があるかのどうかだけ判別がしたいので gesture.type ジェスチャー種類 circle / swipe / screenTap / keyTap 13年8月26日月曜日
  14. 14. if ( frame.gestures && frame.gestures.length ){ var gesture = frame.gestures[0]; // circle / swipe / screenTap / keyTap console.log( gesture.type);   } ↑これでジェスチャーがとれました。 今回は 指を回したらスタート という形にしました。 13年8月26日月曜日
  15. 15. Leap.loop({enableGestures: true},function(frame){ var GU = 0, // 指0本 -> ぐ∼! CHOKI = 2, // 指2本 -> チョキ∼! PA = 5; // 指5本 -> ぱー! if ( frame.hands.length ){ var num = frame.fingers.length; if ( num === GU ){ console.log("ぐ∼"); }else if ( num === CHOKI ){ console.log("ちょき∼"); }else if ( num === PA){ console.log("ぱー"); } } }); ↑こんな感じで簡単に指の数が分かります。 13年8月26日月曜日
  16. 16. デモ http://www.itokami1123.com/LeapMotion/janken_01/ http://www.youtube.com/watch?v=x27TQO1IT9c&feature=share 古いバージョンの動画 13年8月26日月曜日
  17. 17. 福岡Haxe勉強会 feat. HTML5+α @福岡 皆さんの発表最高でした! ありがとうございました! 13年8月26日月曜日

×