Draw a colored binary tree in C#

[colored binary tree]

This example shows how you can modify the example Recursively draw a binary tree in C# to draw a colored binary tree. It 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 new version’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;
        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,
        DrawBranch(gr, pen, depth - 1, max_depth, x1, y1,
            length * length_scale, theta - dtheta, length_scale,

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, thickness 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 grows 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 to get some interesting effects.)

By experimenting with the program’s parameters, you can get some interesting results. 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.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in algorithms, drawing, fractals, graphics and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

1 Response to Draw a colored binary tree in C#

  1. Pingback: Draw a breadth-first colored binary tree in C# - C# HelperC# Helper

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.