12 Body Shape Defined by Hand Drawing

For the getting dress part interaction of my project, I'm doing some modeling simulation for different body shapes base on the theory of Trinny and Susannah's 12 Body Shapes.

The process for my body shape hand drawing is:

1. Visite the Website of Trinny and Susannah, learn about their definition of a certain body shape.  Try to search more information through Google.

2. Find out some famous person in this certain body shape, and get her body measurements through a website named How Much Do They Weight.

3. Enter the data of this person's body size into OptiTex online 3D model creation, create the model and download the image of three angle.

4. Based on the image of the model, draw the 2d image of the character in PhotoShop.

BodyShape: Apple 

Apple Shape is: a big stomach, thick waist, average breasts, a flattish bum and okay legs;
Model: Beth Ditto 39' 33' 41'

BodyShape: Bell

Bell Shape is: small shoulders, small tits, small waist, big thighs, big bottom;
Model: Hillary Clinton 34' 28' 35'

BodyShape: Brick

Brick Shape is: broad shoulders, no waist, average tummy, flat bum, chunky thighs, chunky calves;
Model: Kim Cattrell 34' 27' 35'

BodyShape: Cello

Cello Shape is: big boobs, short waist, big hips, big bottom, big thighs, slim lower legs;
Model: Oprah Winfrey 36' 25' 35'

BodyShape: Column

Column Shape is:  shoulder width the same as hips, slight waist, longer legs;
Model: Nicole Kidman 85/63/86

BodyShape: Cornet

Cornet Shape is: broad shoulders, small boobs, no waist, slim hips, long slim legs;
Model: Cameron Diaz 34' 23' 36'

BodyShape: Goblet

Goblet Shape is: broad shoulders, big boobs, no waist, narrow hips, long legs;
Model: Catherine Zeta Jones 34' 25' 36'

BodyShape: Hourglass

Hourglass Shape is: big tits, small waist, short waist, big hips, generous thighs;
Model: Salma Hayek 36C' 25' 37'

BodyShape: Lollipop

Lollipop Shape is: big tits, slight waist, slim hips, long legs;
Model: Angelina Jolie 36' 27' 36'

BodyShape: Pear

Pear Shape is: small tits, long waist, flat tummy, saddlebags, heavy legs;
Model: Sandra Bullock 34C' 24' 34'

BodyShape: Skittle

Skittle Shape is: average tits, slim waist, ok tummy, big thighs, chunky calves;
Model: Halle Berry 36C' 22' 37'

BodyShape: Vase

Vase Shape is: big tits, gently curving longer waist, hips equal tits, slim thighs and legs;
Model: Kate Winslet 34C' 28' 39'

Reference:
1. The body shape bible(Angie) [Online] Available from: http://youlookfab.com/2007/12/12/the-body-shape-bible/ [Accessed 16st May. 2012].
2. The 12 Shapes Of Trinny and Susannah(Lisa) [Online] Available from: http://bodyshapestyle.com/2008/09/01/the-12-shapes-of-trinny-and-susannah/ [Accessed 16st May. 2012].
3. OptiTex online 3D model creation(OptiTex International Pty Ltd) [Online] Available from: http://ws.optitex.com/optitexwebapplication/demo/snapmodel.aspx [Accessed 16st May. 2012].
4. howmuchdotheyweigh.com(Ever Wonder How Much A Celebrity Weighs?.) [Online] Available from: http://www.howmuchdotheyweigh.com/?s=Kim+Cattrell [Accessed 16st May. 2012].

3D Automatic Models of Different Body Shape

Last week, a friend told me about an amazing 3D modeling web service about fashion design, which is the creation of OptiTex.com.

OptiTex online 3D model creation

As you can see, this service aimed at building a 3D model automatically based on the data of body size the user enter. This service was realized with CAD, what the user get would be a sequence of images of different angle of the model. They only offer a female face and a male face, so the outcome is kind of limited. And as you should enter more than 20 numbers to require a balanced model, the outcome sometimes would need some adjustment. Anyway, this is a convenient service and you can download the image easily.

