芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

Oil Bubble Display:
油を投影面とした変形・結合・分裂が可能なディスプレイ
井手口裕太 1) (非会員)川口純輝 1) (非会員)黒田嘉宏 1) (非会員)

浦西友樹 2) (非会員)井村誠孝 3) (正会員)

吉元俊輔 1) (非会員)

大城理 1) (非会員)

1) 大阪大学大学院基礎工学研究科 2) 大阪大学サイバーメディアセンター
3) 関西学院大学理工学部

Oil Bubble Display: Deformable, Fusible and Separable Display
using Oil Projection Surface
Yuta Ideguchi1)
Shunsuke Yoshimoto1)

Junki Kawaguchi1)
Yuki Uranishi2)
Yoshihiro Kuroda1)
Masataka Imura3)
Osamu Oshiro1)

1) Graduate School of Engineering Science, Osaka University
2) Cybermedia Center, Osaka University
3) School of Science and Technology, Kwansei Gakuin University
ideguchi ＠ bpe.es.osaka-u.ac.jp
概要
本研究では，水の上に浮かべた油（オイルバブル）の挙動に着目し，オイルバブルをディスプレイ面として利用することで，その柔軟なディスプレイ面の形状に応じた映像とのインタラクションを可能にする Oil Bubble Display を提案する．ユーザ
はオイルバブルを変形・結合・分裂させることで，投影像とのインタラクションを行える．Oil Bubble Display では，オイ
ルバブルへの映像の投影を行うために，オイルバブルに光を散乱させる物質を混合する．本論文では，Oil Bubble Display
を用いた例として，投影像の変形，投影色の混合・分解および演算表現のアプリケーションを実装した．また，Oil Bubble

Display のディスプレイとしての性能であるコントラスト，オイルバブル特有の柔軟性の時間変化について評価実験を行った
結果，高いコントラストを得るための濃度および，操作回数 15 回までは柔軟性が十分保てることが分かった．
キーワード
オイルバブル，フレキシブルディスプレイ，プロジェクション

Abstract
In this study, we focus on the behavior of oil floating on the water, oil bubble, for a flexible display surface andpropose Oil Bubble Display that allows interaction with an image corresponding to the shape of flexible display
surface. The system enables users to deform, fuse and separate the oil bubble and to interact with projected images.
In order to project images onto oil bubbles, we mixed powder materials with the oil which scatter the projected light.
In this paper, we implemented shape deformation of projected images, mixing and decomposition of projected colors,and summation and distribution of projected numbers. We then investigated the contrast and the time variation offlexibility. As a result, the concentration of powder materials for high contrast was found and appropriate flexibility
was kept up to 15 times of operation.
Keywords
Oil Bubble, Flexible Display, Projection– 15 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

用されている静電容量式のタッチディスプレイがある．

1 はじめに

その他にも，抵抗膜式や赤外線やカメラによってタッチ

携帯電話やタブレット端末などに搭載されたタッチを検出するディスプレイもある．これらは接触位置のみ

ディスプレイは，ディスプレイに入力装置を組み合わを入力として扱っているが，他の情報も入力として扱うせることで，映像を見せるだけではなく，手指によって研究が行われている．例えば，静電容量の違いから複数直接操作が可能である．このようなディスプレイでは，人でタッチした際にタッチした個人を識別する研究 [4]ディスプレイ面と手指の接触位置を用いた入力が広く普や赤外線カメラを利用することでディスプレイの手前側及している．一方で，任意にディスプレイ面の位置や形でのジェスチャも入力として利用する研究 [5] やカメラ状を変化させ，ディスプレイ面の位置や形状自体も入力と手指の先につけたマーカを利用することでジェスチャ

情報として扱うことで，インタラクション可能なディスを入力として利用する研究 [6] やディスプレイに写る手プレイの研究もある．DeforMe[1] では，粘弾性体に映の影も入力として利用する研究 [7] もある．これらの研像を投影し，変形に応じて投影像を操作することが可能

究では，ディスプレイ面が液晶ではなく，プロジェクタ

である．さらに，ディスプレイ面を物体が突き抜けるとにより投影面に映像を投影することでディスプレイ面をいったインタラクションが可能なディスプレイとして，構築している．他にも，雪が降るような寒い屋外でも使

AquaTopDisplay[2] やフォグディスプレイ [3] のようにえるように，氷の壁にプロジェクタにより映像を投影す

水や霧などの流体に映像を投影し，操作するシステムがることで，ディスプレイ面として利用する研究 [8] や，距提案されている．

離画像センサを利用して手のひらや手に持った紙など身本研究では，ディスプレイ面の位置や形状の変化だけ

近なものをディスプレイ面として利用する研究 [9] も行

でなく，これまで実現されていなかった，結合・分裂をわれており，プロジェクタにより映像を投影することで，可能とするディスプレイの開発を目指す．その実現方法

入力情報や使用場所が増やすことができ，ディスプレイ

として，水の上に浮かべた油（オイルバブル）の挙動にとしての機能が拡張されてきた．

着目して，その柔軟な挙動を生かしたディスプレイ，Oil

近年では，剛体平面ではない対象をディスプレイ面とBubble Display を提案する．図 1 は投影した映像が，オすることで，より対象の形状や特性を生かしたインタラ

イルバブルの形状に応じて変形，分裂する様子を表した

クションを可能とするディスプレイの研究が行われてものである．Oil Bubble Display は，オイルバブルにプいる．例えば，落下する水滴や霧にプロジェクタによりロジェクタを用いて映像を投影するため，オイルバブル

映像を投影することでディスプレイ面として利用する研に光を散乱させる疎水性の物質を混合する．ユーザは，

究 [10, 11, 3] や，微粒発泡ポリスチレンビーズを敷き詰

水の上に浮かべたオイルバブルを動かし，オイルバブル

