node connect using bezier curve

Author: bk408

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "bezier",
         "lightsalmon",
         "treeutils"
     ]

README.md

@@ -1,4 +1,3 @@
-
 # Process
 
 - Understand the concept
@@ -12,24 +11,27 @@
 - Initialize the canvas dimensions
 - Calculate required width & height to draw the tree structure
 
-
 - create getRequiredHeightAndWidth function in treeUtils.js
 - calculate the height of canvas
-- calculate the width of canvas 
-
+- calculate the width of canvas
 
 - calculate center points
 
-- Create recursivelyDrawNotes function  in drawBinaryTree.js
-- Find x & y - position for circle 
-
+- Create recursivelyDrawNotes function in drawBinaryTree.js
+- Find x & y - position for circle
 
 - Create drawNode function in treeUtils.js
-- Create draw circle, draw border & write value in circle 
+- Create draw circle, draw border & write value in circle
 
--  recursively Left node created  in drawBinaryTree.js
--  recursively Right node created in drawBinaryTree.js
+- recursively Left node created in drawBinaryTree.js
+- recursively Right node created in drawBinaryTree.js
 
 - connectEdges function created in treeUtils.js
 - coordinates create for curve
-- Create draw curve 
+- Create draw curve
+
+- Understand algorithm behind bezier curve, convex hull
+- https://javascript.info/bezier-curve
+
+- Calculate coordinates for bezier curve
+- Node connect using Bezier curve

drawBinaryTree.js

@@ -108,16 +108,37 @@ const node3 = new BinaryTreeNode(3);
 root.setRight(node3);
 
 const node4 = new BinaryTreeNode(4);
-node3.setLeft(node4);
+node2.setLeft(node4);
+
+const node5 = new BinaryTreeNode(5);
+node2.setRight(node5);
+
+const node6 = new BinaryTreeNode(6);
+node3.setLeft(node6);
 
 const node7 = new BinaryTreeNode(7);
 node3.setRight(node7);
 
-const node5 = new BinaryTreeNode(5);
-node2.setLeft(node5);
+const node8 = new BinaryTreeNode(8);
+node4.setLeft(node8);
 
-const node6 = new BinaryTreeNode(6);
-node2.setRight(node6);
+const node9 = new BinaryTreeNode(9);
+node4.setRight(node9);
+
+const node10 = new BinaryTreeNode(10);
+node5.setLeft(node10);
+
+const node11 = new BinaryTreeNode(11);
+node5.setRight(node11);
+
+const node12 = new BinaryTreeNode(12);
+node6.setRight(node12);
+
+const node13 = new BinaryTreeNode(13);
+node7.setLeft(node13);
+
+const node14 = new BinaryTreeNode(14);
+node9.setLeft(node14);
 
 console.log(root);
 

treeutils.js

@@ -48,7 +48,12 @@ export function connectEdges(canvasElement, xCoordinates, yCoordinates) {
   const { xStart, xEnd } = xCoordinates;
   const { yStart, yEnd } = yCoordinates;
 
+  const xHalf = (xStart + xEnd) / 2;
+  const yHalf = (yStart + yEnd) / 2;
+
   const start = { x: xStart, y: yStart };
+  const cPoint1 = { x: xHalf, y: yHalf };
+  const cPoint2 = { x: xEnd, y: yHalf };
   const end = { x: xEnd, y: yEnd };
 
   // draw curve
@@ -57,6 +62,16 @@ export function connectEdges(canvasElement, xCoordinates, yCoordinates) {
   context.beginPath();
   context.strokeStyle = "brown";
   context.moveTo(start.x, start.y);
-  context.lineTo(end.x, end.y);
+
+  context.bezierCurveTo(
+    cPoint1.x,
+    cPoint1.y,
+    cPoint2.x,
+    cPoint2.y,
+    end.x,
+    end.y
+  );
+  // context.lineTo(end.x, end.y);
+
   context.stroke();
 }