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