実物体と組み合わせる別物体をデザインする手法
五十嵐悠紀∗1鈴木宏正∗2

Designing a real toy to fit other toys
Yuki Igarashi∗1, Hiromasa Suzuki∗2,
Abstract – 実世界に存在する物体 Oa に組み合わせる別の物体 Ob を設計するということは大変な作業である．通常，物体 Oa の長さを計測して寸法をメモし，CAD システムなどを用いて物体 Ob のための設計図をデザインすることが多い．本提案手法はデザインしたい物体 Oa の写真をレファレンスとして用いて，コンピュータ上で写真の上から物体 Ob の設計図をデザインしていく．この写真を撮影する際に，チェッカーボードを一緒に写しておくことで現実世界との長さの対応をシステムが算出する．本手法をいくつかの既存のおもちゃを元に別のおもちゃをデザインすることに適用した．ユーザがデザインした設計図をベクターデータとして出力し，レーザーカッターを用いて実際に物体 Ob の作品を作成した．ユーザに使用してもらい，本手法の評価も行ったので報告する．
Keywords : クラフト，デザイン，ユーザインタフェース

1.

はじめにタへの入力として実世界で木を切断する．
以上のような手順でデザインすることになる．このよ

実世界のものをコンピュータの内部に取り組む研究

うに実世界をコンピュータ内部に取り込み，内部で作は多々行われている．一方，コンピュータ内部のもの業をして，コンピュータ外部に出力する作業は非常にを実世界に作り出すことを支援する手法も研究されて時間がかかり面倒な作業である．なぜなら，すでにあいる[1], [2]．しかし，実世界のものと組み合わせる別る実世界物体 Oa との制約があるため，寸法なども考物体をデザインする際には非常に面倒な作業を繰り返

慮しながら物体 Ob をデザインしなければならないかすことが多い．

らである．

例えば，既存のおもちゃを用いて新たなおもちゃをそこで我々は物体 Oa の写真をコンピュータに入力デザインすることを考える．具体的に，図 1(a) のようし，この写真を参照しながら物体 Oa の形状に対してな積み木のおもちゃから図 1(e) のようなパズルの型

どのような物体 Ob をデザインしたいかをユーザがスあわせをデザインすると仮定する．まず，コンピューケッチ入力を用いてデザインしていく手法を提案する．

タを一切使わない手順については

物体 Oa の写真を撮る際にチェッカーボードと一緒に

1) それぞれのパーツの配置を考える．

撮ることで実寸との対応をシステムが調整することが

2) 木の上にならべ，鉛筆でトレースする．
3) のこぎりなどを用いて切断する．

でき，ユーザは実世界での物体 Oa ，Ob の大きさを気にすることなく，コンピュータ内部で物体 Oa の大きのようになると考えられる．手作業は一見楽であるがさと相対的な大きさだけを気にして物体 Ob を図 1(c)やり直しのきかない作業であり，複数デザインするこのようにデザインしていけばよい．本手法により，素ともできない．ここで，既存のソフトウェアおよびカッ

人でも簡単に実物体と組み合わせる別物体のデザインタープロッタを用いてデザインすると仮定するとができることを確認した．

1) それぞれのパーツの配置を考える．
2) それぞれのパーツのサイズを計測する．
3) 実寸で入力できるベクター形式の既存ソフト
ウェア (e.g., Adobe Illustrator) を用いてマウスなどでデザインをする．

4) 出力したベクター形式のデータをカッタープロッ*1：東京大学大学院工学系研究科/日本学術振興会 特別研究員 DC2*2：東京大学大学院工学系研究科*1：Graduate School of Engineering, The University ofTokyo / JSPS
*2：Graduate School of Engineering, The University ofTokyo

2.

システムの概要

本提案手法を実装したシステムを用いて，実際におもちゃ製作に用いた例を図 1 に示す．ゴールは図 1(a)のような既存の積み木のおもちゃから，図 1(e) のような型あわせパズルをデザインすることである．本手法の流れを図 2 に示した．まず，ユーザはチェッカーボードを印刷して，これをデザインしたい物体 Oa と一緒に写真を撮る (図 2a)．チェッカーボードは 10mmマスとした．
ユーザはシステムに入力された写真を元に，どのよ(b) 入力写真(a) 積み木(c) ユーザが外形をスケッチ入力でデザイン(d) デザインした
外形(e) デザインした新しいおもちゃ(型あわせパズル)

図 1 本手法の概要．実世界の物体 Oa に組み合わせる別の物体 Ob をデザインするための手法．チェッカーボードと物体 Oa を一緒に写真を撮ることで，実寸をシステムが計算する．ユーザがデザインしたデータを実寸に直した DXF データを出力することでカッタープロッタを用いて別の物体 Ob を手軽に作成できる．

