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.

A New Visual Language: Storytelling

For the last 2 supervisor meeting, Mr O'Neill and I spent a long time discussing what's the relationship of the data visualization and animated interaction part in my project. It's really confusing that why we need this kind of visualization in a fashion adviser website.  So when I find Klanten's book named Visual Storytelling in the library, it really opened my mind.

This new language suggested that there are always questions and curiosity after when audience see the data, these feelings come from their experience of life. And there are also many pieces of funny historical information behind the changing data. If we could introduce the information through some well-known stories, it will help to pass understanding and involve emotion. "The essence of visual storytelling is this combination of emotional reaction and narrative information. "(Andrew Losowsky). Moreover, through the idea of story telling, it's more effective to gather images and interactive design to express the visual concept.

So my goal is to tell the story behind the dresses we show or the choice we made. For example, the style we write for the story by choosing different color or the history of the evening dresses over the past 100 years.

Reference:
R. Klanten (2011) Visual Storytelling: Inspiring a New Visual Language. London, Gestalten.

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

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.