Bounsight Shadow :物体の本物の影に動きを与えるインタラクティブディスプレイの検討
石山雅 三†

筧康 明‡

影をモチーフとした映像表現は多くの手法が試されてきたが，デジタル技術を用いた影表現の多くは，影をコンピュータグラフィクス(CG)で模倣することによる表現と位置づけることができる．これに対し，これまで本研究では，単一固定光源から出来る本物の影を物体から分離し，その動きを制御することを可能にする，光学設計によるシステムを提案してきた．本稿では，動く影とのインタラクションに焦点を当て，ユーザの行為に合わせてディスプレイ上の物体の影を動かすために必要な処理およびアプリケーションの実装例について述べる．

Bounsight Shadow : A Basic Study on an Interactive Display
Moving Shadows of Real Physical Objects
MASAMI ISHIYAMA†YASUAKI KAKEHI‡

There had been many approaches for visual expression relating to shadows. However, most expressions ofshadows using digital technology are just imitations of Shadows with Computer Graphics. On the other hand, in
this research, we have proposed a system which can cut off real shadow from objects, and control the movement
using optical design. This time, we aim to design interactions with the moving shadows. In this paper, wedescribe the system design to move shadows of physical objects according to the user's actions, and introduce
examples of application.

1.

はじめに従来からメディアアートやエンタテインメント分野を中心に，影をモチーフとした多くの映像表現が試されてきた．影は，対象の外見や表情などの情報を捨象しながらも，その確かな存在感を伝える現象であり，場にリアリティを生む表現手段として注目されている．近年では画像処理等のデジタル技術を応用することで，影を変形する，影の大きさを変える，影を用いて映像を操作するなど体験者と影との間のインタラクションもさまざまに提案されている．しかし，デジタル技術を用いた影表現の多くは，影そのものの拡張ではなく，影をコンピュータグラフィクス（CG）により模倣した表現と位置づけることができる．
これに対し本研究では，単一固定光源から出来る本物の影を物体から分離し，その動きの制御を可能にするシステムを提案してきた[1]．これらの条件を満たす光学系として，本システムでは，指向性を有するスクリーンと鏡，プロジェクタを用いて設計している．

たものの，ユーザや環境とのインタラクション機能は有してこなかった．そこで本稿では，動く影とのインタラクションに焦点を当て，ユーザの行為に合わせてディスプレイ上の物体の影を動かすために必要な処理およびアプリケーションの実装例について述べる．
2.

関連研究

数多くある影を用いたメディアアート作品に対し，特にシステム設計及び作品実装の手法に注目し，表1に示すような分類を行った．本研究は，“本物の影を制御”（2.c.）に位置づけられる．以下に関連する事例をいくつか紹介する．
影は光が遮られた結果生じる現象であり，CGを用いずとも，光の特性を利用することで影の動き等を操作することができる．そのような例としては，体験者の身体をマスクとして用い，影の中に映像を投影する“Graphic Shadow” [2]や，光源移動により影に動きを与える“Driftnet”[3]がある．これらの表現では，複数

これまでの実装では，影を動かすことは実現してき† 慶應義塾大学大学院 政策・メディア研究科
Graduate School of Media and Governance, Keio University‡ 慶應義塾大学 環境情報学部
Faculty of Environments and Information, Keio University

1. アナログ表現

2. デジタル表現
a. 影をCGにより生成

b. 本物の影とCGの影の組合せ

表1 影を用いた表現の分類

c. 本物の影を制御

Bounsight Shadow : 物体の本物の影に動きを与えるインタラクティブディスプレイの検討

光源が用いられている．また，“10番目の感傷（点・れ以外の角度からの光に対しては，高い透過性をもつ線・面）” [4]では，LED照明を付けた鉄道模型が，線素材である．さらにテーブル内部には高さ及び角度調路の周囲に置かれた様々なオブジェクトを照らし，そ節が可能な鏡を配置する．のオブジェクトの影が次々と生み出され，鑑賞者を作本システムの前に立つユーザは図1のようにプロ品の世界観に引き込む．これらの作品は，光によって௘ƂǇ๹ŽǀǯǋǡǿȔǌǟǡǮȈƣୟϚ

ジェクタ投影光をテーブル面に確認できるが，ここに生み出された影には，CGで生成された影にはない存ৄ ߑ¥ҽ ߎ 1 ¥¥¥ᚫ¥ܑ ผ 1,2
在感があることを鑑賞者に再認識させる．
Ր‫׵‬नඓԆശ¥2 ҚԆ֥ࢫौ؅֋‫ ܟ‬ƊƂƁƆ
本研究も光の特性を利用するという点では，これら見える光はプロジェクタから直接拡散する光ではなの事例と共通しているが，単一固定光源を用いている

