ユニバーサル社会で役立つデザインや技術の研究
自宅のリビングで不定期に、子供たちとボッチャ大会を開催しています。
リビングで６畳か、少なくとも４畳半くらいのスペースを確保できれば、ボッチャは楽しめるかと思います。
ボッチャの正式コートはバトミントンコートと同じくらいの広さです。
しかし、広いコートは初心者には優しくありません。
９ｍくらい先にジャックボール（白い目標球）を転がしてしまうと、初心者ではなかなか近づけることが出来ません。
幼児に至っては、遠いジャックボールに投球が届かず、ゲームが成立しない場合もあります。
初心者・幼児が遊ぶなら、リビング程度の広さで始めた方が楽しいです。
ジャックボールに近づく喜びがあります。
コートが狭いことで、戦術の幅が広がる利点もあります。
ボールをはじく（ヒット）、押す（プッシュ）といった技を狙いやすく、ただの玉寄ゲームにならず、戦術を楽しむこともできるでしょう。
Amazonで２万円弱の安い（？）ボッチャセットも買えるようになってきたので、自宅リビング用に１セット購入しても良いかもしれません。
Telloを使い、上からボッチャを中継を出来るようになりました。
ボッチャは白いボールに自分のボールを近づけるゲームですが、投球位置からでは、誰のボールが近いのか意外と分かりません。
そこでドローンTelloを使い、上からコートを見下ろして、映像を中継できるようにしました。
Telloは真下を撮影できないので、鏡で反射させて真下を映しています。
スタビライザー（振れ補正）は効かないのですが、今は良しとしましょう。
どのボールが、白いボールに一番近いか確認したいだけなので、もしブレない画像で確認したいのなら、1フレーム静止画を使えば済みます。
コントローラー＋ヒモで、安定したホバリングが可能になりました。
特にヒモでTelloをつないだことにより、誤ってプレイヤーやギャラリーの方に飛んでいく危険性もなくなりました。
コントローラーで・・・しかもヒモでつないで飛ばしているくらいなら、長めの自撮り棒にアクションカメラ（GoProやInsta360でWi-Fi中継ができる機種）をくっつけて、中継したほうが簡単だし、きれいだと思います。
あえてドローンを使う理由はプログラミングができるから。
白いボールの上に自動で飛んでいき、中継できるようにはしたいです。
まあ・・・ドローン自体が子供たちに人気なので、当分はコントローラーで飛ばして、ボッチャと組み合わせて楽しむのも悪くないかと思います。
Telloをスマホで操縦するのは難しく、ドローン用コントローラー「GameSir T1d」を注文しました。
在庫切れで１か月以上待ち、その間にスマホ操縦に若干慣れてましたが、やはりコントローラーは操縦性が別格です。
コントローラー操縦は初めてです。
うまく飛ばせるか分からず、安全のため、Telloにヒモをつけて飛ばします。
コントローラーのボタンを適当に押したのですが、離陸の仕方が分からず、スマホ画面から飛ばしちゃいました。
※後で調べましたが、R2ボタン＋Yが離陸のようです。
快適です。手元を見ないで操縦できます。
平面のスマホと、立体のコントローラーの違いでしょう。
ジョイスティックで力加減の調整や、方向操作が劇的にやりやすくなりました。
もう、室内でもぶつかる気がしません。
・・・ヒモもありますし。
人口密集地に住む人は、Telloを室内で飛ばしていることが多いと思います。
室内で飛ばすなら、コントローラーで操縦が大幅に安全になります。
Telloが壁にぶつかりそうになったら、慌ててスマホ画面を見て方向転換しなくても、コントローラーで直感的にTelloから目を離さず方向転換できます。
Tello推奨のコントローラー「GameSir T1d」。
操縦性が上がり、墜落で壊れる可能性が減るのであれば、4,000円弱の買い物も、高くないかと思えました。
Leap Motionで空中スワイプを作っていましたが、このセンサーを買った当初の目的は、手話Vチューバーを作ることでした。
バーチャルアバターを作れるソフトfecerigを使って、手話Vチューバーを作れるか試しました。
まずは挨拶をやろうと思います。
右手人差し指と、左手人差し指で、お辞儀をするように曲げて・・・
う・・・う〜ん。曲がらん。
左手（アバターの右手）の親指は立つし、右手の人差し指は曲がらないし。
ダメだ！断念しました。
イベントや仕事で、稀にろう者と会うことがあるのですが・・・私は全然手話をできません。挨拶とかお礼とか、わずかな単語しか分かりません。
そんな感じなので、遠隔で手話通訳をしてくれるサービスがあったらいいなと思い、調査していました。
その時流行りだったVチューバーにたどり着き、アバターが手話をできないか知りたくなり、手軽で安価に実現できそうなfecerigとLeap Motionを購入して検証していました。
福祉としての手話通訳サービスだと、利用する場面が限定されそうなので、エンタメ寄りな手話サービス、手話Vtuverがいると良い気がします。
私から見ると、手話の使い手は、手の動きのパフォーマーに見えます。
技術の話でです。
fecerigはWebカメラを使い、表情を3Dアバターに反映させることが出来ます。
さらにオプションでLeap Motionを接続すると、手も動かせるようになります。
体に何も付けないで、モーションキャプチャができる手軽さは素晴らしいと思います。
反面、精度の高いキャプチャは望んではいけないでしょう。
手話は難しいという結論になりました。
最後に余談ですが、透明スクリーン(ポリッドスクリーン)に映して遊んでみました。投影が中途半端で美しくはありません。
大雑把な動きだったらキャプチャできるので、身振り手振りで雰囲気を伝えることなら、Leap Motion＋fecerigで問題なさそうです。
CSSで動画を合成できる、mix-blend-modeを前回使ってみました。
何か応用できないかな・・・。
思い付きですが、文字上で動画を再生してみようと思います。
さくら舞う動画と文字を、mix-blend-mode: screen;でブレンドしました。
そのままだと、テキストとして扱えないので、動画には合わせてpointer-events: none;をかけます。
UI操作上は動画がない扱いになり、テキストとして操作可能になります。
動画が文字の形にトリムされるわけではありません。
そのためブレンドモードscreenを使う場合、背景が白という制約はあります。
他のブレンドモードも、配色の制限はでてくると思います。
IE、Edgeは2019年9月現在mix-blend-modeが効かないので、動画を消してしまいます。
ITHatさんの記事で、CSSのブラウザ対応を賢く調べる方法が紹介されていたので参考にさせて頂きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>mix-blend-mode</title> <style> body, h1 { margin: 0; padding: 0; } h1 { font-size: 15em; text-align: center; font-family: "Arial Black"; } #screen { position: relative; background-color: #FFF; overflow: hidden; } #screen video { position: absolute; top: 0; left: 0; width: 100%; mix-blend-mode: screen; pointer-events: none; } </style> </head> <body> <!-- タイトル表示エリア --> <div id="screen"> <video src="common/movie/1.mp4" muted="true" autoplay loop></video> <h1>TITLE</h1> </div> <script type="text/javascript"> // 非対応ブラウザで動画は非表示 var div = document.createElement('div'); div.style.cssText = 'mix-blend-mode: screen'; if (!div.style.length){ var video = document.querySelector('#screen video'); video.parentNode.removeChild(video); } </script> </body> </html> |
overflow: hidden;で、文字の高さからはみ出す動画はカットしています。
GIFアニメで似たようなことが実現できそうですが、今回はプレーンテキストを使っているので、ページ翻訳が効いたり、テキストをコピー出来たり、アクセシビリティは確保しやすいかと思います。
ただ、チラチラ動いている文字を読むと気が散るので、本当にアクセシビリティを気にするなら、そもそも動画をブレンドはしない方がよいのでは・・・と、考えてしまいます。
・・・とは言え、アクセシビリティだけじゃ話が進まない場面は多々あるので、何か新しい（？）デザインを要求されたときの、ネタになればと幸いです。
CSSで動画を合成できました。
カメラ映像とスクリーン映像のブレンドが、簡単にできることに驚きです。
PhotoShopで使われる乗算やスクリーンなどのレイヤーブレンド効果を、CSSで実現することができます。
CSSの「mix-blend-mode」で、指定の画像にブレンド効果を適用できます。
ただ、IE、Edgeが未対応（2019年9月現在）のため、Webページに投入するのは難しいです。
現状ではユーザーが限定されるWebアプリなどで、使用場面があるかもしれません。
Chromeだけで良いので、Webカメラの映像と動画素材を合成したい。そんな場面がありました。
試しにVideo要素にmix-blend-modeをかけてみたら、あっさりブレンドを実現できるではありませんか！
↓Webカメラの映像
↓合成したいスクリーン映像’（動画素材はこちらから拝借）
この２つをブレンドすると・・・
合成、ブレンドがブラウザで出来ちゃいます！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>mix-blend-mode</title> <style> body { margin: 0; padding: 0; } video { position: absolute; width: 100%; } /* スクリーンとして重ねる */ #screen { mix-blend-mode: screen; } </style> </head> <body> <!-- 背景にカメラ映像 --> <video id="camera"></video> <!-- 前面にスクリーン動画 --> <video id="screen" src="xxxxxx.mp4" muted="true" autoplay loop></video> <!-- カメラ取り込み --> <script type="text/javascript"> var $camera = document.getElementById('camera'); var setCamera = function(){ var option = { width: 1280, height: 720 }, constrains = { video: {width: 1280, height: 720}, audio: false }; navigator.mediaDevices.getUserMedia(constrains) .then(function(stream) { $camera.srcObject = stream; $camera.play(); }); }; setCamera(); </script> </body> </html> |
画面いっぱいのVideo要素を２つ重ねて、前面に「mix-blend-mode: screen;」をかけています。
黒背景の素材を合成するときは「screen」を指定すると良いでしょう。
私はWebでARコンテンツを作るときに使いましたが、他にもWebRTCと組み合わせ、動画チャットをリアルタイムで映像素材と合成して配信しする・・・など、使えるかもしれません。
使う場面は限定的だと思いますが、不意に役立ちそうな技術です。
一昨日からLeap Motionの空中スワイプで遊んで来ました。
そして、春夏秋冬を楽しむコンテンツを作り、壁に投影してみました。
今度は、スマートグラスに映して見てみましょう。
※GIFアニメが重くなったので、かなり減色しています。
スマートグラスは、EPSONの「MOVERIO BT-30E」を使います。
Leap Motionと組み合わせれば、AR（拡張現実）を空中スワイプで操作できるようになります。
無駄に近未来的です。
スマートグラスBT-30Eは、USB Type-C接続（HDMIも可）でPCの画面を目の前に表示できます。
PCのブラウザをフルスクリーンにして、前に作ったスライドショーWebアプリを開きます。
これをスマートグラスに映すと、黒い背景が透明になり、目の前にコンテンツが浮かんでいるような状態になります。
MOVEIO(BT-30E)は視野角がそこまで広くないので、「部屋に桜が舞ってる！」とはいかず、「目の前の透明ディスプレイに桜が舞ってる」という体感かと思います。
ただ、発色はとてもきれいです。
今回はMRのように現実とCGを融合するようなものではありませんが、それでもMOVEIOとLeap Motionの組み合わせは、やはり、無駄に近未来的です。
前回、Leap Motionで空中スワイプ操作のスライドショーを作りました。
ブラウザで動くWebアプリです。
ブラウザをフルスクリーンにして、プロジェクターで壁に投影すれば、ちょっとした不思議体験ができます。
壁に花火が打ちあがりました。
夏の風物詩の花火。
床に置いたLeap Motionで、季節を変えられます。
春・・・さくら舞い散る
夏・・・打ち上げ花火
秋・・・色づく紅葉
冬・・・しんしんと降る雪
春夏秋冬を視覚的に感じる体験？です。
本格的にやるなら、温度連動とか匂いとかを組み合わせた方が良いかも・・・。
空中スワイプは、子供でも簡単に使いこなします。
最初にセンサーの位置を教えてあげる必要がありますが、一度見れば覚えられる簡単な操作です。
空中スワイプは直感的で楽しいUIかと思います。
Leap MotionのセンサーデータはJavaScriptで取得できることを、前回確認しました。
手の座標を取得できるので、手を払うスワイプ操作UIを作ってみます。
スライドショーをスワイプするアプリケーションを作ってみました。
自分の手が画面上に入り込み、さらにスワイプするときに、ちょっと重さを感じるような錯覚を受けます。
思ったより、おもしろい体験です。
leapjsのサンプル、css-visualizer.htmlをベースとして使いました。
HTML＋CSS＋JavaScriptというWebの基本構成で開発できるのが、うれしいところです。
手のひらのX座標は、
|
1 |
hand.palmPosition[0] |
で、値を取れます。
今のフレームのhand.palmPosition[0]と、前のフレームのhand.palmPosition[0]を引き算すると、X方向の移動距離を求められます。
例：
今のフレーム X座標:280
前のフレーム X座標:300
X方向の移動 -20
もし移動距離が -10より小さかったら、スワイプと判断し、スライドイベントを発生させるようにしました。
値が小さくなる（マイナスになる）場合、右から左へスワイプしたことになります。
スライドも右から左へ動かします。
昔、反射式光電スイッチでジェスチャー操作を作ったとき、空中スワイプ操作の問題に直面しました。
手をスワイプして戻るときに、意図しない逆方向の入力が入ってしまいます。
手の速さ、手を戻すタイミング、戻す速さは人それぞれで、誰もが使いやすいUIとして成立させることは難しかったです。
それならもう、一方通行のスワイプにして、スライドショーを操作したほうが快適だろうという結論になりました。
しかし、他に方法があるかもしれません。
今後もより操作性の高いUIを追求してみます。
モーションキャプチャー系のアプリケーションを作るとき、周りの人はUnityを使っています。
私はWeb系なので、ブラウザ上でなんとかしたいところです。
幸運なことに、Leap MotionはJavaScriptで開発可能です。
WebSocketで手のデータを送信しており、しかも、leapjsというライブラリまで用意されています。
更新、５年前。
更新が止まっているけど動くかな・・・？
GitHubからダウンロードして、examplesフォルダの中のhtmlをブラウザで開けば、サンプルが実行します。
サンプルを実行しても、センサーデータを受信できません。
Leap Motionコントロールパネルで、「Webアプリケーションを許可」にチェックをいれてないことが原因のようです。
私はこれでもうまくいかず、ブラウザのエラーログを見るとWebSocketを受信できていないトラブルが発生していました。
これはPC再起動で解決しました。
認識するようになったので、一番必要なジェスチャー入力サンプル、gestures.htmlを起動します。
手を振りかざしたり、両手をバタバタさせてみたりしますが、何も反応ありません。
また、エラーが！
Legacy Application Detected
An application is requesting legacy APIs that are no longer available in this version of the Leap Motion software.
このバージョンのLeap Motionソフトウェアで使用できなくなった過去のAPIを要求しています。
ダメだ。5年の歳月は長すぎた。
手や指の座標は取得できるようです。
なので、手をブラウザに描画したり、自分でジェスチャーを判定するコードを書けば、JavaScriptでWebアプリケーションを作れるかと思います。
以下、leapjsのサンプルで起動したものを、いくつか掲載します。
値だけのものは分かりにくいので、ビジュアライザーを合わせて掲載しています。
rollで手のひらの角度を取得できます。
ちなみにHandは手のIDで、124回手を認識したということです。
ロール、ピッチ、ヨーという言葉を知らなかったのですが、飛行機とかに使われる３軸の回転のことみたいです。
ラジコン飛行機や、ドローンを飛ばすときに使えるかもしれません。
three.jsを使うことで、Unityみたいなことができるようになります。
three.jsを使えれば・・・。
手の描画だけなら、CSSだけで3D表現をした方が、カスタマイズしやすいかと思います。
Webデザイナー寄りの人ほど、このサンプルを重宝するでしょう。
手や指の位置はJSONで取得されています。
「右から左に手を払った」といったジェスチャーであれば、比較的簡単に実装できるでしょう。
実際にジェスチャー操作を実装したので、また記事を投稿します。