WISS2011

WrinkleSurface: しわを作って入力できる柔らかいマルチタッチインタフェース
WrinkleSurface: A Wrinklable Soft-Surfaced Multi-Touch Interface

坂本 侑一郎

吉川 拓人

大江 龍人

志築 文太郎

福本 雅朗

田中 二郎∗

Summary. 我々の「WrinkleSurface」は，多様な入力が可能であり触感覚に優れたマルチタッチインタ
フェースである．我々は FTIR 方式のタッチパネルに，柔らかい透明なウレタンゲルシートを張り付けることにより WrinkleSurface を実現した．従来のタッチパネルでは，指が触れた領域の座標のみを用い入力が行われる．従来のタッチパネルに対し WrinkleSurface は，入力面に対して指を強く押す，指をずらす，指をねじる等の入力面を変形させる動作による入力を可能にした．さらに，入力面の変形をそのままコンテンツに反映させることも可能である．また，WrinkleSurface は，入力面を変形させる動作に対する弾性素材の反発力による力覚フィードバックを有する．この力覚フィードバックにより操作感が向上する．本稿では，入力面の変形を利用した多様な入力とその認識手法を述べる．加えて，本タッチパネルの入力を活かしたアプリケーションを示す．

1

はじめに従来のタッチインタフェースのインタラクションにおいては，指の接触した領域の座標のみを用いて操作が行われる．これに対し，座標以外のタッチの特徴を入力に利用し，多様な入力の実現を目指す研究が盛んに行われている．本稿で示す「WrinkleSurface」
も，タッチインタラクションにおける多様な入力の実現を目指し開発した．WrinkleSurface の特徴は，入力面に弾性素材を用いて，入力面に対する押し込む，ずらす，ねじる操作を実現することである．さらに，これらの操作の方向や強さ，入力面に生じたしわの形状を取得し，インタラクションに活用する．
また，我々の示す新しい入力は，ドラッグやピンチのような従来のインタラクションとの使い分けが可能であり，指に力を入れているか入れていないかにより，1 つの操作に別のコンテキストを持たせることができる．これらの豊富な情報の入力に加え，入力に伴う弾性素材の反発力による力覚フィードバックを得られるため，タッチインタラクションにおける操作感はさらに向上する．

2関連研究

本節では，マルチタッチインタフェースにおいて多様な入力を実現する手法と，入力面に弾性体を用いたタッチインタフェースについての研究を示す．
∗Copyright is held by the author(s).
Yuichiro Sakamoto, Takuto Yoshikawa, Tatsuhito Oe,
Buntarou Shizuki and Jiro Tanaka, 筑波大学 大学院
システム情報工学研究科 コンピュータサイエンス専攻,
Masaaki Fukumoto, NTT ドコモ 先進技術研究所

2.1

タッチインタフェースにおいて多様な入力を実現する手法

入力面に触れる指の接触形状を利用することにより，座標以外の付加情報を取得しようと試みる研究がなされている．Wang らや Dang らは，タッチパネ
ルの操作に指の方向を活用することを示した [7][1]．
タッチパネル面に接触した指の接触領域の形状が楕円形となることと，指の接触領域の面積が手のひらの方向へ拡大していくことを利用して指の指す方向を取得している．また，指の方向と各指の位置関係を利用した指の識別や，ユーザの識別についても試みがなされている．指の方向によるインタラクションは，我々の WrinkleSurface でも活用することが可能である一方，本研究の主眼は，指の接触に付随する情報の活用ではなく，押し込む，ずらす，ねじるという新たな操作語彙の追加にある．
タッチパネル面上の空間における指の姿勢を認識して，インタラクションに活用する研究も存在する．
竹岡らは，指の傾きや方向をタッチパネルのインタラクションに活用する Z-touch を示した [8]．Z-touch
は，タッチパネル付近に設置された高速カメラを用いて，タッチパネル上の空間にある指の姿勢を認識する．本研究では，入力面に直接触ることによる力覚フィードバックを利用した入力と操作語彙の追加を実現している点で異なる．

