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

3-410-65
2017/3/2

人物シルエットをペンライトアート風に表現する
インタラクティブシステム
土屋桃子†1

伊藤貴之†1

新田善久†2

概要：ペンライトアートとは，ペンライトで空中に絵を描き，光の軌跡を記録するアートのことである．ペンライト
アート写真を制作する時間は，約 10 秒から 30 秒掛かるため，ペンライトアート写真を繋ぎ合わせたペンライトアー
ト動画を制作するためには，膨大な時間を必要とする．そこで本研究は，ペンライトアート風描画を実時間でインタラクティブに実現することで，インタラクティブアートとペンライトアートに着目した新たな表現手法を提案する．
本システムは，人認識によって人物だけの身体のエッジを，深度データを用いて実時間で取得し，ライトアートのような表現をするアートシステムである．最終的には，ペンライトアートの特徴である，一筆書き描画と手書き風デフォルメを実装することで，ペンライトアート風での描画を目標とする．

An Interactive System for Light-Art-Like Representation of
Human Silhouettes
MOMOKO TSUCHIYA†1 TAKAYUKI ITOH†1YOSHIHISA NITTA†2
Abstract: Light art represents various objects by a light stroke drawn in the air. It takes about 10 to 30 seconds to create a lightart picture, binding these pictures we could create a light art movie. It is a time-consuming task because we need large number offrames to create a movie. This paper presents a light-art-like interactive system. This system extracts the edges of human body byusing depth information, and then displays them as light art in real time. As an on-going work, we are improving the reality oflight art generated by this system, by implementing continuous line generation and hand-drawing-mimicking deformation
algorithms.

1. は じ め に列処理によってエッジを Catmull-Rom スプライン曲線で近似する．最後に，ペンライトアート表現のためのネオン風

近年，コンピュータ技術の発展とともにメディアアート描画を適用する．なお現時点での著者らの実装では，が同様に発展を続けてきた．メディアアートとは映像や音Microsoft 社の Xbox One Kinect センサの人物認識機能を利声などのマルチメディアを利用した作品を指すが，今回本用している．

研究ではメディアアートの中でも，インタラクティブアー

インタラクティブアートにはさまざまな関連研究や作品トに着目した．インタラクティブアートは，参加をするこが存在するが，本システムは人物認識と手描き形状風のデとで楽しむものであり，今後もさらなる発展が見込まれる．

フォルメにより新たな表現手法を提案する一例である．人ペンライトアート（図 1，[1]）とは，カメラのシャッタ

体をエッジ表現することで詳細な表現を失う代わりに，匿ースピードを長時間に設定し，その間ペンライトで空中に名性を保った表現が可能となることから，アート表現以外絵を描き，光の軌跡を記録するアートのことである．1 枚にも多様な応用が期待できる．のペンライトアート写真をつなぎ合わせることで，ペンライトアート動画を制作することができるが，膨大な時間を必要とする．
そこで本報告では，ペンライトアート風に人物シルエットを描く新しいインタラクティブシステムを提案する．本システムでは，撮影画像のうち人体が写っている画素の深度(距離)にもとづき，エッジを実時間で検出する．次に点†1 お茶の水女子大学大学院人間文化創成科学研究科
Ochanomizu University.
†2 津田塾大学学芸学部情報科学科
Tsuda College.

© 2017 Information Processing Society of Japan

図 1. ペンライトアート[1]Figure1 Light Art[1]885情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2. 関 連 研 究

3-410-65
2017/3/2(2) 点 列 処 理

2.1 人 物 シ ル エ ッ ト を 用 い た 映 像 表 現
人物シルエットを用いた映像表現の例として，人間の影に着目した Graphic Shadow[2]，人間をパーティクルの集合体として表現した Collective Body 3[3]などが存在する．いずれも，人間の動きと連動させたインタラクティブなシステムとなっている．本システムでは Graphic Shadow[2]やCollective Body3[3]のように，あえて人体の外見を詳細に再現しないことで新たな表現を実現する．これに近い有名な事例として，2003 年に製作された apple の iPod のコマーシ
ャル(図 2, [4])では，人間のシルエット，背景および iPodの 3 色のみでシーンを表現している．身体のシルエットに重なる手のシルエットは検出されないため，iPod を用いて手の位置を表現している．本システムでは，人間のシルエットをエッジ表現することで，前述の iPod の CM のように手に持った物体の存在がなくても手などの人体部位を表現できる．また外見を詳細に再現しないことで匿名性が保たれるため，多様な応用の可能性がある．例えば動画投稿サイトでの作品公開，人物や部屋を詳細に見せない状態でのビデオ通話などへの応用が考えられる．