光は一度スクリーンを透過する．透過した光はスクところは異なる点である．また，影を実体から切り離Ɣƶ¨‫ۻ‬ƣ௫ডǇາ຋ƎǀƈƝƜƷиƣ௘ƂǇਲޮ

リーン下部に設置した鏡にて反射した後，再度スクƎǀƈƝƁҔృƜŷǀ©Driftnet[4] ƜƤ¨ൃঊƣ‫ۻ‬
すという点にも特徴がある．
‫ڿ‬Ǉঝ۪ƎǀƈƝƜ¨иƠ௘ƂǇ๹ŽƛŹǀ©ƳƔ¨ඓǇࡊकƌƟ
Graphic
Shadow [5]ƜƤ¨඄ऽƝŹŻ‫ۻ‬ƣ௫ডǇѰकƜŷǀ©࢘
Bounsight
Shadow3.
຋ƎǀƈƝƜ¨ේൊƣиƣ૴Ơй੎ǇୟࠤƎǀƈƝǌțȉțǰൌ
3.1
システム概要Ơঢ‫۽‬ƌƛŹǀ©ƈǁƠ઀ƌ¨ේ‫אڪ‬ƜƤ¨‫ۻ‬Ԇ‫ٵ‬೿‫ہ‬Ƥ੯Ƅƣƣ৓‫ٽ‬ƠƽƘƛ¨ේൊƣиƣ '' ௘Ƃ '' Ǉঝ۪ƎǀƝƤҸ੎ࣂື௃
本システムでは，テーブル上に置かれた実オブジェŹŻஊƁ௫ଓƜŷǀ©
иǇ൱٧Ǝǀ¨ クトに対して，テーブル上の固定光源から光を投射す
ǇਲޮƎǀƟる．テーブル面が通常の拡散素材の場合には，生成さțƷƊƳƋƳ3㸣ࢨࢪࢷ࣑ᴣこ֥ࢫǇ຋ŹƔ れる影は実オブジェクトと床の接触点から床へと広がේǟǡǮȈƜƤ¨ǮÀǾȓझƠ૤ƀǁƔ࠾ǒǾƤƟƄ¨иǇ る．この影を，光源自体の位置に手を加えずに動かすǠǏǗǰƠ઀ƌƛ¨ǮÀǾȓझƣ‫ڿۻୖۋ‬ƀƾ‫ۻ‬ǇƽƿหඏƎǀ ために，テーブル面の素材とテーブル内部の構造を設ழࡉƎǀ©झࢬƣƝſƿ¨ǮÀǾȓศƁସधƣӶߔƂǀ©
計する．
ਙ‫ޠ‬ƣत݉ƠƤ¨বঢƊǁǀиƤ࠾ǒǾǠǏǗǰƝ
‫ڿۻ‬ƀƾࢪຢ
図1にシステムの基本設計を示す．テーブル上に影࣪ƣ৐ाஊƀƾ࣪ƭƝ܏Ɓǀ©ƈƣиǇ¨‫੾ࠧڿۻ‬ƂǇঝ۪Ǝǀの光源用にプロジェクタを1台鉛直下向きに設置すƣϠ૤ƠࡦǇғŽƏƠ௘ƀƎƔƶƠ¨ǮÀǾȓศƣǡǮȈǇୟϚ
ਙ‫ޠ‬ƝǮÀǾȓఊശƣ‫ܟ‬੔Ǉ৓‫ٽ‬Ǝǀ©
ƾƊǁƔൊ੾ る．テーブル面にはLumistyフィルム（MFY2555タイ
ॴ 1 ƠǟǡǮȈƣռේ৓‫ٽ‬ǇࠤƎ©ǮÀǾȓझƀƘƛіƨǀ© プ）を用いる．今回用いるLumistyは，図2のような特ƠǿȕǠǏǗǧǇ 1 ખѦପҌ‫܂‬ƂƠ৓૤Ǝǀ©ƳƳƳƠ¨ƈƣ 性を持ち，特定角度から入射した光のみ拡散させ，そ‫ܯ‬Žǀ©ƳƔ¨ Ɣ¨ǮÀǾȓศƠƤ Lumisty ǽǋȓȈÎMFY2555
ǠǏǗǰƠঝ/LJKW
Light
Projector'LVWDQFHEHWZHHQࡐƾƤ¨ƈǁ
/XPLVW\DQG0LUURU
Distance
between
3URMHFWRU
Lumisty and Mirror
ডǇ๧ƎǀǡǟǡǮȈǇ৓ƽƨƒǁǇ࠾

リーンに対して斜め下から入射する．本スクリーンは

