情報処理学会 インタラクション 2015
IPSJ Interaction 2015

C74
2015/3/7

Oil Bubble Display : 油の変形・結合・分離による投影像の形状や色とのインタラクション
井手口裕太1,a)

川口純輝1

和田章宏1

浦西友樹2

吉元俊輔1

井村誠孝1

大城理1

概要：本研究では，水の上に油（オイルバブル）を浮かべ，プロジェクタにより映像を投影する Oil Bubble
Display を提案する．ユーザはオイルバブルを変形・結合・分離させることで，投影像とのインタラクションを行う．Oil Bubble Display では，オイルバブルへの映像の投影を行うために，オイルバブルに光を散乱させる物質を混合する．オイルバブルの位置および形状に合わせて映像を投影するため，オイルバブルの位置および形状を赤外線を用いて計測する．本稿では，Oil Bubble Display を用いた形状操作と色操作の二つのアプリケーションを実装した結果を示している．形状操作では，オイルバブルの形状に合わせて映像を変形し投影することで，投影像の形状とのインタラクションが可能となった．色操作では，一つのオイルバブルに一つの色を投影し，複数のオイルバブルを結合・分離させることで，色とのインタラクションが可能となった．

Oil Bubble Display: Deformable, Fusible, Separable Oil Display
for Interactive Projection
Ideguchi Yuta1,a)Kawaguchi Junki1 Wada Akihiro1 Uranishi Yuki2
Imura Masataka1 Oshiro Osamu1

Yoshimoto Shunsuke1

Abstract: This paper proposes Oil Bubble Display, an oil display floating on water for an interactive projection. A position of an oil bubble floating on water is measured, and an image is projected onto the oil bubble.
A user can deform, fuse and separate the oil bubble and can interact with a projected image by touching
the oil bubble. This paper shows two applications of the Oil Bubble Display: One is a shape deformation of
the projected image, the other one is an interactive color palette. The applications have shown that the Oil
Bubble Display is applicable for an interaction with projected images.

1. はじめにスプレイの研究が行われている．このような研究として，

AquaTopDisplay[1] やフォグディスプレイ [2] のように水

近年，タッチディスプレイの普及により，ディスプレイ

や霧などの流体に映像を投影し，操作する研究などがある．

は単なる映像出力装置だけではなく，ユーザの意図を反映

さらに，ディスプレイの位置や形状自体も入力情報としてする入力装置としても用いられるようになった．ディス

扱い，インタラクション可能なディスプレイの研究もある．

プレイを入力装置として用いる場合，接触位置による入このような研究として，DeforMe[3] のように粘弾性体に映力が広く普及している．一方で，接触位置による入力だけ像を投影し，操作する研究などがある．

ではなく任意にディスプレイの位置や形状が変化するこ本研究では，光を散乱させる物質を混合した油（オイルとで，映像との直接的なインタラクションが可能なディバブル）を水の上に浮かべ，プロジェクタにより映像を投

1

2

a)

影するディスプレイである Oil Bubble Display を提案す大阪大学
Osaka University
京都大学
Kyoto University
ideguchi@bpe.es.osaka-u.ac.jp© 2015 Information Processing Society of Japan

る．ユーザは，水の上に浮かべたオイルバブルを動かし，オイルバブルを変形・結合・分離させることでインタラク
ションを行い，オイルバブルに投影された映像を操作する．

1005

図 2

オイルバブル検出画像

Fig. 2 Detected oil bubble

2.2 オイルバブルの位置と形状の計測
オイルバブルの位置および形状に合わせて映像を投影するため，オイルバブルの位置および形状を計測する必要が
図 1 システム概要

Fig. 1 System overview

ある．このとき，オイルバブルの位置および形状の計測に可視光を用いた場合，プロジェクタによる映像の投影により計測精度が低下する恐れがある．そのため，本研究では赤外線を用いてオイルバブルの位置および形状を計測す
る．オイルバブルに赤外線を照射した場合，可視光と同様

