画面の端にカーソルが行ったらカーソル速度がとれない問題を解決するPointer Lock API

カーソルの速度を取りたいとき,
Javascriptだと普通,↓のような感じで変位をだして,それの時間微分的な処理で速度を近似すると思う.

// 位置
var currentX = e.clientX || e.pageX;
var currentY = e.clientY || e.pageY;

// 変位
var deltaX = currentX - lastMouseX;
var deltaY = currentY - lastMouseY;

でも画面の端にカーソルが到達してしまうと,
位置がまず変化しなくなるのでそれに応じて変位も速度も0になる.

それを解決する方法として, HTML5のPointer Lock APIがある.

demo

See the Pen Pointer Lock Demo by Yusuke Ujitoko (@ujitoko) on CodePen.

参考

http://www.formasterminds.com/quick_guides_for_masterminds/free_guides/Pointer_Lock_API.pdf

振動による質感デザインの生産性向上のためのGANベースの振動生成モデルを構築しました

まとめ

  • 振動デバイスは普及しつつあるが,振動を活用して質感を表現するアプリの開発は盛んではない
  • その要因を振動の収集・選定の工数の大きさと仮定
  • 振動生成モデルを核としたデザインツールキットを試作。これにより質感デザインの生産性向上をねらう
  • ACM SIGGRAPH ASIA2018 Emerging Technologies 2018で発表展示

www.youtube.com

背景

何かものに触れたときの表面の粗さや硬さを表現するための方法として, 振動による質感提示は一番身近な方法である. 振動を使って素材のバーチャルな質感を提示する試みは, 長らく研究されているテーマであり, 粗さや硬さなどの質感を狙って提示することは研究レベルでは可能となってきている.

近年では振動提示機能付きのスマートフォンタブレット等の廉価なモバイル端末が登場しつつあることもあり, これらのデバイスで振動による素材の質感提示を表現として取り入れたアプリケーションの登場が期待される. しかし現在のところ,モバイル端末での振動の活用は,振動の単純なオンオフを切り替えてタッチの際のレスポンスに用いるなどの,入力操作に対する記号的なフィードバックとしての利用に留まっている(※1).

研究レベルでは実現できている振動提示が、 実際のアプリ開発で用いられていない理由は?

私と東大の伴先生の研究グループでは、振動を使った 質感デザインの生産性が低さ(工数の大きさ) をその理由と考えている(※2)。 これまで質感のデザインにおける生産性といったソフトウェア工学的な側面はあまり注目されていなかった。 しかし,質感提示技術が発達してそれが社会実装される際には洗練されたデザインの方法論やそれを実現するツールは必要となっているべきである.

質感デザインを含むアプリ開発プロセスの全体像

質感デザインの生産性を扱うにあたって,アプリ開発の全体像をまず示してみる. 質感デザインについてとりあげた文献がほぼなかったが, 質感提示を取り入れた際のアプリ開発プロセスの全体像を考えると, 一番オーソドックスなプロセスはおそらく次のようになるはずである(※3)。

  1. アプリケーションのコア部分の開発
  2. アプリケーションの質感設計
  3. 質感表現のための振動の収集・選定
    3-1. 素材の収集
    3-2. 素材から振動を記録
  4. 質感のテスト
  5. アプリ全体のテスト

図に示す。

f:id:yusuke_ujitoko:20181115000721p:plain

工数がかかるのが3.の振動の収集と選定の開発ステップである。 この開発ステップでやることを細分化して書いてみる. まず金属や布等の狙った質感を提示するために、それに相当する素材を実際に手元に揃える.例えば東急ハンズ等のホームセンターに行って素材を購入して運搬してくる.次にTECHTILE toolkitのような振動記録装置で素材をなぞったり、叩いたりしてその時の振動を記録する. たった1度、この作業を行うだけであれば大した工数にはならないが、 (1)実際の開発では質感の追求のためにこの開発ステップが反復的に行われるため、 相対的にこの開発ステップの工数への影響が大きくなる。 またそもそも、(2)大量の振動を必要とする際には単純にその回数分の工数がかかる。 例えば、私が過去に振動を用いるアプリを開発した際には、 そもそも大量の地面画像(1万個以上)に対して質感を付与するために、 膨大な振動収集・選定の工数をかけた。