her Shadow[3]ǊǊÀǰޮഌиƠ೗తध୴Ơƽǀғ‫܋‬ǇƁ݄Ƅ¨੯ງ
иǇหƌƔЀ

い．上記のような構造を有するテーブルに対して，鉛直下向きに光を投射すると，Lumistyの特性から投射

図2のように，斜め方向の入射光は拡散する特性を有するため，ミラーからの反射光は拡散して上方に拡がる．この鏡によって反射した後にスクリーン上で拡散した光が，ユーザが見る光である．
ここで，鏡の高さや角度を動かすと，その投影光の位置もまた変化する．このような仕組みを持つスクリーン上に物体を置くと，その部分の光が遮られ影となるが，その影もまた鏡の高さおよび角度に依存して位置が変化することになる．
3.2

ハードウェア

上記のような設計に基づき，本システムを実装した（図3）．筐体本体は天板が500mm角で高さは900mmである．今回の実装ではプロジェクタはTAXAN社製のKG-PL011S（LEDプロジェクタ）を用いた．スクリーンサイズは250mm角とした．プロジェクタレンズとスクリーンの間の距離は800mmである．また，ユー
ザからの入力装置として，ディスプレイ上には静電容量方式のタッチパネルを設置している．
鏡の垂直移動制御にはオリエンタルモーター社の電ÖTransparent×〈7UDQVSDUHQW〉

3K\VLFDO2EMHFW

Physical
7RXFK3DQHOObject)UHVQHO/HQV〈'LIIXVLYH〉
ÖDiffusive×Lumisty〈5HIOHFWLRQ〉

ÖReflection×Fresnel Lens

/XPLVW\0LUURU

Mirror

図11：ǟǡǮȈռේ৓‫ٽ‬
システム基本設計
ॴ
図4 電動スライダ（筐体内部）

Ɯŷƿ¨ƒƣ

al on an OpticalObjectsÍ
and Information

y2：Lumisutyॴƣ‫ۻ‬Ԇ௫ড
図2Lumisutyの光学特性

図3 システム外観

図5 サーボモータ（鏡下部）Bounsight Shadow : 物体の本物の影に動きを与えるインタラクティブディスプレイの検討

動スライダELS4（図4）を，水平角度制御には双葉電用い，電動スライダ制御にはコンテック社の，サーボ子工業のサーボモータRS405CB（図5）を組み合わせモータ制御には双葉電子工業の，C言語ライブラリをて実装した．

それぞれ用いて実装した．

3.3

影の移動と映像の位置合わせ

図6のa，b，cは，それぞれPCから出力している楕円4.

インタラクティブ・アプリケーションの描画像を，通常のモニタで表示した場合（実線枠）

アプリケーションは，ディスプレイ上に投影すると本システムのディスプレイ画面（点線枠）で表示しCGの描画像とスピーカからの音響で影の動きを拡張た場合の様子であり，後者は黒の円錐形のオブジェクし，その上で影に動きを与えることになる．アプリ

トを置いている．また，b，cは，それぞれaの状態かケーションとしては，影の動きの拡張と，影の動きにら鏡を垂直に下降移動させたときの様子である．

よるモノの見え方の拡張 が考えられる．

本システムでは，鏡の移動によって影の動きを実現

4.1

影の動きの拡張しているが，実際に鏡の移動によって動くのはオブ日常の経験や，子どもの頃に体験した影絵や影踏みジェクトの影のみではなく，プロジェクタからの投影といった遊びを通して，影が光の遮蔽の結果，起きる像全体である（b）．しかし，アプリケーションを作現象でしかないことは誰もが熟知している．しかし，る上では，影のみが動いていることが望ましく，鏡の自分の影に別の人格を感じ不安になったり，常にまと位置と描画像座標の位置合わせをする必要がある．実わりつく影を自分から切り離してみたいと思ったこと

験の結果，鏡の垂直上下移動とディスプレイ上の描画がある人は少なくないだろう．そういった，かつて影像の位置の移動量は，比例関係にあることが分っていに対して思い描いた現象が目の前で起きたとすれば，る[1]．したがって，ソフトウェア側で電動スライダかそれは視覚的に強く訴える表現となりうる．以下に，らのフィードバックを参照し，それに合わせて投影像

そのアプリケーション実装例を示す．のy座標の値を変更すれば，ディスプレイ画面の背景画像の位置を動かすことなく，影のみが動いているよ
うに見せることができる（c）．

4.1.1

影の切断（図7）

まず，ディスプレイに赤い十字ポインタが表示される．体験者がそのポインタに触れると，はさみが現