2.2 入力面に弾性体を用いたタッチインタフェース
Vlack らの GelForce は，弾性体に加わった力の大きさと向きを検出する [6]．GelForce は，2 色のマーカが埋め込まれた透明な弾性体と，それを撮影するカメラで構成される．マーカの位置の移動をカメラで検出することにより，弾性体表面に加わる力の大WISS 2011

きさと向きを認識することができる．筧らは，テーブル型ディスプレイ向けのタンジブルインタフェースである ForceTile を示した [4]．ForceTile は弾性素材とその中に埋め込まれたマーカで構成されており，ForceTile の位置や向き，または変形による力ベクトルを入力とする．本研究は，マーカを用いずに入力の強さも認識する点で異なる．マーカを用いないため後方投影が可能であり，タッチパネルとして有利である．また，我々はこの入力を，入力面に生じるしわを利用するという従来にはない入力認識手法により実現する．
佐藤らは，透明な弾性体の変形を用いた入力インタフェースである，PhotoelasticTouch を示した
[5]．PhotoelasticTouch は，液晶ディスプレイ，透明な弾性体，偏光フィルムを装着したカメラで構成される．弾性体の光弾性効果による複屈折を利用して，弾性体の変形を認識する．弾性体に圧力を加えた位置や面積，方向を計測し，つまむ，揉む，引っ張る等のインタラクションを可能とした．本研究は，入力面に生じるしわを入力の認識に用いるため，ずらす，ねじる操作の認識が可能である．また，オクルージョンフリーにて認識可能である．
福本は，モバイル機器のタッチパネル面に弾性素材を用いたシートを張り付けることにより，硬い入力面に「ボタンを押した感触」を付与した [2]．WrinkleSurface は弾性素材の反発力による力覚フィードバックに加えて，入力面を押す強さや柔らかさを活かした新たな入力を可能にする．

3

WrinkleSurface を用いた入力手法

WrinkleSurface は，厚さ約 2mm の柔らかい透明なウレタンゲルシート（以下，ゲルシート）を入力面に用いた FTIR 方式のタッチパネルである．このゲルシートは，適切な皺の発生と表面の滑りを得る為，硬度の異なる 2 種類の高透明型ウレタンゲルの積層構造とした．入力面に対する，押し込む，ずらす，ねじる等の操作毎に，入力面に特徴的なしわが形成される．ゲルシートに生じるこの特徴的なしわから，「プッシュ」「スラスト」「ツイスト」の 3 つの入力を新たに実現する．プッシュは，指をタッチパネル面に対して垂直に強く押す操作，スラストは，指を強く押したままずらす操作，ツイストは，指を強く押したまま指を回転させる操作である．それぞれの操作と通常のタッチを行った際の入力面を，図1 に示す．本研究では，これらの入力の識別に加え，入力の強さ（例えばねじりの強さ）も認識する．
WrinkleSurface は以下の利点を有する．
• ゲルシートは適度な弾性があり，入力面の反発を利用した入力が可能である．
• 指の座標に加え，入力の種類や方向，強さ等を取得する．
• ドラッグやピンチのように指を滑らせる従来

図 1. タッチ (左上)，プッシュ(右上)，スラスト (左下)，ツイスト (右下)のインタラクションが可能である．このため，例えば同じピンチジェスチャでも，2 本の指を滑らせる動作とスラストさせる動作に別のコンテキストを持たせることが可能である．
• しわそのものを利用できるため，入力面の変形をそのままコンテンツに反映させることが可能である．

4WrinkleSurface のハードウェア構成

