Overview of the Project

Part I: Animation of Cinderella

Aim: Specify the user requirements with the story background of Cinderella.
Technique: ProcessingJs, HTML5, AI, PS;

Practice:
a. Script Writing;

• The First Script & Storyboard and Advice from MAV;
• Storyboard Version 2.0;

b. Character Design;

• Characters: Chicks and Clouds;
• Characters: Trees;
• Characters: the House；
• Characters: Cinderella and Fairy;
• Characters: The Sisters；
• Characters: the Magical Button;

c. Technique:

• Interface for Facebook;
• An Experiment on Realtime Lighting；

Research:
1. the story of Cinderella;

• The Story: Orignal Cinderella and Movies;
• Cinderella by Phil Porter;
• The Story of Cinderella;

2. ProcessingJs, HTML and the Coding of animation.

• Image Sprites, Easy Animation;
• Hair Ball, an Animation Using Processing;
• Lightweight Online Animation Using HTML5;

3. Character Design and the use of mathematics.

• Some Other Character Design in Processing；
• Industry Support for the Project；
• Test on ProcessingJs;

Part II: Magic Mirror

Aim: Visualise Susanna & Trinny's body shape dressing rules.
Technique: ProcessingJs, HTML5, AI, PS;

Practice:
a. Body shape Drawing;

• Some Clothing Made with Illustrator;
• 12 Body Shape Defined by Hand Drawing;
• Different View of the Dressed Models;
• Apple Shape Compare；
• Dresses for Apples Shape with Colors;
• Basic Body Shapes By AI；

b. Magic Mirror Design and Interaction;

• Characters: the Magic Mirror;
• Characters: the Magical Button;

c. Bodyshape Test and Color Test:

• Body Shape Test Experiment with Processing;

Research:
1. Fashion Rules;

• A Meeting with Ms. Stevenson in Textile Design Office;
• Trinny and Susannah's Body Shape Measurement；
• The Data I Will Collect and Their Interaction;
• Choose Your Color；
• Dressing for Occasion;
• Dress According to Your Body Shape；
• Some Important Principles of Getting Dress;

2. Mirror.

• Something About a Magic Mirror；

3. Online Interaction.

• 3D Automatic Models of Different Body Shape；
• Industry Support for the Project；

Part III: Others

Practice:

1. The Layers of the Website.
2. A New Visual Language: Storytelling;

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

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

The Story: Orignal Cinderella and Movies

Talking about the story background of the project, Sharon suggesting me to read the original version of Cinderella's story. So I looked up the story on the internet and found some very interesting elements that I'm glad to use in my own project.

One is the pigeons who helped Cinderella to alight amongst the ashes. In the story, it's said that "(birds)odded with their heads and began pick", singing "The good into the pot,The bad into the crop." In my project, I simplified them into three chicks talking about Cinderella's wish.

Also in the story, there's a hazel-tree helping Cinderella when she begged "Shiver and quiver, my little tree,Silver and gold throw down over me". Here I drew 3 tree in the farm who can wave there leaves when them heart Cinderella's words.

I also watched Andy Tennant's Ever After: A Cinderella Story (1998). What impressed me was that her two sister didn't have to be ugly or really so bad. It's that they were so beautiful and proud made Cinderella think the ball will be a place to find happiness. So in my project I showed two girls dressed up with really glamour.

Reference:
1. Cinderella by The Brothers Grimm, translated by Margaret Taylor (1884)(http://classiclit.about.com/library/bl-etexts/grimm/bl-grimm-cinderella.htm);
2. Ever After: A Cinderella Story (1998)(http://www.youtube.com/watch?v=Hcj9fyx6DXI;

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: Trees

Trees made with ProcessingJs

Here the tree are also produced by codes instead of images, which can wave there leaves and branches in the winds while talking. Also can scale the size and translate the position.

The original idea about the leaves and branches were inspired by a Tree in openprocessing, made by Evelyn Eastmond.

a Tree made by Evelyn Eastmond.

In this project, I did a lot of test to make the tree fit in the scene, which limited the arc of the branches to random(20,50) or  random(-50,-20), and the lenth to be random(50,80). For animation, random draw the branch while the depth > 6.

void drawTree(){

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

textSize(12);

text ( speak, xpos + 20, ypos + 90, 150, 100);

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

translate(xpos, ypos);

int depth = 11;

strokeWeight(depth*scale);

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

line(0,130*scale,0,0);

branch(depth);

translate(-xpos, -ypos);

}

void branch(int depth){

  pushMatrix();                    // store the old state

  if(depth < wind)

  rotate(radians((int)rotation1[depth]  + random(2.0f)));   // rotate

  else

  rotate(radians((int)rotation1[depth]));

  leaf(depth);                // and draw one branch

  popMatrix();                     // go back to old state

  pushMatrix();                    // store the old state

  if(depth < wind)

  rotate(radians((int)rotation2[depth]  + random(2.0f)));   // rotate

  else

  rotate(radians((int)rotation2[depth]));

  leaf(depth);                // and draw another branch

  popMatrix();                     // go back to old state

}

void leaf(int depth) {

  scale(0.8f);

  int len = (int)(lenth[depth]);

  translate(0,-len*scale);

  strokeWeight(depth*scale);

  line(0,len*scale,0,0);

  float t = random(0,2);

  fill(green.getRed(), green.getGreen(), (int)(green.getBlue() * 0.01 *(random(80, 100))));

  if(depth == 0) {ellipse(0,0,70*scale,80*scale);}

  if(depth > 0) branch(depth-1);

}

Reference:

1. Algorithms for visual design using the Processing language(Terzidis, Kostas, 2009);

2. Processing(Greenberg, Ira, 2007);

3. Tree by Evelyn Eastmond (http://www.openprocessing.org/sketch/1249);