Leap Motion を用いた
数学教材開発の例
北䑓如法 (KITADAI, Yukinori)
広島大学
2014年9月24日(水)数学ソフトウェアとフリードキュメント/19

本日のメニューLeap Motion を用いた
数学教材開発の例

本日のメニューLeap Motion とはLeap Motion の使用方法
数学教材開発の例
今後?

Leap MotionとはLeap Motion

Leap Motion http://commons.wikimedia.org/wiki/File:Lm_Logo.svg

Leap Motion• センサ• 両手・手のひら・指• 手や指の数・方向などが取れる
Pierre Lecourt Leap Motion https://www.flickr.com/photos/13815526@N02/8654537799/

公式動画• https://www.leapmotion.com

発売前に出た動画• http://www.inc.com/30under30/nicole-marie-richardson/leap-motion-david-holzmichael-buckwald-2013.html

DemoパソコンのUSBにつなぐ$99.99価格

入手• 当初は直販• 今は amazon.co.jp でも販売されるように

スペック• Leap Motion Controllerは、スマートな超小型軽量 (わずか全長80mm)デザイン。

• 1辺 60cm の立方体の中を認識• 0.01mm の細かさで指の動きを• 200 fps

コア技術は創業者のD論• Wikipediaに書いてあった。
• David Holz 氏• (Ph.D., 数学, ノースカロライナ大学, 2008)• (資金調達して2012年に発売)

システム要件• AMD Phenom II 以上 or Intel Core i3以上,
2 GB RAM, USB 2.0 ポート• Mac … OS X 10.7 Lion 以上• Windows … 7, 8
• Linux … Ubuntu 12

本日のメニューLeap Motion とはLeap Motion の使用方法
数学教材開発の例
今後?

本日のメニューLeap Motion とはLeap Motion の使用方法
数学教材開発の例
今後?

Leap Motionの使用方法

使用法• アプリをダウンロードして使う• Leap Motion App Storeapps.leapmotion.com• 自分でアプリを作る• ↑楽しい• SDKLeap Motion SDK• Leap Motion SDKが公式に用意されている• Objective-C, C# (Unity), JavaScript, C++,
Java, Python• JavaScriptはウェブブラウザですぐ動かせるのでお手軽Leap Motion SDK• Software Development Kit• https://developer.leapmotion.com• 現在は version 1系と version 2系(ベータ)• v2 で Skeletal Tracking というモデルに• v2 は 2.1.4.22333 Beta (9月21日現在)

どんなデータが取れる?
• Hand 手のひら位置・向き• その手が左右どちらか (v2)
• 指の骨格の全部の位置・向き (v2)
• センサイメージ (Obj-CとJSはまだ)

取れるデータ (続き)
• さらに高級な情報も• pinch (つまむ), grab (つかむ), confidence (信頼度)• 閉区間 [0,1] で• Gesture• Circle, swipe, key tap, screen tap

取ったデータを自分のプログラムで煮るなり焼くなり

例えばObjective-Cでは(OS X (Mac)上 Xcodeで)Objective-CでLeap Motion• SDKをプロジェクトに入れる。

Objective-CでLeap Motion
Leapコントローラを初期化した後、デリゲートメソッド- (void)onFrame:(NSNotification *)notification!
が定期的に呼ばれて、その中で、frame から情報を得る。

!
LeapController!
LeapFrame *frame = [controller frame:0];for (LeapHand *hand in frame.hands) { .. }JavaScriptはもっと手軽• ウェブブラウザ上で使える• HTML + JavaScript• コンパイルが要らない• Leap Motion のための JavaScript も CDNがあるので1行書くだけですぐ使える。
<script src=“http://js.leapmotion.com/leap-0.6.2.min.js"></script>!

!

あと node.js なら npm install leapjs -v0.6.2 でもOK

JavaScript で Leap Motion• Load LeapJS!

!

!

<script src="http://js.leapmotion.com/leap-0.6.2.min.js"></script>!

• Create loop
Leap.loop({enableGestures: true}, function(frame) {!
// ...!
});!

• あとは frame からデータを取って煮るなり焼くなり使用方法(SDK)の概説終わり本日のメニュー

Leap Motion とはLeap Motion の使用方法
数学教材開発の例
今後?

本日のメニューLeap Motion とはLeap Motion の使用方法
数学教材開発の例今後?

開発した数学教材の例

ConeCutter円錐を平面で切ると• 切り口に次の曲線が現れる (円錐曲線)• 円・楕円・双曲線・放物線・2直線• 射影幾何学の入門として扱った。
Pbroks13 - Own work http://en.wikipedia.org/wiki/Conic_section#mediaviewer/File:Conic_sections_with_plane.svg

「円錐を切ると」と言われるましても…

あまり実際に切ってみたことはないのではと…

そこでConeCutter➡「切ると」を体験する

DemoConeCutter• 数学体験教材• 実際に手で切ってみることができて楽しいのではないか• 手の角度で様々な断面が手に取るようにわかる(かどうかは要調査)• 学生の反応はよい。興味関心上昇• 今回は OS X 上で Objective-C + Scene Kit
で作成

本日のメニューLeap Motion とはLeap Motion の使用方法
数学教材開発の例
今後?

本日のメニューLeap Motion とはLeap Motion の使用方法
数学教材開発の例
今後?

今後?

最近のSDKの動き

Oculus Riftと連携してVR(が推されているように見える)
https://developer.leapmotion.com/vr

Oculus Rift?

photo by Sebastian Stabinger