(3) ネ オ ン 風 描 画(4) エ フ ェ ク ト の 付 与詳細については 3.2 節以降で論述する．
なお現時点での著者らの実装では，Microsoft 社の Xbox One
Kinect の深度センサと人物認識ライブラリを利用している．
3.2 深 度 を 用 い た エ ッ ジ 検 出
Kinect に内蔵される深度センサを利用して深度を取得し，それを濃淡でイメージ化することによりエッジを検出する．
Kinect で検出される 13 ビットの深度情報を「0(黒)~255(白)」の 8 ビット値に変換することで，深度データから濃淡画像(図 3(b))を作り出し，それを利用してエッジを検出する．
しかし，この濃淡イメージ画像では身体に重なる手などの部分において身体部分との濃淡差が小さいため，このままでは手部分のエッジが検出されない(図 3 (c))．
そこで，人体と認識された画素における深度の最大値と最小値を「0(黒)~255(白)」で正規化することで，手などの部位を検出しやすくする．D を人物領域内における深度情報，DepthMax,DepthMin を人体領域内における最大の深度情報と最小の深度情報，R を正規化結果とすると，以下の式により求められる．

𝑅=255×𝐷(𝑥, 𝑦)
𝐷𝑒𝑝𝑡ℎ𝑀𝑎𝑥 − 𝐷𝑒𝑝𝑡ℎ𝑀𝑖𝑛

図 4 (a)は，深度を正規化した濃淡画像である．図 4 (b)図 2. Apple「iPod」[4]Figure2 Apple “iPod” [4]2.2 手 描 き 風 描 画 に 関 す る 研 究は濃淡画像(図 4 (a))からエッジを検出した結果画像である．
身体に重なる手部分と身体部分の濃淡に差が出ていることで，手のエッジを検出できた．なおエッジ検出には，OpenCV の ラ イ ブ ラ リ よ り Canny を 利 用 し た ．

Zainab らが提案したシステム[5]では，平面上の腕の動きを表現するために躍度最小モデルを使った Flash らのモデル[6]を利用し，直線の始点と終点から手描き風の直線を生成することで，手描き風鉛筆スケッチ画を自動生成する．
しかし，曲線を含んだ手描き風鉛筆スケッチ画の生成には対応していない．また， Fernando らが提案したシステム[7]では，画像処理とグラフ理論を用いて，入力画像から一筆書き線画を自動生成する手法を提案している．FLASH らの(a) RGB 画像(b)濃淡画像(c)エッジ検出画像

躍度最小モデルから手描き風曲線の生成と，Fernando らの(a) RGB image(b) Gray image(c) Edge image

提案した一筆書き線画を組み合わせて本研究に適用することで，深度画像から認識された人物シルエットに対して手描き風曲線へのデフォルメを実装することが可能だと考え図 3. エッジ検出処理画像
Figure3 Edge extraction image

られる．

3. 提 案 手 法
3.1 概 要本システムは，以下 4 つの処理段階で構成される．
(1) 深 度 を 用 い た エ ッ ジ 検 出© 2017 Information Processing Society of Japan

3.3 点 列 処 理
続いてエッジを構成する点列をCatmull-Romスプライン曲線に変換することで，エッジ形状を平滑化する．ここで，886

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

3-410-65
2017/3/2

前節で紹介したエッジ検出結果は点の集合にすぎない．そこで曲線近似や一筆書き描画，手書きデフォルメに先立ち，まず近接するいくつかの点をまとめて1本の線として扱う

図 6. ネオン管[8]Figure6 Neon tube[8]以上を踏まえて，ネオン風描画手法を開発した．本シス
テムでは，ネオン風描画における外側と内側の線の色を特定ために，HSV 色空間で彩度と明度を調節する．例えば図(a) 濃淡画像(b) エッジ検出画像

7(a)に示す赤のネオン管のようにエッジを描画したい場合，(a) Gray image(b) Edge image

彩度を高く保ったまま明度を低くした色(図 7 (b))を外側の図 4. エッジ検出処理画像

線に採用し，明度を高く保ったまま彩度を低くした色(図 7

Figure4 Edge extraction image(c))を内側の線に採用する．これらを適用した画像を図 8に示す．また，外側の線には描画時にガウシアンフィルタための点列処理を適用する．点列処理では，全てのエッジを適用することで，ネオン管の特徴である光のぼやけを表点に対し端点と予測される順に優先度をつけ，優先度の高現している．

い点から順に処理を適用する．中心点の一つ前の処理済み点と点対称にある点から近い順番に8近傍を探索し，最初に見つけた点を近接点と定義する．図5にこの処理を示す(白：エッジ点, 黒：背景, 赤：点列処理済みのエッジ点)．
図5(a)では，中心点の一つ前の処理済みエッジ点と点対称にある点を基準にして，近い順(7→0→6→1→5→2→4→3)(a) 描画色(b) 外側の線(a) Apply colorに各点を探索する．図5 (b)では，中心点の一つ前の処理済
みエッジ点と点対称にある点がエッジ点であるため，それを近接点と定義する．

(a)(c) 内側の線(b) Outer color (c) Inner color
図 7. 描画色画像

Figure7 Apply color image(b)

図 5. 8 近傍に点が 1 つの場合
Figure5 When there is a point(undefined white point) in 8
図 8. 色適用画像

