/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="paper.js"></script>
    <script type="text/paperscript" canvas="mainCanvas">
      var background_color = '#efefef', gray1 = '#696969', gray2 = '#999999';

      outline_width = 1;
      outline_color = gray1;

      var center_x = view.bounds.width * 0.5;
      var center_y = view.bounds.height * 0.5;

      var tree = new Tree();

      function Node(value) {
        this.value = value;
        this.left  = null;
        this.right = null;
        var rect = new Path.Rectangle(new Point(center_x, center_y - 300), new Size(40, 20));
        this.rect = rect;
        rect.strokeWidth = outline_width;
        rect.strokeColor = outline_color;
        var label = new PointText(rect.bounds.x, rect.bounds.y);
        this.label = label
        label.translate(rect.bounds.width*0.5, rect.bounds.height * 0.8);
        label.paragraphStyle.justification = 'center';
        label.fillColor = 'black';
        label.content = value;
      }

      function Tree() {
        this.head = null;
      }

      Tree.prototype.add = function(value) {
        if(this.head == null) {
          this.head = new Node(value);
        } else {
          this.add_recursive(value, this.head);
        }
      }

      Tree.prototype.add_recursive = function(value, node) {
        if(value < node.value) {
          if(node.left == null) {
            node.left = new Node(value);
          } else {
            this.add_recursive(value, node.left)
          }
        } else if(value > node.value) {
          if(node.right == null) {
            node.right = new Node(value);
          } else {
            this.add_recursive(value, node.right)
          }
        }
      }

      var flash_message = new PointText(center_x, 30);
      flash_message.fillColor = 'black';

      // Callbacks
      function onKeyDown(event) {
        var message = flash_message.content
        var digits_regex = /\d/
        if(event.key == 'backspace') {
          flash_message.content = message.substring(0, message.length - 1);
        } else if(event.key == 'enter') {
          tree.add(message);
          flash_message.content = "";
        } else if(digits_regex.test(event.key) && message.length < 3) {
          flash_message.content += event.key
        }
      }
    </script>
  </head>
  <body style="background-color: #EFEFEF;">
    <canvas id="mainCanvas" resize></canvas>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="paper.js"></script>
	<script type="text/paperscript" canvas="mainCanvas">
	var background_color = '#efefef', gray1 = '#696969', gray2 = '#999999';

	outline_width = 1;
	outline_color = gray1;

	var center_x = view.bounds.width * 0.5;
	var center_y = view.bounds.height * 0.5;

	var tree = new Tree();

	function Node(value) {
	this.value = value;
	this.left = null;
	this.right = null;
	var rect = new Path.Rectangle(new Point(center_x, center_y - 300), new Size(40, 20));
	this.rect = rect;
	rect.strokeWidth = outline_width;
	rect.strokeColor = outline_color;
	var label = new PointText(rect.bounds.x, rect.bounds.y);
	this.label = label
	label.translate(rect.bounds.width0.5, rect.bounds.height 0.8);
	label.paragraphStyle.justification = 'center';
	label.fillColor = 'black';
	label.content = value;
	}

	function Tree() {
	this.head = null;
	}

	Tree.prototype.add = function(value) {
	if(this.head == null) {
	this.head = new Node(value);
	} else {
	this.add_recursive(value, this.head);
	}
	}

	Tree.prototype.add_recursive = function(value, node) {
	if(value < node.value) {
	if(node.left == null) {
	node.left = new Node(value);
	} else {
	this.add_recursive(value, node.left)
	}
	} else if(value > node.value) {
	if(node.right == null) {
	node.right = new Node(value);
	} else {
	this.add_recursive(value, node.right)
	}
	}
	}

	var flash_message = new PointText(center_x, 30);
	flash_message.fillColor = 'black';

	// Callbacks
	function onKeyDown(event) {
	var message = flash_message.content
	var digits_regex = /\d/
	if(event.key == 'backspace') {
	flash_message.content = message.substring(0, message.length - 1);
	} else if(event.key == 'enter') {
	tree.add(message);
	flash_message.content = "";
	} else if(digits_regex.test(event.key) && message.length < 3) {
	flash_message.content += event.key
	}
	}
	</script>
	</head>
	<body style="background-color: #EFEFEF;">
	<canvas id="mainCanvas" resize></canvas>
	</body>
	</html>