め，そこにプロジェクタにより映像を投影する研究 [12]を変形・結合・分裂させることで，オイルバブルに投影さも行われている．このように，水滴などの微粒子にプロれた映像を操作する．本論文では，Oil Bubble Display

ジェクタに映像を投影することで，ディスプレイ面を手のアプリケーションとして，オイルバブルの形状変化をや物体が突き抜けることができる．さらに，ディスプレ

生かした投影像の変形，結合・分裂から類推される投影

イ面の位置や形状自体も入力情報として扱い，インタラ

色の混合・分解，および演算表現の三つを実装した結果クション可能なディスプレイの研究もある．DeforMe[1]について述べる．

では，粘弾性体に映像を投影し，変形に応じて投影像を操作することが可能である．しかし従来の研究において

2 関連研究は，ディスプレイ面は常に一つであり，ディスプレイ面

本節では，ディスプレイに入力装置を組み合わせて利用している研究をまとめるとともに，提案手法の位置づ自体を結合・分裂するといった操作については扱われていない．

けを明らかにする．

本研究では，水の上に浮かべた油特有の柔軟な性質をディスプレイに入力装置を組み合わせて利用している持つディスプレイとして Oil Bubble Display を提案す

代表的なディスプレイとして，タブレット端末などに利る．Oil Bubble Display は，光を散乱させる物質を混合– 16 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

図 1 Oil Bubble Display の操作：オイルバブルにうさぎを投影し，二つに分裂させたときの時系列画像

することはできない．プロジェクタにより投影された映Projection
image

Projector
Spoon

Oil bubble
display

像をあらゆる方向から視認するためには，投影面で光が広範囲に散乱する必要がある．したがって，光を散乱する性質を持つ微粒子を油に混合することで，微粒子によWater
surface

り光の散乱を発生させ，水に浮かべた油へ投影した映像の視認を可能とする．このとき油に混合する微粒子は，水および油に溶解しない物質である必要がある．本論文

Water

Depth
image

では油に混合する物質として，白色であり水に溶けない

Depth camera

物質であるベビーパウダー（タルク粉）を用いる．

図 2 システム概要

3.2

オイルバブルの位置と形状の計測

オイルバブルの水槽中での位置および形状に合わせて映像を投影するため，オイルバブルの位置および輪郭形した油（オイルバブル）を水の上に浮かべ，オイルバブ
ルをディスプレイ面として利用することで，ディスプレ
イ面の位置や変形に加え，結合・分裂を新たな入力情報として用いることを可能する．

状を計測する必要がある．さらに，操作時のスプーンや腕と区別するため，検出された物体の三次元位置を計測
し，水面付近に存在するオイルバブルのみを抽出する必要がある．このとき，オイルバブルの位置および形状の計測に可視光を用いた場合，プロジェクタによる映像の

3 提案システム

投影により誤検出が生じる恐れがあるため，本研究では，
図 2 に Oil Bubble Display の概要を示す．透明な水槽に水を入れ，オイルバブルを浮かべる．赤外線距離画
像センサを用いて，オイルバブルの位置と形状を計測し，計測されたオイルバブルにプロジェクタから映像を投影する．オイルバブルを投影対象とし，投影対象そのもの
を結合・分裂させることを新たな入力情報として用いる
ことで，投影色の混合・分解や演算表現といったインタ
ラクションを可能にする．

3.1

赤外線距離画像センサを用いる．オイルバブルに赤外線を照射した場合，可視光と同様に，オイルバブルに混合した微粒子によって赤外線が散乱する．したがって，
図 3 (a) に示すように水に浮かべたオイルバブルを赤外
線距離画像センサにより距離画像（図 3 (b)）を取得したとき，オイルバブルとそれ以外の領域では距離が異なるため，オイルバブルとそれ以外を区別し，オイルバブ
ルの重心位置および輪郭形状を計測する．また，オイル

オイルバブル

バブルは水面のみに存在するため，事前に水面の距離を

油は疎水性の物質で，水に浮かべると円形に近い形状となるが，外力により柔軟にその形状が変わるという性質があり興味深い．本研究では，ディスプレイ面として計測することで，操作時のスプーンや腕の区別も可能で
ある．

3.3

水の上に浮かべたサラダ油（オイルバブル）を利用する．
水の上に浮かべたオイルバブルは，水に溶けることなく水面に漂い，変形・結合・分裂といった操作が可能である．一方，水に浮かべた油を投影面とした場合，サラダ

オイルバブルの操作

図 4 に示すように，ユーザはスプーンを用いて水の上に浮かぶオイルバブルを移動および変形する．また，図5 に示すように，ユーザはスプーンで二つのオイルバブ
ルを近づけることにより，オイルバブルを結合できる．

油は光を透過する性質を持つため，投影した映像を視認– 17 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

≁∨≴∩

far

≁∨≴ ∫ ∱∩

(a)
near

(a)

≁∨≴∩ ≜ ≁∨≴ ∫ ∱∩

(b)

(b)
図3

オイルバブルの距離画像(c)
図7

オイルバブルの追跡い．そのために，図 3(b) に示すような距離画像を明度により二値化した画像を用い，オイルバブルを識別する．
図4

図 7 に示すように，(a) から (b) へとオイルバブルが移

オイルバブルの変形動する場合を考える．距離画像センサのフレームレート
において，各フレーム間でのオイルバブルの移動量は微小である．そこで，図 7(a) の画像のオイルバブルの領域
を A(t)，(b) のオイルバブルの領域を A(t + 1) とするとき，A(t) と A(t + 1) が同一のオイルバブルであるか以
下の式より判定する．

図5

S(A(t) ∩ A(t + 1))≥ κth
S(A(t + 1))

オイルバブルの結合(1)

