CPSC 124: Lab 8
Arrays

ARRAYS CAN BE USED FOR STORING AND PROCESSING lists of data items. For this lab, you will do two exercises involving arrays. You should read the first two sections of Chapter 7 in the course notes before doing the lab. For Exercise 2 in this lab, you should be familiar, in particular, with the material on "partially full arrays" from Section 7.2 of the notes.

A simple application of arrays is to read a list of numbers entered by the user and then to process that list in some way. Note, however, that you don't always have to use an array to process a list of numbers entered by the user. For example, if all you want to do is add up the numbers, you can add them up as you read them. You should use an array if, for some reason, you need to remember all the numbers for processing after the entire list has been read. This is the type of processing that you will do in Exercise 1.

Exercise 2 applies arrays to the problem of keeping track of what has been drawn on a canvas in a applet. If this information is recorded in an array, then the paint() method of the applet can use the information to redraw the contents of the applet whenever necessary. Arrays are not the only way to keep track of such information, but they can be effective and are reasonably easy to use.

Exercise 1

A histogram -- also known as a "bar graph" -- is a visual presentation of a dataset that uses bars of various lengths to represent the data. In a simple console-based application, each bar can be represented by a string of characters, such as asterisks. For exercise 1, you will write a program that can display histograms of this type.

Your program should read numbers entered by the user. Each number should be an integer in the range 0 to 75. After reading in all the numbers, you should draw a line of asterisks to represent each number. For example, if the user enters the 10 numbers 7, 14, 23, 34, 47, 58, 63, 52, 32, 12, then your program would output:

     *******
     **************
     ***********************
     **********************************
     ***********************************************
     **********************************************************
     ***************************************************************
     ****************************************************
     ********************************
     ************

Use the "Java Console Ap Starter" folder from the server as a starting point. Your program should begin by asking the user how many numbers will be entered. It should then create an array of ints to hold just that many numbers. Next, it should let the user type in the numbers and store them in the array. Finally, it should print out the histogram, based on the numbers stored in the arrays. It's easy to make a line containing a given number of asterisks: If you want N asterisks, you would say:

             for (int i = 0; i < N; i++)
                console.put('*');
             console.putln();

There is a sample, compiled solution to this exercise in a file named "Histogram" on the file server. You'll see that it adds some frills to the output. It would draw the above histogram as

       +---------+---------+---------+---------+---------+---------+---------+-----    
     0 |*******
     1 |**************
     2 |***********************
     3 |**********************************
     4 |***********************************************
     5 |**********************************************************
     6 |***************************************************************
     7 |****************************************************
     8 |********************************
     9 |************
       +---------+---------+---------+---------+---------+---------+---------+-----

You can add similar frills to your output before you turn in your program. You can also make your program more "robust" by verifying that the user's inputs lie in the correct ranges. (However, you shouldn't waste too much time on this in lab, when you could be doing Exercise 2.)

Turn in a printout of your program

Exercise 2

For Exercise 2, you can begin with a copy of the folder "Lab 8 Applet Starter" from the file server. The applet in this folder lets the user place small colored figures on a canvas, by clicking with the mouse. Unfortunately, the canvas has no paint() method to redraw itself when necessary. This means, for example, that if the applet is covered up and then uncovered, all the work on the canvas will be gone. Your job is to improve the canvas so that it can redraw itself correctly. Here is a version of the applet with the improved canvas:

Sorry, you can't use the actual applet,
but here is a picture:

Oops, no pictures either

You will be working in the file named CnSCanvas.java. This file defines the class CnSCanvas. You should begin by adding four arrays as instance variables in this class. The arrays will store information about the figures placed on the canvas:

       int[] loc_x = new int[1000];  // x-coordinates of figures
       int[] loc_y = new int[1000];  // y-coordinates of figures
       String[] figColor = new String[1000];  // colors of figures
       String[] figType = new String[1000];   // figure types

These arrays are large enough to store data for 1000 figures, which should be plenty. Each figure is defined by four pieces of data: the x-coordinate of the point where the mouse was clicked, the y-coordinate of the point where the mouse was clicked, the name of the color used for the figure such as "Red" or "Cyan", and the name of the type of figure such as "Squares" or "RoundRects". The data for the N-th figure is to be stored in the array locations loc_x[N], loc_y[N], figColor[N], and figType[N].

You will need another instance variable, say figCt, of type int, to keep track of how many figures have been placed on the canvas.

You have to change the mouseDown() routine so that when it draws a figure, it also stores data about that figure in the arrays. You have to add a paint() routine that will use the data in the arrays to redraw all the figures. The paint() routine only needs to be a few lines long. Finally, you should modify the clear() routine so that it also resets figCt to zero (which effectively clears the data out of the array). Do not make any changes to putFigure().

Turn in a printout of the modified CnSCanvas.java file.

Alternative Exercise 2

If you would like to work on a somewhat more challenging problem, then instead of doing Exercise 2 as described above, you can do a similar exercise for the KaleidaSketch applet from the previous lab. The object is to use arrays to store data about curves sketched by the user, and to use that data in a paint() method to redraw the sketch. The file you have to modify is SketchCanvas.java in your KaleidaSketch project.

The problem here is that you have many points to store for each curve that the user sketches. You could store the data in instance variables:

        int[] x = new int[10000];  // x-coords of points drawn by user
        int[] y = new int[10000];  // y-coords of points
        int pointCt = 0;  // number of places used in the arrays

But you also need to store data about the color of each curve. Here is one way to do it. Mark the beginning of each curve with a -1 in the x[] array. (A -1 can never occur as an actual x-coordinate, since all coordinates in a canvas are >= 0.) In the corresponding location in the y[] array, put a code to indicate the color of the curve (for example, 0 for Black, 1 for Red, etc.). It is also a good idea to mark the end of a curve with a -1 in the x[] array. When you "replay" the data from the arrays in the paint() routine, you have to be careful to draw separate curves in their correct colors.

You have to enter data into the arrays in the mouseDown(), mouseDrag(), and mouseUp() routines. And don't forget to reset pointCt() to zero in the clear() routine.

[ Lab Index | Online Notes ]