当たり判定付きアンカーポイントを用いた隠し絵デザイン
久保 晃一†

宮下芳明†

Hidden Picture Design by Anchor Points with Collision Detection
KOHICHI KUBO†

1.

HOMEI MIYASHITA†

創作することは難しいと考えられる．Xu らのはじめに

Calligraphic packing は，図形をいくつかの領域に分割

人間の知覚的特性を利用した騙し絵の中でも，１つし各領域を「文字」で表現した一種の隠し絵であり，の絵の中によく注意して見なければわからないようにそれに特化した制作システムが提案されている 4）．本工夫して別の絵を描き込んだ絵を「隠し絵」とよぶ．

稿の第二筆者らは，騙し絵の中でも「不可能立体」の近年，騙し絵展が開催されたり 1），隠し絵を題材とし描画を可能とする 3DCG レンダリング手法を提案したゲーム2）が販売されるなど，身近なところに隠し絵を見ることが出来るようになった．隠し絵は，隠された絵を探して遊ぶといったエンタテインメント性をており 5）6），初心者でも簡単に不可能立体の CG を制作できるツールとして公開するに至っている 7）．
提案システムの内部アルゴリズムに関連した方法論

含み，国籍や老若男女を問わず誰でも楽しむことが出としては， 2 次元図形に骨組み等をあらかじめ仕込来る．人目をひくという点では広告デザインとしてのむことなく，2 次元図形をつかんで自由に変形するこ

応用価値も高い．との出来る五十嵐らの手法がある 8）．また，島田らはしかし，一般の人々にとって隠し絵は決して「描い3DCG のテクスチャー・マッピング制作を用意するたて」楽しむものではなく，見て楽しむだけの存在となめに格子点を用いた画像変形を行うシステムを提案しってしまっているのが現状である．隠し絵を実際に描ている 9）．

くためには，人間の知覚的特性に関する知識やそれを2.

システム概要には決められた描き方がないため，描きたいという潜2.1

システムデザイン

在的需要が多くてもそれを描くツールや手法の提案が人間は，世界をありのままに見ているわけではなく，実現するための技術が必要であり，何よりも，隠し絵追いつかずに困難なものにしているのである．

経験や文脈に基づいて，対象が何であるかの意味的解

そこで本稿では，誰もが簡単に隠し絵を描くことの釈を行い，あいまいな部分についてはその解釈に矛盾できる隠し絵作成システムを提案する．本システムでしないように認知している．例えば文字や絵など，人は，ユーザが描いた複数の図形を「変形させてくっつ間は何かを対象として認識しようとするとき，その対ける」ことにより輪郭線を統合し，人間の知覚的特性象を背景から抜き出して区別しようとする特性を持つ．

である図地反転が起きる状況を生み出す隠し絵を作成

このとき見る対象を「図」とよび，背景を「地」とする．この変形・吸着による輪郭線統合は，当たり判よぶ．この境界がどちら側の輪郭となるかがあいまい定をもったアンカーポイントによるベクタードローツ

な場合，「図」の領域と「地」の領域が反転することールとして実現している．

があり，これを図地反転とよぶ．ルビンの杯がこの一隠し絵を題材とした Yoon らの研究では，背景とな例である．ルビンの杯は，中心部の色を「図」としてる線画からデータベースに登録された物体の形と類似

見ると盃が見え，周辺部の色を「図」として見ると向した箇所を計算し，これらの物体に合わせて変形させかいあう２人の顔が見える隠し絵であるが，このようることによって隠し絵を生成するシステム

3）

がある

が，ユーザの自由度が少なく，ユーザが意図した絵をに 1 本の線が 2 つ以上の物体の輪郭を表すようにすることが図地反転を起こさせる隠し絵を作成するための一条件である．杉原もだまし絵の描き方として隠し† 明治大学理工学部情報科学科
Department of Computer Science, Meiji University

たい図形の輪郭が他の図形を遮ってはならないと指摘

情報処理学会 インタラクション 2010

している 10）．
したがって隠し絵を制作するためにはあらかじめ 2

2.4

オブジェクトの描画

つ以上の物体を意識して輪郭の形や物体同士の位置関

ツールバーの直線ボタンおよび自由曲線ボタンを選係と構成を考えなくてはならないが，この複数の物体択すると線を描画することが出来る．自由曲線では線の形を考慮しながら描くプロセスが困難である．の始点と終点の距離が短い場合，始点と終点をつない

そこで本稿では，ユーザが描画した図形を図形同士で図形を閉じることが出来るようにした．このとき，の輪郭線が統合されるように変形処理を行う．具体的図形が閉じられなければオブジェクトの種類をオープには，同一レイヤー上にある図形をドラッグ処理で衝