うな形状で切断したいかをスケッチインタフェースを用いてデザインする (図 2b)．フリーハンドでのデザインの他，直線，矩形，楕円などのプリミティブを用意した．基本的には通常のベクターソフトウェアの機能が実装されており，Shift キーを押しながらマウスをドラッグすると，直線モードの際には近くの入力点にフィッティングする．また，矩形モード，楕円モー(a) 入力写真

ドの際は Shift キーを押しながらマウスをドラッグすると，それぞれ正方形，円を描くことができる．シス
テムはユーザの入力した形状を図 2(c) のようにベクター形式で出力する．
(b) ユーザが外形をトレース

また，入力写真に対してチェッカーボードのグリッ(e) エッジ抽出によりチェッカーボード認識ドを利用してスケール調整を行う．2 次元画像の特徴点を抽出するアルゴリズムは多々提案されている [3], [4]が，正確に抽出できるアルゴリズムは存在しない．また，OpenCV [5] にはチェッカーボードを検出する関数も用意されているがサポートされておらず，実用に(c) トレースしたアウトライン(f) ユーザがコーナーをマーキング(d) DXFに変換(g) 実寸に調整耐えられるレベルではない．よって，本システムではユーザによる手動入力とした．まず，エッジ抽出フィルタ (図 3) を行いてチェッカーボードのグリッドを検出する．エッジ検出された画像 (図 2e) を用いることでグリッドの角にユーザはマーカーを打ちやすくなる．

(h) レーザーカッターで切断

ユーザは 2 つ以上の連続した角にマーカーをつける必図 2 本手法の流れ．

要がある (図 2f)．ユーザのつけたマーカーを元にシス
テムは実寸との比を計算する (図 2g)．
この実寸との比率を用いてユーザの入力した形状(図 2c) を実寸でベクター形式で出力する．出力にはDXF 形式と SVG 形式をサポートした．出力されたファイルを用いてカッタープロッタ [6] やレーザーカッター [7] などで実際の板を切断することで物体 Oa と組み合わせる別物体 Ob を作成することができる．

3.

アルゴリズムプロトタイプシステムは JavaT M で実装している．
ユーザの入力ストロークはポリラインで表現しており，内部的にはベクター形式で保持している．

3. 1

エッジ抽出

画像のエッジ抽出アルゴリズムを説明する．図 3 のような元画像 I を入力した際に，エッジ検出画像 I ′ のような出力結果を出すために，Sobel オペレータを垂元画像 I-1 0 1-2 0 2-1 0 1

1 0 -1
2 0 -2
1 0 -1-1 -2 -1
0 0 0
1 2 1

1 2 10 0 0-1 -2 -1

INVERSE

INVERSE

INVERSE

INVERSEOR

図 4 積み木のおもちゃのパーツを利用して型あわせのおもちゃをデザインした例．

OROR

エッジ検出画像 I’

図 3 エッジ検出アルゴリズム．

直方向 2 つ，水平方向 2 つの計 4 つ用意してそれぞれコンボリューション (Convolution) を行った．それぞれの結果画像に対し，反転させた画像を得た後，結果を足し合わせていくことでエッジ検出画像 I ′ を得る．
入力画像はグレースケールにしておく．

3. 2 スケールあわせチェッカーボードのエッジが検出できたら，図 2(f)のようにユーザが手動で角をマークしていく．連続した n(n >= 2) 個のマーカーを元に，スケールあわせを行う．
ここで，i 個目のマーカーの座標値を Pi (xi , yi ), 点Pi と点 Pj の距離を d(Pi , Pj ) とすると，
1∑d(Pi , Pi′ )n i=0ndistance =(1)

により，チェッカーボードの四角の 1 辺の平均を求める．ここで，Pi′ はPi′ = min d(Pi , Pk )(2)k∈n,k=i|

図 5 おもちゃのパズルのふたをデザインした例．とする．

5.
4.

結果

評価

本システムを用いた評価を行った．図 4 のおもちゃ

システムは 1.1 GHz Pentium M PC 上でリアルタのデザインに関して，3 人のテストユーザが本手法をイムに稼動する．我々は本システムを利用して実際の利用してデザインしたときと，実寸を入力できるベクおもちゃを 2 つデザインした．1 つ目は図 4 のように積ター形式のソフトウェア (Adobe Illustrator) でデザイ

み木のおもちゃのパーツを用いて型あわせのおもちゃンしたときとの時間を計測して比較した．結果を表 1をデザインした．2 つ目は図 5 のようなおもちゃのパに示す．