本研究では，オイルバブルを投影対象として利用することに，オイルバブルに混合した微粒子によって赤外線が散乱により，投影対象そのものを結合・分離させることにより，する．したがって，図 2 散乱光を赤外線カメラにより観測投影像とのインタラクションを可能とする．本稿では，Oilすることで，オイルバブルの位置および形状を計測する．

Bubble Display を用いた形状操作と色操作の二つのアプリ
ケーションを提案する．

2. 提案システム

2.3 オイルバブルの操作
図 3 に示すように，ユーザはスプーンを用いて水の上に浮かぶオイルバブルを変形する．また，図 4 に示すように，

図 1 に提案するシステムの概要を示す．透明な水槽に水

ユーザはスプーンで二つのオイルバブルを近づけることにを入れ，オイルバブルを浮かべる．水面へ赤外線を照射し，より，オイルバブルを結合できる．更に，図 5 に示すよう

オイルバブルで散乱した赤外線を赤外線カメラを用いて検に，オイルバブルを伸ばすことで一つのオイルバブルを二出することで，オイルバブルの位置と形状を計測し，プロつに分離できる．ユーザはこのようにスプーンなどを用いジェクタにより映像を投影する．ユーザはスプーンなどをて，水の上に浮かぶオイルバブルを変形・結合・分離させ用いてオイルバブルを操作することで，投影像とのインタる操作を行い，オイルバブルの位置および形状を変化させラクションを行うことができる．

ることで，投影された映像を操作する．

2.1 オイルバブルの生成

3. アプリケーション

水の上に浮かべるオイルバブルは，水に溶けることなく

本節では，Oil Bubble Display を用いた形状操作と色操

水面に漂い変形・結合・分離といった操作が可能である必作の二つのアプリケーションを試作した結果について述べ要がある．これらの条件を満たす物質として，本研究ではる．形状操作では，投影すべき映像をオイルバブルの形状

油を利用する．人は物体で反射・散乱した光を目で捉えるに合わせて変形させ投影させることで，投影像の形状とのことで，物体が存在していることを視認できる．したがっインタラクションを可能とする．色操作では，一つのオイて，プロジェクタにより投影された映像を視認するためにルバブルに一つの色を投影し，結合・分離させることで，は，投影面で光が多方向に散乱する必要がある．水に浮か色とのインタラクションを可能とする．

べた油を投影面とした場合，油は光を透過する性質を持つ
ため，投影した映像を視認することはできない．そこで，

3.1 形状操作

光を散乱する性質を持つ微粒子を油に混合することで，微オイルバブルの形状に合わせて映像を変形させて投影す粒子により光の散乱を発生させ，水に浮かべた油へ投影しるアプリケーションを提案する．まず，図 6 (a) に示すよた映像の視認を可能とする ．油に混合する微粒子は，水おうに，任意の正 N 角形の頂点（赤色）とその重心（緑色）

よび油に溶解しない物質である必要がある．本稿では油にを考え，この頂点 2 点と重心 (緑色) を頂点とする三角形

混合する微粒子にベビーパウダーを用いた結果を示す．

の面を形成する．次に，図 6 (b) に示すように，投影する© 2015 Information Processing Society of Japan

1006

図 3

(a)

(b)

(c)

(d)

(e)

(f)

オイルバブルの変形

Fig. 3 Deformation of the oil bubble

図 4

オイルバブルの結合

Fig. 4 Fusion of the oil bubble

図 7

投影像の変形

Fig. 7 Deformation of the projection image

図 5

オイルバブルの分離

Fig. 5 Separation of the oil bubble

図 8色相による色の変化

Fig. 8 Color variation by hue
(a)

(b)
図 6

投影像の対応付け

Fig. 6 Mapping of the projection image

映像をこの三角形の面に対応付ける．この三角形をオイル

