The Layers of the Website

The Layer of the website

When I were designing the website, a book named Ordering Disorder gave me a lot of inspiration. It offered a theory about using grid and proportion  to create simple and balanced design.

Designing grid layouts for the Web By Khoi Vinh

Reference:
1. Ordering Disorder: Grid Principles for Web Design Book(Khoi Vinh, 2010);

Different View of the Dressed Models

4 Views of the body shape

4 Views of the dressed model

As inspired by OptiTex's 3D online model, which use 8 difference views of the model to create a turning animation, here I also create my animation by 4 views when finishing dress up.

A special thank you to Ines who help me design the side  view, also got help for Link and Rudy to figure out the back view.


Reference:
1. OptiTex online 3D model creation(OptiTex International Pty Ltd) [Online] Available from: http://ws.optitex.com/optitexwebapplication/demo/snapmodel.aspx [Accessed 10st Aug. 2012].
2. Figure drawing for fashion design(Drudi, Elisabetta, 2001);
3. Fashion in costume 1200-2000(Nunn, Joan, 2000);
4. Technical drawing for fashion(Szkutnicka, Basia, 2010);

Some Other Character Design in Processing

Trying to realize some characters in Processing, use simple lines and shapes.

Chicken in different angle by Processing

Chicken: Build the body with 360' vertexs, eyes by ellipse, mouth by 4 vertexs, feet by 3 lines.
Dynamic: The body can rotate according to the mouse, also there is some animation of the mouth.

Different Statuses of the Magic Stick

Magic Wand: Build the stick with line, every drop of light with vertex, and rotate 45' each.
Dynamic: The light is always rotating around the stick, normal status is blue, when active it turn orange.

Interface for Facebook

As what we planned for the project, to further these friendly suggestion, we also allow the user to upload the virtual clothing image into popular website like Facebook. For the preparation for this function, we should make an interface for the website by creating an application in Facebook's App Graph API Explorer.

App ID for the project

                             

APP for Cinderella's Magic Mirror

 Here I use Python and Mac OS as the develop environment.  The processing of this development is:
1. Create an App ID;
2. Set up the heroku pkg in your own computer and registe the app account;
3. Remote enter the folder and edit your codes in the Terminal.

Industry Support for the Project

Last week I got in touch with a company(ltshd.com) I used to work for in China, and were surprised to find that they are also thinking about a 3D online dressing project which is very similar to mine. So we exchanged some idea and they agreed to offer me some help on programming and users to test the project.

As for the 3D part, I told them about my biggest challenge in this project, which is that I have to build a lot of model for different body shapes, and they introduced a really helpful website for online 3D model creation named OptiTex.

dressipi.com

As for the fashion rules and the dress suggestion, they suggested me to look into the fashion preference test raise by dressipi.com. What impressed me most it's that they seriously ask about which brands of dress are your favorite so that they can analysis the price and the style you prefer and offer you further suggestion.

As for the data part of my project, in the future I will need many users to test the website and do some data visualization based on the user's behavior in the website. So it's really important for me that they offer me some users to join in this part. And they will also help me to build up the database for the website.

Storyboard Version 2.0

After the first version of the storyboard, I received a lot of suggestion from my supervisors and classmates. So I did these improvement for the 2rd storyboard:

1. Simplify the color in to 4, which will be blue for the usual items, orange for the animated focus characters, and black for lines and text, white for the background.

2. Remove the unrelated things and different style, because the screen of the website is small.

3. For the dressing part, add the way we use in children's dress book.

4. Use the style of water color and childly hand drawing.

Body Shape Test Experiment with Processing

Based on Trinny and Susannah's Body Shape Theory, I'm trying to realize an online test for body shape according to Lisa Rutland's quizz on www.bodyshapestyle.com.

Here I use Processing for programming. Take every question as a 2 branch tree, store the question and answers in the Array, and do some controller work after every mouse click.

The following is the main code for it:

String questions[] = {"Is one part of your body wider than another?",

"Is your stomach your widest part?",

"Do you have a clearly defined waist?",

"Is your waist long and sweeping?",

"Are you tall and slender?",

"Are you a plus size?",

"Is your bottom half your widest part?",

"Do you have a short waist?",

"Do you have saddlebags?",

"Is your top half your widest part?",

"Do your have big breast or soft middle?",

"Are your tall and slender?"

};

