Contents:

Overview

This week, we will look at the binary search algorithm on a sorted array. The textbook illustrates the algorithm in Figure 8.8 on page 360. An example of a similar figure is included below. It was generated by our own "solution" to this lab.

 
Figure: Searching for key '28' in the array generated from seed=0

Our goal for this lab is to have you create such illustrations using Java's Graphics package (java.awt.Graphics), which is part of their Abstract Windowing Toolkit (AWT).

Files you will need

Although you will only need to modify one file (Animate.java), you will need to download several files we provide.

Using the Driver

We are providing you with an Applet which contains the full code for binary search. This program also creates a blank palette for your illustrations. Before discussing the details of the graphcs, let's discuss the binary search implementation. This is a recursive procedure for search an array. At each level of the recursion, the driver calls the routine Animate.drawArray, which you must write. All code you provide should be in the file Animate.java.

The information you have to work with is:

• int[ ] A - the sorted array of int's.
• int N - equal to A.length
• int low - the 'low' index boundary of the current recursive level
• int high - the 'high' index boundary of the current recursive level
• int mid - the 'mid' index value used to compare during the search.
• int depth - the current recursive depth. Your goal will be to make a drawing for each level of the recursion, and this variable will allow you to space out your illustrations vertically, by basing the y-coordinates in part on this value.

When you run the applet, you must first enter a variety of parameters, and then press the "run" button. In particular, the algorithm will create a sorted array of N integers, chosen at random (based on the random 'seed'). At this point, it starts the binary search algorithm on the array, looking for the given 'key' value.

Your Tasks

In the final section of this handout, we will give more details about using Java's Graphics package. Before doing this however, we want you to have an idea of the types of things you will want to do.

Mostly, we want you to do your best on this lab. If you do not get pictures which look exactly like the text's, so be it. The TA will use judgement as to whether you have made enough progress in grading your work.

Please keep in mind that your Animate.drawArray routine should draw a single view of the array as it appears at one level of the recursion. The full illustration, with multiple views of the array, is created as the driver calls your routine multiple times.

We strongly suggest that you try to tackle as many of the following stages as possible:

• For starters, see if you can draw squares to represent the array. Our demo uses a "30x30" size for each square. Make sure that your routine uses the array index to provide a horizontal offset, and that it uses the recursive "depth" to provide a vertical offset so that consecutive calls to your routine do not draw on top of each other.

• Can you get the integer values to appear? We will provide you with a routine (see next section) which draws a string centered at a particular point. You can convert an int to a String, using String.valueOf(int).

• Can you color the particular squares from low to high? (Color.cyan is a nice choice). Keep in mind that you will have to paint the color, the outline, and the text in the proper order or else one part of the drawing will overwrite another.

• Can you get a circle to highlight the 'mid' element?

• Can you get words "low", "mid" and "high" to appear below the array in order to show these indicies? Try to get the basics of it working, though special cases such as when low=mid or mid=high or low=mid=high are tedious.

• Can you draw a line along with text such as "low"? Can you get arrows to appears, as in the text? (even our demo does not have this implemented!)

• Can you make your figure scale automatically so that if the user specifies a larger width/height, the user will see a magnified view of the illustration? (you can get information on the height/width from a call to getClipBounds() which returns a Rectangle)

Overview of java.awt.Graphics

When the user instructs the applet to run binary search, a window is created with height and width specified by the user. Your code contains a variable Graphics gimage in the file Animate.java, which is an instantiation of the java.awt.Graphics class. You will need to use this variable to make most graphics call.

The coordinate system for the Graphics object is defined so that the origin (0,0) is located at the top-left corner of the screen. Increasing the x-coordinate signifies moving farther to the right; increasing the y-coordinate signifies moving farther downward.

The Graphics package is designed so that there is always a current pen color, though this choice of color can be changed as needed. At any point, you are allowed to draw basic shapes by specifying the relevant geometry in the coordinate system. When you draw on a graphics, you will be drawing on top of whatever you have previously drawn on that part of the coordinate system. For example, if you want black writing on a blue square, you will need to first draw the blue square and then draw the black text. Doing things in the reverse order will have the effect of painting the blue square overwriting the black text.

Full documentation for the latest version of the Java.awt.Graphics package can be found online at,

http://java.sun.com/j2se/1.3/docs/api/java/awt/Graphics.html

Highlights of java.awt.Graphcis:

• Colors - Java offers a set of 13 predefined colors such as Color.black, Color.blue, Color.white, and so on. Additionally, you can define your own color by specifying its red, green, and blue components each as values between 0.0 and 1.0. To define such a new color, use the command new Color(r,g,b).

• A Graphic always maintains a current pen color which is used for drawing. The color can be set with a method such as:
  gimage.setColor(Color.black)
  or
  gimage.setColor(new Color(0.7, 0.5, 0.2))

• Erasing something on the screen can be accomplished by repainting the object using the background color. (in our case, Color.white)

• Most standard geometric shapes can be drawn, either as outlines, or as filled solids. Examples include:
  • gimage.drawLine(x1,y1,x2,y2)

  • gimage.drawRect(x,y,width,height)
    This draws a (non-filled) rectangle, with top-left corner (x,y).

  • gimage.fillRect(x,y,width,height)
    This draws a filled rectangle, with top-left corner (x,y).

  • fillRect(x,y,1,1) - this draws a point (a rectangle) at the point (x,y).

  • gimage.drawOval(x,y,width,height)
    This draws a (non-filled) oval, lying in the imaginary rectangle with top-left corner (x,y).

  • gimage.fillOval(x,y,width,height)
    This draws a filled oval, lying in the imaginary rectangle with top-left corner (x,y).

  • gimage.drawString(str,x,y)
    This draws the text 'str' where (x,y) is the coordinate of the top-left corner of the string's bounding box.

Handing in your completed lab

You do not have to submit any files electronically. You should instead make a printout of the modified file Animate.java and make sure your name is written clearly at the top of the file. Do this for each of the two weeks, to mark your relative progress.