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

C692015/3/7「お絵描きダンスステージ」の提案
水野 慎士1,2,a)

内藤 将司1

岡部 紗千子2 磯田 麻梨乃2 伊藤 玲2
杉浦 沙弥2 中谷 有希2 廣瀬 元美2

岡本 芽唯2

近藤 桃子2

概要：本研究ではお絵描きとダンスを用いた新しいインタラクティブデジタルシステムである「お絵描きダンスステージ」を提案する．初めにユーザは紙にペンで自由にキャラクタをお絵描きをしてから，スキャナによってお絵描きをシステムに取り込む．次にユーザは 10 秒間程度のダンスを行いながら，Kinectによってユーザのモーションをシステムに取り込む．お絵描きおよびモーションのデータが揃うと，テー
ブルトップ上の運動視差立体視 CG で表示されたダンスステージにユーザの描いたキャラクタがユーザのモーションでダンスをしながら登場する．そして，ユーザは CG キャラクタとのインタラクションも楽しむことができる．

Proposal of “Sketch Dancing Stage”
Mizuno Shinji1,2,a) Naito Masashi1 Okabe Sachiko2 Isoda Marino2 Ito Rei2 Okamoto Mei2
Kondo Momoko2 Sugiura Saya2 Nakatani Yuki2 Hirose Motomi2

Abstract: In this paper we propose “Sketch Dancing Stage”: a novel interactive digital system which uses
sketching and dancing. First, a user draws a arbitrary character on a paper with color pens, and the systemscans the image data. Then the user dance freely for about 10 seconds, and the system scans the motion datawith a Kinect. When the image data and the motion data were completed, the character drawn by the user
with the user’s dance motion would appear on a CG dance stage displayed on a table top by stereoscopic
3DCG with motion parallax. The user can also interact with the CG character.

1. はじめにと魚が反応するなどのインタラクションも可能である．また「シャドウロボシステム」[2] は，専用のペーパークラフ

近年の CG や画像処理，センサなどの技術の発達に伴っト台紙に自由に色を塗ると，ペーパークラフトを組み立てて，アート，エンターテインメント，教育，広告などで様々てできるロボットが CG 空間に登場するとともに，ユーザなインタラクティブデジタルコンテンツが活用されている．の身体動作で CG ロボットを操作することができる．「不特に子供を含む多くの年代を対象とするコンテンツでは，思議なスケッチブック」[3][4] では，スケッチブックに自由紙とペンによるお絵描きなど現実世界の身近な物を用いたにお絵描きをすることで三次元 CG を対話的に生成するこ

インタフェースや身体動作によって，デジタルデータと対とができる．そして絵に触れたりスケッチブックを揺らし話できるインタラクティブデジタルコンテンツがいくつかたりして三次元 CG を変形させるなど，描いた絵をインタ提案されている．例えば「お絵描き水族館」[1] は，塗りフェースとした CG とのインタラクションを楽しむことも絵にペンなどで自由に色を塗ったあとでスキャンすると，できる．いずれのコンテンツも展示会やワークショップな

CG の水族館で自分の描いた魚が泳ぎ始める．魚に触れるどで非常に多くの子供たちを集めており，身近なものをイ

1

ンタフェースに用いたインタラクティブコンテンツが多く

2a)

愛知工業大学大学院経営情報科学研究科
Graduate School of Business Administration and Computer
Science, Aichi Institute of Technology
愛知工業大学情報科学部
Faculty of Information Science, Aichi Institute of Technologys mizuno@aitech.ac.jp© 2015 Information Processing Society of Japanの人にとって興味深いものであることを示している．
そこで，本研究ではお絵描きとダンスを用いた新しいインタラクティブデジタルシステムである「お絵描きダンス989

プ上に立体視 CG を生成するシステムである [5]．Kinectを用いてユーザの頭部位置を取得することでユーザの視点パーツ画像データ位置を推定して，視点位置に応じた CG オブジェクトのキャラクタ画像生成システム映像を生成してテーブルトップに投影する．これにより，ユーザから見るとテーブルトップ上に CG オブジェクトが存在するような立体感を持つ映像が生成され，ユーザは移モーションデータ

動しながら様々な角度から CG オブジェクトを観察するこ運動視差立体視 CG システム

ダンスモーション取得システム

