WISS2010

インタラクティブなラインストーンデザイン
An Interactive Design System for Rhinestones

五十嵐 悠紀∗概要. 初心者がラインストーンデザインを楽しむためのインタラクティブなドローソフトを提案する．ラ
インストーンデコレーションは同じ大きさのストーンを並べていくことで図柄をデザインするものであるが，初心者がデザインするのは難しく，通常は専門家がデザインした書籍やシートなどを利用して楽しむことが多い．本提案システムは，ユーザが通常のドローソフトのように自由に図柄をデザインしていくとシステムがユーザの描いた線を元にラインストーンの制約に基づいてインタラクティブにラインストーンを並べたデザインを提示する．また，ラインストーンを実際に制作する際にはカッタープリンタを用いてラインストーンの制作支援型版を出力することを提案する．通常ラインストーンデザインをする際には，このような制作支援型版は使われていないが，この制作支援型版を利用することで穴に合わせてラインストーンをのせていくだけで簡単に実際のラインストーンデコレーションを施すことができることがわかった．

1

はじめに

ラインストーンとは鉛ガラス製の模造ダイヤモンドであり，ドレスの装飾やネイルアートなどに用いられる．ラインストーンは特に若者の間でブームになってきている。彼らは携帯電話，鏡，洋服やバッグなどの既製品にラインストーンを用いて独自のデコレーションを施して楽しんでいる．しかし自由にデザインするのは難しく，専門家がデザインしたシール状になったラインストーンを購入したり，店頭でプロがデザインしてくれるサービスなどを利用したりして楽しんでいることがほとんどである．実際にラインストーンでデザインをするときには，ラインストーンの幅や描きたい絵の大きさ，線の長さとのバランスなどを考慮しながらラインストーンを並べていく，もしくは敷き詰めていく必要があり，試行錯誤しながらデザインを進めていく．図 1 のように下絵を用意してその上にラインストーンを並べていき，最後に下絵を取る，というようなことも行われているが，下絵を取った時にきれいな絵になっていることはあまりなく，調整が必要になってくる．この図 1 の例も口と手元の特徴が表せておらず，線画においての特徴的な点にうまくラインストーンを配置していく必要がある．
そこで我々はラインストーンデザインのためのドローエディタを提案する．ユーザは自由にストロークを描いていくと，システムはインタラクティブにユーザの描いたストローク上に制約を保ちながらラインストーンを並べていくことでラインストーンをデコレーションしていく (図 2)．ラインストーン同士が重ならないようにする計算などはシステムが行
Copyright is held by the author(s).
∗Yuki Igarashi, 日本学術振興会 (筑波大学)

図 1. 下絵を用意してその上にラインストーンを並べた
例．下絵を取った時にきれいな絵になっていることはあまりなく，調整が必要である．

い，ユーザはそのような制約を気にすることなく図柄をデザインしていくことができる．オフラインの手法はモザイク画 [1] などで研究されているが，我々の手法はインタラクティブにユーザに提示するものである．
また，ラインストーンを実際に制作する際にはカッタープリンタ [2] を用いてラインストーンの制作支援型版を出力することを提案する．通常このような型版は使われていないが，この型版を利用することで穴にあわせてラインストーンをのせていくだ
けで簡単に実際のラインストーンデザインを施すことができることがわかった．

2ユーザインタフェース

本章ではラインストーンのデザイン過程での支援とデザイン後の実際の制作過程での支援にわけて述
べる．

2.1

ラインストーンデザイン支援

図 3 にプロトタイプシステムを示す．ユーザが通常のドローエディタのようにキャンバス上にストWISS 2010

Pink 54
Red 15White 4
Production Time:37min(a) デザイン(b) デザイン終了(c) アウトライン抽出(d) カッタープリンタで出力(e) 実際のラインストーン