3.2 色操作

バブルの形状に合わせて変形させ，これらの三角形に対応

色操作アプリケーションでは，ユーザはオイルバブル

付けされている映像をホモグラフィ変換することで，投影を結合・分離させることで，オイルバブルに投影されてい像の形状を変形する．図 7 に，(a) から (b) にオイルバブる色を混合したり，分離したりできる．本研究では，色をルが変形した場合に投影する映像を変形させる概念図を示

HSV 表色系で表現し，彩度 S および明度 V は最大値とし，す．まず，(c) および (d) に示すように，計測したオイル

色相 H を変化させることでオイルバブルの色を操作する．

バブルの重心（緑色）を求め，計測したオイルバブルの領

図 8 に，色相 H を 0 ∼ 359◦ で表現した図を示す．

域の輪郭線を追跡し，得られた輪郭線上に等間隔に基準点

まず，オイルバブルを水面に滴下した時に投影する色の（赤色）を N 点決定する．つぎに，基準点 2 点と重心を頂色相 H をランダムに決定する．結合の際には，結合前の点とする三角形の面を形成することで，図 6 (b) と同じ三色から加法混合に基づいて結合後の色を決定するために，角形の面を形成する．これにより，図 3 (e) に示すように，色の色相 H を RGB 空間へ変換し，結合処理を施した後でオイルバブルの形状が円形に近いと投影像は本来の投影像

投影する色の色相 H を決定する．彩度 S および明度 V がであり，オイルバブルが変形することで図 7 (f) に示すよ

最大値の場合における，色相 H から RGB 色空間への変換

うにオイルバブルの形状に合わせて映像を変形させることは以下のように表される．このとき，RGB の値はそれぞができる．

れ 0.0 ∼ 1.0 とする．

© 2015 Information Processing Society of Japan

1007

X = 1−

H mod 120◦60◦
(1, X, 0)(X, 1, 0) (0, 1, X)(R, G, B) =

(0, X, 1) (X, 0, 1) (1, 0, X)

−1

(1)

(0◦ ≤ H < 60◦ )(60◦ ≤ H < 120◦ )(120◦ ≤ H < 180◦ )(180◦ ≤ H < 240◦ )(2)(240◦ ≤ H < 300◦ )(300◦ ≤ H < 360◦ )結 合 前 の オ イ ル バ ブ ル の 色 を そ れ ぞ れ (R1 , G1 , B1 )，(R2 , G2 , B2 ) とし，面積を S1 ，S2 とするとき，結合後のオイルバブルの (R3 , G3 , B3 ) は以下のように決定する．

R3 =
G3 =
B3 =

S1 R1 + S2 R2(3)

S1 + S2S1 G1 + S2 G2(4)

S1 + S2S1 B1 + S2 B2(5)
S1 + S2
彩度 S および明度 V を最大値として，この RGB から結合

図 9実装システムFig. 9 Implementation system

後に投影する色の色相 H を決定する．R，G，B の中で最大のものを Imax ，最小のものを Imin とするとき，色相 H

結合時と同様に RGB から式 (6) により分離後に投影するは以下のように表すことができる．

色の色相 H を決定する．

)
(

G−R


◦

+1
(Imin = B)
60 ×Imax − Imin



(
)


B−G
◦
H=
60 ×
+3
(Imin = R)Imax − Imin


)
(



R−B


◦

+5
(Imin = G) 60 × I
max − Imin

4. 実装と結果
本節では，Oil Bubble Display を実装し，これまでに述(6)

4.1 実装分離時も色の色相 H を RGB 空間へ変換し，分離処理を施した後，分離後に投影する色の色相 H を決定する．
分離前オイルバブルの色を (R1 , G1 , B1 ) とし，この中で最大のものを Imax ，最小のものを Imin とする．分離後の面積をそれぞれ S2 ，S3 (S2 ≥ S3 ) とするとき，分離後の(R2 , G2 , B2 )，(R3 , G3 , B3 ) は以下のように決定する．
Y =S3(R2 , G2 , B2 ) = ((1 − Y )R1 , 0, 0)(0, (1 − Y )G1 , 0)
(0, 0, (1 − Y )B1 ))(R3 , G3 , B3 ) =(Y R1 , G1 , 0)





