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.
![](http://mathworld.wolfram.com/images/eps-gif/EightCurve_701.gif) |
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);