工数以外の話として、素材を探してその都度記録するこのやり方だと細かいチューニングが難しい。 例えば、少しだけ粗さを加えたい場合には少し粗さが大きい素材を探すところから始めないといけないが、都合よくちょうどよい加減の素材が見つかるわけではない。

それに対して、予めできるだけ多くの素材に対応した振動を集めてデータベース化しておく方法が考えられる。しかし、 LMT Haptic Texture Database等のオープンなデータベースが整備されつつあると言えるものの、現状高々100種類程度の素材にしか対応してらず、現実世界の無数の素材には対応しきれない。

振動生成モデルを核としたデザインツールキット

そこで我々は質感デザインの生産性を向上するための、 振動生成モデルを開発した(Ujitoko2017). 質感デザインに不慣れな初心者でも効率的にデザイン可能なように、 素材の画像や素材の特徴を入力すると、 入力に応じた振動を生成するようなモデルを構築した.

この紹介だとデータベースのように,検索条件に応じて予め登録された振動を返してくれるもののように聞こえるが, このモデルは,予め登録されていない素材の特徴を入力すると,うまく合成してそれっぽい振動を返してくれるように作っている.

今回は質感デザインで使う場面を想定したデモとして、 この振動生成モデルを内蔵したデザインツールキットを開発した。 このデザインツールキットをSIGGRAPH Asia 2018にて初めて公開した。

www.youtube.com


※1) Nintendo Switchなど一部のアプリでは用いられている
※2) 他にもリアルタイムな振動応答、媒介する物質の伝達関数の計算、入力操作の反映等の課題はある
※3) この想定プロセスについて,振動触覚アプリ開発に実際携わっていて,一番詳しいと思われる先生に確認したところ,大凡合っていることがわかった。

質感表現のための振動提示ではユーザ入力の法線力に対して振動を適合させなくてもよい(かも)

Culbertson et al.のShould haptic texture vibrations respond to user force and speed?を読んだメモ

  • toolとsurfaceのインタラクションにおいて,その界面で発生する振動の振幅と周波数はユーザ入力の法線力と速度に応じて変化することが知られている(Lederman et al., Lederman et al.)

  • したがって質感表現のための振動提示でも,振動を法線力や速度に応じて変化させた方がよいとされ,さまざまな研究がなされてきた.
    • 単純な方法では振動音源の再生速度や振幅を変える方法
    • もう少し高級な方法としてデータドリブンに速度や法線力に基づく振動をモデル化する方法
    • (筆者の研究グループ自身もその方針をとってきた)

  • しかし被験者実験により提示した際の現実感の観点からすると総じて,
    ユーザ入力の速度に対して振動を対応させることは重要だが, 法線力に対しては振動を対応させる重要性が薄いことがわかった.(法線力に対応する振動を出しても出さなくても主観評価結果へ寄与しない)

RでMauchly’s sphericity testを行う

RでMauchly’s sphericity testを行う.
基本は以下のサイトに従う.
https://biostats.w.uib.no/test-for-sphericity-mauchly-test/

library(car) # carライブラリをload

# データを定義
weight<-c(1.028016298,1.721868575,...) 
weight
my.new.matrix<-matrix(weight, nrow=10, ncol=6)
my.new.matrix

# 線形モデルを構築
model<-lm(my.new.matrix ~ 1)
design<-factor(c("c0","c1","c2", "c3", "c4", "c5"))

# Anova実行
options(contrasts=c("contr.sum", "contr.poly"))
results<-Anova(model, idata=data.frame(design), idesign=~design, type="III")
summary(results, multivariate=F)

出力の中頃にMauchly's testの結果が出てくる.