(R

1 , Y G1 , 0)
 (0, Y G , B )11


(0, G1 , Y B1 )





(R1 , 0, Y B1 ) (Y R , 0, B )
1

1

(7)

S1

べた二つのアプリケーションを試作した結果を示す．

図 9 に実装システムの外観を示す．600 × 300 × 100 mmの大きさの水槽に高さ 50 mm に水を張り，水槽の下部に赤外線カメラおよび赤外線 LED 光源を設置し，上部にプロジェクタを設置した．映像を投影するオイルバブルは，サラダ油とベビーパウダーを 10 : 1 で混合して作成した．

4.2 形状操作
図 10 にオイルバブルを変形させた際に，投影像が変形している様子を示す．オイルバブルを変形させることによ(8)(Imax = R1 )(Imax = G1 )り，オイルバブルの形状に合わせて投影像が変形していることが確認できる．

(9)(Imax = B1 )4.3 色操作(10)

図 11 に二つのオイルバブルを結合させた際に，投影し(Imax = R1 , Imin = B1 )ている色が変化した様子を示す．赤色と緑色を合成するこ(Imax = G1 , Imin = B1 )とで橙色に変化することが確認できる．図 12 にオイルバ(Imax = G1 , Imin = R1 )(Imax = B1 , Imin = R1 )(11)

ブルを分離させた際に，投影している色が変化した様子を示す．桃色を分離させることにより紫色と赤色に分離して(Imax = B1 , Imin = G1 )いることが確認できる．結合・分離により投影している色(Imax = R1 , Imin = G1 )の色相が変化したことが確認できる．

© 2015 Information Processing Society of Japan

1008

図 10

オイルバブルの変形結果

Fig. 10 Deformation result of the oil bubble

図 11

オイルバブルの結合結果

Fig. 11 Fusion result of the oil bubble

図 12

オイルバブルの分離結果

Fig. 12 Separation result of the oil bubble

5. おわりに
本稿では，水の上に油（オイルバブル）を浮かべ，プロ
ジェクタにより映像を投影するディスプレイ（Oil Bubble

Display）を提案した．さらに，Oil Bubble Display を用いた形状操作と色操作の二つのアプリケーションを紹介した．実験によりオイルバブルを変形・結合・分離させることによって，投影像の形状や色とのインタラクションが可能であることを確認した．

Oil Bubble Display は，オイルバブルの形状に合わせて投影像の変形が可能となったり，絵具などでは表現できない色の分離なども直感的に操作可能であるなど，アミューズメントやアートへの応用が期待される．今後は，

Oil Bubble Display により音情報を操作するなど，視覚以外を操作するインタラクティブなシステムへの応用を検討
している．
参考文献
[1]

[2]

[3]

小池英樹, 高橋陽一, 的場やすし. Aquatop display : 浴室
での情報閲覧を目的としたインタラクティブ・サーフェス・
システム. 日本バーチャルリアリティ学会論文誌, Vol. 18,
No. 4, pp. 517–526, 2013.
八木明日華, 井村誠孝, 黒田嘉宏, 大城理. 多視点観察可能
なインタラクティブフォグディスプレイ. 日本バーチャル
リアリティ学会論文誌, Vol. 17, No. 4, pp. 409–417, 2012.
Parinya Punpongsanon, Daisuke Iwai, and Kosuke Sato.
Deforme: projection-based visualization of deformablesurfaces using invisible textures. In SIGGRAPH Asia
2013 Emerging Technologies, p. 8. ACM, 2013.

© 2015 Information Processing Society of Japan1009