ンパス，閉じられたときオブジェクトの種類をクロー突させたとき，その図形の印象を壊さぬように変形すズドパスとして扱い，オブジェクトの種類がクローズるようなペイントソフトを開発した．

ドパスならば，内部を指定した色で塗りつぶす．ユー

これにより，ユーザが複数の物体の形状を考慮する

ザが線を描画すると，等間隔ごとにアンカーポイントことなく図地反転が起きる状況を生み出しやすい絵をを設定し，それらの座標を配列に保存し線でつなぐこ容易に描画できるようになると考えた．とによって図形を描画する．オブジェクトの色を変更したい場合はパレットの中から色を選択して，左クリ

2.2

画面構成

ックで線の色を変更，右クリックで図形の塗りつぶし

本システムはツールバー，キャンバス，パレットのが出来る．

3 部分で構成されている（図 1）．ユーザはツールバー

2.5から機能を選択し，キャンバスで作業を行う．また，アンカーポイントを四角枠で視覚化したものを図 2

パレットでは色の変更を行うことが出来る．

アンカーポイントの編集に示す．パス編集モードではアンカーポイントをドラッグすることで線を変形させることが出来る．アンカーポイントをドラッグすると選択しているアンカーポ
イントの座標を更新し，その周りのアンカーポイントも移動したアンカーポイントに合わせて間を補完するようにその座標を更新する（図 3）．
アンカーポイントを右クリックすれば，周りのアンカーポイントが移動しても動かないように固定化出来る．これにより，物体の形が崩れてしまわないようあらかじめ設定を行うことができる．図 2 の青い部分が固定化したアンカーポイントである．この固定化した部分は図形の特徴を表す特徴点である可能性が高いの

図1 スクリーンショット

2.3

オブジェクトで，変形処理時に他のアンカーポイントよりも優先的に処理を行う．

隠し絵を作成するためには，隠したい図形とその輪郭を構成する図形が必要となる．しかし，いきなり隠したい図形の輪郭を別の図形によって構成しようとしても難しい．これは，輪郭を構成する図形の形状が隠したい図形の形状によって影響を受けるためである．
そこで本システムでは，まずユーザが自由に図形を描き，そのあとで隠したい図形に合わせて他の図形を変形させていく手法をとることにした．
ユーザが描いた図形は一つ一つをオブジェクトという単位で管理する．これらオブジェクトは線の座標や色，オブジェクトの種類，図形内部の色，図形の特徴
点の座標，オブジェクトを固定するか可動にするかといった情報を持つ．

図2 アンカーポイントの設定（青いものは固定化したアンカーポイント）

当たり判定付きアンカーポイントを用いた隠し絵デザイン

わせて吸着・変形させることで実現する．
3.2

オブジェクトの移動

オブジェクトの移動には二つの種類があり，まず「通常移動」では，オブジェクトがそれぞれ独立しており自由に配置することが出来る．通常移動によってオブジェクト同士が重なった場合，上に配置したオブジェクトが手前に表示される．
図3 アンカーポイントの編集もう一方は，移動過程でオブジェクト同士が衝突した際，可変オブジェクトの形状がへこむように変形する「干渉移動」である．干渉移動では，キャンバス上2.6

オブジェクトの配置・修正

ユーザは，作成したオブジェクトをキャンバス上に配置していくことで隠し絵の構図を決定していく．に配置されている各オブジェクトのアンカーポイント間の距離を計算し，アンカーポイント同士の距離が近いまたは衝突した場合，アンカーポイントを吸着させユーザは各オブジェクトに対して拡大や縮小，回転ることによって輪郭線の統合を行う．干渉移動時のアといった操作やオブジェクトに修正，書き足しを行う

ンカーポイントの当たり判定の結果を図 5 に示す．赤ことが出来る（図 4）．これにより，オブジェクト間く表示されているアンカーポイントが他のオブジェクのバランスを取るとともに，隠したい図形に合わせてトのアンカーポイントと衝突したことを表している．

オブジェクトの形状をおおまかに変形させ，輪郭を統アンカーポイント同士が衝突した場合，可変オブジ合したときに違和感がないように調整することができェクトのアンカーポイントを固定オブジェクトのアンる．

カーポイントに吸着させる．吸着したアンカーポイン
トの周りのアンカーポイントもその移動に合わせて補完するように移動させる．アンカーポイントの吸着および補完の様子を図 6 に表す．

図4 オブジェクトの配置

3.

オブジェクト変形処理

3.1

可変オブジェクトと固定オブジェクト