このためのソフトウェア制御にはopenFrameworksをれ，そのはさみが閉じ始める．はさみが閉じた瞬間，PCからの出力描画像
ディスプレイ画面〈 鏡の位置（スライダ移動）〉

ab. 位置合わせ前

図7 アプリケーション1（はさみ）c. 位置合わせ済（描画像のy座標を移動）

図6 スライダと描画像の位置合わせ

図8 アプリケーション2（ファン）Bounsight Shadow : 物体の本物の影に動きを与えるインタラクティブディスプレイの検討

切断音が響き，それと同時に指の影が指から離れていを誘導している．しかし，指の影が指に重なって見えく．

にくい位置にできることもあり，気付きづらい状況と

4.1.2

影の揺動（図8）

ディスプレイにファンが描画され，その中心に円錐なっていた．これらの点は，視線の誘導や，筐体設計で改良する必要がある．

型オブジェクトが置かれている．体験者は，ディスプ

一方の飛行機の影の浮遊アプリケーションでは，影レイに触れ，手でファンを回す．ファンの回転に合わの移動だけではなく，オブジェクトを飛行機型にし，せ，オブジェクトの影が左右に揺れる．

音響で離陸を演出する等の工夫を施している．その効以上ふたつは，どちらも実世界では起こりえない影果もあり，飛行機が浮いたと感じる意見が多かった．の動きの拡張と言える．
4.2

影の動きによるモノの見え方の拡張

5.

まとめと今後の課題

実世界で影が動く状態を考えると，それは光源が動

本稿では，物体の本物の影に動きを与えるディスプ

く場合と実体が動く場合であるが，今回は後者に注目

レイシステムにおける，おもに実装およびアプリケーした．なかでも影が切り離される状態となるのは，実ションの現状について報告した．

体が宙に浮いているときである．影は人間が空間を認

今後の課題として，まず現状の機械的な影の動きを知するための重要な手がかりのひとつであり，１歳未滑らかにすることが挙げられる．これには，鏡の動き満の乳児でも影の位置による空間認知をしているといの加減速をソフトウェアで調整することで改善できるう[5]．二次元的な絵では，影の位置を調節することと考えている．その上で，サーボモータを追加する等で実体の空間的な位置を表現する．これにヒントを得で鏡の動きのバリエーションを増やすことも検討するて，オブジェクトの影の位置をずらすことで，そのオ必要がある．また，現状では各アプリケーションがそブジェクトの浮遊感の表現を試みた．

れぞれ統一感なく動いている状態であるが，例えば絵モノの浮遊（図9）

本や劇場というようなメタファを用いて，ひとつの世

4.2.1

本アプリケーションは飛行機の模型が置かれている界観を持った空間として表現していく．

ディスプレイに数字が表示され，カウントダウンが始まる．カウントダウンが終わると，飛行機模型の下の謝辞本システムの開発において，多大な協力をい滑走路が動きだす．このとき，飛行機が滑走路を走る

ただいたオリエンタルモータ株式会社の貫間則

効果音がスピーカから響く．飛行機の離陸音ととも行氏，中尾篤氏および有限会社マイテクの岩崎に，飛行機模型の影が手前に切り離される．このと修氏に感謝したします．

き，鑑賞者は飛行機模型が離陸し飛び立ったような感覚を体験する．

図9 アプリケーション3（飛行機）

4.3

デモ展示

上記の影の切断と浮遊のアプリケーションは，2010
年11月22、23日に行われた慶應義塾大学 SFC Open
Research Forum 2010において，複数の来場者に体験してもらった．
はさみによる影の切断アプリケーションは，多くの来場者が驚きをもってインタラクションを体験していた．しかし一方で，注目するべき場所を予め伝えないと切断の瞬間を見逃す来場者もいた．現状では，赤い十字ポインタによって，そこに指を触れてもらうこと

参 考 文 献1) 石山 雅三, 筧 康明: “物体の本物の影に動きを与えるディスプレイシステムの提案”, 情報処理学会第72回全国大会公演論文集, p925-926 (2010)
2) Yugo Minomo, Yasuaki Kakehi, Makoto Iida andTakeshi, Naemura: "Transforming your shadow intocolorful visual media: multiprojection ofcomplementary colors," ACM Computers inEntertainment, vol. 4, no. 3, article 6D．（2006）
3) “Driftnet”, http://www.daito.ws/works/driftnet.html(2010 年12月現在 )．
4) クワクボリョウタ : “《10番目の感傷（点・線・面）》”, http://www.ntticc.or.jp/Exhibition/2010/
Openspace2010/Works/thetenthsentiment_j.html(2010 年12月現在 )．
5) 山口 真美 : “赤ちゃんは世界をどう見ているのか”, 平凡社新書（2006）