WrinkleSurface は，ゲルシートを張り付けたアクリル板と，入力検出用の赤外線 LED と赤外線カメラ，映像投影用のプロジェクタとプロジェクタスクリーンによって構成される．図 2 に WrinkleSurface の構成を示す．今回用いたゲルシートの大きさは 370 ×200×2mm，アクリル板の大きさは 400×300×5mmである．アクリル板の各側面に赤外線 LED（オプトエレクトロニクス社，SFH4550）を 7 つずつ取り付け，アクリル板の裏側にプロジェクタスクリーン（厚さ 40g/m2 のトレーシングペーパー）を張り付けた．
下方に赤外線カメラ（Point Grey 社，Dragonfly2）とプロジェクタを設置する．

図 2. WrinkleSurface の構成

4.1

動作原理

本システムでは，入力検出の仕組みに FTIR
(Frustrated Total Internal Reflection)[3] を用いる．我々は，ゲルシートを FTIR タッチパネルに張り付けた時に，アクリル板のみを用いた場合と同様

WrinkleSurface: A Wrinklable Soft-Surfaced Multi-Touch Interfaceに FTIR が起こることを確認した．アクリル板側面から照射された赤外線光は，アクリルとゲルシートの中で全反射を繰り返す．このとき，ゲルシートに指を接触させることにより，その接触領域において全反射していた赤外線が拡散反射を起こす．アクリ
ルのみのタッチパネルと異なる点は，ゲルシートにしわが生じたときに，図 3 に示すように，しわの生じた領域からも拡散反射が起こることである．この拡散反射光を，タッチパネル面の下方に設置された赤外線カメラで撮影することにより，指の接触のみでなくゲルシートに生じたしわが検出可能となる．

図 3. 指の接触と入力面に生じたしわによる赤外線拡散反射

4.2

入力認識手法5

本節では，プッシュ，スラスト，ツイストの入力識別手法と入力の強さの認識手法を示す．各入力の識別は以下の処理により行われる．

1. しわの発生や指の動きの変化，指の接触領域の輝度値を利用した特徴量抽出2. 各入力と特徴量を関連付けた尤度関数
5.1

画像処理と特徴量抽出

画像処理により抽出する特徴量は，「円形度」「しわベクトルの大きさ」「回転量」の 3 つである．この特徴量を抽出するために，まず，画像処理により指領域としわ領域を抽出する．指領域とは，入力面に指が接触している領域のことを言い，しわ領域とは，入力面に発生しているしわの領域のことを言う．元
画像を 2 値化し，縮退処理によりしわが発生している領域を消し，その後膨張処理をすることで指領域を抽出する．元画像を 2 値化した画像から指領域を引くことにより，しわ領域を抽出する．図 5 に，画像処理により抽出される領域およびパラメータを示す (スラスト時の例)．

ノイズ除去

赤外線反射に基づく入力検出方式は，外部光がノイズとなるという欠点を持つ．本システムでは，この欠点を解決するために，赤外線 LED のパルス発光によるノイズ除去システムを実装した．
図 4a に示すように，赤外線カメラに蛍光灯が写りこむ場合を考える．
単にこの画像を背景として背景差分処理を行うと，その位置における指やしわによる拡散反射光までもが取り除かれてしまう．そこで，赤外線 LED を点灯した場合のカメラ画像 (図 4b) を前景，赤外線 LEDを消灯した場合のカメラ画像 (図 4c) を背景として背景差分処理を行う．
この背景差分処理により，入力認識に不要な光を除去することができる (図 4d)．
abcd

図 4. a) 外光が写りこんだカメラ画像 b) 赤外線 LEDを点灯した場合のカメラ画像 c) 赤外線 LED を消灯した場合のカメラ画像 d) ノイズ除去後の画像

図 5. しわ領域と指領域