提案システムでは，変形を行うにあたって多少図形が崩れたとしても認識出来る図形を「可変オブジェク
ト」，出来るだけ形を崩したくない図形を「固定オブ図5 干渉移動時の当たり判定ジェクト」として設定可能である．たとえば，木の幹や葉っぱ，岩，壺などは様々な形状があり，絵の中で物体として認識することが出来るので，これらの物体は可変オブジェクトとして扱う．逆に，人の顔の輪郭などの，形状が崩れてしまうとそれが何だか分からなくなってしまう図形は固定オブジェクトとして扱う．
図形を「隠す」からには，その図形の色や詳細なテクスチャを捨象して，逆に図形の形状を重要な要素ととらえて隠すことになる．そのため，オブジェクトの輪郭統合は可変オブジェクトを固定オブジェクトに合

図6 吸着と補完変形

情報処理学会 インタラクション 2010

3.3

輪郭線の統合隠したい図形の輪郭をその周りに配置されている図形である程度表現できたら，ユーザは輪郭線の統合を行う．輪郭統合ボタンを押すと各オブジェクトのアンカーポイント間の距離を計算し，アンカーポイント同士の距離が近い場合には，可変オブジェクトのアンカーポイントを固定オブジェクトのアンカーポイントに吸着させる．
3.4

吸着・変形アルゴリズム

アンカーポイントを吸着・変形させる際，出来るだけ図形の形状が崩れないよう，ユーザが描画したオブジェクトの座標データは表示用と演算用に保存されている．オブジェクトを変形させるときは演算用のデータを用いて演算を行い，その結果を表示用のデータに上書きすることで，ユーザに変形した結果を提示している．変形前の演算用オブジェクトデータを用いて計算することで，オブジェクトに変形処理を行ったとき，変形前のユーザが描画したオブジェクトの形状を出来る限り再現することが可能になる．
また，オブジェクトの特徴であると考えられる固定化アンカーポイントの計算，およびその変形処理は優先して実行し，図形の形状が崩れにくくなるようにしている．

4.

作例

このシステムによる作例を示す．図 7 は木のオブジ
ェクトと人型のオブジェクトおよび背景画像を用いて作成した隠し絵である．左側の木の間に人型のオブジ
ェクトが隠してある．本システムでは，木のオブジェクトを可変オブジェクト，人型のオブジェクトを固定オブジェクトとして作成している．木のオブジェクトのアンカーポイントを人型のオブジェクトのアンカーポイントに吸着・変形させることによって輪郭線を統合し，図地反転を起こさせる隠し絵を作成した．

図7 作例（林における人影の隠し絵表現）

5.

おわりに

本稿では，当たり判定のついたアンカーポイントを用いることによって，ユーザが同一レイヤーに描画した図形を吸着，変形させ，隠し絵を作成しやすくするシステムを提案した．これにより，ユーザはオブジェクトの輪郭や構成といった知覚的特性を考慮することなく隠し絵の作成を行うことができる．また，隠し絵を気軽に描いて楽しめるようにすることによって，製作者が意図した物体やメッセージが隠されている絵が多く見られるようになることを期待している．
今後さらに変形を自然に行えるように，オブジェクト全体を可変，固定として扱うのではなく，オブジェクトの輪郭の部分ごとに可変，固定を割り当てることが出来るようにする機能を実装する予定である．また，図形の輪郭だけでなく図形の内側まで変形の影響を与えられるようにしたいと考えている．

参考文献

1) Bunkamura，東京新聞：奇想の王国 だまし絵展．
http://www.bunkamura.co.jp/museum/lineup/09_dam
damas/topics.html
2) fonfun．隠し絵ミステリー リクとヨハン～消えた２枚の絵～，2009．
3) Jong-Chul Yoon, In-Kwon Lee, Henry Kang. A
Hidden-picture Puzzles Generator, Computer
Graphics Forum, Volume 27, Number 7, October
2008 , pp. 1869-1877.
4) Jie Xu, Craig S. Kaplan. Calligraphic Packing. In
Graphics Interface 2007, pp.43-50, 2007.
5) 篠原祐樹, 宮下芳明. 不可能立体のレイトレーシ
ング, インタラクション 2009 論文集, pp143-144,2009.
6) 篠原祐樹, 宮下芳明. 不可能立体の写実的表現手法の提案, 情報処理学会研究報告 2009-HCI-132,Vol.2009, No.19, pp.95-102, 2009.
7) 篠原祐樹. 不可能立体の写実的表現手法の提案,
未踏 IT 人材発掘・育成事業 2008 年度下期 未踏ユース, 2009.
8) Igarashi, T., Moscovich, T., Hughes, J.F. As-RigidAs-Possible Shape Manipulation. ACM Transactions
on Computer Graphics, Vol.24, No.3, ACM
SIGGRAPH 2005.
9) 島田麻実，荒木修. テクスチャー・マッピング
支援の為の格子型画像変形ソフト, インタラク
ション 2003 論文集, pp.83-84, 2003.
10) 杉原厚吉．だまし絵の描き方入門，誠文堂新光社，pp.100-111，2008．