このとき，S(X) は領域 X の面積であり，また κth は閾値を表す定数である．式 (1) を満たすとき，A(t) とA(t + 1) は同一のオイルバブルであると判定する．一方，式 (1) が満たされず，かつ S(A(t + 1)) > 0 のとき
は，新たにオイルバブルが投入されたと判定する．
図6

3.5

オイルバブルの分裂

結合・分裂の検出

オイルバブルの結合では，二つのオイルバブルが一つに結合するだけでなく，三つ以上のオイルバブルが一つ
更に，図 6 に示すように，オイルバブルの左側を左にに結合する場合も考えられる．しかし，三つ以上のオイ

少し動かした後，右側を右に引き伸ばすことで一つのオルバブルの結合では，実際には同時に結合することは稀

イルバブルを二つに分裂できる．ユーザはこのようにスであり，二つのオイルバブルの結合が順次行われること

プーンなどを用いて，水の上に浮かぶオイルバブルを変になる．また，オイルバブルの分裂も同様に，一つのオ形・結合・分裂させる操作を行い，オイルバブルの位置

イルバブルを三つ以上に分裂させることが考えられるおよび形状を変化させることで，投影された映像を操作が，三つ以上への分裂の操作は非常に困難である．また，する．

オイルバブルの三つ以上への分裂は実際には，二つに分

3.4

オイルバブルの識別裂したオイルバブルをさらに二つに分裂させるといったオイルバブルに映像を投影する場合，オイルバブルが操作によって行われる．したがって，今回は二つのオイ

移動しても同じ映像を追跡して投影できることが望まし

ルバブルが一つに結合または一つのオイルバブルが二つ– 18 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)≁∨≴∩

タービンオイル≁∨≴ ∫ ∱∩(a)≁∨≴∩ ≜ ≁∨≴ ∫ ∱∩

ひまし油

(b)
(a) タービンオイル
ベビーパウダー(b) ひまし油(c)
図 8 結合・分裂の検出(c) サラダ油に分裂することを想定する．

図 9 油による違い

分裂の検出は，図 3(b) に示すような距離画像を明度により二値化した画像を利用する．図 8 に示すように，(a) から (b) へと二つのオイルバブルが結合する場合を

4.1

油と混合物質考える．図 8(a) の画像のオイルバブルの領域を A(t) と油と混合物質の違いによるオイルバブルへの影響を調し，(b) の画像のオイルバブルの領域を A(t + 1) とする

べるため，それぞれの種類を変化させて実験を行った．

とき，以下の式より判定を行う．

実験では，混合物質と油を質量比 1 : 10 で混合してオイ

S(A(t) ∩ A(t + 1))≥ kth
S(A(t + 1))

ルバブルを作製した．100 × 100 × 50 mm の大きさの水(2)槽に高さ 25 mm まで水を張り，作製したオイルバブルを浮かべた．

このとき，S(X) は領域 X の面積であり，また kth は

4.1.1

油の種類の変化

閾値を表す定数である．この値が閾値より大きい時，領様々な種類の油にベビーパウダーを混合した結果を

域 A(t) 内にオイルバブルが二つある場合，二つのオイ

図 9 に示す．本実験では，サラダ油，サラダ油より粘性

ルバブルが一つに結合したことを検出できる．領域 A(t)の低いタービンオイル，サラダ油より粘性の高いひまし

内にオイルバブルが一つの場合には移動したことが分か油を用いた．図 9 を見ると，(a) に示すタービンオイル

る．つぎに図 8(b) から (a) へと一つのオイルバブルがを用いた場合には，油が水槽の全体に広がりオイルバブ

二つに分裂することを考える．分裂の場合同様に，分裂ルを形成できないことが分かる．(b) に示すひまし油のの前後での領域の変化は微小であるための式 2 より判定

場合には，(c) に示すサラダ油の場合と同様にオイルバする．分裂の場合にも，領域 A(t + 1) 内にオイルバブル

ブルを形成できたものの，混合中に発生した気泡がわずが二つある場合，一つのオイルバブルが二つに分裂した

かに残っていることが確認できる．

ことを検出できる．

4.1.2

混合物質の違い

次に，様々な混合物質をサラダ油に混合した結果を4 評価実験

図 10 に示す．実験では，白色の微粒子として小麦粉お本節ではまず，油と混合物質の違いによるオイルバ

よび絵具，水に溶けない物質としてマグネシウムおよびブルへの影響について実験した結果を示す．次に，Oil

マヨネーズ，白色かつ水に溶けない物質として石灰粉おBubble Display を実装し，Oil Bubble Display のディ

よび PTFE（ポリテトラフルオロエチレン），粘性を向スプレイとしての性能を評価した．本論文では性能評価上させる物質として片栗粉を用いた．図 10 を見ると，として，コントラストおよびオイルバブル特有の柔軟性(a) に示す小麦粉，(e) に示す石灰および (g) に示す片栗の時間変化について述べる．

粉では，オイルバブルを形成できないことが分かる．(b)– 19 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

小麦粉

絵具

Projector(a) 小麦粉(b) 絵具マヨネーズ

マグネシウムWater tank

石灰(c) マヨネーズ

Distance
image
sensor(d) マグネシウム

PTFE

図 11 提案システムの実装

片栗粉(e) 石灰(f) PTFE

ベビーパウダー（Optoma 社製 EP7155i，解像度 1024×768）を設置した．使用した赤外線距離画像センサの近赤外線の波長は850 mm であり，このような近赤外光の水の減衰率は形相に影響ないほど小さく，水面のオイルバブルを検出で(g) 片栗粉
図 10

きる．赤外線距離画像センサの最大フレームレートは 50(h) ベビーパウダー

fps であり，実装したシステムのフレームレートは約 20混合物質による違い

fps であった．実装したシステムでは，水面 300 × 200
mm の範囲内でオイルバブルの検出が可能であり，このに示す絵具では，油と絵具が十分に混ざらず，水面に投範囲内に収まる大きさのオイルバブルに投影が可能であ

