前回に続き、「TouchCurve」について説明する。今回は、TouchCurve の機構を用いて、操作しているものの硬さや重さを感じるようなビジュアルな動きを作り出すプロトタイプを紹介する。

(1)線を動かす

TouchCurve では、線を2次元座標点の配列で表している。各点は隣接する2つの点(端点は1点)と線分でつながっている。

iPad 上で操作者が線をドラッグするとき、指でタッチされている位置の近くにある点が、指の動きに追随して動くようになっている。前回のコラムの「線の変形」の項目で説明した通り、指の動きに追随するように点を動かすと、他点も隣接する点との距離を維持しつつ、動かしている点の方向へ移動する。指を動かし続けると、点の位置と各点を結ぶ線分が連続的に更新され、ひもを引きずっているように見える。

この仕組みの詳細は、前回のコラムで図を用いて説明しているので参照していただければと思う。

(2)線の硬さを変える

追随して動く各点の位置を変化させて線の変形を行うとき、連続した3点間を結ぶ2つの線分の間の角度が変化する。この角度の変化の度合いを増やしたり減らしたりすると、線の形の変わり具合が変化する。

strength は、角度変化の割合を定めるパラメータである。0.0〜1.0の範囲で変化する。strength=1.0 で形が固定され、strength=0.0 のときに変形度合いが最大となる。

iPad 上でのタッチ操作によるオブジェクトとのインタラクティビティの開発(2)
P1 を下に引っぱったときの、strength=0.0, 0.5, 1.0 による変形の違い

  次のムービーは、strength を0.0〜1.0まで変えながら線を引っぱったときの変形の様子である。線の硬さが変化するように見える。

線の硬さをちょっとずつ増やして引っぱってみたときの様子

strength=0.0 とした時は、糸のようにふにゃふにゃ形が変わる。strength=0.9 ぐらいでは針金のような硬い感じで変形する様に見える。引っぱるだけでなく両手で曲げたりすることもできる。

(3)線で砂を動かす

非常に小さなサイズの多数のオブジェクトを表示し、TouchCurve で実装した線がオブジェクトと接触する度に、そのオブジェクトの位置を移動させるようにする。線をドラッグすると、砂を押しのけている感じになる。

砂を押しのけてる様子

(4)オブジェクトを繋げてひっぱる

2つのオブジェクトを TouchCurve のメカニズムで実装した線でつなぎ、それぞれのオブジェクトをドラッグして動かせるようにする(つまり繋いでいる線の端点を引っ張ることになる)。一方のオブジェクトを動かすと他方のオブジェクトは線に繋がれて引っぱられて動くように見える。

ここで、2つのオブジェクトを繋いでいる線の硬さや長さを変えながら、片方のオブジェクトを引っ張ると、他方のオブジェクトの引っぱられ方が変わる。次のムービーでは3種類の長さ/硬さの線で繋いだものを比べている。

赤い丸と茶色い丸の2つを線で繋ぐ。

ムービーの左側のように、2つの丸が長い柔らかな線で繋がれている時、赤い丸を動かすと、茶色い丸は、赤い丸が周りをウロウロしている時は動かないが、赤い丸が離れようとすると後ろからついてくる。ムービーの中央のように、2つの丸が短い柔らかい線で繋がれている時は、赤い丸を動かすと、茶色い丸はずっと赤い丸の後ろをついて動く。ムービーの右側では、2つの丸は短い硬い線で繋がれていて、赤い丸を動かすと茶色い丸は赤い丸と並んで動く。

ムービーにもあるように、2つの丸を繋いでいる線が見えないと、赤い丸を動かした時に、茶色い丸は何故こんな風に動くのか、茶色い丸はその場から動きたくないのか、赤い丸が気に食わないのか、といった様に色々と想像が広がる。

このように、実装した TouchCurve を使った線で2つのオブジェクトを繋いで、その線の長さや硬さを変えていくことで、1個のオブジェクトを動かした時に、他方のオブジェクトの様々な動き方を作り出すことができる。

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

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