Content uploaded by Preben Hansen
Author content
All content in this area was uploaded by Preben Hansen on Oct 14, 2020
Content may be subject to copyright.
AnimSkin: Fabricating Epidermis with
Interactive, Functional and Aesthetic Color Animation
Yanan Wang1, Shijian Luo1,Yujia Lu1, Hebo Gong1, Yexing Zhou1, Shuai Liu1,
Preben Hansen2
1 NO.38 Zheda Rd, Zhejiang University, Hangzhou, China
2 Borgarfjordsgatan 12, Kista, Stockholm University, Stockholm, Sweden
{wangyanan1120, sjluo, luyujia, gong_hb, zhouyexing, shuaidesign}@zju.edu.cn
preben@dsv.su.se
Figure 1. AnimSkin is a thin-film and multi-layer structure on body interface, which will emit aesthetic and dynamic color
animation by using thermochromic paint, such as (a) Email Reminder, (b) Light control system; individuals could also customize
their own graphic designs (c); all processes are manipulated by an accessible and low-cost fabrication method.
ABSTRACT
Human epidermis, as the largest organ on body, has become
a new design platform for wearable computing. The
availability of miniature electronics makes more
possibilities for on-skin designs. In this paper, we present
AnimSkin, a thin-film interface, which will emit dynamic
color animations directly on skin. This is done by using
thermochromic material embedded with transparent
electrode acting as a capacitive sensor. Moreover, an
accessible and low-cost fabrication method is introduced.
Individuals could also customize aesthetic graphic designs
by following the detailed fabrication process to achieve
personalized patterns. We propose four different dynamic
types of color animation by applying certain voltage to the
heating circuitry. With two examples, Email Reminder and
Light Control System, we demonstrate how AnimSkin can
be integrated into everyday life, and specifically, we show
how AnimSkin can benefit areas such as on-skin design,
thin-film interface and beauty technology.
Author Keywords
Wearable computing; on-skin interfaces; beauty technology;
hybrid material; color animation; fabrication;
ACM Classification Keywords
H.5.m. Information interfaces and presentation (e.g., HCI):
Miscellaneous
INTRODUCTION
Wearable computing is aiming to extend human capabilities,
and Robert Hooke proposed the concept of “artificial organ”
for improving our “hearing, smelling, tasting, and touching”
[16]. Today, an increasing number of researchers are
devoting themselves to designing seamless interfaces on
body and with its accessories, causing a rethinking between
electronics and human body. As can be seen in Project
Jacquard [17], NailO [5] and Hairware [12]. Recently, body
surface has been a new design platform for wearable
computing. Scientists have developed ultra-thin electronics
on human skin for the measurement of bio data. Hammock
et al. provides a brief history of e-skin [3]. However, to
build such system, expensive materials and equipment is
needed. Previous researches have utilized skin for touch
input [9, 14]. Through a perspective of beauty technology, a
new subfield of wearable computing [11], aesthetics of
body decoration has emerged. DuoSkin and ChromoSkin [6,
7] inspired from digital cosmetics, create on-body
decorations. However they still have a long response time
for thermochromic material to react.
Developments in smart materials are improving the ease of
use of the digital technologies, making more possibilities
for electric-responsive materials or flexible displays.
Researchers also pursue multi-layer but thin hybrid material
for extended behaviors [4, 10, 15]. Thermochromic
materials can be used in e-textiles, Ebb and Mosaic
modules combining thermochromic paint with conductive
fabric for smart textile display [2, 13]; very slow animation
Permission to make digital or hard copies of all or part of this work for
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
bear this notice and the full citation on the first page. Copyrights for
components of this work owned by others than ACM must be honored.
Abstracting with credit is permitted. To copy otherwise, or republish, to
post on servers or to redistribute to lists, requires prior specific permission
and/or a fee. Request permissions from Permissions@acm.org.
DIS 2017, June 10-14, 2017, Edinburgh, United Kingdom
© 2017 ACM. ISBN 978-1-4503-4922-2/17/06…$15.00
DOI: http://dx.doi.org/10.1145/3064663.3064687
textiles can be framed [1]. Muksit presented the
temperature-actuated properties of such thermochromic
system on textiles in detail within coloration society [8].
However, questions like what’s the explicit response time
to create more real-time feedback, what different types of
color animation can be framed, and how can this kind of
material be embedded with other materials within on-skin
are still open questions within the HCI research field.
In this paper, we consider thermochromic, a non-emissive
and heat-actuated material, and used together with dynamic
color animation embedded with heating circuitry and touch
sensing modules. They could form a new direction for
wearables and body decoration. And as such, they could be
merged into individual’s everyday life.
In summary, we list our four significant contributions:
1. A multi-layered and thin-film material structure is
proposed to achieve interactive, functional and aesthetic
color animation.
2. By introducing thermochromic material as the aesthetic
layer, four basic predefined dynamic color animation
patterns could be framed: a) breathing, b) moving, c)
internal succession, 4) graphics changing.
3. We articulate an initial, accessible and low-cost
fabrication approach, which is easy to copy for
individuals in order to be customized according to own
designs.
4. A technical evaluation on the 1) behavior of ITO covered
with silicone overlay acting as a capacitive sensor; 2)
skin-friendliness and durability of AnimSkin.
DESIGN CONSIDERATIONS AND CHALLENGES
Accessibility: The fabrication method proposed, intended
for both designers and customers, is novel, accessible and
economical, can of course be improved. The materials of
AnimSkin can be bought from on-line shop, and the average
cost for one is around 7 RMB in China, approximately
equal to $1.01 USD.
Skin Safety: Silicone, has a good insulating property from
electricity, heat and water. The body glue bonding to
surface of the skin is on a medical level and will not cause
problems like skin irritation. We choose 38°C actuated
thermochromic powder mixed with silicone for avoiding
skin burns from higher temperature.
Heating Module: We use X-Silver silver coated nylon
conductive yarn as the heating material for its flexibility
and durability by comparing with other material (e.g. silver
ink, conductive ink). For avoiding unnecessary color
change from circuitry, we connected conductive thread with
copper wire (lower resistance compared with conductive
thread) directly at the back of the thermochromic layer for
shaping a certain pattern (Figure 2). So within the same
current in one circuitry, there will not cause the redundant
color change in our system.
Figure 2. Heating module: (a) circuitry system design; (b)
display as an envelope.
• Interactivity and Aesthetics: To achieve various color-
changing patterns and interactive, aesthetic functions, we
propose a collection of different materials for a thin
multi-layer structure (Figure 3).
Figure 3. Multi-layer structure
From top to bottom: a transparent water proof silicone
overlay; TK-CHEM SDS 38°C heat sensitive
thermochromic pigment acting as a color-changing and
aesthetic layer that will be actuated within 0.5~1s by
applying a 0.08A current, much faster than similar designs.
Individuals also could customize their own designs with
different shapes and colors; soft conductive thread (6Ω/cm)
with a thickness of 0.02mm binds with the second
transparent silicone level for insulation; Indium Tin Oxide
(ITO) is a transparent conducting material coated on a thin
polymer layer, for aesthetic and safe consideration, we
place ITO with 0.05mm thick for analogous capacitive
sensor under heating layer, and ITO (2.5cm2) with a
silicone overlay less than 0.45mm thick which can still be
sensed through technical evaluation; silicone substrate for
binding with skin. The overall thickness can be as thin as
0.38mm.
COLOR ANIMATION PATTERN
In order to explore how the thermochromic material can be
controlled, and what effects how it can be displayed, we
designed four basic color animation patterns, which
DuoSkin and ChromoSkin [6, 7] still fall short on. We did
this by arranging predefined heating circuitry, using a 38°C
red thermochromic silicone film with a thickness of
0.12mm (Figure 4). The room temperature was 25°C, and
the air temperature 17°C. Every effect could be envisioned
in different applications as a on-skin display and touch
feedback:
Figure 4. Color animation design: (a) breathing; (b) moving;
(c) internal succession; (d) graphics changing.
Figure 5. Fabrication approach: (a) mix thermochromic powder with silicone and curing agent; (b) thermochromic layer and
transparent layer made by a thin-film applicator; (c) graphic design; (d) target design pattern by CNC; (e) removing the
unnecessary part; (f) making heating circuitry; (g) apply thermochromic layer; (h) apply transparent electrode; (i) thin-film design.
1.Breathing as a surface (Figure 4a): the breathing time for
once is around 1~1.5s powered with 3.3V DC; this color
animation can be connected with a “notification” or a
certain “status”.
2.Moving as a whole (Figure 4b): the round surface can be
moved from one spot to another within 7s, connecting with
the “time”, “place-changing”, or “direction”.
3.Internal succession (Figure 4c): dynamic line pattern
changing in one surface within 5s, can be designed and can
be associated with the “progress” of a certain activity, such
as file transfer, achievement achieved in a game
4.shape change (Figure 4d): the triangle can be changed to a
square, two different shapes can represent different
“camps”, such as a strategy game playing for two.
FABRICATION APPROACH
For making thin-film on-skin interface, we decided on an
affordable and low-cost fabrication method, which is
inspired from iSkin [14] and Strechis [15]. All processes
were manipulated as lab experiments (Figure 5). Here we
present a set of several basic steps for crafting an AnimSkin
as an Email Reminder.
Thin-film making
First, we mix the silicone with curing agent and 38°C red
thermochromic powder according to the proportion 100: 3:
9. Then we used the SZQ thin-film applicator with
thickness of 30, 60, 90,120µm to form a silicone film. The
red film is for the aesthetic layer, and the transparent film is
made for the overlay, insulating and substrate layer (Figure
5a and 5b).
Graphic design
We customize various vectograms based on the common
software CorelDraw, and cut the target design by laser
cutting machine (Figure 5c and 5d). Remove the
unnecessary part of thermochromic layer, and glue the
needed part with transparent silicone overlay (Figure 5e).
Integrate layers
This stage involves wrapping the conductive thread binding
with copper wire on the insulating layer according to the
wireframe of an email (Figure 5f). Then position them
under the thermochromic layer, ensuring that the
conductive thread contacts with themochromic material
tightly to achieve the color change within the shortest time.
Finally, attach the transparent electrode and the substrate at
the back of silicone insulating layer in order (Figure 4f to
4h), then flat each layer and we could achieve the thin-film
as a soft and flexible design. The overall thickness is
largely determined by the silicone overlay and the substrate.
ENVISIONED INTERACTION
Email Reminder
We crafted a flower shape of Email Reminder (Figure 1a),
placing the heating circuitry in the center of the flower, and
then applied the flower with 0.08A current and a 3.3V
Lithium battery. Email Reminder could then be connected
with your mobile phone. In general, it is acted as a kind of
body decoration and will not change color. When you
receive an email, the heating circuitry will be activated, and
the thermochromic material begins to breathe by displaying
an envelope. And it won’t stop until you notice and touch
the surface. The time for breathing is around 1~1.5s. In this
case, the breathing color-changing animation plays a role as
a “notification”, just like a ring tune or vibration of a
mobile phone.
Light Control system
For a light control system (Figure 1b), we fabricated three
different components for controlling the LED
independently by applying 0.08A and 1.44V DC: for the
first touch, a white round color animation comes up and
with one LED lights; for the second touch, the
thermochromic material will breathe as a line together with
the LED; touching it for the third time, the animation
disappears and led turns off. If they were touched one by
one, a successive animation will show on the skin to
represent the light control “progress”. In this system, the
successive color animation will simulate the “status” of
dynamic light changing system and display the different
feedback for users to control.
TECHNICAL EVALUATION
In this paper, we also conducted a technical evaluation
experiment, including: 1) behavior of ITO acting as an
analogous capacitive sensor when covered with silicone
overlay, and 2) of the skin-friendliness and durability of
AnimSkin.
Behavior of Analogous Capacitive Sensing of ITO
For the aesthetic and safety considerations, we choose
transparent electrode and place it under the heating layer.
We then tested the analogous capacitive sensing behavior of
ITO with silicone overlay of different thickness when
placing them on skin.
Session structure: We prepared 5 pieces of ITO with
different area: 2cm2, 2.5cm2, 3cm2, 3.5cm2, 4cm2, and six
5.5cm2 pieces of silicone overlay with thickness: 120µm,
210µm, 240µm, 330µm, 360µm, 450µm. Each this ITO is
soldered with copper wire to an Arduino controller. In this
experiment, we set the initial value of ITO putting on skin
without an overlay and touch is 1 (≈0.090 nF).
We recruited 10 participants (4 female), ages 24 to 35 years
(M= 27.5 years). All participants tested each ITO with six
different silicone overlay. For each test, the participants
were required to place the first piece of ITO (2cm2) on the
back of left hand and cover it with six silicone surfaces one
by one, touching every silicone surface with his right index
finger three times, and then repeated the processes with the
remaining four ITOs. The average time spent for one
participant is around 10 minutes.
Figure 6. Experimental results for analogous proximity
sensing (each unit ≈ 0.003 nF)
Results: Figure 6 summarizes the average value of the
experiment results. Firstly, once the ITO covered by
silicone overlay, the initial value will be 3 (≈ 0.096 nF),
which means that sensing values higher than 3 will be
sensed; secondly, as figure 6 shows, for more precise
sensing we’d better choose the ITO of the area ≥ 2.5 cm2.
The key finding is that the value of capacitive sensing is
indeed influenced by the thickness of the silicone overlay,
however, there is still enough precision for the system to do
basic touch recognition.
Test of Skin-friendliness and Durability of AnimSkin
In this experiment, we evaluated the AnimSkin’s
friendliness and durability, including the ease of application
and removal, comfort with the heating element, skin
sensitivity of wearing silicone for a long time, and the
durability when exposed to daily wear (e.g., water, sweat).
Session structure: The test consisted of 8 participants (5
female) with age range from 19 to 31 years (M = 26 years).
We prepared eight 3.5x3.5cm AnimSkin samples, each with
an email-shaped heating element by applying 0.08A and
3.3V DC controlled by Arduino. Each sample’s back was
painted with body glue for binding with skin. And the room
temperature is 23°C. All sessions were hand recorded.
First, the participants were allowed to attach the AnimSkin
onto their exposed skin wherever they want, then removed
it, and repeated it for three times. Second, we tested the
heating element by attaching the material onto participants’
left forearm and hand back. Then, let participants rank the
comfort level from 1 to 5 (1= most negative, 5= most
positive) based on our questionnaire. Finally, four
participants were allowed to wear AnimSkin for 6 hours on
the backside of their left hand, the others on the left forearm.
After the 6 hours, they returned back to our lab. We
recorded their activities and tested the circuitry with a
multimeter. Finally, we removed the sample to observe if it
will cause skin sensibility.
Results: AnimSkin was easy enough for participants to
attach and removal, it did not leave any residue of glue that
could cause skin discomfort. Through questionnaires,
participants could feel the tepidity from the heating element
on the back of the hand, stronger than the forearm, but
without any skin discomfort. Besides, after 6 hours wearing,
all tests performed well without disconnection of circuitry.
There was no detachment of wearing it on the forearm, but
one sample of the backhand-wearer tilted in two corners.
No skin sensibility was caused among our 8 participants
after wearing AnimSkin for a long time.
DISCUSSION AND FUTURE WORK
In this paper, we build four basic animations for dynamic
on-skin display. More color-changing effects and input
methods should be developed and tested based on present
structure. It is possible that AnimSkin will be activated
inadvertently if the air temperature > 38°C. We will next try
a closed-loop approach by adding additional sensing, like
cooling techniques, to improve this system. Finally, a more
comprehensive user study needed to be conducted
involving the user experience and the product usability.
CONCLUSION
We proposed AnimSkin, a thin-film multi-layer design for
pursuing interactive and aesthetic color animation on skin.
We connect the color animation with different scenarios in
everyday life, and also developed a novel and inexpensive
fabrication approach for individuals to customize
personalized designs. Our technical evaluation supports the
feasibility of ITO touch sensing and also the durability and
skin-friendliness of AnimSkin for everyday use. We hope
our work could benefit the area of wearable computing,
thin-film interface and the beauty technology area.
ACKNOWLEDGMENTS
The research and development described in this paper have
been funded by the National Natural Science Foundation of
China (No. 51675476 and No. 51175458).
REFERENCES
1. Berzowska J. Very slowly animating textiles:
shimmering flower[M]. ACM, 2004
2. Devendorf L, Lo J, Howell N, et al. "I don't Want to
Wear a Screen": Probing Perceptions of and
Possibilities for Dynamic Displays on Clothing[C]//
CHI Conference. 2016:6028-6039
3. Hammock M L, Chortos A, Tee B C, et al. 25th
anniversary article: The evolution of electronic skin (e-
skin): a brief history, design considerations, and recent
progress.[J]. Advanced Materials, 2013, 25(42):5997-
6038.
4. Heibeck F, Tome B, Silva C D, et al. uniMorph:
Fabricating Thin Film Composites for Shape-Changing
Interfaces[C]// The, ACM Symposium. ACM,
2015:233-242.
5. Kao H L, Dementyev A, Paradiso J A, et al. NailO:
Fingernails as an Input Surface[C]// ACM Conference
on Human Factors in Computing Systems. ACM,
2015:3015-3018.
6. Kao H L, Holz C, Roseway A, et al. DuoSkin: rapidly
prototyping on-skin user interfaces using skin- friendly
materials[C]// ACM International Symposium.
2016:16-23.
7. Kao, Hsin Liu, et al. "ChromoSkin: Towards
Interactive Cosmetics Using Thermochromic
Pigments." CHI Conference Extended 2016:3703-
3706.
8. Muksit A Chowdhury, Bhupendra S Butola, and Man-
gala Joshi. 2013. Application of thermochromic col-
orants on textiles: temperature dependence of col-
orimetric properties. Coloration Technology 129, 3
(2013), 232–237.
9. Ogata, Masa, et al. "SenSkin: adapting skin as a soft
interface." ACM Symposium on User Interface
Software and Technology ACM, 2013:539-544.
10. Olberding S, Wessely M, Steimle J, et al. PrintScreen:
fabricating highly customizable thin-film touch-
displays[C]// ACM Symposium on User Interface
Software and Technology. ACM, 2014:281-290.
11. Vega K C, Fuks H. Beauty Technology: Designing
Seamless Interfaces for Wearable Computing [M].
Springer Publishing Company, Incorporated, 2016.
12. Vega K, Cunha M, Fuks H. Hairware[C]// The,
International Conference. 2015:89-92.
13. Wakita A, Shibutani M. Mosaic textile: wearable
ambient display with non-emissive color-changing
modules.[C]// International Conference on Advances in
Computer Entertainment Technology, Ace 2006,
Hollywood, California, Usa, June. DBLP, 2006:48.
14. Weigel, M., Lu, T., Bailly, G., Oulasvirta, A., Majidi.
C., and Steimle, J., iSkin: Flexible, Stretchable and
Mobile Computing. In Proc. of CHI '15. 2991-3000.
15. Wessely M, Tsandilas T, Mackay W E. Stretchis:
Fabricating Highly Stretchable User Interfaces[C]//
Symposium on User Interface Software and
Technology. ACM, 2016:697-704.
16. Wolbarsht M L. Micrographia or Some Physiological
Descriptions of Minute Bodies Made by Magnifying
Glasses with Observations and Inquiries Thereupon. by
Robert Hooke[J]. 2003.
17. Poupyrev I, Gong N W, Fukuhara S, et al. Project
Jacquard: Interactive Digital Textiles at Scale[C]// CHI
Conference. 2016:4216-4227.