ここでの円形度は，指領域としわ領域を合わせた領域がどの程度真円に近いかを表す度合である．入力面にしわが発生しない場合，この領域は指領域と一致する．指領域は楕円形であるため，円形度は高くなるが，しわが発生しているときは領域の形状が複雑になるため，円形度は低くなる．
しわベクトルの大きさは，指領域の重心としわ領域の重心の間のユークリッド距離である．スラストの際はしわが一方向へ偏るため，しわベクトルは大きくなるが，ツイストの際は指の周りにしわが発生するため，しわベクトルは小さくなる．
回転量は，指先の方向のフレーム間差分である．
指領域の重心を通る慣性主軸の傾斜角 θ (式 1) は，横 w 縦 h の画像 f の p + q 次モーメント Mp,q (式 2)を用いて表されるが，指先の方向を一意に決めるものではない．そこで，Wang らの示したアルゴリズ
ム [7] を適用する．現在の指先の方向 ϕt+1 を決定するためには，式 3 に示すように，過去に計算された指先の方向 ϕt を用いる．このことにより，指先のWISS 2011方向を安定して計算することができる．以上のように計算された現在と過去の指先の方向を比較することにより，指の回転量を計算する．

ユーザの力の入れ具合をアプリケーションに反映できるため，操作感を向上させることが可能である．

6
θ=Mp,q =2M1,11
tan−12
M2,0 − M0,2(1)w ∑h∑(x − x)p (y − y)q f (x, y)

(2)

