リビング・ボッチャ

自宅のリビングで不定期に、子供たちとボッチャ大会を開催しています。

リビングで6畳か、少なくとも4畳半くらいのスペースを確保できれば、ボッチャは楽しめるかと思います。

初心者・幼児は省スペースの方が楽しい

ボッチャの正式コートはバトミントンコートと同じくらいの広さですが、初心者は遠くに転がしてしまい、なかなかジャックボール(白い目標球)に近づけることが出来ません。

逆に幼児は、あまり遠くにボールを投げられないので、ジャックボールが遠いと届きません。

狭いコートは戦術の幅が広がる

コートが狭いことで、ジャックボールに近づく喜びがあります。

また、戦術の幅が広がる利点もあります。

ボールをはじく、押すといった技を狙いやすく、ただの玉寄ゲームにならず、戦術を楽しむこともできるでしょう。

Amazonで2万円弱の安い(?)ボッチャセットも買えるようになってきたので、自宅リビング用に1セット購入しても良いかもしれません。

Telloでボッチャを上から見よう

Telloを使い、上からボッチャを中継を出来るようになりました。

ボッチャは白いボールに自分のボールを近づけるゲームですが、投球位置からでは、誰のボールが近いのか意外と分かりません。

そこでドローンTelloを使い、上からコートを見下ろして、映像を中継できるようにしました。

鏡面反射で真下を撮影

Telloは真下を撮影できないので、鏡で反射させて真下を映しています

スタビライザー(振れ補正)は効かないのですが、今は良しとしましょう。

どのボールが、白いボールに一番近いか確認したいだけなので、もしブレない画像で確認したいのなら、1フレーム静止画を使えば済みます。

室内での安定ホバリング

コントローラー+ヒモで、安定したホバリングが可能になりました。

特にヒモでTelloをつないだことにより、誤ってプレイヤーやギャラリーの方に飛んでいく危険性もなくなりました。

プログラミングで飛ばすことが課題

コントローラーで・・・しかもヒモでつないで飛ばしているくらいなら、長めの自撮り棒にアクションカメラ(GoProやInsta360でWi-Fi中継ができる機種)をくっつけて、中継したほうが簡単だし、きれいだと思います。

あえてドローンを使う理由はプログラミングができるから。

白いボールの上に自動で飛んでいき、中継できるようにはしたいです。

まあ・・・ドローン自体が子供たちに人気なので、当分はコントローラーで飛ばして、ボッチャと組み合わせて楽しむのも悪くないかと思います。

Tello コントローラーで室内も安全

Telloをスマホで操縦するのは難しく、ドローン用コントローラー「GameSir T1d」を注文しました。

在庫切れで1か月以上待ち、その間にスマホ操縦に若干慣れてましたが、やはりコントローラーは操縦性が別格です。

Tello離陸!

コントローラー操縦は初めてです。

うまく飛ばせるか分からず、安全のため、Telloにヒモをつけて飛ばします。

コントローラーのボタンを適当に押したのですが、離陸の仕方が分からず、スマホ画面から飛ばしちゃいました。

※後で調べましたが、R2ボタン+Yが離陸のようです。

コントローラーの操縦性は高い!

快適です。手元を見ないで操縦できます。

平面のスマホと、立体のコントローラーの違いでしょう。

ジョイスティックで力加減の調整や、方向操作が劇的にやりやすくなりました。

もう、室内でもぶつかる気がしません。

・・・ヒモもありますし。

室内練習ならコントローラー必須

人口密集地に住む人は、Telloを室内で飛ばしていることが多いと思います。

室内で飛ばすなら、コントローラーで操縦が大幅に安全になります。

Telloが壁にぶつかりそうになったら、慌ててスマホ画面を見て方向転換しなくても、コントローラーで直感的にTelloから目を離さず方向転換できます。

Tello推奨のコントローラー「GameSir T1d」。

操縦性が上がり、墜落で壊れる可能性が減るのであれば、4,000円弱の買い物も、高くないかと思えました。

Leap Motionで手話はできるか?

Leap Motionで空中スワイプを作っていましたが、このセンサーを買った当初の目的は、手話Vチューバーを作ることでした。

手話で挨拶すらできない

バーチャルアバターを作れるソフトfecerigを使って、手話Vチューバーを作れるか試しました。

まずは挨拶をやろうと思います。

右手人差し指と、左手人差し指で、お辞儀をするように曲げて・・・

う・・・う〜ん。曲がらん。

左手(アバターの右手)の親指は立つし、右手の人差し指は曲がらないし。

ダメだ!断念しました。

手話Vチューバーを作りたかったのは

イベントや仕事で、稀にろう者と会うことがあるのですが・・・私は全然手話をできません。挨拶とかお礼とか、わずかな単語しか分かりません。

