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