neighbours

Figure8 After applying the color
3.4 ネ オ ン 風 描 画
ペンライトアートは，光源を利用して描画しているため，描画時にはあらかじめ HSV 色空間から RGB 色空間へと画素値を変換する．変換式には[9]を採用する．

見た目はネオン菅によく似ている．よって，描画手法として，ネオン風描画を適用する．
ネオン管とは，夜の繁華街で見かけることが多いネオンサインに利用される管である(図 6, [8])．特徴は，明度が高
いと人間の目には白く見えるためネオン線は内側の彩度が低く明度が高い，外側の彩度は高く明度が低い．

3.5 エ フ ェ ク ト の 付 与本システムではペンライトアートをより印象的に演出するためのエフェクトを付与することが可能である．現時点での我々の実装では残像効果を搭載している．この実装では，現在のフレーム X の直近 n 枚のフレームを保存し，それぞれのフレームの各 RGB に対し明度を段階ずつ下げ，X© 2017 Information Processing Society of Japan887

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

3-410-65
2017/3/2から n 枚の論理和を取ることで，新たなフレーム X’を生成

ルエットを手描きさせたときには，必ずしも人物形状は厳する(図 9)．X の i フレーム前の画素値を pi とするとき，残密に人物シルエットを再現するとは限らない．むしろ手描像を付与した画素値を 𝑐! 𝑝! とする．ここで ci は，c0=1,きによる癖の混じった人物形状が描かれるはずである．言ci<ci-1 を満たす定数であるとする．

い換えれば，人物形状をある程度忠実に再現する現状の我々の実装が，かえってペンライトアートとして不自然な印象を与える可能性もある．そこで今後の実装上の課題として，手描きのペンライトアートらしさを出すためのアルゴリズムを実装中である．具体的には，生成されたエッジ形状の一筆描き化，およびエッジ形状の手描き形状風へのデフォルメがあげられる．一筆描き化には Fernando らのア

図 9. 残像効果
Figure9 After image effect

ルゴリズム[7]を現在実装中である．また，その他多様なエフェクトの付与を適用していきたい．

参考文献

4. 実 行 結 果[1] Swansea

以上の処理による結果を図 10 に示す．手などの身体に重Bay,“NewContemporaryartforSwansea”,http://www.abayoflife.com/2010/09/new-contemporary-art-for-swa

なる部分のエッジが検出できており，背景と人体エッジのnsea/,(2017.01.21).

2 点のみで人物動作を表現できていることがわかる．また，[2] 蓑毛雄吾, 苗村健. "壁面型 Graphic Shadow の基礎検討." 情報

ネオン描画を付与したことで，ペンライトアートのような処理学会研究報告エンタテインメントコンピューティング色表現が実現できている．また，図 10(b)は，エフェクトと(EC), 2005(59) (2005): 3-8.

して残像効果を付与した場合の実行結果である．残像効果[3] 尼岡利崇, et al. "Collective Body 3 次元形状測定技術を用いたを付与したことにより，直前の動きの軌跡を視認しやすくインタラクティブアート." 情報処理学会研究報告グラフィクなった．この結果，残像効果を付与した画面を見ながらスと CAD (CG), 2008(14) (2008): 145-150.

Kinect の前でジェスチャをしたユーザには，それまでより[4]も大きな動作をする傾向が見られた．

[5] Zainab

Apple, “iPod”, http://www.apple.com/jp/ipod/, (2017.01.21)
AlMeraj,etal.

"Automaticallymimickinguniquehand-drawn pencil lines", Computers & Graphics, 33(4) (2009):
496-508.
[6] Tamar Flash, Neville Hogan, "The coordination of arm movements:
an experimentally confirmed mathematical model", The journal ofNeuroscience, 5(7) (1985): 1688-1703.
[7] Fernando J. Wong, Shigeo Takahashi, "A Graph based Approachto Continuous Line Illustrations with Variable Levels ofDetail", Computer Graphics Forum, 30(7) (2011): 1931-1939.

(a) 実行結果(b) 実行結果(残像効果あり)(a) Result image(b) Result image with after-image effect
図 10. 実行結果画像
Figure10 Result image[8] ArtCraft

Corporation,”

ネオンの製作

http://www.sign-artcraft.com/neon.htm,(2017.01.21).
[9] 物理のかぎしっぽ, “HSV から RGB への変換”,
http://hooktail.org/computer/index.php?RGB%A4%AB%A4%E9H
SV%A4%D8%A4%CE%CA%D1%B4%B9%A4%C8%C9%FC%B
8%B5#o3338a1c, (2017.01.21).

5. ま と め と 今 後 の 課 題
本報告では，人物シルエットをペンライトアート風に表現するインタラクティブシステムを提案した．本システム
では，人物認識によって身体形状のエッジを実時間取得し，ネオン風描画や残像効果を施すことによってペンライトアートのようにエッジを表現する．
ところで，実世界でペンライトを持たせて空中に人物シ© 2017 Information Processing Society of Japan”,

888