入後に絵具が徐々に水に溶け出す結果となった．また，る．また，オイルバブルの誤検出を軽減するため，面積が(c) に示すマヨネーズおよび (d) に示すマグネシウムで約 80 mm2 以下のオイルバブルはノイズとして扱った．

は，粒子の粒が視認でき，投影には適さないことが分か想定したオイルバブルの大きさは 100 縲 20000 mm2 程る．(f) に示す PTFE では，概ね良好なオイルバブルを度であり，この大きさは十分に検出・投影が可能である．

形成したものの，部分的に凝集していることが確認でき映像を投影するオイルバブルは，4.3 節で用いたものをる．これらの結果から，ベビーパウダーが今回試した中除き，ベビーパウダーとサラダ油を質量比 1 : 10 で混合で一番最適な混合物質であると考えられる．

して作製した．また，実験時の気温は摂氏 20 縲 25 度，

4.2

水温は 15 縲 20 度であった．

実装

図 11 に実装システムの外観を示す．450 × 300 × 100

4.3

コントラスト評価

mm の大きさの水槽に高さ 50 mm まで水を張った．

オイルバブルに混合するベビーパウダーと油の混合

水槽の下部 500 mm に TOF（Time of Flight）方式の比と，投影像のコントラストの関係を調べるため実験を

赤外線距離画像センサ（MESA 社製 スイスレンジャー

行った．実験では，図 12 に示すように，オイルバブル

SR4000）を設置し，上部 1000 mm にプロジェクタの面積の半分に白色光を投影し，白色光を投影している– 20 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

黒色投影部
コントラスト(a) 1:10
図 12

照度値 Lux

300(b) 1:30
コントラストの計測

白色投影部

3.5
3

200

2.5
150

2

100

1.5
1

50

0.5
0

1:10

1:15

1:20

1:25

1:30

混合比

領域の照度を IW ，投影していない領域の照度を IB とし

図 13て，コントラスト C を以下のように定義した．

IW
IB

4.5
4

250

0

C=

5

コントラスト350

混合比とコントラスト(3)

実験では，ベビーパウダーと油をそれぞれ質量比 1:10，

1:15，1:20，1:25，1:30 で混合したものを浮かべ，暗い部屋で各オイルバブルの半分に白色光を投影し，分光放射測定器計（UPRtek MK350）により計測した．質量比

図 141:10 より高い濃度では比重の大きさによりオイルバブル

柔軟性の低下したオイルバブル

が沈み，質量比 1:30 より低い濃度では赤外線カメラに分裂・結合より検出できないため，その間の濃度について計測を試

移動

みた．

操作なし

1回目

混合比とコントラストの関係を図 13 に示す．同図よ

2回目

り，濃度が高い方が白色の照度が高くなることが確認できる．また，濃度が高い場合と低い場合にコントラス

0s

30s

トが高く，質量比 1:20 付近でコントラストが低くなる

60s

図 15

90s

120s

タイムチャート

ことが確認できる．白色を投影した領域ではオイルバブ
ル表面での散乱した光が観測される．一方，黒色を投影した領域では，白色を投影した領域からの多重散乱光が

4.4

柔軟性評価

オイルバブルの中を通り観測される．このように，観測

水面に浮かべて間もないオイルバブルは，定常状態にされる光の要因が白色領域と黒色領域で異なるため，濃円形に近い状態になる．しかし，結合と分裂の操作を繰

度によりコントラストが変化したと考えられる．Web

り返し時間が経つと，オイルバブルの形状が柔軟に変わContent Accessibility Guidelines においては，サイズのるという性質が損なわれ，図 14 に示すように定常状態

大きなテキストおよび文字画像においては，少なくともで円形にならず，変形しにくくなるなど操作性が低下す

3:1 のコントラスト比が必要であると示されており [13]，る現象が確認されている．これは，オイルバブル内のベ実装システムはこの条件を概ね満たしている．一方で，ビーパウダーが沈殿していることが原因であると考え

図 12 (a) に示すように，濃度が高い場合には多重散乱にられる．本実験では，オイルバブルの操作回数と柔軟性

より投影像がボケ，文字や形状の区別の妨げになる．しの関係を調べるため，オイルバブルを移動させた際の形たがって，投影像の文字や形状の区別にはボケの影響と状の時間変化を計測した．オイルバブルの柔軟性の定量

コントラストのトレードオフを考慮して質量比 1:30 が，評価を容易にするため単純な直線的な移動について考

投影色の区別にはより高い照度が必要なため質量比 1:10

える．オイルバブルの移動のためスプーンを移動させるがそれぞれ望ましい．

と，はじめは半分程度がスプーンに直接追従し，残り半– 21 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)1

つれて，一度変形すると元に戻りにくくなるため，移動

0.9

Ave.16～20

開始時に円形に戻らないための非変形率が低くなる．ま

0.8

非変形率

0.7

た，11 縲 15 回の平均までは，移動させた際に非変形率

Ave.6
～10

0.6

0.5

が下がることが確認できるが，16 縲 20 回の平均では，

Ave.11～15

0.4
1
2
3
4
5

0.2
0.1
0
0

6
7
8
9
10

2

図 16

では，移動と共に非変形率が上昇する傾向が見られたが，Ave.1～5

移動回数

0.3

非変形率の減少が極端に小さくなる．16 縲 20 回の平均

11
12
13
14
15

4
6
8
移動開始時からの経過時間 [s]

16
17
18
19
20

10

これは復元力の低下により移動開始時に円形に戻らず，
移動方向と垂直方向の楕円になっていたため，移動に伴12

い円形に近づいたことが原因である．このことから，分裂と結合を含む操作回数が 15 回以上になると，オイル

オイルバブルの非変形率の時間変化

バブルの柔軟な特性が損なわれていることとなる．この
結果から，操作回数が 15 回までは使用できることが確認できた．

