« Back

Tree drawing

Source — Built with Processing.js — 2011

I was interested to learn that there’s a simple way to draw trees on a coordinate system. First, traverse the tree and number the nodes from left to right for the x-coordinates, then from right to left for the y-coordinates. Draw each node at the appropriate position, and draw lines between nodes. This makes a neat drawing with no crossed lines. It also has the interesting property that all the ancestors of a node will be contained within a rectangle drawn with one corner at the origin and one corner at the node itself.

Click the mouse to regenerate the random tree. Move the mouse over a node to highlight its ancestry rectangle.