図 2. システムの概要．ユーザは通常のドローソフトのように図柄をデザインする．システムは自動的にユーザのストロークに合わせてラインストーンをデザインしていく．カッタープリンタを用いて図柄を印刷・裁断することで，穴に合わせてラインストーンをのせていくことができ，初心者でも簡単にオリジナルなデザインを楽しむことができる．

図 5. 写真を入力してトレースすることでデザインしていくこともできる．

領域内部をクリック

格子状モード最密充填モード

図 3. システムのスクリーンショット．
図 6. 敷き詰め機能でのラインストーンの敷き詰め．

図 4. つまんでひっぱるとインタラクティブにラインストーンの個数や位置が変化する．

ロークを描くと，システムはインタラクティブにラインストーンを重なりがないように並べていく．ス
トロークはポリラインで表現されているため，移動，消去，色の変更など基本的な編集は簡単に行うことができる．図 4 のようにユーザは描いたストロークをつまんでひっぱり編集することもできる [3]．ス
トロークをつまんでひっぱっている間はストロークの長さに応じてラインストーンの数や並ぶ位置などもインタラクティブに変化する．
ユーザはシステムに写真や絵を入力することもできる (図 5)．入力した絵を参照しながらデザインすることで初心者でも簡単にデザインしていくことが可能である．
図 6 のように敷き詰め機能を使うことで，すでに描かれたラインストーンで囲まれた内部にラインストーンを敷き詰めることができる．デザインによって「格子状モード」(図 6(b)) と「最密充填モード」(図 6(c)) を用意してあり，切り替えることができる．
格子状にする利点は，すでに格子状にラインストーンが並んだ接着剤付きのシートを使うことができ，広範囲にわたりすばやくきれいに敷き詰めることが可能になる．そのため，既存のラインストーンデザインは格子状にしているデザインが多い．しかし，
1 つ 1 つのラインストーンを手作業で貼る場合には「最密充填モード」を使うことによって領域内を均等に敷き詰めることができ，見栄えもより良くなる．
実際の専門家がデザインする際にもこの 2 種類の敷き詰め方を使い分けていることから，本システムでも 2 種類のモードを用意しユーザが切り替えられるようにした．
1 つのラインストーンに対して変更を行いたいと

An Interactive Design System for Rhinestones

図 8. 制作支援型版を用いることで，簡単にデコレーションしていくことができる．
図 7. 指定のラインストーンの上で右クリックすることでポップアップが開き，色を変更したり消去したり，1 つだけ移動させたりなどの操作が可能．

きにはターゲットとなるラインストーンの上で右クリックをすることでポップアップが開く (図 7)．希望の機能を選択することで色を変更したり，削除したり，1 つのラインストーンだけを移動させたりすることができる．1 つずつのラインストーンの半径を調整することも可能である．

2.2

制作過程支援デザインが複雑になればなるほど制作時間は大幅に増えていく．本システムではおおよその制作時間の提示をユーザがデザインしている段階からインタラクティブに提示する．これによりユーザが 30 分程度で作りたいデザインなのか，3 時間かけて作りたい複雑なデザインなのかを考えながらデザインしてくことができる．制作に必要なラインストーンの色ごとの個数も計算して提示することでラインストーンを購入する際も楽になる．
また，デザインした図柄を実際にラインストーンデコレーションしていくのは難しい．通常，図柄をトレースして，デザインをしたい物体 (携帯など)にデザインを書き写し，そのうえに丁寧にラインストーンを載せていく．我々はユーザがデザインした図柄をベクター形式で出力し，カッタープロッタを用いて，実際のラインストーンデコレーションのための制作支援型版を作成することで制作支援を行うことを提案する (図 8)．このような手法は実際のラインストーンデコレーションでは使われていないが，この制作支援型版さえあれば初心者でも簡単にデコレーションできることがわかった．
ユーザはデコレーションしたい部分に出力した制作支援プレートをのせ，動かないようにテープなどで固定し，その穴に沿って接着剤を付けたラインストーンをのせていけば良い．この過程では PC は必要ないため，より手軽にラインストーンデコレーションを楽しむことができる．デザインによっては数時間かかることもあるがこの作業を趣味として楽しむ人も多い．

