Submit Search
Upload
JavascriptでLeap Motion事始め
•
6 likes
•
3,830 views
Kenta Kowaki
Follow
JavascriptとLeapMotionとCanvasで子供向けコンテンツを作った話
Read less
Read more
Internet
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 46
Download now
Download to read offline
Recommended
シェルにあんまりこだわりのなかった僕がfishを使ってかんじたこと
シェルにあんまりこだわりのなかった僕がfishを使ってかんじたこと
toku toku
[Android]Static変数さんとactivityさん
[Android]Static変数さんとactivityさん
Hirokazu Fukami
Github Actionsで始めるROS/ROS2のCI
Github Actionsで始めるROS/ROS2のCI
Atsuki Yokota
Robot frontier lesson1
Robot frontier lesson1
Ryuichi Ueda
はじめてのdocker
はじめてのdocker
at grandpa
인프런 - 스타트업 인프랩 시작 사례
인프런 - 스타트업 인프랩 시작 사례
Hyung Lee
vImageのススメ(改訂版)
vImageのススメ(改訂版)
Shuichi Tsutsumi
5分でわかる Sensor SDK
5分でわかる Sensor SDK
UnityTechnologiesJapan002
Recommended
シェルにあんまりこだわりのなかった僕がfishを使ってかんじたこと
シェルにあんまりこだわりのなかった僕がfishを使ってかんじたこと
toku toku
[Android]Static変数さんとactivityさん
[Android]Static変数さんとactivityさん
Hirokazu Fukami
Github Actionsで始めるROS/ROS2のCI
Github Actionsで始めるROS/ROS2のCI
Atsuki Yokota
Robot frontier lesson1
Robot frontier lesson1
Ryuichi Ueda
はじめてのdocker
はじめてのdocker
at grandpa
인프런 - 스타트업 인프랩 시작 사례
인프런 - 스타트업 인프랩 시작 사례
Hyung Lee
vImageのススメ(改訂版)
vImageのススメ(改訂版)
Shuichi Tsutsumi
5分でわかる Sensor SDK
5分でわかる Sensor SDK
UnityTechnologiesJapan002
C#でOpenCL with OpenTK + Cloo
C#でOpenCL with OpenTK + Cloo
aokomoriuta
ROSによるロボットソフトウェアの開発
ROSによるロボットソフトウェアの開発
Yuji Yamauchi
LiDARとSensor Fusion
LiDARとSensor Fusion
Satoshi Tanaka
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
BrowserMob-Proxyのお話
BrowserMob-Proxyのお話
Masahiko Hashimoto
Camera2APIと画像フォーマット
Camera2APIと画像フォーマット
Kiyotaka Soranaka
Behind the Performance of Quake 3 Engine: Fast Inverse Square Root
Behind the Performance of Quake 3 Engine: Fast Inverse Square Root
Maksym Zavershynskyi
Jvm internal
Jvm internal
Go Tanaka
스타트업 사례로 본 로그 데이터 분석 : Tajo on AWS
스타트업 사례로 본 로그 데이터 분석 : Tajo on AWS
Matthew (정재화)
행동 기반 게임오브젝트
행동 기반 게임오브젝트
kgun86
2021.06.18 오늘도 나는 메타버스로 출근합니다
2021.06.18 오늘도 나는 메타버스로 출근합니다
Kiheon Shin
Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기
jdo
2015 py con word2vec이 추천시스템을 만났을때
2015 py con word2vec이 추천시스템을 만났을때
choi kyumin
NDC 2014 Beyond Code: <야생의 땅:듀랑고>의 좌충우돌 개발 과정 - 프로그래머가 챙겨주는 또 다른 개발자 사용 설명서
NDC 2014 Beyond Code: <야생의 땅:듀랑고>의 좌충우돌 개발 과정 - 프로그래머가 챙겨주는 또 다른 개발자 사용 설명서
영준 박
ホットな日本語入力技術のお勉強。〜 OSC 2016 Hamanako 編 〜
ホットな日本語入力技術のお勉強。〜 OSC 2016 Hamanako 編 〜
Masahiko Hashimoto
NDC 2016 김태현 - 글로벌 동시 퀵 서버패치 이렇게 구축 했다
NDC 2016 김태현 - 글로벌 동시 퀵 서버패치 이렇게 구축 했다
Taehyun Kim
12 分くらいで知るLuaVM
12 分くらいで知るLuaVM
Yuki Tamura
TRICK 2022 Results
TRICK 2022 Results
mametter
わしわし的おすすめ .gitconfig 設定 (と見せかけて実はみんなのおすすめ .gitconfig 設定を教えてもらう魂胆) #広島Git 勉強会
わしわし的おすすめ .gitconfig 設定 (と見せかけて実はみんなのおすすめ .gitconfig 設定を教えてもらう魂胆) #広島Git 勉強会
Yukinori KITADAI
인공지능 슈퍼마리오의 거의 모든 것( Pycon 2018 정원석)
인공지능 슈퍼마리오의 거의 모든 것( Pycon 2018 정원석)
wonseok jung
More Related Content
What's hot
C#でOpenCL with OpenTK + Cloo
C#でOpenCL with OpenTK + Cloo
aokomoriuta
ROSによるロボットソフトウェアの開発
ROSによるロボットソフトウェアの開発
Yuji Yamauchi
LiDARとSensor Fusion
LiDARとSensor Fusion
Satoshi Tanaka
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
Natsuki Yamanaka
BrowserMob-Proxyのお話
BrowserMob-Proxyのお話
Masahiko Hashimoto
Camera2APIと画像フォーマット
Camera2APIと画像フォーマット
Kiyotaka Soranaka
Behind the Performance of Quake 3 Engine: Fast Inverse Square Root
Behind the Performance of Quake 3 Engine: Fast Inverse Square Root
Maksym Zavershynskyi
Jvm internal
Jvm internal
Go Tanaka
스타트업 사례로 본 로그 데이터 분석 : Tajo on AWS
스타트업 사례로 본 로그 데이터 분석 : Tajo on AWS
Matthew (정재화)
행동 기반 게임오브젝트
행동 기반 게임오브젝트
kgun86
2021.06.18 오늘도 나는 메타버스로 출근합니다
2021.06.18 오늘도 나는 메타버스로 출근합니다
Kiheon Shin
Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기
jdo
2015 py con word2vec이 추천시스템을 만났을때
2015 py con word2vec이 추천시스템을 만났을때
choi kyumin
NDC 2014 Beyond Code: <야생의 땅:듀랑고>의 좌충우돌 개발 과정 - 프로그래머가 챙겨주는 또 다른 개발자 사용 설명서
NDC 2014 Beyond Code: <야생의 땅:듀랑고>의 좌충우돌 개발 과정 - 프로그래머가 챙겨주는 또 다른 개발자 사용 설명서
영준 박
ホットな日本語入力技術のお勉強。〜 OSC 2016 Hamanako 編 〜
ホットな日本語入力技術のお勉強。〜 OSC 2016 Hamanako 編 〜
Masahiko Hashimoto
NDC 2016 김태현 - 글로벌 동시 퀵 서버패치 이렇게 구축 했다
NDC 2016 김태현 - 글로벌 동시 퀵 서버패치 이렇게 구축 했다
Taehyun Kim
12 分くらいで知るLuaVM
12 分くらいで知るLuaVM
Yuki Tamura
TRICK 2022 Results
TRICK 2022 Results
mametter
わしわし的おすすめ .gitconfig 設定 (と見せかけて実はみんなのおすすめ .gitconfig 設定を教えてもらう魂胆) #広島Git 勉強会
わしわし的おすすめ .gitconfig 設定 (と見せかけて実はみんなのおすすめ .gitconfig 設定を教えてもらう魂胆) #広島Git 勉強会
Yukinori KITADAI
인공지능 슈퍼마리오의 거의 모든 것( Pycon 2018 정원석)
인공지능 슈퍼마리오의 거의 모든 것( Pycon 2018 정원석)
wonseok jung
What's hot
(20)
C#でOpenCL with OpenTK + Cloo
C#でOpenCL with OpenTK + Cloo
ROSによるロボットソフトウェアの開発
ROSによるロボットソフトウェアの開発
LiDARとSensor Fusion
LiDARとSensor Fusion
スマホ(Android・iPhone)でWebRTC
スマホ(Android・iPhone)でWebRTC
BrowserMob-Proxyのお話
BrowserMob-Proxyのお話
Camera2APIと画像フォーマット
Camera2APIと画像フォーマット
Behind the Performance of Quake 3 Engine: Fast Inverse Square Root
Behind the Performance of Quake 3 Engine: Fast Inverse Square Root
Jvm internal
Jvm internal
스타트업 사례로 본 로그 데이터 분석 : Tajo on AWS
스타트업 사례로 본 로그 데이터 분석 : Tajo on AWS
행동 기반 게임오브젝트
행동 기반 게임오브젝트
2021.06.18 오늘도 나는 메타버스로 출근합니다
2021.06.18 오늘도 나는 메타버스로 출근합니다
Qt Creator에 OpenCV 연동하기
Qt Creator에 OpenCV 연동하기
2015 py con word2vec이 추천시스템을 만났을때
2015 py con word2vec이 추천시스템을 만났을때
NDC 2014 Beyond Code: <야생의 땅:듀랑고>의 좌충우돌 개발 과정 - 프로그래머가 챙겨주는 또 다른 개발자 사용 설명서
NDC 2014 Beyond Code: <야생의 땅:듀랑고>의 좌충우돌 개발 과정 - 프로그래머가 챙겨주는 또 다른 개발자 사용 설명서
ホットな日本語入力技術のお勉強。〜 OSC 2016 Hamanako 編 〜
ホットな日本語入力技術のお勉強。〜 OSC 2016 Hamanako 編 〜
NDC 2016 김태현 - 글로벌 동시 퀵 서버패치 이렇게 구축 했다
NDC 2016 김태현 - 글로벌 동시 퀵 서버패치 이렇게 구축 했다
12 分くらいで知るLuaVM
12 分くらいで知るLuaVM
TRICK 2022 Results
TRICK 2022 Results
わしわし的おすすめ .gitconfig 設定 (と見せかけて実はみんなのおすすめ .gitconfig 設定を教えてもらう魂胆) #広島Git 勉強会
わしわし的おすすめ .gitconfig 設定 (と見せかけて実はみんなのおすすめ .gitconfig 設定を教えてもらう魂胆) #広島Git 勉強会
인공지능 슈퍼마리오의 거의 모든 것( Pycon 2018 정원석)
인공지능 슈퍼마리오의 거의 모든 것( Pycon 2018 정원석)
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 now