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; 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, 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 2^{depth} – 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.

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