How the Animation works?

To make the animation show the merge sort algorithm, I use bars to stand for array elements with the hight of the bars showing the elements' value. I would like to explain every part of the animation to make it clear for you.

• The upper-left array of bars stands for the array being sorted. It is the a[ ] in the algorithm code. The orange colored bars are those being currently sorted and the dark blue ones are those not. The colors change at a synchronization with the algorithm execution.
• The mid-left array of bars stands for the working array. It is the working[ ] in the algorithm code. The blue colored bars are those already being moved to the sorting array and the yellow and orange ones are those not which are in the first half and second half respectively. The colors change at a synchronization with the algorithm execution.
• The assignment of a value from the working array to the sorting array is animated by a rocket movement and the height of rocket also stands for the element of the array. You can see rocket bar movement from the working array to the sorting array and a simulated fire flames emitting from the rocket.
• The bottom-left bars stands for the recursive call levels and the range of bars currently being sorted which shows variable length in the code. Recall that a mergesort recursively mergesorts the left and right halves of an array, and then merges them together. It will help you be aware of the current recursive level and sorting range thus understand more about the merge sort algorithm.
• The code panel on the right shows the execution steps of the algorithm code by highlighting the currently executed line. It will show you a comment for each line of code when you click on it.

What is the Functions for Components?

• Click the "Accept" button to accept the input of the unsorted array in textfield box and seperate each number by any non-digit characters.
• Input the unsorted array in the textfield and don't input more than 16 numbers. But you can also choose not to input and use the default array to show the merge sort.
• Click the "Sort" button to start sorting. You will see the bar movement and color changes on the bars and highlight line on the code panel. Notice after you click the "Sort" button, the button label will be changed into "Stop".
• Click the "Stop" button to stop the sorting.
• Click the "Reset" button to reset array to original unsorted array.
• Choose the Granuality of the running by click the drop-down list box. You may choose Entire Sort to execute the whole algorithm without stopping. You may choose Next Merge to perform a run stop at the beginning of each call. You may choose Next Step to show the algorithm running step by step.
• Click the "Step" button to resume or continue the running.
• Adjust the speed of running by the scrollbar.

How to use the applet?

• If you want to run to sort the default array, just click the "Sort" button. The default for granualarity is Entire Sort.
• You may change the granualarity to Next Merge or Next Step and use the "Step" button to execute the algoritm by recusive calls or step by step.
• If you want to stop it, click the "Stop" button which was originally the "Sort" button. You can reset the bar arrays to the beginning state by clicking the "Reset" button.
• If you want to sort your input array, enter into the textfield and then click the "Accept" button.
• After sorting, you may have a look at the counters for comparison and assignment. Thus you can calculate the complexity of the algorithm.