Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
EN
Uploaded by
Kenta Kowaki
PDF, PPTX
3,851 views
JavascriptでLeap Motion事始め
JavascriptとLeapMotionとCanvasで子供向けコンテンツを作った話
Internet
◦
Read more
6
Save
Share
Embed
Embed presentation
Download
Download as PDF, PPTX
1
/ 46
2
/ 46
3
/ 46
4
/ 46
5
/ 46
6
/ 46
7
/ 46
8
/ 46
9
/ 46
10
/ 46
11
/ 46
12
/ 46
13
/ 46
14
/ 46
15
/ 46
16
/ 46
17
/ 46
18
/ 46
19
/ 46
20
/ 46
21
/ 46
22
/ 46
23
/ 46
24
/ 46
25
/ 46
26
/ 46
27
/ 46
28
/ 46
29
/ 46
30
/ 46
31
/ 46
32
/ 46
33
/ 46
34
/ 46
35
/ 46
36
/ 46
37
/ 46
38
/ 46
39
/ 46
40
/ 46
41
/ 46
42
/ 46
43
/ 46
44
/ 46
45
/ 46
46
/ 46
More Related Content
PDF
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
by
Kumiko SHIMIZU
PDF
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
by
Erina Takei
PDF
デザイナーさんでもできる Browsersync からはじめる作業効率化
by
Kumiko SHIMIZU
PDF
非エンジニア向けHTML勉強会その1
by
Karino Kyohei
PDF
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
by
Erina Takei
PDF
Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27
by
Erina Takei
PPTX
Leap Motionでデコピンシューティングを作る
by
ss-zirkel
PDF
Leap motion.js
by
Haraguchi Go
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
by
Kumiko SHIMIZU
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
by
Erina Takei
デザイナーさんでもできる Browsersync からはじめる作業効率化
by
Kumiko SHIMIZU
非エンジニア向けHTML勉強会その1
by
Karino Kyohei
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
by
Erina Takei
Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27
by
Erina Takei
Leap Motionでデコピンシューティングを作る
by
ss-zirkel
Leap motion.js
by
Haraguchi Go
Similar to JavascriptでLeap Motion事始め
PDF
Leap Motion を用いた数学教材開発の例
by
Yukinori KITADAI
PDF
Introduction of Leap Motion
by
hagino 3000
PDF
LT Leap MotionとJavaScriptで遊ぼう!
by
Toshio Ehara
PDF
Leap motion
by
Kindai University
PDF
Unityでleap motionを使ってみる~アセットまみれのLT大会~
by
hima_zinn
PDF
Leap Motion入門ハンズオン
by
Akira Hatsune
PDF
アニメーションの実装つらい話
by
kata shin
Leap Motion を用いた数学教材開発の例
by
Yukinori KITADAI
Introduction of Leap Motion
by
hagino 3000
LT Leap MotionとJavaScriptで遊ぼう!
by
Toshio Ehara
Leap motion
by
Kindai University
Unityでleap motionを使ってみる~アセットまみれのLT大会~
by
hima_zinn
Leap Motion入門ハンズオン
by
Akira Hatsune
アニメーションの実装つらい話
by
kata shin
JavascriptでLeap Motion事始め
1.
Javascriptで LeapMotion事始め
2.
自己紹介 幸脇 健太(コウワキ ケンタ)です フリーランス2年目になりました。 コウワキデザイン という屋号でやっています 元Flasherなフロントエンドエンジニアです 時々サーバやバックエンド言語もさわってます Twitter
: @kuwk Web : http://kuwk.jp
3.
LeapMotionを使って JavascriptとCanvasで 子供向けのコンテンツを 作ってみた話 今日のアジェンダ
4.
コトの始まり
5.
自分には3歳の娘と 1歳の息子がいます
6.
前々から自分の子供に ゲームとか作ってみたかった
7.
でも、コントローラとかマウ スとかキーボードまだ難しい
8.
iPad持ってない
9.
LeapMotion持ってる!
10.
LeapMotionで 作ってみよう
11.
LeapMotionとは
12.
2012年にLeap Motion社から販売された 手元専用のモーションキャプチャ機器 キャプチャできるのは指先から肘まで キャプチャ範囲は60センチ立方くらい
13.
なんか楽しそう!
14.
思ったより精度良くなかった!
15.
• 手を握ると指をうまくキャプチャ できなかったり • 手のひら/手の甲が逆だったり •
キャプチャされてる指が骨折して たり(関節の方向おかしい)
16.
2014年にv2リリース
17.
格段に精度良くなってる!
18.
• v1であったような変なキャプ チャ激減 • 以下検出可能に 手の左右/指の種類/関節/ピンチ/グラブ •
赤外線カメラ画像の取得 • VR対応
19.
Actionscriptがなくなってる… SDKも色々
20.
Visualizerのデモ
21.
Javascriptで LeapMotion
22.
LeapJS 詳しくはこちら https://developer.leapmotion.com/javascript https://js.leapmotion.com/leap-0.6.4.js
23.
<script type="text/javascript" src=“https://js.leapmotion.com/ leap-0.6.4.js”></script>
24.
<script type="text/javascript"> function init(){ //
LeapMotionClass var controller = new Leap.Controller({enableGestures: true}); // LeapMotion接続 controller.connect(); // LeapMotionの実行frame controller.on('frame', function(frame) { // 実行コード }); } window.addEventListener('load', init); </script>
25.
ちなみにLeapMotionの内部では WebSocketサーバが起動してます ws://localhost:6437/ 詳しくはこちら https://developer.leapmotion.com/documentation/javascript/ supplements/Leap_JSON.html
26.
どんな値が取れるのか
27.
主に使いそうな情報 •手 - 位置(x/y/z) - 左右 -
手の向き - グラブ •指 - 位置(各関節 x/y/z) - 種類(親指~小指) - 曲げ伸ばし - ピンチ •ジェスチャー - フリック - キータップ - 回転
28.
あと手の他にツール(棒状のもの)の キャプチャも可能です ※白色じゃないと認識されにくい 詳しくはこちら https://developer.leapmotion.com/documentation/javascript/ devguide/Leap_Overview.html#motion-tracking-data
29.
ここから作ったものの話
30.
コンテンツ1デモ
31.
各指の曲げ伸ばしから、 グー・チョキ・パーの判定
32.
// LeapMotionの実行frame controller.on('frame', function(frame)
{ // 親指から小指に向かって 0 ~ 4 console.log(frame.hands[0].fingers[0].extended); });
33.
// extendedNumber =
伸びてる指の数 if (extendedNumber == 5) { // パー } else if (extendedNumber == 2 && _finger[1].extended && _finger[2].extended) { // チョキ } else if(extendedNumber == 0){ // グー }
34.
実際遊ばせてみた
35.
_人人人人人_ > 不評!! < ‾Y^Y^Y^Y‾
36.
理由 •センサーの反応場所がわからない •子供の手だとうまく指がキャプチャされ ない •アンパンマンがいない
37.
コンテンツ2デモ
38.
遊ばせてみた
39.
_人人人人人_ > 好評!! < ‾Y^Y^Y^Y‾
40.
理由 •手のキャプチャ表示があるので自分の操 作がわかりやすい •寿司 = にぎるってわかってる •寿司が好き
41.
1歳がやるとこんな感じ
42.
まとめ
43.
悩ましかった点 •基本のジェスチャーが少ない •細かい操作が大変/UIの工夫が必要 •キャプチャ範囲の慣れが必要 •テストしてるとおかしな人間に見られる •子供の手だとうまくキャプチャされない
44.
良かった点 •ハード買い換えることなく、ソフトウェ アの改善で精度が上がってる •今後の精度向上に期待がもてる •キャプチャされる情報が多く精度高い •未来感ある •作ってて楽しい
45.
楽しいは正義
46.
ご静聴ありがとうございました
Download