私はソフトウェアのインタラクティビティに興味があり、さまざまなインタラクティビティのプロトタイピングをしている。

インタラクティビティのテクニックとして、操作者がマウスを動かしてマウスカーソルを動かしたり、iPad の画面で指を動かしたりするスピードと、マウスカーソルや指の位置に応じて動く画面上のオブジェクトの位置のマッピングを変化させることで、例えば操作者にオブジェクトが重くなったように感じさせることができる。これは疑似触覚と呼ばれる現象で、いろいろなところで研究されている。

この疑似触覚の現象は、重さに限ったことではない。

そこで、ソフトウェアを利用する人の、指の位置とオブジェクトのビジュアル変化とのマッピングを変えることによって ―― つまりモニター上に表示されるオブジェクトに触れたり、引っぱって動かしたりする最中に、オブジェクトを伸縮したり素早く動かしたりといったアニメーションを用いて、見た目を変化させることで ―― 操作者にオブジェクトの硬さや伸縮性などをフィードバックするすることができるのではないかと考えた。

このような考え方で iPad 上で動作するソフトウェアをプロトタイピングしたのが、今回紹介する「TouchCurve」である。

■きっかけ

大学と行なっている共同研究のある日のミーティングで、遠隔操作ロボットに接する機会があった。

その遠隔操作ロボットは、2本のアームと1つのカメラで構成されている。2本のアームの先には3本の指のようなものがついていて、その指でオブジェクトや糸を持って動かすことができるというものだ。

操作者は、モニターに映っている操作対象やロボットアームのカメラ映像を見ながら、2本のコントローラーでロボットアームを操作する。ロボットアームにはフォースフィードバックが備わっており、ロボットアームが何かにぶつかるとコントローラーにもゴツンと力が加わり、操作者はロボットアームが何かにぶつかったことが分かるようになっている。

モニタの映像だけだとロボットアームを動かしたときの距離感が掴みにくいが、アームをゴツンゴツンとぶつけることによって、コントローラーをどれくらい動かすとロボットアームがどれくらい動くかがわかり、モニターの映像だけの場合に比べてずっと操作しやすく感じる。

とはいえ、例えば遠隔手術といった応用では、ゴツンゴツンとぶつけるわけにもいかないので、映像を見ながら慎重に動かす作業が必要となる。また、ロボットのフォースフィードバックは、糸をそっと引っ張ったり、皮膚の表面を押すといったような弱い力を表すのが難しいようだった。

そこで、この弱い力の表現を、ビジュアルフィードバックによる擬似触覚を利用して実現してみようと思い立った。遠隔ロボットのデモのときに見た糸を真似て、iPad 上に糸のようなオブジェクトを表示してタッチ操作で動かしてみようと試しに作ってみたのが「TouchCurve」というアプリである。

■TouchCurve

TouchCurve を起動すると、画面上に1本の線が表示される。線の上をタッチすることで動かすことができる。糸なので、動かそうとすると、指が触れている部分に引きずられるようにして、ふにゃっとくずれる感じで線の形がかわっていくようになっている。

百聞は一見にしかず、文章で説明するより、実際の動きを見てもらった方がはるかにわかりやすいだろう。以下のムービーで、線を引っぱったときの線の動きや、線の見た目をいろいろ変化させた時の感じを見てほしい。

TouchCurve ムービー

iPad 上でのタッチ操作によるオブジェクトとのインタラクティビティの開発(1)
画面のスナップショット

画面に表示されている黒い線を、指で引っぱるような動作で動かすことができる。画面左のグレイのパネルで、線の長さや構成する点の数、線の太さ、線の形を変えることができる。

■線の変形

ここから少し TouchCurve の実装の話に入る。文章で書くと少々わかりにくいのだが、ムービーや絵を参照しながら読んでほしい。

TouchCurve では、線を任意の数の2次元座標の配列で表している。操作者が画面に触れたときのタッチイベントから画面上における指の位置を2次元座標値で取得し、線を表している2次元座標の配列の中から、指の位置に最も近い点を制御点に選ぶ。制御点の移動ベクトルは、ドラッグ時のタッチイベントの指の位置と、直前のタッチイベントの指の位置の2点から求める。

線の変形処理は、制御点と、制御点に移動ベクトルを加えた移動後の点を用い、制御点の両隣の点を制御点が移動した方向へ移動処理することで行っている。左右両隣の点の移動処理はそれぞれ独立して同じ計算を適用しているので、以降は片方で説明する。

仮に、線を構成する座標点が P1、P2、P3 の3個として、3個の点が図のような位置関係にあったとする。

iPad 上でのタッチ操作によるオブジェクトとのインタラクティビティの開発(1)
左端の点を下に引っぱったときの線の変形

この図は、左端の点 P1 を指で下にドラッグして P'1 に移動したときに、その隣の点 P2、さらにその隣の点 P3 がそれぞれP'2、P'3 に移動した様子を示している。

まず点 P1 と点 P2 との距離Lを求める。

点 P2 は点 P1 に引っぱられて P'1 へ向かって移動する、ということにして、点 P2 から点 P'1 への方向ベクトル V を求める。点 P'1 から長さ L で方向 -V の点 P'2 を求め、それを点 P2 の移動後の位置にする。同様に点 P3(図の右端の点)は、点 P2 に引っぱられて P'3 へ移動するということにし、同様の移動処理を行う。つまり、

- それぞれの点は隣の点に引っぱられる
- 隣り合う点同士の距離は移動によって変化しない
という原則に従って移動する。

ここでは3個の点で説明したが、任意の数の点で構成された線を変形する場合も同様である。ドラッグしている点(制御点)がその両隣の点を自身の方へ引っぱり、引っぱられた点がさらに隣の点を引っぱるというようにして順々に点を移動していくことで線の変形を行う。

■見た目の違いと感じることの違い

このように線の変形処理は同じでも、線を太く描いたり、線全体の長さを変えたり、線を構成する点の数を変えたりして、線の見た目を変えると、それぞれ違った印象になる。

ムービーでもわかると思うが、たとえば同じ長さの線でも、点の数が多いときは柔らかそうに見えるが、点の数が少ないとゴツゴツと硬そうに見える。TouchCurveでは、線の点の数や長さや太さなどの属性を変えて、動かしたときの違いを試すことができる。

次回は、長さや点の数や太さが同じ見た目の線の“硬さの違い”を表す方法について書こうと思う。

………………………………………
著者プロフィール
松原 伸人 (まつばら のぶと)氏

1979年生。2003年3月大阪電気通信大学大学院情報工学科修士課程修了。同年4月株式会社 SRA 入社。同年6月株式会社 SRA 先端技術研究所にて研究目的のシステム開発に従事。映像などにノートを付けたり見せたりするためのライブラリの研究開発を行っている。