Characters: the Magical Button

The button is used in the animation part to get access to the next section. Also in the magic mirror part to finish the test choices.

The design is an animation flower which can cause attention and fill with magic. The coding was inspired by a sakura in OpenProcessing, which use offset to simulate a flower.

for (float a = 0; a <= 360; a += 45){

  for(int i = 0; i < 8; i++){

  float f = radians (a+offset+i * 4f);

  float h = radians (b+i * 0.2f);

  noStroke();

    

  float alf = 255f/8f * (float)i;

  fill(c1,c2,c3, alf);

  float x = posX - 30 + cos (f) * (15 + sin (b+i * 0.2f)*20);

  float y = posY - 20 + sin (f) * (15 + sin (b+i * 0.2f)*20);

  ellipse (x, y, abs(sin (b+i * 0.2f)*10), abs(sin (b+i * 0.2f)*10));

  //fill(231-(cos(b)*60), 131, 109);

  }

  }

  b += 0.2;

  offset += 4;

Reference:

1. Openprocessing,桜 byAnastasis Chasandras http://www.openprocessing.org/sketch/10413

Apple Shape Compare

Dresses for Apples Shape with Colors

 

 

 

 

 

 

Basic Body Shapes By AI

 

 

 

Thanks to Ines's help, I managed to simplify the hand drawing of the 12 body shapes last semester with Adobe Illustrator. And as Ines suggested, I added some underwear based on the rules on look-fabulous.com.

Ines's Design of the smooth body shapes

Reference:
1. Figure drawing for fashion design(Drudi, Elisabetta, 2001);
2. Fashion in costume 1200-2000(Nunn, Joan, 2000);
3. Technical drawing for fashion(Szkutnicka, Basia, 2010);
4. Contemporary lingerie design(Dominy, Katie, 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.

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.