そんな感じなので、遠隔で手話通訳をしてくれるサービスがあったらいいなと思い、調査していました。

その時流行りだったVチューバーにたどり着き、アバターが手話をできないか知りたくなり、手軽で安価に実現できそうなfecerigとLeap Motionを購入して検証していました。

福祉としての手話通訳サービスだと、利用する場面が限定されそうなので、エンタメ寄りな手話サービス、手話Vtuverがいると良い気がします。

私から見ると、手話の使い手は、手の動きのパフォーマーに見えます。

Webカメラ+Leap Motionで上半身キャプチャ

技術の話でです。

fecerigはWebカメラを使い、表情を3Dアバターに反映させることが出来ます。

さらにオプションでLeap Motionを接続すると、手も動かせるようになります。

体に何も付けないで、モーションキャプチャができる手軽さは素晴らしいと思います。

反面、精度の高いキャプチャは望んではいけないでしょう。

手話は難しいという結論になりました。

透明スクリーンに映そう

最後に余談ですが、透明スクリーン(ポリッドスクリーン)に映して遊んでみました。投影が中途半端で美しくはありません。

大雑把な動きだったらキャプチャできるので、身振り手振りで雰囲気を伝えることなら、Leap Motion+fecerigで問題なさそうです。

文字上で動画再生 mix-blend-modeの応用

CSSで動画を合成できる、mix-blend-modeを前回使ってみました。

何か応用できないかな・・・。

思い付きですが、文字上で動画を再生してみようと思います。

文字と動画のブレンド

さくら舞う動画と文字を、mix-blend-mode: screen;でブレンドしました。

テキストとして操作できるように

そのままだと、テキストとして扱えないので、動画には合わせてpointer-events: none;をかけます。

UI操作上は動画がない扱いになり、テキストとして操作可能になります。

動画が文字の形にトリムされるわけではありません。

そのためブレンドモードscreenを使う場合、背景が白という制約はあります。

他のブレンドモードも、配色の制限はでてくると思います。

非対応ブラウザへの対応

IE、Edgeは2019年9月現在mix-blend-modeが効かないので、動画を消してしまいます。

ITHatさんの記事で、CSSのブラウザ対応を賢く調べる方法が紹介されていたので参考にさせて頂きました。

今回のコード

overflow: hidden;で、文字の高さからはみ出す動画はカットしています。

文字上で動画再生の実用性は?

GIFアニメで似たようなことが実現できそうですが、今回はプレーンテキストを使っているので、ページ翻訳が効いたり、テキストをコピー出来たり、アクセシビリティは確保しやすいかと思います。

ただ、チラチラ動いている文字を読むと気が散るので、本当にアクセシビリティを気にするなら、そもそも動画をブレンドはしない方がよいのでは・・・と、考えてしまいます。

・・・とは言え、アクセシビリティだけじゃ話が進まない場面は多々あるので、何か新しい(?)デザインを要求されたときの、ネタになればと幸いです。

CSSで動画合成 mix-blend-mode

CSSで動画を合成できました。

カメラ映像とスクリーン映像のブレンドが、簡単にできることに驚きです。

CSS「mix-blend-mode」を使う

PhotoShopで使われる乗算やスクリーンなどのレイヤーブレンド効果を、CSSで実現することができます。

CSSの「mix-blend-mode」で、指定の画像にブレンド効果を適用できます。

ただ、IE、Edgeが未対応(2019年9月現在)のため、Webページに投入するのは難しいです。

現状ではユーザーが限定されるWebアプリなどで、使用場面があるかもしれません。

mix-blend-modeはVideo要素にも使える

Chromeだけで良いので、Webカメラの映像と動画素材を合成したい。そんな場面がありました。

試しにVideo要素にmix-blend-modeをかけてみたら、あっさりブレンドを実現できるではありませんか!

↓Webカメラの映像

↓合成したいスクリーン映像’(動画素材はこちらから拝借)

この2つをブレンドすると・・・

合成、ブレンドがブラウザで出来ちゃいます!

今回のコード

画面いっぱいのVideo要素を2つ重ねて、前面に「mix-blend-mode: screen;」をかけています。

黒背景の素材を合成するときは「screen」を指定すると良いでしょう。

mix-blend-mode合成動画の使いどころ

私はWebでARコンテンツを作るときに使いましたが、他にもWebRTCと組み合わせ、動画チャットをリアルタイムで映像素材と合成して配信しする・・・など、使えるかもしれません。

使う場面は限定的だと思いますが、不意に役立ちそうな技術です。

Leap Motionで空中スワイプ その3

一昨日からLeap Motionの空中スワイプで遊んで来ました。

そして、春夏秋冬を楽しむコンテンツを作り、壁に投影してみました。

今度は、スマートグラスに映して見てみましょう。

