diff --git a/animations/trees/morris/morris_in_order.html b/animations/trees/morris/morris_in_order.html index c44be7f..c9e0d83 100644 --- a/animations/trees/morris/morris_in_order.html +++ b/animations/trees/morris/morris_in_order.html @@ -2,7 +2,7 @@ Morris Traversal In Order - + @@ -99,8 +99,9 @@ //Making all the nodes for the flowchart + var start_from_root = new Konva.Rect({ - x: 975, + x: 750, y: 50, width: 150, height: 50, @@ -110,7 +111,7 @@ }); layer.add(start_from_root); var label1 = new Konva.Text({ - x: 985, + x: 755, y: 60, text: 'Start from Root', fontSize: 20, @@ -118,6 +119,122 @@ }); layer.add(label1); + var is_current_null = new Konva.Rect({ + x: 975, + y: 50, + width: 150, + height: 50, + fill: 'white', + stroke: 'black', + strokeWidth: 2 + }); + layer.add(is_current_null); + + var label12 = new Konva.Text({ + x: 975, + y: 50, + text: 'Is current null?', + fontSize: 20, + width: 155, + padding: 10, + fill: 'black', + align: 'center' + }); + layer.add(label12); + + var arrow10 = new Konva.Arrow({ + x: 900, + y: 75, + points:[0, 0, 70, 0], + fill: 'black', + stroke: 'black', + strokeWidth: 4 + + }); + layer.add(arrow10); + + var end_rect = new Konva.Rect({ + x: 1200, + y: 50, + width: 150, + height: 50, + fill: 'white', + stroke: 'black', + strokeWidth: 2 + }); + layer.add(end_rect); + + var label13 = new Konva.Text({ + x: 1200, + y: 50, + text: 'End', + fontSize: 20, + width: 155, + padding: 10, + fill: 'black', + align: 'center' + }); + layer.add(label13); + + var arrow11 = new Konva.Arrow({ + x: 1125, + y: 75, + points:[0, 0, 70, 0], + fill: 'black', + stroke: 'black', + strokeWidth: 4 + + }); + layer.add(arrow11); + + var not_null_rect = new Konva.Rect({ + x:1060, + y:105, + width: 40, + height: 30, + fill: 'white', + strokeWidth: 2 + }); + layer.add(not_null_rect); + + var not_null = new Konva.Text({ + x: 1000, + y: 100, + text: 'No', + fontSize: 20, + width: 155, + padding: 10, + fill: 'black', + align: 'center' + }); + layer.add(not_null); + + var yes_null_rect = new Konva.Rect({ + x:1130, + y:40, + width: 50, + height: 30, + fill: 'white', + strokeWidth: 2 + }); + layer.add(yes_null_rect); + + var yes_null = new Konva.Text({ + x: 1075, + y: 40, + text: 'Yes', + fontSize: 20, + width: 155, + padding: 10, + fill: 'black', + align: 'center' + }); + layer.add(yes_null); + + + + + var left_subtree_null = new Konva.Rect({ x: 950, @@ -186,7 +303,7 @@ var arrow3 = new Konva.Arrow({ x: 800, y: 325, - points:[0, 0, -30, 0, -30, -150, 145, -150], + points:[0, 0, -30, 0, -30, -150, 175, -225], fill: 'black', stroke: 'black', strokeWidth: 4 @@ -287,9 +404,9 @@ layer.add(label6); var arrow6 = new Konva.Arrow({ - x: 1050, - y: 600, - points: [0, 0, 0, -395], + x: 950, + y: 655, + points: [0, 0, -180, 0, -180, -325], fill: 'black', stroke: 'black', strokeWidth: 4 @@ -342,7 +459,7 @@ var arrow9 = new Konva.Arrow({ x: 1395, y: 600, - points: [0, 0, 0, -425, -240, -425], + points: [0, 0, 0, -425, -265, -500], fill: 'black', stroke: 'black', strokeWidth: 4 @@ -467,22 +584,6 @@ }); layer.add(predecessor); - var endRect = new Konva.Rect({ - x: 100, - y: 200, - width: 120, - height: 20, - fill: 'red' - }); - layer.add(endRect); - var endCondition = new Konva.Text({ - x: 100, - y: 200, - text: 'end condition', - fontSize: 20, - fill:'black' - }); - layer.add(endCondition); var console_text = new Konva.Text({ x: 300, @@ -554,71 +655,90 @@ break; case 2: start_from_root.fill('white'); - left_subtree_null.fill('yellow'); + is_current_null.fill('yellow'); layer.draw(); break; case 3: - no_rect.fill('yellow'); + not_null_rect.fill('yellow'); layer.draw(); break; case 4: + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); + layer.draw(); + break; + case 5: + no_rect.fill('yellow'); + layer.draw(); + break; + case 6: left_subtree_null.fill('white'); no_rect.fill('white'); find_inorder_predecessor.fill('yellow'); stage.find('#node_2')[0].fill('lime'); layer.draw(); break; - case 5: + case 7: stage.find('#node_2')[0].fill('white'); stage.find('#node_5')[0].fill('lime'); layer.draw(); break; - case 6: + case 8: stage.find('#node_5')[0].fill('white'); stage.find('#node_7')[0].fill('lime'); layer.draw(); break; - case 7: + case 9: find_inorder_predecessor.fill('white'); where_right.fill('yellow'); layer.draw(); break; - case 8: + case 10: null_rect.fill('yellow'); layer.draw(); break; - case 9: + case 11: where_right.fill('white'); null_rect.fill('white'); set_current.fill('yellow'); layer.draw(); break; - case 10: + case 12: node7to1.show(); layer.draw(); break; - case 11: + case 13: stage.find('#node_1')[0].fill('white'); stage.find('#node_2')[0].fill('yellow'); layer.draw(); break; - case 12: + case 14: set_current.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 15: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 16: + is_current_null.fill('white'); + not_null_rect.fill('white'); left_subtree_null.fill('yellow'); layer.draw(); break; - - case 13: + case 17: no_rect.fill('yellow'); layer.draw(); break; - case 14: + case 18: left_subtree_null.fill('white'); no_rect.fill('white'); find_inorder_predecessor.fill('yellow'); @@ -627,250 +747,230 @@ layer.draw(); break; - case 15: + case 19: find_inorder_predecessor.fill('white'); where_right.fill('yellow'); layer.draw(); break; - case 16: + case 20: null_rect.fill('yellow'); layer.draw(); break; - case 17: + case 21: where_right.fill('white'); null_rect.fill('white'); set_current.fill('yellow'); layer.draw(); break; - case 18: + case 22: node4to2.show(); layer.draw(); break; - case 19: + case 23: stage.find('#node_2')[0].fill('white'); stage.find('#node_4')[0].fill('yellow'); layer.draw(); break; - case 20: + case 24: set_current.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 25: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 26: + is_current_null.fill('white'); + not_null_rect.fill('white'); left_subtree_null.fill('yellow'); layer.draw(); break; - - case 21: + case 27: yes_rect.fill('yellow'); layer.draw(); break; - case 22: + case 28: left_subtree_null.fill('white'); yes_rect.fill('white'); print_move_right.fill('yellow'); layer.draw(); break; - case 23: + case 29: console_text.text('Console:\n4'); layer.draw(); break; - case 24: + case 30: stage.find('#node_4')[0].fill('white'); stage.find('#node_2')[0].fill('yellow'); layer.draw(); break; - case 25: - print_move_right.fill('white'); - left_subtree_null.fill('yellow'); - layer.draw(); - break; - - case 26: - no_rect.fill('yellow'); - layer.draw(); - break; - - case 27: - left_subtree_null.fill('white'); - no_rect.fill('white'); - find_inorder_predecessor.fill('yellow'); - layer.draw(); - break; - case 28: - stage.find('#node_4')[0].fill('lime'); - layer.draw(); - break; - - case 29: - find_inorder_predecessor.fill('white'); - where_right.fill('yellow'); - layer.draw(); - break; - case 30: - current_rect.fill('yellow'); - layer.draw(); - break; case 31: - where_right.fill('white'); - current_rect.fill('white'); - set_null.fill('yellow'); + print_move_right.fill('white'); + is_current_null.fill('yellow'); layer.draw(); break; case 32: - node4to2.hide(); - console_text.text('Console:\n4 2'); + not_null_rect.fill('yellow'); layer.draw(); break; - case 33: - stage.find('#node_4')[0].fill('white'); - stage.find('#node_2')[0].fill('white'); - stage.find('#node_5')[0].fill('yellow'); + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); layer.draw(); break; case 34: - set_null.fill('white'); - left_subtree_null.fill('yellow'); + no_rect.fill('yellow'); layer.draw(); break; case 35: - no_rect.fill('yellow'); - layer.draw(); - break; - case 36: left_subtree_null.fill('white'); no_rect.fill('white'); find_inorder_predecessor.fill('yellow'); - stage.find('#node_6')[0].fill('lime'); layer.draw(); break; + case 36: + stage.find('#node_4')[0].fill('lime'); + layer.draw(); + break; + case 37: find_inorder_predecessor.fill('white'); where_right.fill('yellow'); layer.draw(); break; case 38: - null_rect.fill('yellow'); - layer.draw(); - break; - case 39: - where_right.fill('white'); - null_rect.fill('white'); - set_current.fill('yellow'); - layer.draw(); - break; - case 40: - node6to5.show(); - layer.draw(); - break; - case 41: - stage.find('#node_5')[0].fill('white'); - stage.find('#node_6')[0].fill('yellow'); - layer.draw(); - break; - case 42: - set_current.fill('white'); - left_subtree_null.fill('yellow'); - layer.draw(); - break; - case 43: - yes_rect.fill('yellow'); - layer.draw(); - break; - case 44: - left_subtree_null.fill('white'); - yes_rect.fill('white'); - print_move_right.fill('yellow'); - layer.draw(); - break; - case 45: - console_text.text('Console:\n4 2 6'); - layer.draw(); - break; - case 46: - stage.find('#node_6')[0].fill('white'); - stage.find('#node_5')[0].fill('yellow'); - layer.draw(); - break; - case 47: - print_move_right.fill('white'); - left_subtree_null.fill('yellow'); - layer.draw(); - break; - case 48: - no_rect.fill('yellow'); - layer.draw(); - break; - case 49: - left_subtree_null.fill('white'); - no_rect.fill('white'); - find_inorder_predecessor.fill('yellow'); - layer.draw(); - break; - case 50: - stage.find('#node_6')[0].fill('lime'); - layer.draw(); - break; - case 51: - find_inorder_predecessor.fill('white'); - where_right.fill('yellow'); - layer.draw(); - break; - case 52: current_rect.fill('yellow'); layer.draw(); break; - case 53: + case 39: where_right.fill('white'); current_rect.fill('white'); set_null.fill('yellow'); layer.draw(); break; - case 54: - node6to5.hide(); - console_text.text('Console:\n4 2 6 5'); + case 40: + node4to2.hide(); + console_text.text('Console:\n4 2'); layer.draw(); break; - case 55: - stage.find('#node_6')[0].fill('white'); - stage.find('#node_5')[0].fill('white'); - stage.find('#node_7')[0].fill('yellow'); + + case 41: + stage.find('#node_4')[0].fill('white'); + stage.find('#node_2')[0].fill('white'); + stage.find('#node_5')[0].fill('yellow'); layer.draw(); break; - case 56: + + case 42: set_null.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 43: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 44: + is_current_null.fill('white'); + not_null_rect.fill('white'); left_subtree_null.fill('yellow'); layer.draw(); break; - case 57: + + case 45: + no_rect.fill('yellow'); + layer.draw(); + break; + case 46: + left_subtree_null.fill('white'); + no_rect.fill('white'); + find_inorder_predecessor.fill('yellow'); + stage.find('#node_6')[0].fill('lime'); + layer.draw(); + break; + case 47: + find_inorder_predecessor.fill('white'); + where_right.fill('yellow'); + layer.draw(); + break; + case 48: + null_rect.fill('yellow'); + layer.draw(); + break; + case 49: + where_right.fill('white'); + null_rect.fill('white'); + set_current.fill('yellow'); + layer.draw(); + break; + case 50: + node6to5.show(); + layer.draw(); + break; + case 51: + stage.find('#node_5')[0].fill('white'); + stage.find('#node_6')[0].fill('yellow'); + layer.draw(); + break; + case 52: + set_current.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 53: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 54: + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); + layer.draw(); + break; + case 55: yes_rect.fill('yellow'); layer.draw(); break; - case 58: + case 56: left_subtree_null.fill('white'); yes_rect.fill('white'); print_move_right.fill('yellow'); layer.draw(); break; + case 57: + console_text.text('Console:\n4 2 6'); + layer.draw(); + break; + case 58: + stage.find('#node_6')[0].fill('white'); + stage.find('#node_5')[0].fill('yellow'); + layer.draw(); + break; case 59: - console_text.text('Console:\n4 2 6 5 7'); + print_move_right.fill('white'); + is_current_null.fill('yellow'); layer.draw(); break; case 60: - stage.find('#node_7')[0].fill('white'); - stage.find('#node_1')[0].fill('yellow'); + not_null_rect.fill('yellow'); layer.draw(); break; case 61: - print_move_right.fill('white'); + is_current_null.fill('white'); + not_null_rect.fill('white'); left_subtree_null.fill('yellow'); layer.draw(); break; @@ -885,46 +985,47 @@ layer.draw(); break; case 64: - stage.find('#node_2')[0].fill('lime'); + stage.find('#node_6')[0].fill('lime'); layer.draw(); break; case 65: - stage.find('#node_2')[0].fill('white'); - stage.find('#node_5')[0].fill('lime'); - layer.draw(); - break; - case 66: - stage.find('#node_5')[0].fill('white'); - stage.find('#node_7')[0].fill('lime'); - layer.draw(); - break; - case 67: find_inorder_predecessor.fill('white'); where_right.fill('yellow'); layer.draw(); break; - case 68: + case 66: current_rect.fill('yellow'); layer.draw(); - case 69: + break; + case 67: where_right.fill('white'); current_rect.fill('white'); set_null.fill('yellow'); layer.draw(); break; + case 68: + node6to5.hide(); + console_text.text('Console:\n4 2 6 5'); + layer.draw(); + break; + case 69: + stage.find('#node_6')[0].fill('white'); + stage.find('#node_5')[0].fill('white'); + stage.find('#node_7')[0].fill('yellow'); + layer.draw(); + break; case 70: - console_text.text('Console:\n4 2 6 5 7 1'); - node7to1.hide(); + set_null.fill('white'); + is_current_null.fill('yellow'); layer.draw(); break; case 71: - stage.find('#node_7')[0].fill('white'); - stage.find('#node_1')[0].fill('white'); - stage.find('#node_3')[0].fill('yellow'); + not_null_rect.fill('yellow'); layer.draw(); break; case 72: - set_null.fill('white'); + is_current_null.fill('white'); + not_null_rect.fill('white'); left_subtree_null.fill('yellow'); layer.draw(); break; @@ -939,136 +1040,269 @@ layer.draw(); break; case 75: - console_text.text('Console:\n4 2 6 5 7 1 3'); + console_text.text('Console:\n4 2 6 5 7'); layer.draw(); break; case 76: - stage.find('#node_3')[0].fill('white'); - stage.find('#node_8')[0].fill('yellow'); + stage.find('#node_7')[0].fill('white'); + stage.find('#node_1')[0].fill('yellow'); layer.draw(); break; case 77: print_move_right.fill('white'); - left_subtree_null.fill('yellow'); + is_current_null.fill('yellow'); layer.draw(); break; case 78: - no_rect.fill('yellow'); + not_null_rect.fill('yellow'); layer.draw(); break; case 79: - left_subtree_null.fill('white'); - no_rect.fill('white'); - find_inorder_predecessor.fill('yellow'); + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); layer.draw(); break; case 80: - stage.find('#node_9')[0].fill('lime'); - layer.draw(); - break; - case 81: - find_inorder_predecessor.fill('white'); - where_right.fill('yellow'); - layer.draw(); - break; - case 82: - null_rect.fill('yellow'); - layer.draw(); - break; - case 83: - where_right.fill('white'); - null_rect.fill('white'); - set_current.fill('yellow'); - layer.draw(); - break; - case 84: - node9to8.show(); - layer.draw(); - break; - case 85: - stage.find('#node_8')[0].fill('white'); - stage.find('#node_9')[0].fill('yellow'); - layer.draw(); - break; - case 86: - set_current.fill('white'); - left_subtree_null.fill('yellow'); - layer.draw(); - break; - case 87: - yes_rect.fill('yellow'); - layer.draw(); - break; - case 88: - left_subtree_null.fill('white'); - yes_rect.fill('white'); - layer.draw(); - break; - case 89: - print_move_right.fill('yellow'); - layer.draw(); - break; - case 90: - console_text.text('Console:\n4 2 6 5 7 1 3 9'); - layer.draw(); - break; - case 91: - stage.find('#node_8')[0].fill('yellow'); - stage.find('#node_9')[0].fill('white'); - layer.draw(); - break; - case 92: - print_move_right.fill('white'); - left_subtree_null.fill('yellow'); - layer.draw(); - break; - case 93: no_rect.fill('yellow'); layer.draw(); break; - case 94: + case 81: left_subtree_null.fill('white'); no_rect.fill('white'); find_inorder_predecessor.fill('yellow'); layer.draw(); break; - case 95: - stage.find('#node_9')[0].fill('lime'); + case 82: + stage.find('#node_2')[0].fill('lime'); layer.draw(); break; - case 96: + case 83: + stage.find('#node_2')[0].fill('white'); + stage.find('#node_5')[0].fill('lime'); + layer.draw(); + break; + case 84: + stage.find('#node_5')[0].fill('white'); + stage.find('#node_7')[0].fill('lime'); + layer.draw(); + break; + case 85: find_inorder_predecessor.fill('white'); where_right.fill('yellow'); layer.draw(); break; - case 97: + case 86: current_rect.fill('yellow'); layer.draw(); - break; - case 98: + case 87: where_right.fill('white'); current_rect.fill('white'); set_null.fill('yellow'); layer.draw(); break; + case 88: + console_text.text('Console:\n4 2 6 5 7 1'); + node7to1.hide(); + layer.draw(); + break; + case 89: + stage.find('#node_7')[0].fill('white'); + stage.find('#node_1')[0].fill('white'); + stage.find('#node_3')[0].fill('yellow'); + layer.draw(); + break; + case 90: + set_null.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 91: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 92: + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); + layer.draw(); + break; + case 93: + yes_rect.fill('yellow'); + layer.draw(); + break; + case 94: + left_subtree_null.fill('white'); + yes_rect.fill('white'); + print_move_right.fill('yellow'); + layer.draw(); + break; + case 95: + console_text.text('Console:\n4 2 6 5 7 1 3'); + layer.draw(); + break; + case 96: + stage.find('#node_3')[0].fill('white'); + stage.find('#node_8')[0].fill('yellow'); + layer.draw(); + break; + case 97: + print_move_right.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 98: + not_null_rect.fill('yellow'); + layer.draw(); + break; case 99: - console_text.text('Console:\n4 2 6 5 7 1 3 9 8'); + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); layer.draw(); break; case 100: + no_rect.fill('yellow'); + layer.draw(); + break; + case 101: + left_subtree_null.fill('white'); + no_rect.fill('white'); + find_inorder_predecessor.fill('yellow'); + layer.draw(); + break; + case 102: + stage.find('#node_9')[0].fill('lime'); + layer.draw(); + break; + case 103: + find_inorder_predecessor.fill('white'); + where_right.fill('yellow'); + layer.draw(); + break; + case 104: + null_rect.fill('yellow'); + layer.draw(); + break; + case 105: + where_right.fill('white'); + null_rect.fill('white'); + set_current.fill('yellow'); + layer.draw(); + break; + case 106: + node9to8.show(); + layer.draw(); + break; + case 107: + stage.find('#node_8')[0].fill('white'); + stage.find('#node_9')[0].fill('yellow'); + layer.draw(); + break; + case 108: + set_current.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 109: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 110: + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); + layer.draw(); + break; + case 111: + yes_rect.fill('yellow'); + layer.draw(); + break; + case 112: + left_subtree_null.fill('white'); + yes_rect.fill('white'); + layer.draw(); + break; + case 113: + print_move_right.fill('yellow'); + layer.draw(); + break; + case 114: + console_text.text('Console:\n4 2 6 5 7 1 3 9'); + layer.draw(); + break; + case 115: + stage.find('#node_8')[0].fill('yellow'); + stage.find('#node_9')[0].fill('white'); + layer.draw(); + break; + case 116: + print_move_right.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 117: + not_null_rect.fill('yellow'); + layer.draw(); + break; + case 118: + is_current_null.fill('white'); + not_null_rect.fill('white'); + left_subtree_null.fill('yellow'); + layer.draw(); + break; + case 119: + no_rect.fill('yellow'); + layer.draw(); + break; + case 120: + left_subtree_null.fill('white'); + no_rect.fill('white'); + find_inorder_predecessor.fill('yellow'); + layer.draw(); + break; + case 121: + stage.find('#node_9')[0].fill('lime'); + layer.draw(); + break; + case 123: + find_inorder_predecessor.fill('white'); + where_right.fill('yellow'); + layer.draw(); + break; + case 124: + current_rect.fill('yellow'); + layer.draw(); + break; + case 125: + where_right.fill('white'); + current_rect.fill('white'); + set_null.fill('yellow'); + layer.draw(); + break; + case 126: + console_text.text('Console:\n4 2 6 5 7 1 3 9 8'); + layer.draw(); + break; + case 127: node9to8.hide(); stage.find('#node_8')[0].fill('white'); stage.find('#node_9')[0].fill('white'); layer.draw(); break; - case 101: - start_from_root.fill('red'); - left_subtree_null.fill('red'); - print_move_right.fill('red'); - find_inorder_predecessor.fill('red'); - where_right.fill('red'); - set_current.fill('red'); - set_null.fill('red'); + case 128: + set_null.fill('white'); + is_current_null.fill('yellow'); + layer.draw(); + break; + case 129: + yes_null_rect.fill('yellow'); + layer.draw(); + break; + case 130: + is_current_null.fill('white'); + yes_null_rect.fill('white'); + end_rect.fill('yellow'); layer.draw(); break; @@ -1086,4 +1320,4 @@ - + \ No newline at end of file