Sergey Galyonkin from Kyiv, Ukraine - Orlovsky and Oculus Rift Uploaded by Yakiv Gluck両目に違う映像

Photo by artur coelho

Oculus Rift
• ヘッドマウントVRディスプレイ
• 両目立体視のできる• (持っていないのでここにはないです)• これで3D表示物体がそこにあるものを操作する感覚にOculus Rift に Leap Motion• 物理的に取り付ける (別売りアタッチメント $19.99)

Oculus Rift に Leap Motion• 物理的に取り付ける• (別売りアタッチメント $19.99)• Oculus Rift で見ている VR 画面の中を、Leap Motionにより手で触ることができる移植したいiPadアプリ:
ARGraphARGraph• AR (拡張現実) で次を表示するiPadアプリ• 2変数関数のグラフ• 接線、接平面• 極値・条件付き極値• マクローリン近似

ARGraph Demo

これがLeap Motion +Oculus Rift で作れたら面白そう! (希望)

他の話題

スマフォ・タブレットは?

スマホにUSBポートがなくて使えない!?

• Leap MotionはUSBポートにつなぐから• 2014年後半には「Leap Motion」がスマホに搭載、3Dモーション検出技術はブレイクするか (1) 3Dモーションセンシングが2014年のホットトピックに (マイナビニュース) http://news.mynavi.jp/articles/2014/01/10/leapmotion/

Leap Motionがスマホやタブレットに?

• “今年2014年後半にはスマートフォンやタブレットなどモバイルデバイスへの搭載も進み、これまでにはないような新しい使い方が登場することになるかもしれない。” http://news.mynavi.jp/articles/2014/01/10/leapmotion/

画像も引用ここまでご覧になり、

アイディアを思いつかれた方も多いのではないでしょうか!!

アイディアをいただくコーナ

【追記】会場で出たアイディア等• (メモから追記をします)• エアギターから音を鳴らす• キネクトの違いは?
• シンデレラ? 1, 2, 3の指のジェスチャ?
• 円錐だけでなく直方体を切る

会場で出たアイディア等(続き)• ConeCutterをクイズ形式にする• デザインのコースでも、こういう立体の断面を描くことはされている。そこでも使えるのでは• ペンを使って書いているものを取得できないか (ノートになる)• 認証用途に使えないか会場で出たアイディア等(続き)• Leap Motion にキラーアプリがまだないという話も• 医療に。手の動きの診断に使えないか• 【追記終わり】

まとめ• Leap Motion を使って手の動きを数学的対象に伝える体験が出来る• 手軽な 3D プログラミング (Scene Kit,Unity, JS (ブラウザ),…) により楽しい体験型3次元教材ができるのではないかありがとうございました!
(この後APIなどのページ)

付録
Scene Kitメモ・Objective-CでのLeap Motion SDK

3D表示に利用したフレームワーク: Scene Kit

Scene Kit• OS X 用 3D のフレームワーク• OpenGL をごりごり書かなくても楽に 3Dプログラミングができる• OS X 10.8 Mountain Lion で登場• iOS 8 で iOS にも搭載 (iOSデバイスにはLeap Motionが使えませんが)Scene Kit クラス• SCNScene シーン• SCNNode ノードに子ノードをつなげていく• SCNGeometry, SCNMaterial,SCNLight, SCNCamera, … などの便利オブジェクトあり• constraint 便利• 新クラス SCNAction (OS X Yosemite から) が追加されるなど着実に進化している。

Scene Kit 情報• WWDC 2012 (Session 504)
• 変態。スライドが Scene Kit で書いたアプリになっている。ソースも出ている。

Objective-CでLeap Motionを扱う方法の概説

Objective-CでLeap Motion

最初に LeapController のインスタンスを作りデリゲートに例えばselfを登録!
controller = [[LeapController alloc] init];[controller addListener:self];Objective-CでLeap Motion
ジェスチャを利用したい場合はデリゲートメソッド onConnect:の中で!
- (void)onConnect:(NSNotification *)notification{NSLog(@"Connected");
LeapController *aController = (LeapController *)[notificationobject];[aController enableGesture:LEAP_GESTURE_TYPE_CIRCLE enable:YES];[aController enableGesture:LEAP_GESTURE_TYPE_KEY_TAP enable:YES];[aController enableGesture:LEAP_GESTURE_TYPE_SCREEN_TAP enable:YES];[aController enableGesture:LEAP_GESTURE_TYPE_SWIPE enable:YES];}!としておく。

Objective-CでLeap Motion
普段データを取るのはデリゲートメソッド- (void)onFrame:(NSNotification *)notification!の中で、!
LeapController *aController = (LeapController *)[notification object];!
LeapFrame *frame = [aController frame:0];for (LeapHand *hand in frame.hands) { .. }

Objective-CでLeap Motion
あとは煮るなり焼くなり!
const LeapVector *normal = [hand palmNormal];const LeapVector *direction = [hand direction];
LeapVector *pos = hand.palmPosition;!
[direction pitch][normal roll][direction yaw]!
LeapVector *vec = hand.palmVelocity;Objective-CでLeap Motion
ジェスチャを取る場合!

NSArray *gestures = [frame gestures:nil];for (LeapGesture *gesture in gestures) {switch (gesture.type) {case LEAP_GESTURE_TYPE_SWIPE: {NSLog(@“swipe!”);break;}
case LEAP_GESTURE_TYPE_CIRCLE: {NSLog(@"circle!");break;}
default:break;}}