分がその場にとどまろうとするため，オイルバブルは移

4.5

考察

動方向に伸びた形状になり縦横比が変化する．その後，様々な種類の油と混合物質を用いて実験を行った結オイルバブルはその状態でスプーンと共に移動し，ス

果，サラダ油とベビーパウダーの組合わせが本論文で示プーンが止まると移動していたオイルバブルが円形に戻した組合わせの中では最適と考えられた．また，ひまし

ろうとする．この移動時のオイルバブルの縦横比により

油はサラダ油に比べて弾性が高く塑性変形するため，単柔軟性を評価する．実験では，図 15 に示すように，分裂一のオイルバブルとしては操作性が悪いが，サラダ油としその後結合する操作（緑色）と，10 秒かけて 200mm

組み合わせることで，細かな形状を再現できると考えらを移動させる操作（赤色）を，30 秒おきに交互に行った．

れる．また，サラダ油とひまし油を混合することで，自オイルバブルの大きさは直径 40 mm とし，スプーンは由な粘性のオイルバブルの形成が期待される．本実験に先端が 10 × 15 mm の楕円形のものを利用した．操作

おいては水温を一定として実験を行ったが，水温を大きの再現性を保つために，スプーンの動かし方をプロジェ

く変化させることで油の粘性を変化させることが可能でクタで線を投影することで指示した．線は移動方向と垂あるため，今後は水温を制御することでより操作性の高直に投影し，一定速度で 10 秒かけて 200mm を移動さいオイルバブルの作製も可能であると考えられる．

せ，線とスプーンの先端が同じになるように操作した．

コントラスト評価の結果から， 濃度が高い場合と低い

また，分裂し結合する操作は，移動方向と垂直の方向に場合にコントラストが高いことを確認した．しかし，濃行った．オイルバブルを移動させた際の結果を図 16 に度が高い場合には多重散乱によるボケの影響が文字や形示す．結果は，大津の手法 [14] による閾値で二値化し，状の区別の妨げになる．また，濃度が低すぎる（質量比楕円フィッティングした後，長軸と短軸の比率をオイル

1:40）と赤外線距離画像センサで検出できなくなる問題

バブルの非変形率として算出した．また，図 16 では，各や，濃度が高すぎる（質量比 1:5）とオイルバブルが水操作における非変形率の時間変化と 5 回ごとの時間変化

より重くなり沈殿する問題が発生する．したがって，コの平均を記している．横軸は，移動開始時からの時間をントラストが必要な場合には質量比 1:30 のオイルバブ表している．

ルが，照度が必要な場合には質量比 1:10 のオイルバブル

分裂回数が少ない場合のオイルバブルは，移動させたが適しているといえる．柔軟性評価の結果から，操作回際に伸びた形状となるため，非変形率が大きく下がり，数 15 回までは，オイルバブルの柔軟な性質を保てるこ

その後，元の形状に戻ろうとするため，非変形率が徐々とが確認できた．柔軟な性質を保てる時間は，混合するに上昇する．オイルバブルは，分裂回数が多くなるにつ

物質や濃度により変化することが考えられる．したがっれて，移動させた際に変形しにくくなるため，非変形率て，柔軟な性質を保てる時間をより長くするためには物の減少量は小さくなる．さらに，分裂回数が多くなるに質の密度や濃度に関する調査が必要である．また，オイ– 22 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

ルバブルをスプーンにより操作する際に，スプーンの動作が早い場合にオイルバブルがスプーンに追従できない
場合がある．そのため，オイルバブルの移動速度には制限がある．この制限は，オイルバブルや操作するスプーンの大きさに依存しており，オイルバブルを小さくまた(a)はスプーンを大きくすることでこの制限を緩和すること

図 17が可能である．本実装では，水面 300 × 200 mm の範囲(b)
投影像と面の対応付け

内がシステムに利用可能であるが，立ち止まって手が届く範囲内すべてが利用できるのが望ましいため，今後は面に対応付ける．この三角形をオイルバブルの輪郭形状

水面 1000 × 600 mm 程度の範囲内を利用可能にすること重心によって作成される三角形に合わせて変形させ，とを目標とする．Oil Bubble Display は，水の上に浮かこれらの三角形に対応付けされている映像をアフィン変

べた油に映像を投影することでディスプレイ面を形成し換することで，投影像の形状を変形する．図 18 に，(a)ているため，投影面は平面となる．したがって，オイル

から (b) にオイルバブルが変形した場合に投影する映像

バブルに混合する物質の質量を制御し，オイルバブルをを変形させる概念図を示す．まず，(c) および (d) に示

水中に留めることで，投影に奥行きを持たせることが可

すように，計測したオイルバブルの重心（青色）を求め，能となる．

計測したオイルバブルの領域の輪郭線を取得し，輪郭線

5 アプリケーションの距離が等しくなるように輪郭線上に基準点（赤色）を

6 点決定する．つぎに，基準点 2 点と重心を頂点とする
本節では，Oil Bubble Display を用いた投影像の変三角形の面を形成することで，図 17 (b) と同じ三角形の形，投影色の混合・分解，および演算表現の三つのアプ面を形成する．これにより，図 4 (e) に示すように，オリケーション例について説明し，試作した結果を示す．

イルバブルの形状が円形に近いと投影像は本来の投影像

投影像の変形では，投影すべき映像をオイルバブルの形であり，オイルバブルが変形することで図 18 (f) に示す状に合わせて変形させ投影させることで，投影像の形状

ようにオイルバブルの形状に合わせて映像を変形させるの直接的な操作を可能とする．投影色の混合・分解では，ことができる．また，オイルバブルが分裂した際には，一つのオイルバブルに一つの色を投影し，結合・分裂さ分裂したオイルバブルに元の映像にそれぞれ変形を適用せることで，色の混合・分解を可能とする．演算表現でして投影する．