3アルゴリズム

システムは JavaTM で実装した．本システムは
ノート PC(Intel Core2 Duo CPU 1.40GHz，RAM3.00GB) でリアルタイムに稼働する．本章ではアルゴリズムの詳細を述べる．

3.1

ストロークからのラインストーンへの変換

内部の表現はベクター形式で保持している．ラ
インストーンの半径を r とする．本システムでは
r = 5.0(mm) と設定したが，使いたいラインストーンの大きさによってユーザが設定を変更することができる．また，ラインストーンとラインストーンの幅を m とする．本システムでは m = 1.0(mm) とした．
ユーザがストロークを描くと，リアルタイムでラインストーンを置いておく (図 9)．マウスイベントが発生した始点 P0 にラインストーンを置いたあと，次のマウスイベントの入力点 P1 にラインストーンが置けるのであれば前回置いたラインストーンから今までの位置に等間隔にラインストーンを置いていく (図 9 a, b)．
描いたストロークは等間隔 (2 · r + m ごと) にサンプリングする．始点は動かさずに等間隔に並べていく．すでに n − 1 個のラインストーン S ={s0 , s1 , · · · , sn−1 } がデザインされており，新しくラインストーン sn を場所 v(x, y) に置きたいとき，この位置に置けるかどうかの判定は，以下のように求める．ラインストーン si の半径を ri ，ラインストーン同士の距離を d(si , sj ) としたとき，d(sn , si ) − (rn + ri + m)
をすべての i = 0, · · · , n − 1 に対して計算し，すべてラインストーン si においてこの値が正のとき，v(x, y) にラインストーン sn を置けると判定する．
マウスでのドラッグ操作中に，描いたストロークにおける特徴的な点を検出しておき，その頂点には必ずラインストーンがおかれるようにリアルタイムに調整も行う (図 9 c, d)．

WISS 2010
P1P0(a)(b)

初期の敷き詰め

(d)

(c)

P3

P2r+m P1

P2(a) 格子状敷詰

PP52r+mP4

図 11. ランダム敷詰めモードのアルゴリズム．

P1

P0P2

P3(b) 最密充填敷詰

図 10. 近傍頂点列の計算．

3.2

結果

繰り返し

図 9. ストロークからラインストーンへの変換アルゴリ
ズム．(a) マウスのドラッグイベントが発生した
ら，(b) 前のラインストーンに続けてラインストーンを等間隔に配置していく．(c) 入力ストロークの特徴的な点を検出して，(d) 特徴点にはラインストーンが必ず来るように間隔をリアルタイムに調整する．

P0ストーンの位置を調整

ボロノイ図を構築

敷き詰めアルゴリズム

領域内に敷き詰める場合，図 6 のように「格子状モード」と「最密充填モード」の 2 種類を用意した．
どちらもユーザが敷き詰め機能を選択してから、ラインストーンで埋めたい領域の内部をクリックすることで Flood-fill が始まる．
まず，着目している点 P にラインストーンを置いたとき，近傍のラインストーンを置ける近傍頂点列 N eigh(P ) = {P0 , P1 , · · · , Pn } を求める．格子状に広げるモードの際には、図 10(a) のように上下左右の 4 近傍のみを計算する。最密充填モードのときには半径 2 · r + margin の円を描き，t 分割した点列を近傍頂点列とする．最も敷き詰めて並べられる個数が図 10(b) のように t = 6 のときであるため，これを利用した．近傍頂点列が計算できたら，この点列の位置にそれぞれラインストーンが置けるかどうかを計算し，置けるときはラインストーンを置いて、その近傍に関しても同様に繰り返す．ラインストーンが置けないときには何もしない．
最密充填敷き詰めモードにおいては，一度敷き詰め終わった後，ラインストーンの位置を調整する．これには Liu らの重心ボロノイ分割 (CentroidalVoronoi tessellation) を効率的に計算する手法 [4] の考えを用いた．図 11(a) である初期の敷き詰めの際に周囲のラインストーン列 O と内部のラインストーン列 I を保持しておく．次に，ステップ 1 として，ラインストーン s ∈ {O ∪ I} に対してボロノイ図を構築する (図 11(b))．ステップ 2 として，ラインストーン s ∈ I に対して，それぞれのボロノイ領域の中心にラインストーンが来るように移動させる (図11(c))．このステップ 1,2 を収束するまで繰り返す．
動かすラインストーンがなくなったとき収束したとする．この過程を加えることで図 11(d) のようなに敷き詰めたような結果を得ることができる．厳密には疑似的な最密充填であるが，リアルタイムに計算可能となる．