I'm going to use this service to help me simulate the 12 body shape in Trinny and Susannah's bodyshape theory.

Reference:
1. OptiTex online 3D model creation(OptiTex International Pty Ltd) [Online] Available from: http://ws.optitex.com/optitexwebapplication/demo/snapmodel.aspx [Accessed 16st May. 2012].

Trinny and Susannah's Body Shape Measurement

For a long time I'm thinking about the how could I encourage the user to input their personal body shape data for interaction.  Transitional solution is to ask the user to measure the BWH(breast, waist, hip) number, but it's kind of inconvenient do to this cold hard fact.

After the meeting with Ms. Stevenson,  I began to look back to the lessons by Trinny & Susanah, and find this lovely quiz. I think it's easier to animate and interacte using these measurement. Later I will do an experiment on it.

A Meeting with Ms. Stevenson in Textile Design Office

I made an appointment with Ms. Stevenson in Textile Design Office as Sharon suggested last week, and it turn out to be quite helpful. The main purpose of this meeting was to solve some problem of the dressing part of my project.

For the issue of copyright, Ms. Stevenson suggested that if I use the classic design of certain age, it's unlikely to cause any problem. But I should pay attention that I shouldn't draw out the specific detail of a certain dress.

 For the dress-up rules, she and some other ladies in the office suggested me to look into the shows and books by Trinny&Susannah. And she was also very kind to show me some classic style of 50s and 60s such as vionnet.

So after the meeting, I started to read the books like 20th Century Fashion and tried to do some data visualization in this area.

The First Script & Storyboard and Advice from MAV

Storyboard:

Storyboard Version 1.0

Script:

Characters: Cinderella, Two Stepsisters, Fairy Godmother, Prince Smarmy

Part I: A Small Animation About Cinderella

Cinderella watched her two stepsisters leaving the house, disappeared in the door.

Cinderella: Oh, I really wished to go to the party. All I want is one night, a wonderful evening which is different and happy.

She looked at her grey dress sadly.

Suddenly, the Fairy Godmother appeared with a sparkle.

Fairy: Poor girl, come on, I can help you go to the ball.

Cinderella: But I don’t have an evening dress.

Fairy: I can make one for you. What kind you dress do you want?

Cinderella (said in hesitate): I don’t know. Maybe something like the one my sister dressed tonight?

Fairy: I am worry that style might not fit in you. 

Cinderella: I’m sorry but I really have no idea. I have never go to a ball before.

Fairy (took out a magic mirror): Don’t worry. Just tell me some data about your self? This magic mirror will tell you what you should wear and make you beautiful.

Part II: Data Interaction

Cinderella: Magic Mirror on the wall, what should I wear tonight?

Mirror: I can help you if you tell me your body shape?

(Show several body shapes on the mirror that you can choose)

Cinderella choose the “unknown” option.

Mirror: Well, don’t worry. Just tell me some data of yourself?

Using a fairy stick with sparkle to draw a line on Cinderella’s shoulder, bust, waist, and rise. After each measurement, you can enter the data.

Show the result of the body shape.

Mirror: Good job, now could you tell me the color of your skin and hair?

(Show a color board to choose from.)

Mirror: Hmm, and tell me where you are going to meet you princess tonight?

(Show some occasion.)

Mirror: Great, here’s some advice for you, want to try them on?

(Show several clothes)

Cinderella picked one(in fact, the user did this)

Cinderella got dress and turn around.

(3 Options: 1.Fantasy, exactly what I want; 2. Well, I’m not sure; 3.Oh, I hate it!)

1. Cinderella went with the pumpkin car happily. Then asked the user “do you want to know what most pretty women choose nowadays? If yes, show the data visualization part.

2. Cinderella can watch the data visualization part, or do a test about personal interest, or do a test about the person she is going to me tonight, then get more advice and choose another dress.

3. Cinderella kicked the mirror and choose another dress or do more test.

Mirror: Would you like to tell me your name and a key password so that I can remember you?

Part II: Data Visualization.

Do some visualization effect from the data of the website user and other data about fashion interest.

Context:

