福岡Haxe勉強会 feat. HTML5+α @福岡 - 第0x00回

２０１３年８月２５日(日)

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 で作るための４つのステップ

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日月曜日