は，一つのオイルバブルに一つの数字を投影し，結合・分

5.2

投影色の混合・分解

裂させることで，数字を加算・配分といった演算をする

投影色の混合・分解アプリケーションでは，ユーザはことを可能とする．これらのアプリケーションは，投影

オイルバブルを結合・分裂させることで，オイルバブル

像の変形，投影色の混合・分解はアミューズメントパーに投影されている色を混合したり，分解したりできる．

クなどでゲームとして利用できると考えられ，演算表現

本研究では，色を HSV 表色系で表現し，彩度および明は家庭で小さい子供が楽しく勉強できる利点があると考度は最大値とし，色相 H を変化させることでオイルバえられる．

ブルの色を操作する．図 19 に，色相 H を 0 ∼ 359◦ で

5.1

投影像の変形表現した図を示す．

オイルバブルの形状に合わせて映像を変形させる方法

まず，オイルバブルを水面に滴下した時に投影する色について説明する．本研究では，オイルバブルの輪郭形の色相 H をランダムに決定する．結合の際には，結合前状を六角形で近似し，その形状に合わせて投影像を変形の色から加法混合に基づいて結合後の色を決定するためする．まず，図 17 (a) に示すように，任意の正六角形のに，色の色相 H を RGB 空間へ変換し，結合処理を施した

頂点（赤色）とその重心（青色）を考え，この頂点 2 点と後で投影する色の色相 H を決定する．結合前のオイル

重心（青色）を頂点とする三角形の面を形成する．次に，バブルの色をそれぞれ (Rp1 , Gp1 , Bp1 )，(Rp2 , Gp2 , Bp2 )図 17 (b）に示すように，投影する映像をこの三角形のとし，面積を Sp1 ，Sp2 とするとき，結合後のオイルバ– 23 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

中で最大のものを Imax ，最小のものを Imin とする．分
裂後の面積をそれぞれ Sq2 ，Sq3 (Sq2 ≥ Sq3 ) とすると
き，分裂後の (Rq2 , Gq2 , Bq2 )，(Rq3 , Gq3 , Bq3 ) は以下のように決定する．

(b)

(a)

Y =

Sq3
Sq2 + Sq3

(Rq2 , Gq2 , Bq2 ) = (1, 0, 0) (Imax = Rq1 )(0, 1, 0) (Imax = Gq1 )
(0, 0, 1) (Imax = Bq1 )
(c)

(d)

(e)

(Rq3 , Gq3 , Bq3 ) = (Y Rq1 , Gq1 , 0)
 (Rq1 , Y Gq1 , 0)
(0, Y Gq1 , Bq1 ) (0, Gq1 , Y Bq1 ) (Rq1 , 0, Y Bq1 )(Y Rq1 , 0, Bq1 )(f)
図 18 投影像の変形

(7)

(8)

(Imax = Rq1 , Imin = Bq1 )(Imax = Gq1 , Imin = Bq1 )(Imax = Gq1 , Imin = Rq1 )(9)(Imax = Bq1 , Imin = Rq1 )(Imax = Bq1 , Imin = Gq1 )(Imax = Rq1 , Imin = Gq1 )結合時と同様に RGB から分裂後に投影する色の色相 Hを決定する．このように (Rq2 , Gq2 , Bq2 ) は赤，緑，青の中で一番近い色になり，(Rq3 , Gq3 , Bq3 ) は残りの成分とすることで，例えば，黄は赤と緑，オレンジは赤と黄と180°

いった直感的な色の分解になる．

0°

5.3

演算表現

演算表現アプリケーションでは，ユーザはオイルバブ
ルを結合・分裂させることで，オイルバブルに投影されている数字を加算・配分ができる．まず，オイルバブル

図 19 色相の色表現

を水面に滴下した時に投影する数字 N を 1 縲 9 の中からランダムに決定する．結合の際には，結合前の数字同
ブルの (Rp3 , Gp3 , Bp3 ) は以下のように決定する．

士を足し合わせることで結合後の数字を決定する．結合
前のオイルバブルの数字をそれぞれ Np1 ，Np2 とすると

Sp1 Rp1 + Sp2 R2
Rp3 =Sp1 + Sp2

(4)

Gp3 =

Sp1 Gp1 + Sp2 Gp2
Sp1 + Sp2

(5)

Bp3 =

Sp1 Bp1 + Sp2 Bp2
Sp1 + Sp2

(6)

き，結合後のオイルバブルの数字 Np3 は以下のように決定する．

Np3 = Np1 + Np2(10)

彩度および明度を最大値として，RGB 色空間から色相

一方，分裂の際には，分裂後のオイルバブルの面積比

H へ変換することで，結合後に投影する色の色相 H をを考慮して分裂後の数字を決定し，分裂後のオイルバブ決定する．

ルの数字の合計は分裂前の数字と同じとなるように配分

分裂時も色の色相 H を RGB 空間へ変換し，分裂処理する．

を施した後，分裂後に投影する色の色相 H を決定する．

分裂前のオイルバブルの数字を Nq1 とし，分裂後の面

分裂前オイルバブルの色を (Rq1 , Gq1 , Bq1 ) とし，この積をそれぞれ Sq2 ，Sq3 (Sq2 ≥ Sq3 ) とするとき，分裂後– 24 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

図 20

図 22 色の分裂結果

形状の変形結果

図 21 色の結合結果

図 23

数字の結合結果

図 24

数字の分裂結果の Nq2 ，Nq3 は以下のように決定する．

Sq2
Sq2 + Sq3
Nq3 = Nq1 − Nq2
Nq2 = Nq1

5.4

(11)
(12)

動作確認

これまでに述べたアプリケーションを試作し，動作確

6 一般公開認を行った結果を以下に示す．
投影像の変形Oil Bubble Display をインタラクション 2015[15]（会図 20 にオイルバブルを変形させた際に，場：東京国際交流館，期間：2015 年 3 月 5 日（木）縲 7

投影像が変形している様子を示す．オイルバブルを変形

日（土）) および JP2015 情報・印刷産業展 [16]（会場：させることにより，オイルバブルの形状に合わせて投影

