Lab 9
comp 125-609, Goldwasser
Tuesday, 2 November 1999
Purpose: Animating Some Sorting Methods
In today's lab, we will use graphics to animate the sorting routines we discussed during lecture. Seeing the sorting methods animated in such a way is a great tool in better understanding the differences between the sorting methods.
Please begin by downloading a program I have written (3 files):
www.cs.luc.edu/~mhg/comp125/labs/animatesort.frm
www.cs.luc.edu/~mhg/comp125/labs/animatesort.frx
www.cs.luc.edu/~mhg/comp125/labs/animatesort.vbp

Do not modify the design of the form. You are only to modify the code as described in the rest of this lab.

This program has all the code for implementing the three sorts we discussed: insertion sort, selection sort, and bubble sort. However none of the code for the graphics has been written. This will be up to you.

When running the program, the user is allowed to choose four different settings:

  • The number of items to be sorted
  • The sorting method to be used
  • The animation delay (a bigger number causes a slower animation)
  • Whether "Smart Animation" should be used or not. Please leave this option alone for the first half of the lab!

    • If you immediately download the files and run the program, you will not see anything happen as no graphics routines have been written. If at any point during today's lab you want to interrupt a program which is running, press cntr-break.

    Your first task is to write code for the routine named AnimateDrawScreen() which is used in the program. This routine should give a pictoral view of an array of numbers in the picture box picture1 on the form.

    The data is stored in a global array which was created with a line such as

    Dim TheArray(1 to arraysize) As Single
    where arraysize is also a global variable. The actual data consists of floating point numbers between 0 and 1 which are chosen at random.

    You should draw the array as a bar graph with the following conditions:

  • Start by clearing the picturebox screen.
  • It is not necessary to draw or label axes for this lab.
  • There should be one bar for each value in the array.
  • The bars should be placed up against each other (i.e. with no blank spaces between bars).
  • The height of each bar should correspond to the value of the data stored in the array.
  • The number of bars depends on the variable arraysize which depends on the user's selections.
  • You should scale your graphics based on arraysize in a way that makes good use of the space available in the picture box.
    • You may start by using the foreground color for drawing all the bars. As a bonus, you can make a much nicer looking drawing by also choosing the colors for each bar in a way that depends on the data value.

    When you have successfully written this routine, you should be able to run the program and see the sorts animated. The animation may flicker a bit as the program runs though. The reason for this is that each step of the animation proceeds by completely erasing and redrawing the picture whenever the underlying array is modified. Although drawing takes place relatively quickly, our eyes may still notice this flickering effect.

    In the second half of the lab we will attempt to remove this flickering effect by being a bit more clever. As it happens, all three of these sorts modify the array only by swapping two items at a time. Since we know this, we can animate the algorithm more efficiently by not redrawing the entire picture from scratch at each step. Instead of clearing the screen, we will write an additional graphics routine AnimateSwap() which animates a single swap.

    In order to animate a swap, it is necessary to know which two items have just been swapped, and so this routine is called with two parameters i and j which denote the index location of the two swapped items. NOTE: you are not to modify the values in TheArray as this has already been done elsewhere in the code. You are only supposed to modify your drawing.

    In this routine you should do two things.

  • Erase the two bars which you had previously drawn for these two items. Of course we do not have a way to officially remove something we have already drawn in a picture box, but we can acomplish this by just redrawing the identical rectangle as before, but using Picture1.BackColor as the rectangle color. Also, it is important to know the size of the rectangle which we had previously drawn; fortunately we know that i and j were just swapped, and so if we want to know the previous value for one of these, we can simply look at the current value of the other.
  • Once you have erased the old bars, draw the two new bars based on the current values in the array.
    • When you have successfully written this routine, run the program again, this time selecting the "Smart Animation" option. You should the sorts animated as before, but with a much "smoother" appearance.
    This lab is due before leaving class today. When you have completed both parts of the program, please call me over to your computer to run your program.

    Also, you may want to save your program for your own use, as these animations are quite a good way to better understand the three sorting methods we have learned!