Draw a colored binary tree in C#

The example Recursively draw a binary tree in C# shows how to draw a binary tree. This example draws branches at different depths in different colors and with different thicknesses.

The main recursive method in this (and the previous) example is DrawBranch. One of the method's parameters is a Pen that it uses to draw the branch. The only changes needed by this example is to set the Pen's color and thickness depending on the depth of recursion.

The following code shows the DrawBranch method with the modified code shown in blue.

// Recursively draw a binary tree branch.
private void DrawBranch(Graphics gr, Pen pen, int depth, int max_depth, float x, float y,
    float length, float theta, float length_scale, float dtheta)
{
    // See where this branch should end.
    float x1 = (float)(x + length * Math.Cos(theta));
    float y1 = (float)(y + length * Math.Sin(theta));

    // Set the pen's color depending on the depth.
    if (depth == 1) pen.Color = Color.Red;
    else
    {
        int g = 255 * (max_depth - depth) / max_depth;
        int r = 139 * (depth - 3) / max_depth;
        if (r < 0) r = 0;
        int b = 0;
        pen.Color = Color.FromArgb(r, g, b);
    }

    // Set the pen's thickness depending on the depth.
    int thickness = 10 * depth / max_depth;
    if (thickness < 0) thickness = 0;
    pen.Width = thickness;

    // Draw the branch.
    gr.DrawLine(pen, x, y, x1, y1);

    // If depth > 1, draw the attached branches.
    if (depth > 1)
    {
        DrawBranch(gr, pen, depth - 1, max_depth, x1, y1,
            length * length_scale, theta + dtheta, length_scale,
            dtheta);
        DrawBranch(gr, pen, depth - 1, max_depth, x1, y1,
            length * length_scale, theta - dtheta, length_scale,
            dtheta);
    }
}

The method first calculates where the branch it is drawing will end. It then sets the Pen's color and thickness depending on the current depth. In this example, depth decreases the farther the branch is from the tree's root. For this example I made the color red if the branch's depth is 1 meaning it is the last branch in the recursion.

If depth is greater than 1, the color is a shade that starts with brown at the root and growing gradually closer to green at the twigs. The green color component starts at 0 and increases to near 255 at the smallest depth. (Actually it wouldn't reach 255 until depth is 0 but the smallest depth that uses this color shading scheme is 2 so the green component doesn't get all the way to 255. I think this looks a bit better.)

As the green component increases, the red component (which makes brown when mixed with green) decreases. The red component decreases to 0 when depth is 3 and for smaller depths (closer to the twigs) the red component is 0.

Having calculated the branch's color, the method sets the Pen's thickness. The thickness starts at 10 and decreases to 0 as the depth decreases.

After setting the Pen's color and thickness, the method draws its branch. Then if depth is greater than 1, the method recursively calls itself to draw two new branches turned by angles dtheta and -dtheta from the current branch. The new branches' lengths are the length of the current branch times length_scale so branches get shorter as you move out in the tree. (Although you can set length_scale > 1 for some interesting effects.)

By experimenting with the program's parameters, you can get some interesting effects. For example, try Depth = 13 and DTheta = 60. One warning, however. The program draws 2depth - 1 lines so the number of lines grows very quickly as depth increases. Don't try very large depths (for example 50) until you know how fast your computer is.

   

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments
  • No comments exist for this post.
Leave a comment

Submitted comments are subject to moderation before being displayed.

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.