Sorting Algorithm Animation Tutor (S.A.A.T.)

1. Sorting Algorithm Animation Tutor (S.A.A.T.) Tristan Trumbla

2. Introduction There are many times that a computer science student will need to use a sorting algorithm that they may not understand fully or may not be familiar with at all. There are many mediums used by these students to help them grasp the concept of a particular sorting algorithm. Many of these students will turn to the internet to find the information they need. Many sorting algorithm tutorials found on the web today only offer text-based information to explain the concept. This project offers a web-based visual learning environment for people looking to learn about sorting algorithms but learn best with visual representations.

3. Abstract The internet is a very useful tool to learn various different subjects. The developed software for this project provides a visual learning experience for students looking to learn about sorting algorithms in a simple, easy to use web-based format. The software can also be used by instructors to give their students a visual aid to help them understand the concept of various sorting algorithms. This differs from many other sorting algorithm tutorials that present information with no visual aids leaving it up to the user to visualize how the algorithms work. The expected result is that the software will be able to provide a visual representation of various sorting algorithms that will allow visual learners an easier way to learn how sorting algorithms work.

4. Methodology As the project was constructed the integrated applet was developed with an object oriented approach using the Java programming language. The user interface website was developed using a structured approach in HTML and CSS. The step by step examples were developed using Adobe Flash and Action Script 3.0. The HTML, CSS, and Java files were all constructed using TextPad. The Flash and Action Script 3.0 were created using Adobe Flash Professional CS6. The final product was tested with Google Chrome, Microsoft Internet Explorer, and Mozilla Firefox browsers.

5. Use Case Scenario Running a sorting algorithm • The user navigates to the website. • The user selects an algorithm from the menu to run. • The system displays the chosen sorting algorithms user interface. • The system displays a short animation of the sort chosen. (Java) e.g. Heapsort • The system displays a description of the sort chosen. • The system displays a step by step animation in which the user progresses through at their own pace. • The system displays the sorting algorithms performance details. • The user can select a different algorithm from the menu or exit.

6. Implementation The software currently runs in my personal space on the NSU Arapaho web server. The software for this project consists of four modules. The user interface module was implemented in HTML and CSS using TextPad. This module uses the CSS file to keep a consistent look and feel to the main HTML pages. This enables the user to navigate the system easily. The main module is the sorting module which was implemented in Java using TextPad. Each sorting algorithm has its own methods that are called. An example for Heapsort is shown in Figure 4.1 and a code segment for creating the heap can be found in Figure 3.1. The whole sorting component is implemented using the “factory” method so that the client (Sort class) is completely decoupled from the sorting algorithms. The step by step module (Figure 2.1) was implemented using Adobe Flash Professional CS6 and Action Script 3.0. This module enables the user to step through the algorithms to gain a better understanding. The structure for this can be found in Figure 4.1. The final module is the sorting graph display found in Figure 1.1. This module consists of one method with two sub-methods. First makeSortDisplay( ) is called which in turn calls getArraySize( ) and display( ). A code segment for display( ) can be found in Figure 1.2. The structure for this module is found in Figure 4.1.

7. Java animation for Heapsort. Java code segment for Heapsort. Figure 1.1 Figure 1.2

8. Flash animation for Heapsort. Figure 2.1

9. Structure ChartHeapsort Figure 4.1 User Interface Heapsort Algorithm Sorting Graph Display (Figure 1.1) downheap (Figure 3.1) sort Step by Step Illustration makeSortDisplay Flash Graphics (Figure 2.1) Action Script getArraySize display (Figure 1.2) back next reset

10. Class DiagramDisplay Strategy Sort Class theDisplay Sort2 Class SortDisplay Interface displayFactory BarSortDisplay Class SortDisplayFactory Interface StaticSortDisplayFactory Class Creates

11. Class DiagramAlgorithm Strategy theAlgorithm AlgorithmAnimation Class Sort Class SortAlgorithm Class StaticAlgoFactory Class BubbleSortAlgorithm Class AlgorithmFactory Interface QuickSortAlgorithm Class HeapSortAlgorithm Class MergeSortAlgorithm Class sort( ) algorithm( ) sort( ) algorithm( ) sort( ) sort( ) makeSortAlgorithm( ) makeSortAlgorithm( ) sort( ) animator algorithmFactory Creates

12. Conclusion By implementing this system, people will have a tutorial on sorting algorithms that provides both text-based information as well as a visual representation of various sorting algorithms. This allows for people of all learning styles to have and effective medium for learning sorting algorithms. The code for this system is laid out in a way that allows easy implementation of more sorting algorithms. The original objectives have been achieved but future work on this project will include a few different things. First of all, I would like to show the array values on the visual representation so that the user can see the data being used. I would also like to add several more sorting algorithms to the system. Also, I would like the step by step visuals to be linked to the Java code instead of it being a manual walk through.