# Quadtree visualization in JavaScript

Today's post will be about Quadtrees. I have coded a little visualization, which may help you understand this data structure.

### Hot to use it

Click on the first or second bitmap (A or B) to edit it. Quadtrees of bitmaps are drawn on the right side. Then you can rebuild the last bitmap (C) depending on A and B by clicking the right button.

## What is Quadtree

Quadtree is a data strucutre, which is used to representa bitmap as a tree. Conversion from a bitmap to the tree can be described as follows:

- a tree for a constatn-colored bitmap is a leaf of this color
- otherwise it is an inner node, it's for children are trees for it's for quadrants

## The code

A qadtree node has a method for copying the tree, QNode.Copy(bool p). When "p" is true, it inverts it's colors ("negation").

### Logic operations on trees

function GetLogic(a, b, op) // tree a, tree b, operation, returns tree { if(a.leaf) { if(op=="and") return (a.black ? b.Copy(false) : a.Copy(false)); if(op=="or" ) return (a.black ? a.Copy(false) : b.Copy(false)); if(op=="xor") return (a.black ? b.Copy(true ) : b.Copy(false)); if(op=="min") return (a.black ? b.Copy(true ) : a.Copy(false)); } else if(b.leaf) { if(op=="and") return (b.black ? a.Copy(false) : b.Copy(false)); if(op=="or" ) return (b.black ? b.Copy(false) : a.Copy(false)); if(op=="xor") return (b.black ? a.Copy(true ) : a.Copy(false)); if(op=="min") return (b.black ? b.Copy(true ) : a.Copy(false)); } else { var t = new QNode(); t.c1 = GetLogic(a.c1, b.c1, op); t.c2 = GetLogic(a.c2, b.c2, op); t.c3 = GetLogic(a.c3, b.c3, op); t.c4 = GetLogic(a.c4, b.c4, op); return t; } }