8/10/12

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;
Research:
1. the story of Cinderella;


2. ProcessingJs, HTML and the Coding of animation.


3. Character Design and the use of mathematics.

Part II: Magic Mirror

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

2. Mirror.



3. Online Interaction.

Part III: Others

Practice:

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.
x=asint

y=asintcost.


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, xposfootLen * 0.7f, yposfootLen * 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, yposwingPosY3);
    triangle(xpos - wingPosX1, ypos - wingPosY1,xpos  - wingPosX2, ypos - wingPosY2,xpos - wingPosX3 , yposwingPosY3);
  }
  else {
  triangle(xpos + wingPosX1, ypos - wingPosY1,xpos  + wingPosX2, ypos - wingPosY2,xpos + wingPosX4, yposwingPosY4);
  triangle(xpos - wingPosX1, ypos - wingPosY1,xpos  - wingPosX2, ypos - wingPosY2,xpos - wingPosX4 , yposwingPosY4);
  }
  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);