CS 1713/1711 Introduction to Computer Science Recitation Exercise 9

CS 1711 Recitation Exercise 9:
Animation of Sorting and Other Array Algorithms

Objectives:

Understand the insertion sort and selection sort.
Manipulate and reorder array elements.
Use graphics to visualize array algorithms.
Use a complex pre-written class.

Prior to the recitation:

Print out this recitation and read it over.
Reread Section 6.3 of of the textbook and make sure that you have looked at the Sorts class of Listing 6.11. Be sure to bring your textbook to class.
Trace through the InsertionSort code for a small array of int.
Print out the ArrayDisplay.javaclass source code and highlight the public methods with a marker.
To save time during the lab, do the Setups for part I, II and III

Hand-in Requirements:

(All hand-ins should be stapled in the upper left corner to form a single packet. Write your name, course and section number on the front.)

Hard-copy of the source (4 pts each):

ArrayDisplayTest.java,
ExtremesTest.java,
Extremes.java,
SortTest.java,
Sorts.java.

Setup:

Project/Package Name: arraydisplaypkg

New Main Class: ArrayDisplayTest

New Class: ArrayDisplay

Save All

Save ArrayDisplay.java in your src/arraydisplaypkg directory

Overview:

In this recitation exercise, you will use a graphical representation to show the progress of different array algorithms such as finding the maximum element or sorting an array with the selection sort. A common method of animating array algorithms is to display the array as a bar graph, with the height of the bar corresponding to each element being proportional to the size of the element. The animation changes the colors of the bars to emphasize aspects of the algorithm. For example, as a sort algorithm moves elements in the array, the bar graph is redisplayed with the elements in their new positions. The bars are usually displayed in some default color (say red) and the color is changed (say to blue) when a bar reaches its final position. The left image below shows an array with 30 elements. The image on the right shows the same array with the color of element number 10 set to blue.

You will use the prewritten class ArrayDisplay to do the animation of your algorithms. This class contains a randomly generated array of double that it automatically displays in a window as a bar graph. You can change the colors of the individual bars and redisplay. The public methods of ArrayDisplay are:

