エンジニアブログ

端末モーションによる3Dコントロールを作ってみました

こんにちは、開発本部の0009です。
今回は端末モーションによる3Dコントロールを作ってみました。

↓[VR] ボタンを押してみてください
↓画面左下にボタン2つとスライダーが現れると思います
↓[accel]ボタンによって端末モーションによる3Dコントロールが開始できます
↓対応している環境では, 端末を画面方向に前後するとモデルの大きさが変わります

今回作った端末モーションは,端末の画面方向の前後でのモデルの大きさの調整です。
コツがいるのですが,招くような手首の動かし方をすると大きくなり,
払うような手首の動かし方をすると小さくなります。
[center]ボタンで元の大きさに戻ります。
スライダーで動き具合を調整できます。

人は何でも,大きく見たいときには目に近づけ,小さくみたいときには目から遠ざけますよね。
このモーションの利点は,画面内での大きさを調整させることで,見たい大きさを得るための動きを少なくできることです。
つまり,我々の動きでできる世界が拡がります!

使っているセンサは加速度センサです。コツがいる原因はここにあります。
目との距離ではないので,手の動かし方によって動き具合が変わります。
加速度ですので,一連のモーションをしたときには,必ず正負の両方が現れます。
動き始めに上げた速度は,動き終りには下げることになりますので。
従って,加速度を単純に大きさの係数に紐づけると,モーションが終わった時点で元の大きさに戻ります。
ですので,動き始めと動き終りとに差をつけて,どちらかのみを抽出することになります。
なにを抽出するかを考えた結果,伝わりやすい名のついた動作,”招く”と”払う”になったわけです。
普段意識せず行っている動作も,センサで具体的に数値で見てみると,
意外な癖がみつかることもあり面白いです。

ちなみに,このモーションの着想は,
SONYの体験型展示 “Hidden Senses” の 「7 Picture Wall」から得ました。
おしゃれな未来が創れそうですね!


<参考にした記事>
スマホはセンサーの塊! わずか数行のHTML5とJSで扱えるセンサーまとめ
スマートフォン端末の加速度センサの値を取得する
JavaScript で加速度センサーの値を取ってみる

端末画面の向きと端末のモーション

[Javascript] 経過時間や経過日数を計測する方法