Applications

Editor: Mike Potel

Deco: A Design Editor
for Rhinestone Decorations
Yuki Igarashi
University of TsukubaYoung people enjoy applying rhinestones topersonal goods, such as notebook PCs, mobile phones, and digital cameras. However,novices often find designing rhinestone decorations difficult because they must consider suchfactors as rhinestone width and spacing. So, many
people employ off-the-shelf design sheets or haveprofessionals decorate their items.
To solve this problem, I have developed an interactive editor for designing rhinestone decorations.
Users draw free-form strokes; the system then automatically places virtual rhinestones to create animage in which no rhinestones overlap. Users cancreate a stencil of the image and use it to place
the real rhinestones on objects. To see my systemat work, watch the video “Deco” at www.geocities.
jp/igarashi_lab/deco/index-e.html.

Designing Rhinestone Patterns
Figure 1 shows Deco’s interface. The systemrepresents users’ strokes as polylines so that users
can easily move or delete rhinestones, change theircolors, or change the image’s scale. To delete arhinestone or change its color, users right-click on
it to open a pop-up menu (see Figure 2).
Users modify strokes using a pull tool (seeFigure 3).1 During a pull operation, the systeminteractively updates the rhinestones’ positions
and number.
Users can also upload existing images and placerhinestones over them to replicate the images (seeFigure 4). This lets novices easily create designs.
To fill open spaces, the system offers two floodfill modes (see Figure 5). In grid-fill mode, users apply sheets of rhinestones to quickly create attractive results. In close-packed-fill mode, users insert
rhinestones one at a time to achieve evenly distributed results. Professional designers commonly use
both design modes, but novices generally prefergrid-fill mode because it’s easier to use.
Because total design times vary with each image,
Deco estimates how long a design will take anddisplays the estimated time in a text box on thescreen. The system also specifies the required
number of rhinestones.

Producing the Finished ProductFigure 1. Deco’s user interface. My system created this design on thebasis of a user’s free-form strokes.
90

September/October 2011

Once users have created a pattern, they can export
it as a virtual stencil in vector file format; thesystem also supports the DXF format. Users canemploy a cutting plotter such as CraftRobo (www.
graphteccorp.com/craftrobo) to produce a physicalstencil (see Figure 6a). They can then place thestencil over the object to be decorated and attach
the rhinestones (see Figure 6b).

Published by the IEEE Computer Society0272-1716/11/$26.00 © 2011 IEEE

Traditionally, professional users don’t use stencils because they can design manually directly on
an object (for example, a mobile phone, a handmirror, or a T-shirt), but novice users generally findthem useful. Although creating and implementing
designs can be time-consuming, especially for beginners, I’ve found that most people enjoy it.

System Algorithms
I implemented my prototype system as a Java program that uses a vector representation.

Figure 2. Right-clicking on a rhinestone opens a pop-up menu that lets
users delete it or change its color.

Converting Input Strokes to Rhinestones
As Deco places rhinestones along a stroke, it samples candidate locations along the stroke at equalintervals L—a rhinestone’s diameter, plus a smallmargin (see Figure 7). The system then determines
whether the distance between each candidate location and any other rhinestones (except the previous one on the stroke) is greater than L. If thisis so, the system places a new rhinestone.

Flood-Fill Modes
During flood-fill modes, when users click in a target region, Deco automatically places rhinestones
there.
When a user clicks on a point p 0 = (x0, y0),Deco places a rhinestone there. It then computes

Figure 3. Users modify strokes using a pull tool. The system automatically
updates the rhinestones’ positions and number on each stroke.