インテックス大阪 5 号館，期間：2015 年 5 月 14 日（木）像が変形していることが確認できる．

縲 16 日（土）) に出展し，100 人以上に対してデモ展示

投影色の混合・分解を行った（図 25）．デモ展示では，投影色の混合・分解

図 21 に二つのオイルバブルを結合させた際に，投影している色が変化した様子を示す．

アプリケーションを展示した．

赤色と緑色を混合することで橙色に変化することが確認

体験者からは，単純に「綺麗」や「面白い」などの意見できる．図 22 にオイルバブルを分裂させた際に，投影の他に，「池や水族館の水槽などでできたら面白そう」やしている色が変化した様子を示す．桃色を分解させるこ「広告などに使えないか」や「自動的に動けばインテリとにより紫色と赤色に分解していることが確認できる．

アとして使えそう」などの意見を得ることができた．特結合・分裂により投影している色の色相が変化したことにオイルバブルの結合・分裂に対して面白いという意見が確認できる．

が多く，結合・分裂が楽しさの要因になっていることが演算表現

図 23 に二つのオイルバブルを結合させた際示唆された．体験者は，結合に関しては難なく操作するに，投影している数字が加算された様子を示す．1 と 4ことができていたが，分裂に関しては多少苦労しているを加算することで 5 になることが確認できる．図 24 に様子が見られた．オイルバブルの結合は，一つのオイル

オイルバブルを分裂させた際に，投影している数字が配バブルを別のオイルバブルに近づけることで，二つのオ分された様子を示す．6 を配分することにより 3 と 3 にイルバブルを結合させることができる．一方，オイルバなったことが確認できる．結合・分裂により投影していブルの分裂は，オイルバブルの片側を伸ばした後，オイ

る数字が加算・配分されたことが確認できる．

ルバブルが円形に戻る前に，反対側を伸ばすことで一つ– 25 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)

イでゲームなどのコンテンツを作る場合などにおいて，
従来のディスプレイは入力が移動・変形のみであり，入力が少ない．一方，Oil Bubble Display は移動・変形・結合・分裂の四つのインタラクションが可能であり，結合・分裂は各オイルバブル間での情報のやり取りができるため，入力の幅が広がる．したがって，これらを利用することでインタラクティブなコンテンツの開発が可能(a)になると考えられる．今後は，Oil Bubble Display によ(b)

り音情報を操作するなど，視覚以外を操作するインタラ

図 25 展示の様子 [15]

クティブなシステムへの応用を検討している．また，水流を制御することで，例えば，水面を揺らして映像を振のオイルバブルを二つに分裂させるため，多少の慣れが動させたり，渦を作って流体の動きに従った映像とのイ必要である．デモ展示では，スプーンの先端が 10 × 15

ンタラクションを可能にするなど，より柔軟なディスプ

mm の楕円形のものを利用したが，今後は，より大きなレイとしての拡張が期待できる．

スプーンを利用することでオイルバブルを伸ばす操作を

参考文献

簡単にするなどの改善が必要であると考えられる．

[1] Parinya Punpongsanon, Daisuke Iwai, and Ko-

7 おわりにsuke Sato. Deforme: projection-based visualiza-

本研究では，水の上に油（オイルバブル）を浮かべ，

tion of deformable surfaces using invisible tex-

プロジェクタにより映像を投影するディスプレイ（Oiltures. In Proceedings of the SIGGRAPH ASIA

Bubble Display）を提案した．Oil Bubble Display は，2013 Emerging Technologies, p. 8. ACM, 2013.

水の上に浮かべた油をスクリーン面として利用すること[2] 小池英樹, 高橋陽一, 的場やすし. Aquatop display :で，水の上の油特有の柔軟な性質を持つディスプレイで浴室での情報閲覧を目的としたインタラクティブ・ある．これにより，操作時には変形し，定常状態では円

サーフェス・システム. 日本バーチャルリアリティ

形に近い形を保つことができる．また，スクリーン面は

学会論文誌, Vol. 18, No. 4, pp. 517–526, 2013.

移動・変形・結合・分裂が可能であり，各スクリーンに情[3] 八木明日華, 井村誠孝, 黒田嘉宏, 大城理. 多視点観

報を持たせることで，特に結合・分裂ではそれらの操作

察可能なインタラクティブフォグディスプレイ. 日に合わせて情報を処理することが可能である．さらに，

本バーチャルリアリティ学会論文誌, Vol. 17, No. 4,

Oil Bubble Display を用いた投影像の変形，投影色の混

pp. 409–417, 2012.

合・分解，および演算表現の三つのアプリケーションを[4] Paul Dietz and Darren Leigh. Diamondtouch: a

実装した．その結果，オイルバブルを変形・結合・分裂

multi-user touch technology. In Proceedings ofさせることによって，投影像の形状を変形したり，色をthe 14th annual ACM symposium on User inter-

混合・分解したり，数字を加算・配分したりといったイ

face software and technology, pp. 219–226. ACM,

ンタラクションが可能であることが確認できた．

2001.

Oil Bubble Display は，オイルバブルの形状に合わせ[5] Otmar Hilliges, Shahram Izadi, Andrew D Wil-て投影像の変形が可能となったり，絵具などでは表現でson, Steve Hodges, Armando Garcia-Mendoza,

きない色の分解なども直感的に操作可能であることや，

and Andreas Butz. Interactions in the air: adding

子供の算数の勉強など，アミューズメント，アート，教育further depth to interactive tabletops. In Pro-への応用が期待される．Oil Bubble Display は，楽しく

ceedings of the 22nd annual ACM symposium on