String shapes[] = {"Apple", "Brick", "Column", "Cello", "hourglass",

"Bell", "Vase", "Cornet", "Pear", "Skittle", "Lollipop", "Goblet"

};

public void mouseClicked() {

if(currentQ < 12) {

if(mouseY >= 360 || mouseY <= 380) {

if(mouseX >= 510 && mouseX <= 595) {

currentR = true;

nextQuestion();

redraw();

}

else if(mouseX >= 630 && mouseX <= 710) {

currentR = false;

nextQuestion();

redraw();

}

}

}

}

int nextQuestion() {

switch(currentQ) {

case 0:

if(currentR) {

currentQ = 1;

}

else {

currentQ = 2;

}

break;

case 1:

if(currentR) {

currentQ = 12;

shape = 0;

}

else {

currentQ = 6;

}

break;

case 2:

if(currentR) {

currentQ = 3;

}

else {

currentQ = 4;

}

break;

case 3:

if(currentR) {

currentQ = 12;

shape = 6;

}

else {

currentQ = 5;

}

break;

case 4:

if(currentR) {

currentQ = 12;

shape = 2;

}

else {

currentQ = 12;

shape = 1;

}

break;

case 5:

if(currentR) {

currentQ = 12;

shape = 3;

}

else {

currentQ = 12;

shape = 4;

}

break;

case 6:

if(currentR) {

currentQ = 7;

}

else {

currentQ = 9;

}

break;

case 7:

if(currentR) {

currentQ = 12;

shape = 5;

}

else {

currentQ = 8;

}

break;

case 8:

if(currentR) {

currentQ = 12;

shape = 8;

}

else {

currentQ = 12;

shape = 9;

}

break;

case 9:

if(currentR) {

currentQ = 10;

}

break;

case 10:

if(currentR) {

currentQ = 11;

}

else {

currentQ = 12;

shape = 7;

}

break;

case 11:

if(currentR) {

currentQ = 12;

shape = 10;

}

else {

currentQ = 12;

shape = 11;

}

break;

}

return currentQ;

}

I also add some dynamic on it which is for the magic visual effect of the mirror.

Bodyshape  Quizz with the Magic Mirror

Reference:

1. What Trinny and Susannah Body Shape Am I?(Lisa) [Online] Available from: http://bodyshapestyle.com/2011/03/11/what-trinny-and-susannah-body-shape-am-i/ [Accessed 16st May. 2012].

Tutorial Meeting in 2rd Semester

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].

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.

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.

Some Clothing Made with Illustrator

After reading the book The Fashion Designer's Directory of Shape and Form, I tried to create some of the clothing in the book by Illustrator. 

During the process, I thought the life drawing classes do me a great favor, because it gave me the sense of the scale and line of dress according to the human body. And the reflect transfer function of Illustrator also helped me a lot.

Skirt

Top

trousers

Programme of Study Proforma

An Experiment on Image Sprite

I have posted a blog(Image Sprites, Easy Animation) of Image Sprite and I really like this way of animation. In this experiment, I used some open resource images of clothes from zool.com.cn and create a large image as the basic background.

The Basic Background

The Image Frame that Shown On Website

It's glad to see that this experiment go along well with most browser. Feel free to visit it and give me some suggestion.

An Experiment on Realtime Lighting

I always wanted to show light on a website in a way of realtime, which means the lighting a certain object can change according to the movement of the mouse. I read a lot of website then one day I came across an amazing solution on 29a.ch created by Jonas Wagner. Then I fellow him on Twitter and asked if I could use this technique in my project. He's so nice that he gave this permission.

The I read some of him code. What I have to do is to create two image, one is for the normal face, and then use Photoshop or other better tool to revert its color, then the javascript file will use a certain maths principle to help calculate the alpha and color of the position of the mouse above the face image.

The face image

The Reverted Image (by PS)

 In my experiment, I used a picture I took of a castle in Highland, then use Photoshop to make it looked darker and created another image as the lighting image by 'revert' tool. The experiment went good on Chrome and Safari, you may visite it by this link.

The result of this experiment