WIP ノリノリで加速度センサを振ったときのテンポをJSで推定する

加速度センサをリズムに合わせて振ったときにBPM解析できるかなーと試してみたログです。

いっつもBeatDetectionはライブラリの中をちゃんと読まずにつかっていたので、一度しらべてみました。

調べると、自己相関 Autocorrelationというものがあるらしく、実装もシンプルだったので、jsで作ってみました。(ほぼjsfiddle参考)

from 自己相関 - Wikipedia

自己相関は、信号に含まれる繰り返しパターンを探すのに有用であり、例えば、ノイズに埋もれた周期的信号の存在を判定したり、 信号中の失われた基本周波数を倍音周波数による示唆に基づき同定するために用いられる。


サンプルURL
スマホからみてください

  • 灰色が、生の加速度センサ
  • 赤色が、ローパスフィルタを通した加速度センサ
  • 緑色が、自己相関関数とおしたグラフ

緑色が左肩上がりになるほど、一定の周期で動いてる(相関がつおい)みたいです。

加速度センサなのか、なんとなく精度はいまいち
シンプルなes6 練習と、master/docsのgithub pages 公開の実験も兼ねて作ってみました。

ソースはこちら

参考

アルプス電気 ハプティック®の展示コンテンツ

去年の仕事ですがやってた仕事をブログにもちょっとずつまとめとこうと。

ALPSSHOW 2016, CEATEC JAPAN 2016で
アルプス電気 様のハプティック®の展示をお手伝いしました。

今回、開発中のデバイスと連携するUnityアプリケーションを担当しました。

展示したものは3つ

  • ハプティック®トリガー: 小さな丸い玉が、プチトマト、かぼす、グミ、心臓の4種類の触感に変わる
  • ハプティック®トリガー プラス東京大学舘暲先生との温冷感共同研究。コップに冷たい水、熱いお茶を注ぐ。温度が変わる。コップを振ると水の入っている触感がする
  • ハプティック®パッドトラックパッドが、タイル、ジーンズ、モルタルの触感にかわる

ほんとはも一個あったのですが、CEATECでは展示エリアの関係で3つ。
デザインはブルーパドル佐藤ねじさんにお願いしました。

開発中のデバイスについてはこんな技術です。 www.alps.com

ネット上の評判については概ね好評。リアルさはまだまだだけど、これからに期待といった感想も多かったです。テレビにも何社もとりあげられ、安倍首相も体験したそうです。 news.mynavi.jp www.seikatsukaden.com

Haptic-Design

制作しての気づいたこと。
余談ですが、ペルチェ素子で温度を変えたときに、実際は5℃程度の変化にもかかわらず、熱そうなお湯が注がれる映像と音を聞くと、コップを落としてしまうくらい熱いと人は騙されてしまっていました。

よく考えれば当たり前ですが、触覚も、視覚と聴覚にかなり影響されていると気づきました。正確に表現するよりも、VR空間内では触感を強調した嘘をつくほうが良さそう。

今回感じたのはこのような触感の試行錯誤は、サウンドエンジニアの仕事ととても似ているということ。 実際にはありえないけど、ちょっと大げさに作る効果音。嘘なんだけど、ある方がリアリティを感じてしまう。
…なんだかそっくりな気がします。

もう研究分野では全盛だけど、コンテンツとして触感が流行ってきた時に、Haptic-Designなる分野が立ち上がってきたら面白いなあと。
そしてこれを教えるのは音響系の学科や、映画学科がこんな授業をやってたりするんじゃないかなーと想像してしまいました。

Unity Editorでグラフを表示するAttribute

UnityとセンサーをUARTでつなげる。センサーの値で動くコンテンツを作るような仕事が多く。 時系列で変化する値を観測するときに、グラフで確認できると捗ります。

今までは別のデバッグ用シーンを作って確認したり、Debug.Logで頑張ったりしていたのですが、
シンプルにEditorのときだけ確認できると便利だなーと思ったので、Attributeでつくってみました。

https://camo.githubusercontent.com/b1b984f1782331e5f1966ef7ba1ba97874f5d7bd/68747470733a2f2f692e6779617a6f2e636f6d2f32623638373439376230386334363434333932333037333039333861313134332e676966

使い方は超絶シンプルで、[Graph(frame_count)]っていうアトリビュートをつけるだけ。

 [Graph(100)]
public int fps;

[Graph(100)]
public float positionX;

[Graph(100)]
public Vector2 positionXY;

[Graph(50)]
public Vector3 position;

[Graph(50)]
public Quaternion rotation;

[Graph(20)]
public Color color;

エディタないだけで、簡単にグラフを表示できるので、センサーの値のデバッグが捗りそう。

ソースコードはこちら

Show graph as unity custom attribute · GitHub

参考

Unity の Editor 拡張でインスペクタにグラフを描画する方法を色々調べてみた - 凹みTips

toio コンテンツのプロトタイプ開発に参加させていただきました

プロジェクトサイト

first-flight.sony.com

https://first-flight.sony.com/pj/toio

クラウドファンディングで、商品を予約できます。ぜひぜひー!

コンセプトムービー

www.youtube.com

トイオ・コレクションムービー

www.youtube.com


東京おもちゃショーで6/4まで展示中です。

www.toys.or.jp

360°動画にイメージマップ的に画像を貼り付ける

360°動画の中の扉を自由に出入りしたいという要件があって、どうやって実現しようかと調べていたら、
Unityエディタ上で直接ポリゴンをつくれて、4点を指定すると、歪みを計算して、ポリゴンを配置してくれる素敵ライブラリを見つけました。

使い方はテラシュールブログさんが詳しい。

素敵なライブラリなんだけど、実際に使ってみると、ランタイム上でしか生成できない。あんまり動的に作るケースは少なく。メッシュとして保存したかったので、ちょっと改良してみました。

github.com

追加機能

  • エディタ上でメッシュに保存できる。
  • Undo機能

参考

【Unity】Unity-VR360-OverlayGridで、全方位写真の一部にポスターを貼ったり動画を仕込んだり - テラシュールブログ