操作することができるため，特に教育では学習時間を伸User interface software and technology, pp. 139–

ばす効果が期待できる．インタラクティブなディスプレ

148. ACM, 2009.

– 26 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)[6] Pranav Mistry and Pattie Maes. Sixthsense: awearable gestural interface.

In Proceedings of

J63-D, No. 4, pp. 349–356, 1980.
[15] インタラクション 2015. http://www.interaction-

ACM SIGGRAPH ASIA 2009 Sketches, p. 11.

ipsj.org/2015/ ( accessed 2015-6-15 ).
[16] Jp2015 情 報・印 刷 産 業 展.

ACM, 2009.
[7] Mariko Isogawa, Daisuke Iwai, and KiminoriSato. Making graphical information visible in realshadows on interactive tabletops. IEEE Transac-

http://jp-

ten.jp/regulation ( accessed 2015-6-15 ).
井手口 裕太tions on Visualization and Computer Graphics,
Vol. 20, No. 9, pp. 1293–1302, 2014.
[8] Antti

Virolainen,

Arto

Puikkonen,

TuulaKärkkäinen, and Jonna Häkkilä. Cool interaction with calm technologies: experimenting with
ice as a multitouch surface. In Proceedings of the
ACM International Conference on Interactive

2017 年大阪大学大学院基礎工学研究科博士後期課程修了．博士（工学）．同年日本電気株式会社入社，現在に至Tabletops and Surfaces, pp. 15–18. ACM, 2010.
[9] Chris Harrison, Hrvoje Benko, and Andrew D
Wilson. Omnitouch: wearable multitouch inter-る．三次元計測に関する研究に従事．
川口 純輝

action everywhere. In Proceedings of the 24th annual ACM symposium on User interface softwareand technology, pp. 441–450. ACM, 2011.
[10] Peter C Barnum, Srinivasa G Narasimhan, andTakeo Kanade.

A multi-layered display withwater drops. ACM Transactions on Graphics,
Vol. 29, No. 4, pp. 76:1–76:7, 2010.
[11] Ismo Rakkolainen, Stephen DiVerdi, Alex Olwal,
Nicola Candussi, Tobias Hüllerer, Markku Laitinen, Mika Piirto, and Karri Palovuori. The interactive fogscreen. In Proceedings of the ACM SIG-

2016 年大阪大学大学院基礎工学研究科博士前期課程修了．同年株式会社デンソー入社，現在に至る．生体計測に関する研究に従事．
浦西 友樹

GRAPH 2005 Emerging technologies, p. 8. ACM,
2005.
[12] Jun Noguchi,

Koichiro Kimura,

Masayoshi

Ohuchi, Hiromi Shimizu, Takafumi Aoki, Jiro
Baba, Shoichi Hasegawa, and Makoto Sato. Powder screen: a virtual materializer. In Proceedingsof the ACM SIGGRAPH 2006 Emerging tech-2008 年奈良先端科学技術大学院大学情報科学研究科博nologies, p. 27. ACM, 2006.

士後期課程修了．博士（工学）．同年日本学術振興会特別[13] Web content accessibility guidelines (wcag)

研究員 PD．2009 年奈良先端科学技術大学院大学情報2.0. http://www.w3.org/TR/WCAG20/ (refer-

科学研究科助教．2012 年大阪大学大学院基礎工学研究

ence 2016-01-14).

科助教．2014 年京都大学医学部附属病院助教．2016 年[14] 大津展之. 判別および最小２乗基準に基づく自動

大阪大学サイバーメディアセンター准教授，現在に至る．

しきい値選定法. 電子情報通信学会論文誌 D, Vol.

– 27 –

芸術科学会論文誌 Vol. 16, No. 3, pp. 15 – 28 (2017)2011 年フィンランド・オウル大学客員研究教授．三次元

2001 年奈良先端科学技術大学院大学情報科学研究科博

形状計測，拡張現実感，ヒューマンコンピュータインタ

士後期課程修了．博士（工学）．同年同研究科助手．2007

ラクションに関する研究に従事．電子情報通信学会，シ

年同研究科助教．2009 年大阪大学大学院基礎工学研究

ステム制御情報学会，日本バーチャルリアリティ学会，科准教授．2015 年関西学院大学理工学部教授，現在に日本生体医工学会，IEEE 等に所属．

至る．人工現実感，ヒューマンコンピュー タインタラ
クションおよび生体医工学に関する研究に従事．IEEE，

吉元 俊輔

情報処理学会，日本生体医工学会等に所属．
大城 理

2012 年大阪大学大学院基礎工学研究科博士後期課程修了．博士（工学）．同年同研究科助教，現在に至る．力触覚，生体計測に関する研究に従事．IEEE，日本生体医工学会，日本バーチャルリアリティ学会，電子情報通信学

1990 年大阪大学大学院基礎工学研究科博士課程修了．
工学博士．同年住友金属工業 (株) 入社．1993 年奈良先会等に所属．

端科学技術大学院大学情報科学研究科助手．1994 年同黒田 嘉宏

大学先端科学技術研究調査センタ助教授．2003 年大阪大学大学院基礎工学研究科教授，現在に至る．医用画像処理，生体信号処理に関する研究に従事．日本生体医工学会，システム制御情報学会，電子通信情報学会等に所属．

2005 年京都大学大学院情報学研究科博士後期課程修了．
博士（情報学）．同年京都大学大学院医学研究科特任助
手．2006 年大阪大学大学院基礎工学研究科助教．2013
年大阪大学サイバーメディアセンター准教授．2016 年
大阪大学大学院基礎工学研究科准教授，現在に至る．医
用 VR，触覚情報処理，教育訓練システムに関する研究に従事．ACM，IEEE，日本バーチャルリアリティ学会，
日本生体医工学会，日本 VR 医学会等に所属．
井村 誠孝– 28 –