3.3

制作時間の提示制作時間にはラインストーンの個数を n とし， 1個のラインストーンを穴にあわせて物体に貼るのにかかる時間を w としたとき，n · w とした． この wの値は数人でテストをした結果，w = 30sec. とし，ユーザへの提示は分単位で切り上げて表示した．個
人差はあるもののおおよその制作時間が提示されることでユーザがデザインしやすくなる．w は個人が自分の早さに合わせて設定し直すことができる．

3.4

制作支援型版の出力

デザインし終わった図のラインストーンの外形をベクトル形式で出力し，カッタープロッタ (e.g.,
CraftROBO [2]) で出力する．これにより，ラインストーンと同じ大きさの穴のあいたラインストーン制作支援型版を作ることができる．通常のラインス
トーンデザインではこのような支援型版は使用しないが，我々はこれを使用することで実際のデコレーションの過程も簡単にデザインを施していくことができることを確認した．本システムではベクトル形式として DXF 形式をサポートしている．

4

結果

図 12 に本システムでデザインした例を示す．これらのデザインが数分でデザインすることができた．
また，カッタープロッタを用いてラインストーン制作支援型版を出力したことで実際にパソコンや鏡などにラインストーンデコレーションを施すことが簡単にできた．2010 年 10 月に日本科学未来館で小学生を対象に本システムを用いたワークショップを開催する予定であり，実証実験を兼ねた検証を行う．

An Interactive Design System for Rhinestones

図 12. 本システムでのデザインの例．

5

まとめと今後の展望

オリジナルの装飾を個々の持ち物に施す人が増えてきており，ラインストーンデコレーションは年々親しむ人が増加し続けている．洋服などにアイロンで定着させるラインストーンシートや携帯電話にデコレーションするプラスチック用シートなどが販売されているが，自らのデザインでデコレーションすることは難しく，デザイン用のテキストを見ながらデザインするのが現状である．また，店頭で携帯電話に専門家にデザインしてもらうようなサービスも普及している．家電製品に関しても購入者を対象にラインストーンデコレーションをほどこす専門家を売り場に配置するという電気屋の戦略 [5] も始まっており，ラインストーンでのデコレーションの人気は今後も続くと考えられる．
また，ラインストーンを並べていくだけでなく，同じ形状を並べることでデザインする手法は他にも応用されている．例えば，宮島の観光案内図に使用されているデザインは穴を使って 1 枚の板にデザインをほどこし，背面から蛍光灯をライトアップさせている掲示板である (図 13 上段)．さらに，布を 2枚用いて，穴でロゴをデザインしてあるバッグ [6]などもある (図 13 下段)．これらは専門家がデザインしているが，本システムを応用することで初心者でも簡単に同様のものがデザイン可能になる．
現在は敷き詰める形状を正円に限定しているが，図 13. 穴を利用したデザイン．(上段) 穴をあけた板の後ろから蛍光灯を照らす宮島の観光案内版．(下段)
穴でロゴをデザインしたバッグ [6]．

今後は様々な形状でデザインしていけるようにした
い．また，我々はこれまで手芸・クラフト分野における設計支援に関する研究 [7, 8] を行ってきたが，手芸・クラフトの分野だけでなく，専門家しかデザインしてこなかったようなものを素人でもデザインできるようにコンピュータで支援する枠組みをさらに広げていきたい．

