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