ズルに対して，凸部分がちょうどはまるような穴の開提案手法ではまず写真撮影を行い，その後写真をシいたふたをデザインした．実際のおもちゃ製作には本ステムに入力してデザイン，グリッドの角のマーキンシステムで出力される DXF 形式ファイルをそのままグを行った．既存手法では物体 Oa のそれぞれの辺の入力とするレーザーカッター[7]を使用した．

長さ，および物体 Oa1 , Oa2 の距離などを計測して，

User3 (Illustrator)

ればならなかったが，本手法を利用することで初心者

写真撮影
デザイン
マーキング
計測
図面

User3 (提案手法)
User2 (Illustrator)
User2 (提案手法)

でも手軽にデザインすることができた．
しかし，高さのある物体を扱うときには注意が必要

User1 (Illustrator)である．例えば高さ 4cm のものを高さ 40cm 程度か

User1(提案手法)
0200

400

600

800

1000
1200
Time (sec.)

1400

1600

1800

2000

表 1 Adobe Illustrator と本システムとの計測
時間の比較．

ら撮影した写真を用いると，ユーザのデザインした外形は 9 割小さくなってしまう．今回は非常に高い位置から写真を撮ることでこの問題を解決した．複数の画像から立体を復元する研究は多々行われているが，画長さを入力しながら図面をデザインした．ここから先像のキャリブレーションが必要であったりと素人が使は得られたベクター形式のデータを用いてカッタープいこなすには複雑で難しい．単一画像から立体を正確ロッタで出力する部分に関しては同一であるため省略に復元することは困難であるが，実用可能な精度で復した．

元可能であることが本稿により示せすことができた．

表 1 の結果を見ると，図 4 のような単純なプリミ

本研究は実世界の物体をコンピュータを用いて効率ティブ (長方形，正方形，円など) であっても，物体的にデザインする手法を考案し，システムとして実装

Oa の計測時間の間に提案手法ではデザインまで完了した．本提案手法はおもちゃだけでなくさまざまな可していることがわかり，初心者にとってはるかに簡単能性があると考える．例えば，取っ手がとれてしまっにデザイン可能であることが読み取れる．

た物体にちょうど良い大きさの取っ手をデザインする

また，チェッカーボードを利用した実寸との調整に際などにも用いることができる．このアプローチを用関しても評価を行った．3 人のユーザがマウスでマーいてほかの物質のデザインなどにも応用していきたい．

クしたグリッドの角の数に対する実寸とのぶれのグラ

謝辞

フを図 6 にまとめる．このグラフより，およそ 5〜6個の頂点をマークすれば十分実用に耐える寸法を算出できることが読み取れる．このマークにかかる時間は10〜13 秒である．

コードを提供してくださった筑波大学三谷純准教授，ユーザスタディに協力してくださったみなさま，およびレーザーカッターを使用させていただきました JST

ERATO 五十嵐デザインインタフェースプロジェクト

0.8に深く感謝いたします．本研究は日本学術振興会特別0.7
マーカー間の距離本研究で用いた DXF ファイル出力に関するソース

研究員奨励費 (20-10073) の助成を受けたものである．

0.6
0.50.4

参考文献

0.3

User1
User2
User3

0.2
0.1
02345
マーカーの個数 (個)6図 6 ユーザがマウスでマークしたチェッカーボードの角の数と実寸とのぶれ．

6.

まとめと今後の課題

実世界の物体 Oa と組み合わせる別物体 Ob をデザインするための手軽な手法として，写真とチェッカーボードを同時に撮影し，写真の上に相対的にデザインしていく手法を提案した．本システムを用いることで実世界で物体を鉛筆でなぞるように，コンピュータ内部で入力写真の上をストロークでなぞることで実際の大きさに合わせた物体をデザインすることができる．
従来は mm 単位の長さを計測して図面を入力しなけ[1] Mitani, J., and Suzuki, H. Making papercraft toys
from meshes using strip-based approximate unfolding. ACM Transactions on Graphics (Proceedingsof SIGGRAPH 2004), 23(3), 259-263, 2004.
[2] Igarashi, Y., and Igarashi, T. Pillow: Interactive
flattening of a 3D model for plush toy design. Lecture Notes in Computer Science, Springer (Proceedings of SmartGraphics 2008), 5166/2008, 1-7,2008.
[3] Carlson, S. Sketch based image coding of gray level
images. Signal Processing, vol. 15, pp. 57-83, 1988.
[4] Elder,J.H., and Goldberg,R.M. Image Editing inthe Contour Domain. IEEE Trans. on PatternAnalysis and Machine Intelligence, vol. 23, no. 3,pp. 291-296, 2001.
[5] Bradski, G.; Kaehler, A. (2008), Learning
OpenCV: Computer Vision with the OpenCV Library.
[6] GRAPHTEC. CraftROBO.
[7] Commax co., Ltd. Commax Laser System Value
Direct 7050-60W.