WISS 2010参考文献
[1] A. Hausner. Simulatiing Decorative Mosaics. In
Proceedings of the 28th annual conference on
Computer graphics and interactive techniques,pp.573-580,2001.
[2] Graphtec. Craft ROBO.
[3] T. Igarashi, T. Moscovich, and J. F. Hughes
As-rigid-as-possible shape manipulation. ACM
Transactions on Graphics, vol.24, no.3, pp.1134–1141, 2005.
[4] Y. Liu, W. Wang, B. Levy, F. Sun, D. -M. Yan,
L. Lu, and C. Yang. On Centroidal Voronoi Tessellation - Energy Smoothness and Fast Computation. ACM Transactions on Graphics, vol.28,no.4, article no.101, 2009.
[5] ヤマダ電機「LABI 新宿東口館」．2 階デコレーションコーナー．
[6] Louis Vuitton. http://www.louisvuitton.com/.
[7] 五十嵐 悠紀．コンピュータを用いた手芸設計支援に関する研究．博士学位論文，平成 21 年度 東京
大学大学院 工学系研究科．2010．
[8] Y. Igarashi and T. Igarashi. Holly: A Drawing
Editor for Designing Stencils. IEEE Computer
Graphics and Applications. 30(4), 8-14, 2010.

未来ビジョン
これまで手芸分野では，専門家がデザインした作り方の書籍や制作キットを購入して手芸を楽しむ人が主であった．これは手芸作品ができあがり形状のデザインをするためにはその制作図案を設計しなければならず非常に難しいためで，専門家であっても経験と勘を頼りに手作業で試行錯誤をしながらデザインを行うことが多い．我々は手芸を楽しむ人々が自ら「デザイン (設計)」をできるようにコンピュータで設計支援を行う研究を行ってきた [1,2,3]．
「物理的な制約の下での形状モデリング」の枠組みを提案し，さまざまなアプリケーションを開発することで，初心者 (特に子供たち) でも簡単にデザインを行えるようになった．これにより「初心者による手芸作品設計」ができる世の中が始まると考える．今後，さらに発展させるためには，手芸を対象とした作業の知的支援システムの構築を目指したい．デザインの際のノウハウ，実際の手芸制作時の支援，成果などをネットワークを介したデータベース等で共有することで初心者が出来ない部分をそっと背後から支援することが可能になるだろう．
また，従来，日本の学術研究は論文や特許として成果を発表されることが多く，一般の人の目に触れることがあまりなかった．我々はユー
ザスタディを日本科学未来館において公募で行うことにより，体験型教育科学フィールドワークを続けてきた．この体験型教育科学フィール
ドワークの大切さ，重要性を広める啓蒙活動を今後も行い，科学に興味をもつ子どもたちの育成支援を教育・研究の場から取り組んでいく
ことで，大学での研究成果を発表する体験型
教育科学フィールドワークの場の確立を目指していく．フィールドワークの場を確立することで一般の人々が最先端の科学技術に触れることができる世の中になり，研究という仕事、研究者という職業が身近になる．これにより，昨今の理系離れ，科学離れにストップをかけることが可能となり，未来の研究者 (子供たち)を増やすことがねらいである．
[1] Yuki Mori, et al. “Plushie: An Interactive Design System for Plush Toys.” ACM Transactions onGraphics (SIGGRAPH 2007), 26(3), 45:1-8, 2007.
[2] 五十嵐 悠紀ら．“あみぐるみのための 3 次元モ
デリングと製作支援インタフェース”, 日本ソフトウェ
ア科学会論文誌「コンピュータソフトウェア」,26(1),51-58, 2009.
[3] Yuki Igarashi, et al.“Holly: A Drawing Editor
for Designing Stencils.” IEEE Computer Graphics
and Applications. 30(4), 8-14, 2010.