a neighboring-vertices list N(p 0) = {p1, p2, p3, …}
for p 0. In grid-fill mode, Deco computes fourneighboring points—up, down, left, and right (seeFigure 4. Users can upload existing images and place rhinestones over them. This lets novices easily create
designs.

(a)

(b)

(c)

Figure 5. Flood-fill modes. (a) Users click in a field to use one of the modes. (b) In grid-fill mode, users apply
sheets of rhinestones. (c) In close-packed-fill mode, users insert rhinestones one at a time. Novices generally
prefer grid-fill mode.
IEEE Computer Graphics and Applications

91

Applications

(a)

(b)

Figure 6. Creating the finished product. (a) Users make stencils using a
cutting plotter. (b) The stencil’s holes make placing rhinestones easy.

places the rhinestone and moves to a new position.
If not, the system does nothing and waits for theuser’s next move.
In close-packed-fill mode, after placing rhinestones in a region, Deco adjusts their positions
using the repulsion method. When the systemcomputes the initial rhinestone fill results, itconstructs an outside rhinestone list O and inside rhinestone list I. For each rhinestone pi ∈ I,it evaluates
pik+1 = pik−1+

pk − pik −β pik −pkj 2⋅ kj
(10 − k) ⋅ α ⋅ e,
p j − pik 
p j ∈N( pi ) ∑L(a)(b)

which iterates for k = 0, 1, 2, …, 9. Deco’s current
parameter setting is a = 0.03 and b = 0.07. In thisequation, a and b are parameters to determine theexpanding width, e is the exponential function
exp(x), pj is a position of neighbors of pi, k is thenumber of iterates, and N(pi) is the list of ������neighboring�������������������������������������������
positions.��������������������������������
Deco repeats the repulsion process 10 times and moves each rhinestone. I callthis a quasi-close-packed fill. The system can compute this in real time, which normally takes approximately 0.1 to 0.2 sec.

Total Estimated Production TimeThe total production time includes cutting timeplus decorating time. The cutting time (Tcut)
increases in proportion to the rhinestones’ totalperimeter (Lstone). The total decorating time (Tdeco)
increases in proportion to the total number ofrhinestones (N). So, the total time (Ttotal) is(c)Figure 7. The algorithm for placing rhinestones on auser input stroke. (a) As users drag the mouse to create
a design, the system automatically places rhinestones
on top of the lines (b). When the distance between
a mouse cursor and the nearest rhinestone is shorter
than L (a rhinestone’s diameter, plus a small margin),
the system doesn’t place a rhinestone in that location.
(c) When the cursor passes over existing rhinestones,
the system appropriately places new rhinestones.

Figure 8a) and adds them to the list. In closepacked-fill mode, Deco selects t evenly distributed
points along the circle (see Figure 8b) and adds
them to the list. I use t = 6 because it’s the mostdensely packed configuration.
Then, Deco checks whether it can place arhinestone at the six points it selected. If it can, it92

September/October 2011Ttotal = Tcut + Tdeco= Wcut Lstone + WdecoN,
where Wcut is the weight—that is, how long thecutting plotter cuts the paper per unit length—perunit Lstone, and Wdeco is the decorating time for one
rhinestone. I use Wcut = 0.5 sec./cm on the basis ofCraftRobo’s manufacturing information and Wdeco =30 sec. on the basis of user-study results. Users caneasily reset Wdeco to match their own speed.

Results
Deco runs in real time on a 1.1-GHz Pentium M
PC; the design process generally takes 10 to 20 minutes, and production requires 30 to 60 minutes.
I ran a small workshop for novice users to try
Deco. Ten children, ages 8 to 11, participated, accompanied by their parents (see Figure 9a). I began

p1

p0
p4

p2
L(a)

(a)

p3

p1

p1

p0
p5

p2
L

(b)

p4

(b)
Figure 9. A workshop for novice users. (a) The participants. (b) A childdesigning a decoration. (c) Another child adding rhinestones to a box.
The entire process took roughly two hours.

p3

Figure 8. Calculating neighboring vertices. (a) Grid-fillmode. (b) Close-packed mode. The system constructs
a rhinestone list in the field using the neighboringrhinestones. P represents rhinestone positions.

