Submit Search
Upload
JavascriptでLeap Motion事始め
•
6 likes
•
3,830 views
Kenta Kowaki
Follow
JavascriptとLeapMotionとCanvasで子供向けコンテンツを作った話
Read less
Read more
Internet
Report
Share
Report
Share
1 of 46
Download now
Download to read offline
Recommended
Spring batch overivew
Spring batch overivew
Chanyeong Choi
決済サービスのSpring Bootのバージョンを2系に上げた話
決済サービスのSpring Bootのバージョンを2系に上げた話
Ryosuke Uchitate
OSS についてあれこれ
OSS についてあれこれ
Takuto Wada
組み込みLinuxでのGolangのススメ
組み込みLinuxでのGolangのススメ
Tetsuyuki Kobayashi
Docker friendlyPHP / Laravel
Docker friendlyPHP / Laravel
Kentarou Takeda
Swiftで、Webサーバにデータを送信・登録しよう!
Swiftで、Webサーバにデータを送信・登録しよう!
Kanako Kobayashi
MySQLの文字コード事情
MySQLの文字コード事情
Masahiro Tomita
PHP の GC の話
PHP の GC の話
y-uti
Recommended
Spring batch overivew
Spring batch overivew
Chanyeong Choi
決済サービスのSpring Bootのバージョンを2系に上げた話
決済サービスのSpring Bootのバージョンを2系に上げた話
Ryosuke Uchitate
OSS についてあれこれ
OSS についてあれこれ
Takuto Wada
組み込みLinuxでのGolangのススメ
組み込みLinuxでのGolangのススメ
Tetsuyuki Kobayashi
Docker friendlyPHP / Laravel
Docker friendlyPHP / Laravel
Kentarou Takeda
Swiftで、Webサーバにデータを送信・登録しよう!
Swiftで、Webサーバにデータを送信・登録しよう!
Kanako Kobayashi
MySQLの文字コード事情
MySQLの文字コード事情
Masahiro Tomita
PHP の GC の話
PHP の GC の話
y-uti
データで散らかった製造業界における最高の翻訳機 Node-RED
データで散らかった製造業界における最高の翻訳機 Node-RED
nodered_ug_jp
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
Ryosuke Otsuya
Micrometerでメトリクスを収集してAmazon CloudWatchで可視化
Micrometerでメトリクスを収集してAmazon CloudWatchで可視化
Ryosuke Uchitate
What's new in Spring Boot 2.6 ?
What's new in Spring Boot 2.6 ?
土岐 孝平
WebSocketプロトコル
WebSocketプロトコル
Daniel Perez
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
Natsuki Yamanaka
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
whywaita
雑なMySQLパフォーマンスチューニング
雑なMySQLパフォーマンスチューニング
yoku0825
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
PYNQ 祭り: Pmod のプログラミング
PYNQ 祭り: Pmod のプログラミング
ryos36
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
すごく分かるwarden
すごく分かるwarden
i_yudai
フリーでできるWebセキュリティ(burp編)
フリーでできるWebセキュリティ(burp編)
abend_cve_9999_0001
Bounce Tracking ProtectionにおけるFederationへの課題と最新動向 #openid #technight
Bounce Tracking ProtectionにおけるFederationへの課題と最新動向 #openid #technight
Yahoo!デベロッパーネットワーク
RISC-Vの可能性
RISC-Vの可能性
たけおか しょうぞう
MySQLデータ暗号化と暗号鍵のローテーション
MySQLデータ暗号化と暗号鍵のローテーション
Shinya Sugiyama
2022のShowNetに向けて_ShowNet2021_conf_mini_5_2022_stm
2022のShowNetに向けて_ShowNet2021_conf_mini_5_2022_stm
Interop Tokyo ShowNet NOC Team
TTNのご紹介_2023年版
TTNのご紹介_2023年版
CRI Japan, Inc.
InfluxDB の概要 - sonots #tokyoinfluxdb
InfluxDB の概要 - sonots #tokyoinfluxdb
Naotoshi Seo
More Related Content
What's hot
データで散らかった製造業界における最高の翻訳機 Node-RED
データで散らかった製造業界における最高の翻訳機 Node-RED
nodered_ug_jp
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
Ryosuke Otsuya
Micrometerでメトリクスを収集してAmazon CloudWatchで可視化
Micrometerでメトリクスを収集してAmazon CloudWatchで可視化
Ryosuke Uchitate
What's new in Spring Boot 2.6 ?
What's new in Spring Boot 2.6 ?
土岐 孝平
WebSocketプロトコル
WebSocketプロトコル
Daniel Perez
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
Natsuki Yamanaka
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
whywaita
雑なMySQLパフォーマンスチューニング
雑なMySQLパフォーマンスチューニング
yoku0825
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
PYNQ 祭り: Pmod のプログラミング
PYNQ 祭り: Pmod のプログラミング
ryos36
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
すごく分かるwarden
すごく分かるwarden
i_yudai
フリーでできるWebセキュリティ(burp編)
フリーでできるWebセキュリティ(burp編)
abend_cve_9999_0001
Bounce Tracking ProtectionにおけるFederationへの課題と最新動向 #openid #technight
Bounce Tracking ProtectionにおけるFederationへの課題と最新動向 #openid #technight
Yahoo!デベロッパーネットワーク
RISC-Vの可能性
RISC-Vの可能性
たけおか しょうぞう
MySQLデータ暗号化と暗号鍵のローテーション
MySQLデータ暗号化と暗号鍵のローテーション
Shinya Sugiyama
2022のShowNetに向けて_ShowNet2021_conf_mini_5_2022_stm
2022のShowNetに向けて_ShowNet2021_conf_mini_5_2022_stm
Interop Tokyo ShowNet NOC Team
TTNのご紹介_2023年版
TTNのご紹介_2023年版
CRI Japan, Inc.
InfluxDB の概要 - sonots #tokyoinfluxdb
InfluxDB の概要 - sonots #tokyoinfluxdb
Naotoshi Seo
What's hot
(20)
データで散らかった製造業界における最高の翻訳機 Node-RED
データで散らかった製造業界における最高の翻訳機 Node-RED
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
究極のゲーム用通信プロトコルを探せ!
究極のゲーム用通信プロトコルを探せ!
Micrometerでメトリクスを収集してAmazon CloudWatchで可視化
Micrometerでメトリクスを収集してAmazon CloudWatchで可視化
What's new in Spring Boot 2.6 ?
What's new in Spring Boot 2.6 ?
WebSocketプロトコル
WebSocketプロトコル
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
2015 03 26 社内勉強会_オープンソースソフトウェアライセンスについて
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
CyberAgentのプライベートクラウド Cycloudの運用及びモニタリングについて #CODT2020 / Administration and M...
雑なMySQLパフォーマンスチューニング
雑なMySQLパフォーマンスチューニング
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
PYNQ 祭り: Pmod のプログラミング
PYNQ 祭り: Pmod のプログラミング
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
すごく分かるwarden
すごく分かるwarden
フリーでできるWebセキュリティ(burp編)
フリーでできるWebセキュリティ(burp編)
Bounce Tracking ProtectionにおけるFederationへの課題と最新動向 #openid #technight
Bounce Tracking ProtectionにおけるFederationへの課題と最新動向 #openid #technight
RISC-Vの可能性
RISC-Vの可能性
MySQLデータ暗号化と暗号鍵のローテーション
MySQLデータ暗号化と暗号鍵のローテーション
2022のShowNetに向けて_ShowNet2021_conf_mini_5_2022_stm
2022のShowNetに向けて_ShowNet2021_conf_mini_5_2022_stm
TTNのご紹介_2023年版
TTNのご紹介_2023年版
InfluxDB の概要 - sonots #tokyoinfluxdb
InfluxDB の概要 - sonots #tokyoinfluxdb
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