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);

Characters: the Magic Mirror

The magic mirror is an important part in my project to help the user choose their dress by finishing a body shape test and a color test.

As Ines's suggestion, I used a vintage style to create an old fashion and mystery feeling. The outer gold barrier were created in AI. Then spread some golden sparkles with processing coding, dividing then to difference Alpha value.

Sparkle() {

    angle = random(0, 360);

    shift = 0;

    shiftSpeed = random(-0.01f, 0.01f);

    widthLimit = (float)rnd.nextGaussian() * 50;

    angularSpeed = random(PI/720, PI/180);

    float tmp = random(0,1);

    if (tmp < 0.4) {

      //c = new Color(72,7,1);

    c = new Color(134,80,16);

    } else if (tmp < 0.8) {

    //c = new Color(113,28,0);

    c = new Color(215,179,101);

    } else {

    //c = new Color(157,73,26);

    c = new Color(212,217,213);

    }

  }

   

  void move() {

    angle += angularSpeed;

    if (angle > 360) {

      angle -= 360;

    }

    shift += shiftSpeed;    

    shiftSpeed += random( -0.05f, 0.05f );

    if (shift > widthLimit) {

      shiftSpeed = 0;

    }

    else if (shift < -widthLimit) {

      shiftSpeed = Math.abs(shiftSpeed) * 0.5f;

    }

  }

To make the interacted effect more magical, I add an water spreading effect when the mouse is in the mirror, which was inspired by the Magic Water Effect of Rodrigo Amaya in OpenProcessing.

void waterEffect() {

  //Toggle maps each frame

  i=oldind;

  oldind=newind;

  newind=i;

  i=0;

  mapind=oldind;

  for (int y=0;y<height;y++) {

    for (int x=0;x<width;x++) {

  short data = (short)((ripplemap[mapind-width]+ripplemap[mapind+width]+ripplemap[mapind-1]+ripplemap[mapind+1])>>1);

      data -= ripplemap[newind+i];

      data -= data >> 5;

      ripplemap[newind+i]=data;

  //where data=0 then still, where data>0 then wave

  data = (short)(1024-data);

      //offsets

  a=((x-hwidth)*data/1024)+hwidth;

      b=((y-hheight)*data/1024)+hheight;

    //bounds check

      if (a>=width) a=width-1;

      if (a<0) a=0;

      if (b>=height) b=height-1;

      if (b<0) b=0;

      ripple[i]=texture[a+(b*width)];

      mapind++;

  i++;

    }

  }

}