ArrayDisplay( int size, String title ) - constructor specifies array size and window title
void clearKey( ) turns off display of the key
void clearRangeBar( ) turns off display of the range bar
double [] getArray( ) returns a reference to the random array
double getKeyValue( ) returns the current value of the key
Color getKeyColor( ) returns the current display color for key
long getSleepTime( ) returns time to wait after redisplay
void paint(Graphics g) for display (we don't call)
void resetDisplay( ) resets the display to default settings
void setElementColor(int i, Color c) sets the color of array element i to c
void setKey(int keyIndex) sets the key to element keyIndex and turns key display on
void setKeyColor(Color c) sets the key color to c
void setRangeBar(int low, int high) set the range bar to [low, high] and turns range display on
void setSleepTime(long m) sets time to wait to m milliseconds
void showAgain(String title) redisplays the window with new title

In part I of the recitation you will experiment with the methods of ArrayDisplay. In part II you will animate a relatively simple algorithm -- finding the maximum value of an element in an array. In part III you will animate the selection sort.

Details:

Part I: Learning about the ArrayDisplay Class

<1> Add client code to ArrayDisplayTest.java to create an ArrayDisplay object called r containing 100 elements. Include a title of "Trying display". Build and run. You should see a window pop up displaying an array of 100 random elements.
<2> Add client code to change the color of element 5 of r to Color.blue. (You will have to import java.awt.*;.)
<3> To redisplay the window with the new color, call showAgain with the title "Changing the color". Build and run. The display has been set to wait two seconds before returning, so expect to see a hesitation.
<4> Add client code to set the range bar under elements 3 to 7 of r. Display the window with the title "Showing the range bar". Build and run.
<5> Add client code to set the key value to array element 1. Set the key display color to Color.green. Display the window with the title Showing a key. Build and run.
<6> The default value of that ArrayDisplay waits between displays is 2 seconds (2000 milliseconds). Add client code directly after the code to instantiate r to change the sleep time to 1 second. Build and run. Observe the difference in display rates.
<7> Write client code to get the array stored in r print it out.

Setup:

Project/Package Name: extremestestpkg

New Main Class: ExtremesTest

New Class: ArrayDisplay

New Class: Extremes

Save All

Save ArrayDisplay.java and Extremes.java in your src/extremestestpkg directory

Part II: Animating an Algorithm using ArrayDisplay

<1> Write client code to create a ArrayDisplay object called r1 containing an array of 15 elements. The title on the display should read "Testing maximum";
Build and run.
<2> Write client code to retrieve the array stored in r1 and store it in an array of double called t.
<3> Use Extremes.getMaximum to find the value of its maximum element. Output the value.
<4> Bring up Extremes.java and add a second form of getMaximum that takes an ArrayDisplay object as a parameter instead of an array of double.
<5> Test the code by calling it with r1. Make sure that you get the same maximum value as before.
<6> Create an ArrayDisplay object called testMax. of 10 elements and a title "Maximum animation".
<7> Modify the getMaximum method that takes the ArrayDisplay parameter as follows. (You might want to add the changes one at a time.) Change the title of the window appropriately to reflect the actions of the algorithm.

<a> Display a range bar underneath the elements that have not been examined. (On entry into the method, show the entire array as not being examined.)
<b> If the element of the array has been examined, but is not the maximum, turn it blue.
<c> If the element is selected as the current element, turn it green. If later another element is found to be bigger, turn it back to blue.
<d> Set the key value to the current value of the maximum. Display the key value in green also.

<8> Add client code to call the getMaximum method of testMax. Be sure to call showAgain also.

Setup:

Project/Package Name: sortspkg
New Main Class: SortsTest
New Class: ArrayDisplay
New Class: Sorts
Save All

ArrayDisplay.java

Sorts.java

src/sortspkg

Part III: Animating the selection sort using ArrayDisplay

<1> Write client code to create a ArrayDisplay object called r1 containing an array of 10 elements. The title on the display should read "Testing the selection sort";
Build and run.
<2> Write client code to retrieve the array stored in r1 and store it in an array of double called t. Print out the array with an identifying message.
<3> Bring up Sorts.java and add a second form of the selectionSort to sort an array of double.
<4> Use Sorts.selectionSort to sort the array t. Print out the array now and make sure that it is sorted.
<5> Bring up Sorts.java and add another form of selectionSort that takes an ArrayDisplay object as a parameter instead of an array of double.
<6> Test the code by creating a new ArrayDisplay called testSort with a title "Selection Sort Animation" and use the selectionSort on it. Make sure that the testSort is sorted.
<7> Modify the selectionSort method that takes the ArrayDisplay parameter as follows. (You might want to add the changes one at a time.) Change the title of the window appropriately to reflect the actions of the algorithm.

<a> Display a range bar underneath to the elements included in the outer loop. (On entry into the method, show the entire array as not being examined.)
<b> Show the min element in green and redisplay each time that it changes with an appropriate message.
<c> Also show the min element as the key, also displayed in green. (Note: this is not the overall minimum, but the minimum value being found in the inner loop of the algorithm.)
<d> Each time the sort reaches the swap step (at the bottom of the outer loop), turn the elements to be exchanged to black and display a the window with the message "Swapping elements i and j.." where i and j are the actual numerical values of min and index.
<e> After the swapping is complete, fix the element colors so that the elements to the left and including index are displayed in blue and all of the elements to the right of index are displayed in red. Redisplay the window with the message "Done swapping...". (The elements in their final resting place should be in blue.
<f> Add code outside the loop so that when the sort has completed, the range bar and the key are no longer displayed and all of the elements are blue. The window title should read "Selection sort complete"

<8> Add client code to create a new ArrayDisplay object called testDisplay. Call the showAgain method before and after calling your new selectionSort for this object.

Study Questions:

How would you modify the selectionSort so that the elements are ordered in descending order rather than decending order?
Explain what happens when the selectionSort works on an array that is already in ascending order.
Explain when the selectionSort works on an array that is already in descending order.
Examine the insertionSort code. Explain how you would animate this sort and why. How would you use the range bar? How would you use the key value?
How would you modify the insertionSort so that the elements are ordered in descending order rather than ascending order?
What happens in the insertionSort when the elements are already in ascending order?
Sometimes it is better to wait longer after one particular redisplay of the window so that the user has more time to understand what happened. Assume that an ArrayDisplay called test has already been declared. Write a code segment, to save the current value of the sleep time for test, redisplay test with a sleep of 10 seconds, and the reset the sleep time to its original value.

Last revision: October 27, 2001 at 9:38 am