図 1 「お絵描きダンスステージ」のシステム構成．とができる．
スケッチダンスステージで用いる運動視差立体視 CG シ
ステムでは，キャラクタ画像生成システムから送られたキャラクタの各パーツ画像をベースキャラクタに貼り付けステージ」を提案する．このシステムでは，初めにユーザることで，CG キャラクタを生成する．そして，CG ダンスは紙にペンで自由にキャラクタをお絵描きをする．そしてステージに CG キャラクタを登場させて，ダンスモーショスキャナを用いてお絵描きをシステムに取り込む．次にン生成システムから送られたモーションデータを用いてユーザは 10 秒間程度のダンスを行う．そして，Kinect をCG キャラクタの各パーツを動かすことで，ダンスステー用いてユーザのモーションをシステムに取り込む．お絵描

ジ上で CG キャラクタにユーザと同じ動作をさせる．キャきおよびモーションのデータが揃うと，システムの CG ダラクタパーツ画像データとモーションデータが追加される

ンスステージにユーザの描いたキャラクタがユーザのモーと CG キャラクタは追加生成されるため，ダンスステージションでダンスをしながら登場する．CG ダンスステージ上の CG キャラクタの数は徐々に増えていく．

はテーブルトップ上に運動視差立体視 CG で表示されてお運動視差立体視 CG システムは，テーブルトップ上にかり，ユーザの描いたキャラクタがまるでテーブル上で踊っざしたユーザの手の位置を取得することができる．ユーザているような状態で観察することができる．そして，テーがテーブルトップ上に表示されたダンスステージに登場しブルトップに手を差し伸べると CG キャラクタが飛び跳ねた CG キャラクタに手を差し出すと，CG キャラクタは声るなど，ユーザは CG キャラクタとのインタラクションもを上げながらジャンプする．

楽しむことができる．
本稿では，提案システムの概要と実現方法，イベントでの展示実験と考察などについて述べる．

2. 提案システムの概要「お絵描きダンスステージ」は，キャラクタ画像生成システム，ダンスモーション取得用システム，運動視差立体視 CG システムなどのサブシステムから構成される．シス
テム構成を図 1 に示す．

以上のように，スケッチダンスステージは自分のお絵描きから生成された CG キャラクタを自分の振り付けで踊らせることができるシステムである．そして，CG キャラクタとのインタラクションも楽しむことができる．

3. 提案システムの実現方法
3.1 CG キャラクタの生成
キャラクタ画像生成システムでは，ユーザが描いたキャラクタ画像をパーツ画像に分解する．そしてパーツ画像を初めにユーザは紙にペンやクレヨンでキャラクタを描

運動視差立体視 CG システムに送ることで CG キャラクタ

く．キャラクタの形状は頭，胴体，手足がある必要があるが生成される．図 2 に CG キャラクタ生成の様子を示す．

が，それ以外には特に制限はない．キャラクタの描画が終初めにキャラクタ画像生成システムはキャラクタのス了したら，キャラクタの絵をスキャナで取り込む．そして，キャン画像の輪郭に基づいて画像を領域に分割する．そしキャラクタ画像生成システムで取り込んだキャラクタ画像て，最も面積の大きい外側領域をキャラクタ領域とする．

を頭，胴体，手足の各パーツに分割する．分割は自動で大キャラクタ領域内部に穴が存在する場合には，穴を削除しまかに行った後で手動の調整を行う．そして各パーツの画てキャラクタ領域に含める．

像は運動視差立体視 CG システムに送られる．

次にシステムはキャラクタ領域を包含する長方形，およ次にユーザは CG キャラクタの振り付けのために 10 秒

び包含長方形とキャラクタ領域が接する位置に基づいて，程度のダンスを行う．ダンスモーション生成システムはキャラクタの頭部最上部，左右の手足の先の位置を推定しKinect を用いてユーザの関節点の三次元座標を取得する．て，自動的にキャラクタを大まかに頭，胴体，左上腕，左そして各関節点の座標に基づくモーションデータが運動視前腕，右上腕，右前腕，左大腿，左下腿，右大腿，右下腿差立体視 CG システムに送られる．の 10 個のパーツに分割する．各パーツの形状は長方形で，運動視差立体視 CG システムは，視点の移動に応じて見パーツ間には関節点が設定されている．そして関節点同士え方が変化する運動視差を再現することで，テーブルトッを結ぶパーツの中心線はボーンとなっている．ユーザは手© 2015 Information Processing Society of Japan990

ユーザ

left

(a) 手描きキャラクタ

ユーザ

ユーザ

center(b) キャラクタ領域

図 3

right

運動視差の仕組み．

成されているため，現状はモーションデータの各関節の角度を二次元平面内の角度に変換して，CG キャラクタの各(c) パーツ分割(d) 素材キャラクタ