※GIFアニメが重くなったので、かなり減色しています。

Leap Motion × MOVERIO

スマートグラスは、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で空中スワイプ その2

前回、Leap Motionで空中スワイプ操作のスライドショーを作りました。

ブラウザで動くWebアプリです。

ブラウザをフルスクリーンにして、プロジェクターで壁に投影すれば、ちょっとした不思議体験ができます。

春夏秋冬を感じよう

壁に花火が打ちあがりました。

夏の風物詩の花火。

床に置いたLeap Motionで、季節を変えられます。

春・・・さくら舞い散る

夏・・・打ち上げ花火

秋・・・色づく紅葉

冬・・・しんしんと降る雪

春夏秋冬を視覚的に感じる体験?です。

本格的にやるなら、温度連動とか匂いとかを組み合わせた方が良いかも・・・。

直感的で楽しい空中スワイプ

空中スワイプは、子供でも簡単に使いこなします。

最初にセンサーの位置を教えてあげる必要がありますが、一度見れば覚えられる簡単な操作です。

空中スワイプは直感的で楽しいUIかと思います。

Leap Motionで空中スワイプ

Leap MotionのセンサーデータはJavaScriptで取得できることを、前回確認しました。

手の座標を取得できるので、手を払うスワイプ操作UIを作ってみます。

なんだか心地よい空中スワイプ

スライドショーをスワイプするアプリケーションを作ってみました。

自分の手が画面上に入り込み、さらにスワイプするときに、ちょっと重さを感じるような錯覚を受けます。

思ったより、おもしろい体験です。

Web基本構成で開発

leapjsのサンプル、css-visualizer.htmlをベースとして使いました。

HTML+CSS+JavaScriptというWebの基本構成で開発できるのが、うれしいところです。

手のひらのX座標は、

で、値を取れます。

今のフレームのhand.palmPosition[0]と、前のフレームのhand.palmPosition[0]を引き算すると、X方向の移動距離を求められます。

例:
今のフレーム X座標:280
前のフレーム X座標:300

X方向の移動 -20

もし移動距離が -10より小さかったら、スワイプと判断し、スライドイベントを発生させるようにしました。

値が小さくなる(マイナスになる)場合、右から左へスワイプしたことになります。

スライドも右から左へ動かします。

一方通行のスワイプ操作が良い

昔、反射式光電スイッチでジェスチャー操作を作ったとき、空中スワイプ操作の問題に直面しました。

手をスワイプして戻るときに、意図しない逆方向の入力が入ってしまいます。

手の速さ、手を戻すタイミング、戻す速さは人それぞれで、誰もが使いやすいUIとして成立させることは難しかったです。

それならもう、一方通行のスワイプにして、スライドショーを操作したほうが快適だろうという結論になりました。

しかし、他に方法があるかもしれません。

今後もより操作性の高いUIを追求してみます。

Leap MotionをJavaScriptで

モーションキャプチャー系のアプリケーションを作るとき、周りの人はUnityを使っています。

私はWeb系なので、ブラウザ上でなんとかしたいところです。

JavaScriptが使える!

幸運なことに、Leap MotionはJavaScriptで開発可能です。

WebSocketで手のデータを送信しており、しかも、leapjsというライブラリまで用意されています。

leap-0.6.4.js

更新、5年前。

更新が止まっているけど動くかな・・・?

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年の歳月は長すぎた。

2019年現在、JavaScriptで何ができる?

手や指の座標は取得できるようです。

なので、手をブラウザに描画したり、自分でジェスチャーを判定するコードを書けば、JavaScriptでWebアプリケーションを作れるかと思います。

以下、leapjsのサンプルで起動したものを、いくつか掲載します。

値だけのものは分かりにくいので、ビジュアライザーを合わせて掲載しています。

回転を取得 loop.html

rollで手のひらの角度を取得できます。

ちなみにHandは手のIDで、124回手を認識したということです。

3軸回転 roll-pitch-yaw.html

ロール、ピッチ、ヨーという言葉を知らなかったのですが、飛行機とかに使われる3軸の回転のことみたいです。

ラジコン飛行機や、ドローンを飛ばすときに使えるかもしれません。

three.jsで3D描画 threejs-bones.html

three.jsを使うことで、Unityみたいなことができるようになります。

three.jsを使えれば・・・。

CSSで3D描画 css-visualizer.html

手の描画だけなら、CSSだけで3D表現をした方が、カスタマイズしやすいかと思います。

Webデザイナー寄りの人ほど、このサンプルを重宝するでしょう。

JSONデータでジェスチャーを判定する

手や指の位置はJSONで取得されています。

「右から左に手を払った」といったジェスチャーであれば、比較的簡単に実装できるでしょう。

実際にジェスチャー操作を実装したので、また記事を投稿します。