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