関節には一次の角度を与える．従って，CG キャラクタのモーションは二次元平面内に構成される．

3.3 運動視差立体視 CG システム
立体視は人間の三次元知覚の仕組みを利用して，映像中の物体の立体感を感じさせる手法である．一般的な立体視コンテンツでは両眼視差を用いて三次元知覚させるものが多い．両眼視差は両眼の位置の違いから左右の目に映る映(e) CG キャラクタ
図 2

CG キャラクタ生成の様子．

像が微妙に異なることであり，人間の脳はその画像の違いに基づいて奥行き感を認識する．
一方，人間は運動視差によっても三次元知覚を行う．運動で各パーツのコントロール用ハンドルや関節点を移動す

動視差は立体物を観察するときに観察者または立体物が移ることで，各パーツの位置や形状を調整することができる．

動することで生じる見え方の変化である．図 3 に示すようパーツが確定したら，システムは各パーツ内に含まれるに，運動視差ではユーザの移動に伴って今まで見えなかっキャラクタ画像を切り取ってパーツ画像を生成する．このた部分が見えるようになったり，近くの物体が遠くの物体とき，パーツ画像にはキャラクタ領域外部の余白部分が含に比べて見え方が大きく変化する．Rogers らの研究では，まれるが，キャラクタ領域も同時に切り取ってマスクとし運動視差のみで三次元形状と奥行きに関する十分な情報がて利用することで，パーツ画像に含まれるキャラクタ外部得られることを示している [6]．

領域を透明化することができる．

運動視差立体視 CG システムは，運動視差を再現するこ生成されたキャラクタのパーツ画像は運動視差立体視とで三次元 CG の立体視を行うシステムである．図 4 にシCG システムに送られる．運動視差立体視 CG システムにステムの外観を示す．システムはテーブルトップスクリー

は CG キャラクタのベースのために 10 個の長方形パーツンを持ち，スクリーン上部には Kinect が設置されている．

で構成された素材キャラクタが用意されている．そして，ユーザがスクリーンの周囲に立つと，システムは Kinect

各パーツ画像に合わせて対応する素材キャラクタの各パーで得られた深度画像から最も深度の小さい領域に基づいてツの大きさを自動調整してから，パーツ画像を貼り付ける．

ユーザの頭部三次元座標を計算して，ユーザ視点の三次元これにより，CG キャラクタが生成される．

座標を推定する．システムでは CG 生成のための仮想空間の座標と実空間の座標を一致させており，CG 生成視点と3.2 モーションデータ生成

CG 投影面がユーザ視点とテーブルトップスクリーンに対ダンスモーション生成システムでは Kinect を用いてモー応している．このとき CG 投影面上に仮想オブジェクトをションデータの取得を行う．ユーザの 15 ヶ所の関節点の配置して CG を生成すると，ユーザからはテーブルトップ三次元座標を 10 秒間取得して，得られたモーションデー

スクリーン上に CG オブジェクトが存在するように観察す

タを運動視差立体視 CG システムに送る．

ることができる．そしてユーザの移動に応じてユーザ視点

運動視差立体視 CG システムでは，得られたモーションを追跡して CG を更新することで，CG オブジェクトに対データに基づいて CG キャラクタの各パーツ間の関節角する運動視差が再現されて，ユーザはテーブルトップ上に度を決定する．CG キャラクタは二次元パーツによって生CG オブジェクトが立体的に存在するような感覚を得るこ© 2015 Information Processing Society of Japan

991

(a) 手描きキャラクタ

図 4

運動視差立体視 CG システムの外観．とができる．
お絵描きダンスステージでは生成された CG キャラクタを運動視差立体視 CG システムで表示する．CG キャラク(b) 生成された CG キャラクタ

タとそのモーションが追加されるたびに，次々とテーブルトップスクリーン上に CG キャラクタを登場させる．そのため，ユーザからは多くの CG キャラクタがテーブルトップ上でダンスしているように感じることができる．
運動視差立体視 CG システムでは，Kinect で得られた深度画像に基づいてスクリーン上に差し出したユーザの手の三次元座標を取得することも可能である．そこで，お絵描きダンスステージではユーザが生成された CG キャラクタに手を差し出すと，手の三次元座標と各 CG キャラクタと(c) テーブルトップ上の CGの距離を求めて，距離が近いキャラクタは声を出しながらジャンプさせる．これにより，ユーザは CG キャラクタのダンス鑑賞に加えて，CG キャラクタとのインタラクションを楽しむこともできる．

4. イベントでの展示実験
提案したお絵描きダンスステージをシステムに実装して実験を行った．キャラクタ画像生成システムは Mac-(d) CG とのインタラクション