with a brief tutorial. The children took roughly anhour to design stencils (see Figure 9b), which they
cut using a cutting plotter. The children then used
the stencils to decorate accessory boxes, taking an
additional hour (see Figure 9c).
Figure 10 shows some boxes that the children
decorated. They quickly learned how to use Decoand enjoyed the workshop and design process.
They were especially excited to see rhinestones
generated on the fly as they drew the strokes.
The participants gave us valuable feedback for future improvements. For example, they agreed thatusing a stencil was helpful and that they’d like tocreate designs with greater detail—that is, design
an animal’s eyes, eyelashes, and mouth. One childnoticed that the flood-fill method often failed toevenly distribute rhinestones because it inappropriately placed the boundary stones. So, he suggested
that the system slightly adjust the boundary stones’
positions to enable more even distribution.

T

he current implementation doesn’t make allowances for rhinestones with different shapes.
To enable this, I must extend the algorithm andFigure 10. Some of the finished rhinestone decorations in the workshop.
The children who participated in the workshop created these one-of-akind decorations.

develop a straightforward user interface for creating designs with rhinestones of different shapesand sizes. This would let users design in greater
detail. Also, the system currently works only witha flat base; I plan to extend it to support baseswith curved surfaces, such as a mug, a bottle, oran umbrella handle.
My research demonstrates the effectivenessof designing physical objects by considering thematerial’s physical properties during construction.
IEEE Computer Graphics and Applications93

Applications

On the basis of this philosophy, I’ve been developing
design-support systems for other crafts, including
stuffed or knitted animals.2,3 I particularly aim tocreate systems that novices can easily use. Acknowledgments
I thank the National Museum of Emerging Scienceand Innovation in Japan for providing the workshop
location. A grant-in-aid from the Japan Society forthe Promotion of Science Fellows partly supported
this research.

Visit CG&A on
the Web atwww.computer.org/cga

References
1. T. Igarashi, T. Moscovich, and J.F. Hughes, “As-Rigid-asPossible Shape Manipulation,” ACM Trans. Computer
Graphics, vol. 24, no. 3, 2005, pp. 1134–1141.
2. Y. Igarashi and T. Igarashi, “Designing Plush Toys
with a Computer,” Comm. ACM, vol. 52, no. 12,2009, pp. 81–88.
3. Y. Igarashi and T. Igarashi, “Holly: A Drawing Editor
for Designing Stencils,” IEEE Computer Graphics andApplications, vol. 30, no. 4, 2010, pp. 8–14.
Yuki Igarashi is a research fellow of the Japan Society for
the Promotion of Science at the University of Tsukuba, Japan. Contact her at yukim@acm.org or www.geocities.jp/igarashi-lab.
Contact department editor Mike Potel at potel@wildcrest.
com.

Selected CS articles and columns are also available
for free at http://ComputingNow.computer.org.

AdvertiSer / product index • September/october 2011

Advertiser/product3Dconnexion
AppleArtRage
The Bakery
Chaos GroupLightspeed Design
Luxology
NewTekPixologic
Sundog Software
visWeek 2011
Zebra Imaging

pAge95659696969596969595
cover 495Advertising Sales Representatives (display)
Western US/Pacific/Far East:
Eric Kincaid
Email: e.kincaid@computer.org
Phone: +1 214 673 3742
Fax: +1 888 886 8599
Eastern US/Europe/Middle East:
Ann & David Schissler
Email: a.schissler@computer.org, d.schissler@computer.org
Phone: +1 508 394 4026
Fax: +1 508 394 4926
Advertising Sales Representatives (Classified Line)

Boldface denotes advertisers in this issue.

Advertising Personnel
Marian Anderson: Sr. Advertising Coordinator
Email: manderson@computer.org
Phone: +1 714 816 2139 | Fax: +1 714 821 4010
Sandy Brown: Sr. Business Development Mgr.
Email sbrown@computer.org
Phone: +1 714 816-2144 | Fax: +1 714 821 4010

94

September/October 2011

Greg Barbash
Email: g.barbash@computer.org
Phone: +1 914 944 0940
Fax: +1 508 394 4926
Advertising Sales Representatives (Jobs Board)
Greg Barbash
Email: g.barbash@computer.org
Phone: +1 914 944 0940
Fax: +1 508 394 4926