Color Theory and Interactive Generative Visual Pattern System Applied to Fashion and Design Sun young Ahn Adviser: Prof. Petronio Bendito Purdue University Visual Communications Design
CONTENTS 1 Background 2 Introduction 3 Methods 4 Case Studies 5 Other Applications 6 Exhibition
1 Background: Customized fashion trend Traditionally, high-end fashion brands have played a role as a trend setter in the fashion market, and mass fashion brands popularized the trend as a trend adopter.
Traditional structure of fashion trends
More fashion content
Haute-Couture
More product dierentiation Greater demand uncertainty
Designer ready-to-wear
Higher-quality fabric Higher price
Luxury brands Fashion trend setter Mid-level brands
High street retailers Fashion trend adopter
sun young ahn l 2016 IVLA
1 Background: Customized fashion trend “It’s a new era in fashion - there are no rules. It’s all about the individual and personal style.” - Alexander McQueen
The rise of personalized fashion
Emergence of fast fashion brands
Development of the Internet
Advance of Technology
sun young ahn l 2016 IVLA
1 Background: Customized fashion trend A global apparel brand, Nike, launched customized product lines by providing various design options in color, material and patterns.
Customized fashion brands’ interfaces : Nike Custom Shoes
sun young ahn l 2016 IVLA
1 Background: Customized fashion trend Over the past ďŹ ve years, there have been many online fashion retail start-ups that provide customized apparel products.
Customized fashion brands’ interfaces: iTailor
sun young ahn l 2016 IVLA
1 Background: Customized fashion trend With the advance of digital printing technology, people can easily apply their own digital images to various design products.
Customized fashion brands’ interfaces: Print All Over Me (PAOM)
sun young ahn l 2016 IVLA
2 Introduction: Introduction of PiC’n Wear PiC’n Wear is a customized scarf design application based on a generative visual pattern system.
Interface
sun young ahn l 2016 IVLA
2 Introduction: Introduction of PiC’n Wear The application allows people to easily create customized patterns and color variations. The work flow consists of 5 steps, and it provides an easy and fluent user experience.
Work flow
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
sun young ahn l 2016 IVLA
3 Methods: HSB digital color system Developing a color-sorting algorithm based on color theories. Background: HSB digital color system
Background: HSB digital color system
(H)
(B) HSB Color Space (Cylinder)
Light (100)
0° 30°
330° 300°
Brightness: Relative darkness or brightness of a color
60°
90°
HUE SATURATION
120°
240° 210°
150°
The height of the cylinder : A higher number means a lighter color
BRIGHTNESS
270°
Dark (0)
180°
Hue: The name of a color The circumference of the upper side : A hue is determined by the angle of its color wheel
Dull (0)
Vivid (100) Saturation:
(S)
The purity of a color The radius of the cylinder : A higher number means a more vivid color
sun young ahn l 2016 IVLA
3 Methods: Color data visualization The system picks colors from a picture and visualizes the color on the HSB color grid based on a color sorting algorithm.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Color sorting algorithm
Check the value of Hue
Check the value of Brightness
346 346 357 359 360 0 1 2 2 3 7 7 10 11 24 24 25 26 27 30 34 34 35 38 38 40 42
50 50 50 57 60 31
39 42 50 50 50 50 50 51 51 52 58 58 59
9
55 61 62 65
67 85
18
91 118
15 16
34
x5
100 99 58 50 49 73 68 70 74
96 69
100100100100100 99 97 50 49 47 45 40 34 88 62 59 51
75 64 60
48
100100
12 13 13 16 17
Count the number of pixels
100100100100 98
x1
x13
x1
x4
x1
x1
x3
x2 x5
....
120 120 120 120 122
Check the value of Saturation
1 Pick Pixels from a Picture
2 Sort by Hue
3 Sort by Lightness
4 Show the most Vivid Color
5 Count Pixel Numbers
sun young ahn l 2016 IVLA
3 Methods: Color data visualization The system checks the value of Hue for every pixel, and places them on the HSB color grid. A hue is determined by the angle of its color wheel.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Sort by Hue
1 Pick Pixels from a Picture 120 118 91 10 357 346 24 37 34 25 360 0
0° 120 120 85 24 2 346 10 40 34 3
2 359
....
122 120 30 67 7 26 42 38 34 27 7
330°
30°
1
300°
270°
f
2 Sort by Hue
a b c
....
d e f
346 346 357 359 360
60°
a b c d e
90°
240°
120°
0 1 2 2 3 7 7 10 11 24 24 25 26 27 30 34 34 35 38 38 40 42 67 85
210°
150° 180°
91 118 120 120 120 120 122
sun young ahn l 2016 IVLA
3 Methods: Color data visualization The system checks the value of Lightness for every pixel and classiďŹ es them by Lightness on the HSB color grid. The color becomes lighter at the edge.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Sort by Lightness
2 Sort by Hue
a b c d e f
346 346 357 359 360 0 1 2 2 3 7 7 10 11 24 24 25 26 27 30 34 34 35 38 38 40 42 67 85 91 118 120 120 120 120 122
3 Sort by Lightness
a b c
50 50 50 57 60 31
39 42 50 50 50 50 50 51 51 52 58 58 59
9
55 61 62 65
....
d 18 e f
iii
ii
i
68 70 74
34
0~33 34~66 67~100
15 16 12 13 13 16 17
i
ii
iii
sun young ahn l 2016 IVLA
3 Methods: Color data visualization The system checks the value of Saturation for every pixel, and leaves the most vivid color on each grid of the HSB color grid.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Show the most vivid color
3 Sort by Lightness
a b c
50 50 50 57 60 31
39 42 50 50 50 50 50 51 51 52 58 58 59
9
55 61 62 65
d 18 e f
68 70 74
34
15 16 12 13 13 16 17
i
ii
iii
4 Show the Most Vivid Color
a b c
100 99 58 50 49 73
100100100100100 99 97 50 49 47 45 40 34 88 62 59 51
96
....
d 69 e f
75 64 60
48
100100 100100100100 98
i
ii
iii
sun young ahn l 2016 IVLA
3 Methods: Color data visualization The system counts the number of pixels in each grid and shows colors in the circle. The size of each circle is proportional to the number of pixels in every grid.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Count pixel numbers
4 Show the most Vivid Color
a b c
100 99 58 50 49 73
100100100100100 99 97 50 49 47 45 40 34 88 62 59 51
96
d 69 e f
75 64 60
48
100100 100100100100 98
i
ii
iii
5 Count Pixel Numbers
....
a
x5
b
x1
x13
c
x1
x4
d
x1
x1
e
x2
f
x5
i
ii
x3
iii
sun young ahn l 2016 IVLA
3 Methods: Play with patterns Visual blending strategies: Overlapping Users can overlap circles by changing the size of the shapes.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Pattern size
Value:1
Value:4
Value:30
sun young ahn l 2016 IVLA
3 Methods: Play with patterns Visual blending strategies: Distortion Users can add texture by changing the circles to lines.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Add texture
Value:0
Value:1
Value:20
sun young ahn l 2016 IVLA
3 Methods: Play with patterns Visual blending strategies: Transparency Users can change the transparency of the pattern.
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Add Transparency
Value:255
Value:200
Value:100
sun young ahn l 2016 IVLA
3 Methods: Rotate Colors The system creates various color variations by changing the value of the hue. Background: Color wheel and color harmonization theory
1 Pick
2 Visualize
3 Play
4 Rotate Colors
5 Print
Color variations
0°
30°
Monochromatic Analogous
60°
90°
120°
Analogous
Contrasting
Contrasting
150°
180°
210°
Contrasting Complementary Contrasting
240°
Contrasting
270°
Contrasting
300°
Analogous
330°
Analogous
sun young ahn l 2016 IVLA
4. Case Studies Background: In order to apply the application for fashion coordination, I studied scarf color coordination methods.
Scarf color coordination methods
1 Analogous
2 Color Accent
3 Hue Contrast
sun young ahn l 2016 IVLA
4. Case Studies This app allows a user to sample colors from a certain area of his or her outfit or accessory and to utilize the color scheme for scarves.
Scarf color coordination: Analogous/ Accent color coordination Overall match
Overall Match
Match to Accessory
Match to Accessory
Match to Skirt
Match to Skirt
sun young ahn l 2016 IVLA
4. Case Studies The transposition wheel allows a user to easily create various color variations.
Scarf color coordination: Hue contrast coordination
Transposition: 0 degree
Transposition: 180 degree (Complementary)
Transposition: 30 degree (Analogous)
sun young ahn l 2016 IVLA
4. Case Studies The products that were designed by the application, PiC’n Wear.
Final products
sun young ahn l 2016 IVLA
5. Other Applications Reproduction of an Impression: When we recall a certain memory, it comes with a visual impression, a mixture of color information.
Spring, Bloom
March, 2012, by Sun young Ahn, 3264X2448 pixels
sun young ahn l 2016 IVLA
5. Other Applications Reproduction of an Impression: When we recall a certain memory, it comes with a visual impression, a mixture of color information.
Summer, Corn ďŹ eld
June, 2015, by Sun young Ahn, 960X720 pixels
sun young ahn l 2016 IVLA
5. Other Applications Reproduction of an Impression: When we recall a certain memory, it comes with a visual impression, a mixture of color information.
Fall, Foliage
October, 2015, by Sun young Ahn, 2448X3264 pixels
sun young ahn l 2016 IVLA
5. Other Applications Reproduction of an Impression: When we recall a certain memory, it comes with a visual impression, a mixture of color information.
Winter, Snow
January, 2015, by Sun young Ahn, 3264X2448 pixels
sun young ahn l 2016 IVLA
6. Exhibition The patterns and scarves designed by PiC’n Wear were exhibited in the Patti and Rusty Rueff Gallery at Purdue University from Apr. 4th to Apr. 8th in 2016.
Pattern designs and final products
sun young ahn l 2016 IVLA
6. Exhibition People could interact with the application during the exhibition.
Interactive media
sun young ahn l 2016 IVLA
Thank you. Sun young Ahn Visiting Instructor of Visual Communications Design Purdue University email: ahn44@purdue.edu