Reference:
1. Algorithms for visual design using the Processing language(Terzidis, Kostas, 2009);
2. Processing(Greenberg, Ira, 2007);
3. Magic Water Effect by Rodrigo Amaya (http://www.openprocessing.org/sketch/43543);

Characters: Chicks and Clouds

   

In the Brothers Grimm's original story, it's the pigeons who help Cinderella pick up the beans. "And the pigeons nodded with their heads and began pick, pick, pick, pick, and the rest began also pick, pick, pick, pick, and gathered all the good grains into the dish".

Here we suppose Cinderella lived in a little farm, so the pigeons are simplified as three little chicks. The animation of them is to wave their wings, shake the body and talk with each other so that they can tell the situation of Cinderella. 

Eight Curve

The algorithm designed for the chicks are inspired by a curve named  Eight Curve.

So that change the pushMatrix and rotate function we can see the chick moving.

void draw() {

  strokeWeight(bodyStroke);

  stroke(brown.getRed(), brown.getGreen(), brown.getBlue());

  fill(yellow.getRed(), yellow.getGreen(), yellow.getBlue());

  //http://mathworld.wolfram.com/EightCurve.html

  pushMatrix();

  translate(xpos, ypos - yTrans);

  rotate(-HALF_PI + (rotate + bodyAnimations)/PI);

  beginShape();

  for (int i=180; i<360; i++)

  {

    float x = sin( radians(i) ) * radius;

    //The exponent a controls the shape of the curve

    float y = cos( radians(i) ) * sin( radians(i) ) * radius;

    vertex(x, y);

  }

  endShape();

  popMatrix();

 

  line(xpos-footLen, ypos - footLen , xpos- footLen, ypos+ footLen * 0.5f);

  line(xpos-footLen, ypos+ footLen * 0.5f, xpos- footLen * 1.3f, ypos + footLen * 0.8f);

  line(xpos-footLen, ypos+ footLen * 0.5f, xpos -  footLen * 0.7f, ypos+  footLen * 0.8f);

  line(xpos+footLen, ypos- footLen, xpos + footLen, ypos+ footLen * 0.5f + feetAnimations);

  line(xpos+footLen, ypos+ footLen * 0.5f + feetAnimations, xpos+ footLen * 1.3f, ypos + footLen * 0.8f + feetAnimations);

  line(xpos+footLen, ypos+ footLen * 0.5f + feetAnimations, xpos+7, ypos+ footLen * 0.8f + feetAnimations);

  fill(brown.getRed(), brown.getGreen(), brown.getBlue());

  if( words.length() > 0 && words.length()  % 2 == 0) {

  triangle(xpos + wingPosX1, ypos - wingPosY1,xpos  + wingPosX2, ypos - wingPosY2,xpos + wingPosX3, ypos -  wingPosY3);

    triangle(xpos - wingPosX1, ypos - wingPosY1,xpos  - wingPosX2, ypos - wingPosY2,xpos - wingPosX3 , ypos -  wingPosY3);

  }

  else {

  triangle(xpos + wingPosX1, ypos - wingPosY1,xpos  + wingPosX2, ypos - wingPosY2,xpos + wingPosX4, ypos -  wingPosY4);

  triangle(xpos - wingPosX1, ypos - wingPosY1,xpos  - wingPosX2, ypos - wingPosY2,xpos - wingPosX4 , ypos -  wingPosY4);

  }

  fill(yellow.getRed(), yellow.getGreen(), yellow.getBlue());

  if( tLorR) {

  ellipse(xpos + eyesPosX, ypos-eyesPosY, mouthStroke, mouthStroke);

  ellipse(xpos-eyesPosX, ypos-eyesPosY, mouthStroke, mouthStroke);

  } else {

  ellipse(xpos + eyesPosX * 1.2f, ypos-eyesPosY, mouthStroke, mouthStroke);

  ellipse(xpos - eyesPosX * 0.8f, ypos-eyesPosY, mouthStroke, mouthStroke);

  }

 

  strokeJoin(ROUND);

  strokeWeight(mouthStroke);

  fill(red.getRed(), red.getGreen(), red.getBlue());

  beginShape();

  if( tLorR ) {

  if( words.length() > 0 && words.length()  % 2 == 0)

  triangle(xpos + mouthPosX1,ypos - mouthPosY1,xpos + mouthPosX2, ypos - mouthPosY2,xpos - mouthPosX2, ypos - mouthPosY2);

  else

  triangle(xpos + mouthPosX1,ypos - mouthPosY1,xpos + mouthPosX2, ypos - mouthPosY3, xpos - mouthPosX2, ypos - mouthPosY2);

  } else {

  if( words.length() > 0 && words.length()  % 2 == 0)

  triangle(xpos + mouthPosX2, ypos - mouthPosY1,xpos + mouthPosX1, ypos - mouthPosY2,xpos + mouthPosX3, ypos - mouthPosY2);

  else

  triangle(xpos + mouthPosX2, ypos - mouthPosY1,xpos + mouthPosX1, ypos - mouthPosY3,xpos + mouthPosX3, ypos - mouthPosY2);

  }

  endShape();

  strokeWeight(3);

  fill(brown.getRed(), brown.getGreen(), brown.getBlue());

  textSize(11);

  if(tLorR)

  text ( words, xpos - textPosX * 10.0f, ypos - textPosY - 30, 150, 100);

  else

  text ( words, xpos + textPosX, ypos - textPosY, 150, 100);

  fill(yellow.getRed(), yellow.getGreen(), yellow.getBlue());

  }

The cloud are made of several random ellipse so that they can be seem as floating in the sky.

void draw() {

fill(255);

pushMatrix();

scale(scale);

noStroke();

// cloud 1

ellipse(xpos, ypos, 40 + random(12), 40 + random(12));

ellipse(xpos +25 + random(5), ypos +25+ random(8), 40 + random(12), 40 + random(12));

ellipse(xpos - 15 -random(5), ypos +35 + random(8), 80 + random(12), 80 + random(12));

ellipse(xpos -55-random(5), ypos + 45+random(8), 60 + random(12), 60 + random(12));

popMatrix();

}


Reference:
1. Algorithms for visual design using the Processing language(Terzidis, Kostas, 2009);
2. Processing(Greenberg, Ira, 2007);
3. Eight Curve (http://mathworld.wolfram.com/EightCurve.html);

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

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

The Data I Will Collect and Their Interaction

As my project is an experiment of information graphic, it's certain that data will play an important role in it. To find out the user's preference of dressing, we need data of fashion, such as body shapes, colors, occasions and personal styles.

I have posted several blogs about these fashion definitions, so here I will focus on the measurement of the data. I did some search in the library, but wasn't able to find any clear tool of this. So I have to get some information from the internet, and I was glad to find a website named 'the chic fashionista' which offers many useful way to measure the body shape and so on. Here's the data I will use in my project:

• For Body Shape(Summarize from HOW TO TAKE ACCURATE BODY MEASUREMENTS  )

1. Shoulder Line: A straight line from one outer edge to the other;

2. Bust Line: Around the fullest part of the chest;

3. Waist Line: Around the narrowest part of the torso, avoid holding breath;

4. Hips Line: Around the widest part of the hips, with feet close together;

5. Rise: A line from natural waist down to crotch;

6. Inseam: Crotch to the inside of ankle.

Interaction: The user should be able to input these data and let the future website to calculate their body shape, or they could just choose the body shape from the 5 images we offer.

• For Occasions

The different kinds of Occasions have been summarized in the blog occasions.

Interaction: The user should be able to choose the occasion from a list of images or small animations.

• For Colors(Summarize from SEASONAL COLOR ANALYSIS)

1. The quality of skin tone;
2. The color of hair;
3. The color of eyes;

Interaction: A cute face should be offer on the website that users could choose the color of their skin, hair and eyes from a list and the face will change according to their options.

• For Styles(Summarize from Fashion Style Quiz)

1. Options: classic, trendy, dramatic, eclectic, romantic, Bohemian, sporty, urban;
Interaction: All of these styles could be chosen from a list of cute animations.

• For Registration and Login

1. User name(Neccesary);
2. Password(Neccesary)
3. Email(Neccesary)
4. Age(Optional)
5. Job(Optional)

Interaction: The user name and email should be check in real time from the database, job could be picked up from a provided list.

All these datas should be saved in a database, use the username name as the key, to produce a profile for the users.

Something About a Magic Mirror

Tell Me, Magic Mirror!(Sorry, I couldn't find the artist)

I came across the idea of data visualisation about personal preference when I saw this picture last year.  I hope someday this project can really tell girls the ways to get beautiful be analysis the data of themselves. Anyway, what I want to talk about here is the relation among women, dress and mirror.

In the story of Snow White, the queens always wanted to get information about 'the fairest' from her magic mirror. In fact, she just wanted get admiration from it. As Woodward says in her book, the importance of a mirror is that 'Looking in the mirror is therefore a marriage of the intimate and the generic, as women consider their own dressed bodies in light of wider social ideals and expectations.' According to her theory, when a women find the girl in the mirror is exactly the one fits her imagination of herself and what she want the society to see as 'her', she will find this fits. That's why occasion,  body shape finess and preference colors are important factors when choosing the prefect dress.

That's why sometimes it's funny that we such a different 'me' in the mirror.

Can you spot your REAL shape? from dailymail.co.uk

In our last meeting, Dr. O'neill sent me an interesting website name Can you spot your real shape? This article describe an experiment that when looking at the same body shape, women see different shapes according to their expectation of themselves. So as for my project, I thing it's important that the user should tell the website some data of themselves before the advice about what 'fits' the user.

Another interesting question is that what will people usually do in front of a mirror? Here's something I read and find in life:
1. Really look at myself;
2. Try the clothes on, look carefully, turn around;
3. Take off the clothes, change to another one;
4. 2<-->3;
5. Smile when it looks good, or even dance with it;
6. Angry or disappointed when it doesn't fit, or even kick the mirror;
7. Talk to myself.


Reference:
Sophie Woodward(2007) Why Women Wear What They Wear. Oxford, Oxford International Publishers Ltd.

Interaction among Apparel, People, and Mirrors

During the reading, I spent 2 days to visit the museums in Edinburgh, and this really gave me a lot inspiration. Here are some interesting methods they use for people interact with apparel.

Mirror, Drawing and Dresses(From Museum of Edinburgh)

To display the old fashion of Edinburgh, the museum show some real clothes besides some drawing above the closet. The mirror nearby gives the visitor an impulse to try them on.

An Rotating Closet(from National Museum of Scotland)

This is really cool! By rotating different level of the closet, visitor can make the role drawing on the cylinder change their apparel. It's funny and easy, children love it. I think it's also useful for my project.