θt+1
(|ϕt − θt+1 | ≤ π4 )πθt+1 + 2 (|ϕt − θt+1 | > π4 )(3)x=0 y=0{

ϕt+1 =5.2

尤度関数

前述の特徴量と各入力の関係は表 1 のように表される．表 1 から分かるように，各入力をしたときに得られる特徴量には幅があり，単純な閾値を用いて入力を識別することはできない．そこで，これらの特徴を図 6 に示す尤度関数として表現した．この関数は，実験的に作成した．各図においてグラフは，横軸に特徴量，縦軸に尤度をとる．例えば図 6 上において実線で示される関数は，「円形度 0.9 の時にプッシュである尤度は 0.9 である」と読む．各特徴量に対する各入力の尤度 3 つを掛け合わせた値が最大となるものを，その入力であると認識する．
表 1. 入力に対する特徴

入力
プッシュ
スラスト
ツイスト

5.3

円形度0.8∼0.5∼0.8
0.5∼0.8

しわベクトル
小さい
大きい
小さい

回転量
極小
小さい
大きい

入力の強さの認識認識された入力の種類に対して，以下のパラメー
タをその入力の強さとして認識する．
プッシュ 指領域の平均輝度値
スラスト 指領域の重心の移動距離

WrinkleSurface のアプリケーション

WrinkleSurface の特徴を活かした 3 つのアプリ
ケーションを開発した．
6.1 WrinkleGeo: しわを活かした地形エディタ
WrinkleGeo は WrinkleSurface を用いた地形エディタである．WrinkleGeo の特徴は，地形の編集操作に WrinkleSurface に生じるしわを用いることである．しわを用いることにより，入力面の変形が直接反映された 3D の地形が作成可能である．WrinkleGeo には編集モードと閲覧モードがある．モード間の切り替えは，画面左上の副画面をタップすることにより行われる．
編集モードでは，トップビューにより地形を眺めながら編集を行う．このモードでは，スラストやツイストによって生じた入力面のしわと対応して地形に起伏が生じる．またドラッグ操作を行った場合，指に力を入れるとスラストにより地形が隆起し，指に力を入れずになぞると地形が滑らかになる．この様に，入力の性質に併せて異なるコンテキストを操作に持たせている．
これらの操作の他に，2 本の指を用いたピンチを用いて山や谷を生成することができる．山の生成にはピンチクローズを用い，谷の生成にはピンチオープンを用いる．ユーザは掴む感覚で山を生成し，ぐっと押し広げる感覚で谷を生成する．ピンチクローズにより山が生成される様子を図 7 に示す．WrinkleGeoを用いることにより，しわによる起伏が付いた表情豊かな地形を容易に作成することができる．
閲覧モードでは以下のビュー変更操作を行い，任意の視点から編集した地形を眺められる．
• スラストによる視点の回転• ピンチクローズによる地形の縮小• ピンチオープンによる地形の拡大• 指を滑らすドラッグ操作による視点のパンスラストにより視点を回転している様子を図 8 に示す．

ツイスト 指の回転角度

図 6. 入力と特徴量を関連付けた尤度関数

WrinkleSurface: A Wrinklable Soft-Surfaced Multi-Touch Interface

6.3

WrinkleIcon: ゲルシートの反発力を活かしたアイコン操作

図 7. ピンチクローズによる山の生成

図 8. スラストによる視点の回転

6.2

WrinkleMesh: うずまき状に歪むメッシュ

WrinkleIcon は WrinkleSurface を用いたアイコン操作アプリケーションであり，WrinkleIcon の特徴はゲルシートの反発力を操作に活かすことである．
WrinkleIcon を用いることでアイコンを弾き飛ばす，アイコンを集める操作が可能である．
ユーザは，弓を引く様に弾き飛ばしたい方向の逆方向にスラストを行い，その指を離すことでアイコンを飛ばすことができる．スラストする際の反発力を指に感じるため，弾き飛ばす強さを触覚として感じることができる．
弾き飛ばす操作以外に，反時計回りのツイストにより周辺のアイコンを指の周りに集めることができる．また，時計回りのツイストにより周囲のアイコンを指の周りから遠ざけることができる．WrinkleIcon
を操作している様子を図 10 に示す．図では，反時計回りのツイストによりアイコンを集める操作を行っている．ユーザはツイストにより一か所に集めた複数のアイコンを，スラストによってそれぞれ飛ばして行くことによって，指を移動することなくアイコン整理を行うことができる．

ワープ

WrinkleMesh は WrinkleSurface を用いたメッシュワープアプリケーションである．メッシュワープとは，ベジエ曲面の制御点を移動させることにより，画像を歪ませる操作である．WrinkleMesh の特徴はメッシュワープ操作にツイストを用い，うずまき状に画像を歪ませることが可能な点である．WrinkleMeshを操作している様子を図 9 に示す．図 9 では，複数回ツイストを行い人物の写真を歪ませている．
スラストとツイストに対応する操作を説明する．
スラストが行われると，タッチ点周辺の制御点がスラストの指の方向に移動する．この際，制御点として含まれる範囲はスラストの強さに依存し，より強くスラストを行う事でより広範囲に画像を歪ませることができる．スラストによるメッシュワープには，歪ませる範囲の指定と，歪ませる操作が同時に行われる利点がある．ツイストが行われると，タッチ点周辺の制御点がうずまきを描いて移動する．ツイス
トの場合もスラストと同様に，制御点として含まれる範囲は強さに依存する．

図 9. WrinkleMesh を操作している様子

図 10. WrinkleIcon を操作している様子

7

議論

何人かに本システムを利用してもらい意見を収集したところ，「（WrinkleGeo において）入力面の変形がそのまま地形に反映されるため面白い」「入力に対する反発力が心地よい」などポジティブな意見が得られた．一方，入力の識別においては誤認識が少なからず生じた．この原因は，同じ入力を意図しても，指の動きにばらつきがあることだと考えられる．例えば，スラストをする時に指が浮く，ツイストの時に指の重心がずれるなどである．このばらつきについて更に調査し，ばらつきを許容するように尤度関数を再設計して，認識精度を向上させていく予定である．また，ゲルシートの中央より端の方がしわが出やすことが確認できた．頻繁に利用する中央部分において，ゲルシートの反発力が劣化していることが原因だと考えられる．これは，中央と端で特徴量の重みを変えるキャリブレーションをするこ

WISS 2011とにより解決できると考えている．

8

まとめと今後の展望

本稿では，ゲルシートと FTIR タッチパネルを組み合わせた「WrinkleSurface」を作成し，その入力手法を示した．ゲルシートの柔らかさを利用した「プッシュ」「スラスト」「ツイスト」を実現することにより，従来の硬い入力面のタッチパネルでは成し得ないインタラクションを可能にした．WrinkleSurfaceの入力や入力面に生じたしわ，反発力を活かした 3つのアプリケーションを示した．
今後は，WrinkleSurface の入力手法や入力の認識に関する評価実験を行い，有用性を明らかにしたい．そして，WrinkleSurface をより活かすことのできるアプリケーションを提案し，ハードウェアとソフトウェアの改良をしていきたい．

参考文献

ForceTile: Tabletop tangible interface withvision-based force distribution sensing. In ACM
SIGGRAPH ’08 new tech demos, p. 17:1.
[5] T. Sato, H. Mamiya, H. Koike, and K. Fukuchi.
PhotoelasticTouch: Transparent rubbery tangible interface using an LCD and photoelasticity.
In ACM UIST ’09, UIST ’09, pp. 43–50.
[6] K. Vlack,T. Mizota,N. Kawakami,K. Kamiyama, H. Kajimoto, and S. Tachi.
GelForce: A vision-based traction field computerinterface. In ACM CHI ’05 EA, pp. 1154–1155.
[7] F. Wang, X. Cao, X. Ren, and P. Irani. Detecting
and leveraging finger orientation for interaction
with direct-touch surfaces. In ACM UIST ’09,
pp. 23–32.
[8] 竹岡 義樹, 味八木 崇, 暦本 純一. Z-touch: 指先姿
勢インタラクション可能なマルチタッチシステム.
WISS2010 論文集. 日本ソフトウェア科学会, 2010.

アピールチャート

[1] C. T. Dang, M. Straub, and E. André. Hand
distinction for multi-touch tabletop interaction.
In ACM ITS ’09, pp. 101–108.
[2] M. Fukumoto. PuyoSheet and PuyoDots: Simple
techniques for adding “Button-push” feeling totouch panels. In ACM CHI ’09 EA, pp. 3925–3930.
[3] J. Y. Han. Low-cost multi-touch sensing throughfrustrated total internal reflection. In ACM UIST’05, pp. 115–118.
[4] Y. Kakehi, K. Jo, K. Sato, K. Minamizawa,
H. Nii, N. Kawakami, T. Naemura, and S. Tachi.

未来ビジョン
我々の研究室では本稿で示した WrinkleSurface の他に，これまでに様々なタッチインタフェースとその入力手法を示してきた．我々は様々なタッチインタフェースとその入力手法を実現することにより，タッチインタラクションの更なる可能性を模索している．
タッチインタフェースの普及に伴い，接触を用いた様々なコンテンツが増加してきた．これらのコンテンツには，人物や動物とのインタラクションが可能なものが多数ある．コンテンツ
内の人物や動物に触れ合う場合，硬い画面を用いた通常のインタラクションで満足だろうか．
今回の実装で用いたゲルシートは人の肌に似た柔らかさを有しているため，それらのコンテンツに適用することにより，ユーザはより感動や達成感を味わえるはずである．また，指を強く押す，指をずらす，指をねじる等の入力をそれらのコンテンツに適用することにより，有機的な柔らかいものと触れ合う感触をユーザに与える．
WrinkleSurface に備わる柔らかい触感と，その柔らかさを活かした入力系は，我々が思い描く未来のインタフェースの形である．今後 WrinkleSurface を，平面のタッチパネルとしてだけでなく，胴体や腕等人間の身体を模した 3 次元曲面として発展させることを考えている．例えば WrinkleSurface を用いて，人型ロボットの肌をセンシングする．WrinkleSurface により，人型ロボットの肌に対して強く押す，ずらす，ねじる等の入力が可能となるため，ロボットと人とのインタラクションの幅がさらに広がる．
我々は未来のインタフェースがより柔らかいもの，よりオーガニックなものへと発展するように貢献したい．