# How to draw a Binary Tree?

**URL:** <https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195>\
**Category:** Coding Questions\
**Created:** [June 19, 2019, 11:41pm UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195 "2019-06-19T23:41:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![demsp](https://avatars.discourse-cdn.com/v4/letter/d/b4bc9f/32.png) [@demsp](https://discourse.processing.org/u/demsp)\
**Post date:** [June 19, 2019, 11:41pm UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/1 "2019-06-19T23:41:38Z")

</div>

This is an [example](https://www.baeldung.com/java-binary-tree) of “Tree in Java”. Can i modify the Node\* class so that to draw the node like so

```auto
class Node {
int value;
int x; // add x-coord
int y; // add y-coord
Node left;
Node right;

Node(int value, int x, int y) {
    this.value = value;
    this.x = x;
    this.y = y;
    right = null;
    left = null; }
}

```

And then how to add x-coord and y-coord into the _BinaryTree_ class?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 20, 2019, 2:47am UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/2 "2019-06-20T02:47:08Z")

</div>

Whoa there partner! Before you go about doing any drawing, make sure you have both a `setup()` and `draw()` function!

One will define the sketch’s `background()` color. The other determines the sketch’s `size()`.

Start by posting some code that does that and then we will get to drawing objects!

---

<div class="post-metadata">

**Author:** ![demsp](https://avatars.discourse-cdn.com/v4/letter/d/b4bc9f/32.png) [@demsp](https://discourse.processing.org/u/demsp)\
**Post date:** [June 20, 2019, 3:58am UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/3 "2019-06-20T03:58:12Z")

</div>

yes, i have this setup() and draw() functions.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 20, 2019, 4:57am UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/4 "2019-06-20T04:57:49Z")

</div>

Alright. So in your setup() function, you want to make sure that your root node is a Node.

In your draw function, you want to call your Node’s draw method.

So you have this:

```auto
class Node {
  Node() {
  }
  void display(){
  }
}

Node root;

void setup(){
  size(600,400);
  root = new Node();
}

void draw(){
  background(0);
  root.display();
}

```

Of course, you’ll want to actually draw something is the Node’s display method. Maybe an ellipse?

```auto
ellipse(0,0,50,50);

```

---

<div class="post-metadata">

**Author:** ![demsp](https://avatars.discourse-cdn.com/v4/letter/d/b4bc9f/32.png) [@demsp](https://discourse.processing.org/u/demsp)\
**Post date:** [June 20, 2019, 6:10am UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/5 "2019-06-20T06:10:17Z")

</div>

oh, but a Node is just the leaf of the Tree. Where is the Tree itself?  
i mean something like this: we have a Node

```auto
class Node {
  Node() { }  
}

```

we have a Tree

```auto
public class BinaryTree {
    Node root;
public void add(int value) {  
if (root == null) { // create one-time single node  
root= new Node(value); }
// add left- and right-nodes recursively
if (value < root.value) {  
    root.left= addRecursive(root, value);  
    } else if (value > root.value) {  
       root.right= addRecursive(root, value); } 
 }
private Node addRecursive(Node current, int value) {      
    if (current == null) {     
        return new Node(value);
    }    
    if (value < current.value) {
       current.left = addRecursive(current.left, value);
    } else if (value > current.value) {
        current.right = addRecursive(current.right, value); 
    }
    return current;
}

```

then define the Tree and initialize it in setup() function

```auto
BinaryTree bt;
void setup(){
BinaryTree bt = new BinaryTree();    
    bt.add(1);
    bt.add(2);
    bt.add(3);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 20, 2019, 9:34am UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/6 "2019-06-20T09:34:26Z")

</div>

For a start do not include fields for the X and Y coordinates in the Node class. The reason being that adding and removing nodes from the tree will affect the position of other nodes and you don’t want to traverse the tree to recalculate their positions.

The solution is to create a recursive function in the node class to draw the tree something like this

```auto
void show(int x, int y){
  // code to draw this node at xy
  if(left != null){
    left.show(x - 40, y + 20); // left and down
  }
  if(right != null){
    right.show(x + 40, y + 20); // right and down
  }
}

```

Also you have not defined what should happen when you add a node with the same value as an existing node, you have assumed all nodes will have a unique value.

---

<div class="post-metadata">

**Author:** ![demsp](https://avatars.discourse-cdn.com/v4/letter/d/b4bc9f/32.png) [@demsp](https://discourse.processing.org/u/demsp)\
**Post date:** [June 21, 2019, 9:20pm UTC](https://discourse.processing.org/t/how-to-draw-a-binary-tree/12195/7 "2019-06-21T21:20:11Z")

</div>

Yes, it works, thanks)