Women’s favorite color over the past 10 years;

Dresses over the past 100 years;

Hair styles over the past 100 years;

Classify Data: traditional chart, the tree structure-data, the mesh and relational data, the mutative process data, the sub-category data, the timeline data, the heat map-data, the thematic data, the mutative process data.

Advice:

From Peer Review:

For the dress part, there are still too many models to draw, so maybe I should reduce the animation in this part;

The drawing style seemed much too like a wedding style, I should stand on the water color style I imagined in the beginning.

The animals in the storyboard seemed to be a good idea for interaction. Maybe I should do more in the part.

I should make more connection with the social networks or companies like facebook or ebay.

What's lucky for me is that I could get a lot of help from my classmates.

From my Supervisor Mr. O'Neill:

Cindy has moved forwards with a first attempt at a storyboard for her interface designs. This has been very helpful in supporting discussions about how to develop her ideas. Cindy should continue to develop the story board more fully working through various iterations of her design ideas. This process should help in planning out how things will work in her final project.
 The final project will be completed using processing.js and be delivered as a web based interface.

From Sharon:
The house should be bigger base on the story. For the dressing part, I could learn something from the children's dressing-up book.
For style suggestion, I could ask for some advice from Dan and Ms. Stevenson, who are good at fashion.

Reflective Writing

My project aims at creating an online animated data visualization system, which is based on female style preference and the story context of Cinderella. During the past 5 months, I have done a lot of technical preparation and concept design. When I think back on these times, I’m glad to see that the project have changed so much and everything become more clear.

For the context part, I’m really fond of the idea that as some kind of reflection of real life, data can tell us an interesting story if we could better comunicate with them. In this project, I use the data of figure to find the suitable clothing for women who pursue fitness and beauty. And then the story of Cinderella and Snow White came up to my mind. Sometimes girls might want to be a Cinderella, go to the ball with a shining dress and have a great evening. I hope using some background of the fairytales can make the visualization part more attractive. But as my supervisor suggested, such context will involve massive amount of character design and drawings, so for the next step I will do the storyboard and try to simplify the whole story.

As for the interaction and visualization, I tried to do it on the website with some programming works. The main point is ask the user to input their choices in a friendly way. Based on some research on fashion design and sociology, to gather the information and make up the dressing advice, we need data of occasion, color, age, body size and style preference. To make this part more funny, I will try to do it through the interaction with the magic mirror. And I also had a lot of discussion with my supervisor about the data to be visualize. In the end we came across a useful material, the fashion segments of female types done by Experian United Kingdom, which we believe would answer most people’s curiosity about women’s fashion style preference.

About the technique to realize all these design, at first I were excited by the powerful tool named Processing, but after several test, I’m afraid that it’s not easy to do the whole interaction part and it’s not very friendly to ask the user to wait for the Java environment to set up. And then I was inspired by the Image Sprite which was used by Google Logos and the new technique of HTML5. They own a lot of possibilities in online interactive animation. But still they might be not so enough for the project. In the beginning of this semester, my supervisor suggested me to look into Processing again, and I’m pleased to find that there’s a new tool to translate the processing code into javascript code, which means we can run the Processing programme really fast and cost less resource of the system. So I decided to try finishing the animation part in the language. 

During these five months, I’m afraid I have wasted so much time on hesitating about what to do and whether I could work out what I thought about. Maybe I should have done the storyboard earlier and tried to simplify the project according to the main goal. But I really do enjoy this process of exploration and looking for all these possibilities.

Test on ProcessingJs

test on http://siusinng.webs.com/

Just tried something funny in ProcessingJs, and glad to see that it worked quite well with the website and especially HTML5.

The steps of coding is about:
1. Design the animation and interaction;
2. Programming on Processing in PDE or Eclipse;
3. Do the website stuff and import the .pde you just finished with processingJs.js file, use HTML5 to leave a canvas node. See guidance in the official website http://processingjs.org/articles/p5QuickStart.html.

Something about animation:
1. One important thing is time, use the draw() and redraw() function to adjust the frames.
2.  The color might be different in browsers, do more test.