BookAir(2GHz, Core i7) 上に OpenCV を用いて実装した．キャラクタは A4 サイズの紙に描き，200dpi でカラースキャンする．ダンスモーション生成システムは Mac-BookPro(2.7GHz, Core i7) 上に OpenNI を用いて実装した．また，運動視差立体視 CG システムは MacPro(2.7GHz,Xeon E5) に OpenGL，OpenCV，OpenNI，OpenAL を用いて実装した．
そして，実装したシステムを用いて，2014 年 11 月 1 日と 2 日に愛・地球博記念公園で開催された「ぽぷかるパー(e) システム体験中のユーザ
図 5 「お絵描きダンスステージ」の展示実験の様子．

ティ」において展示実験を行った．実験では展示スペースに約 200 名の来場者があり，そのうち 47 名が実際にお絵描カルチャー愛好者を対象としたもので，お絵描きにもダきとダンスによるシステムの体験を行った．参加者の年齢ンスにも興味がある人が多く参加した．そのため，ユーザは確認できる範囲では幼稚園児から 50 代まで様々であっによるキャラクタは非常にしっかりと描かれていた（図たが，イベント内での実験のため細かい年齢調査は行って5(a)）．ただし，個性的なキャラクタが多いため，自動パーいない．図 5 に展示実験の様子を示す．

ツ分割が正しく機能するキャラクタは少なく，殆どの場合このイベントはマンガやアニメ，コスプレなどのポップ© 2015 Information Processing Society of Japan

で手動でパーツ分割を修正することで CG キャラクタが生992成された（図 5(b)）．そして，CG キャラクタが運動視差立体視 CG システムによって，実際にテーブル上に存在してダンスしているように観察することができた（図 5(c)）．
そして，手を差し出すと CG キャラクタが反応してジャンプした（図 5(d)）．
システムを体験したほとんどの人は自分のキャラクタが自分の振り付けでダンスすることを楽しんでいる様子であった（図 5(e)）．イベント 2 日間とも展示スペースに来場してお絵描きダンスステージを楽しんだ女子中学生もいた．
また，自分ではキャラクタを描かなかった人でも，運動視差立体視 CG システムで表示された CG キャラクタを立体的に観察することや，手を差し出してインタラクションをすることを楽しんでいた．ある幼稚園児は CG キャラクタが立体的に表示されることに非常に興味を持ち，CG キャラクタとのインタラクションを 30 分以上楽しんでいた．

5. まとめ本研究では，お絵描きとダンスをベースした新しいインタラクティブデジタルシステムである「お絵描きダンスステージ」を提案して，システムの実装を行った．そしてイベントでの展示実験では様々な年代の体験者がシステムを楽しむ様子を確認することができた．
今回の展示実験はポップカルチャー愛好者という特定の趣味の人々を対象としたものであったが，今後は学校やワークショップなどでの実験を通じて，より多くの人々が楽しめるコンテンツとして完成させるつもりである．シス
テムの機能向上としては，描かれたキャラクタの形状分析をより詳細に行うことにより，より正確なパーツ自動分割を行う必要がある．
謝辞

本研究の一部は科研費（26330420）による．

参考文献
[1]
[2]

[3]

[4]

[5]

[6]

チームラボ: お絵描き水族館, 入手先 ⟨http://www.teamlab.net/all/products/aquarium.html⟩ (2014.12.11).
鈴木浩, 佐藤尚, 速水治夫: 子どもを意欲的にペーパーク
ラフト工作へと導く 3 次元ゲームシステムの開発, 情報処
理学会研究報告，Vol. 2014-DCC-6, No. 18 (2014).
近藤菜々子, 水野慎士: スケッチブックでのお絵描きを三次元 CG で拡張する映像ツールの提案とその実現方法, 情報処理学会論文誌・デジタルコンテンツ, Vol. 1, No, 1,pp. 1–9 (2013).
N. Kondo, S. Mizuno: Enhancement of “AmazingSketchbook” in 3DCG Generation and Interaction, Proc.
of NICOGRAPH International 2014, pp. 89–92 (2014).
S. Mizuno, M. Tsukada, Y. Uehara: A Stereoscopic CGSystem with Motion Parallax and its Digital Contentsfor Science Museums, Proc. of SITIS 2013, pp. 378–384(2013).
Rogers, B. J., Graham, M.: Motion Parallax as an Independent Cue for Depth Perception, Perception, No. 8,
pp. 125–134 (1979).

© 2015 Information Processing Society of Japan993