GridPlotter

Submission for the SIGCSE '05
Nifty Assignments Session

Alyce Brady and Pamela Cutter
Mathematics and Computer Science Department
Kalamazoo College
abrady@kzoo.edu, pcutter@kzoo.edu

 

Summary

In the GridPlotter assignment, students draw pictures and patterns by placing color blocks in the cells of a grid.  The purpose of the assignment is to provide practice developing loops and nested loops for working with a two-dimensional data structure.  The assignment uses a Grid class with rows and columns, which is a slightly cleaner data structure to work with than Java 2D arrays.  (For example, the Grid class provides a numCols method to determine the number of columns, rather than requiring students to ask for the length of the first row.   This is more intuitive approach and behaves well even for a 0 x 0 grid.)

We provide students with a graphical user interface and a GridPlotter class with a row-major traversal method provided.  Students start by implementing methods to clear the grid and do a column-major traversal, closely following rowMajorFill as an example, but then move on to a variety of other methods, such as drawing a line down the diagonal, drawing an X, filling a triangle, and painting the perimeter.  Instructors and interested students can come up with other possibilities, such as drawing a spiral or butterfly.  Finally, students develop three methods of their own that combine to form a picture, such as methods that draw the outline, roof, and windows of a house.  All of their methods, including the picture methods, should scale with the size of the grid.

The graphical user interface class that we provide to students automatically generates buttons for any void methods without parameters whose name fits the on...ButtonClick format (e.g., onRowMajorFillButtonClick, onXButtonClick).  The labels on the generated buttons correspond to the interior string in the method name (e.g., "RowMajorFill," "X").  Thus, so long as the student provides an appropriate signature for a new method, a button corresponding to the new method will appear on the user interface the next time they run the program.

Initial program executing RowMajorFill What a motivated student can do.

Acknowledgements: This assignment was inspired by the Dots program by Richard Rasala of Northeastern University.  The Grid class and the graphical user interface used here come from a class library that was inspired by, and derived from, the AP ®Marine Biology Simulation (MBS) case study, whose graphical user interface was written by Julie Zelenski of Stanford University.

 
Topics The primary topic is two-dimensional array processing, including traversals with nested loops, moving down the diagonals, filling in the area under a diagonal, etc.
Audience This assignment is appropriate for CS 1.  Students should be familiar with one-dimensional arrays and the loops for traversing them.  They may also be familiar with two-dimensional arrays, or this assignment could serve as an introduction to 2D data structures.  The data structure in this case is a grid of rows and columns, rather than a Java 2D array.  Students should also be somewhat familiar with classes and methods, since the assignment asks them to write short methods of their own in the GridPlotter class, and to use the ensureEmpty and placeColorBlock methods provided in that class.
Difficulty We cover arrays and loops early in CS 1, so our students initially view this assignment as quite difficult.  The first methods they implement, however, are very similar to the onRowMajorFillButtonClick method that is provided to them. The methods that follow are carefully sequenced to become progressively, but slowly, more difficult.  We have not seen any students unable to complete the assignment.  Students with previous background who might find it boring choose to implement additional, more challenging methods, such as the CheckerFill and DrawGrid (a poor name for a gingham pattern) examples above.
Strengths The assignment gives students repeated practice with a variety of two-dimensional traversal techniques, but rather than finding the assignment tedious they enjoy it.  The sequencing of the methods that students implement is effective in allowing students to stretch their skills. The assignment is flexible enough to allow both strong and weak students to challenge themselves and succeed, both technically and creatively.  The graphical output provides students with immediate feedback on what their algorithms are really doing.
Weaknesses This assignment involves making small changes to a large program.  Students may be uncomfortable working with a large program, much of which is black-box to them.  They may also be uncomfortable working with aspects of the program that they do not understand, such as the automatic button generation and the Help menu.  If students do not give an appropriate signature for their methods, they will not see buttons appear on the graphical user interface, but will not understand why not.  Finally, they may also be disappointed not to be creating a program from scratch.
Dependencies The assignment requires familiarity with one-dimensional arrays and at least some exposure to classes and methods.  The automatic button generation feature, which frees students from having to write GUI code to execute their methods, requires the Grid Package software (grid.jar, provided as part of the zip file below).
Variants We have developed an event-driven variant for CS 2.  Instead of writing methods with controlling loops, students write iterator methods that, given the current state, return the next location in which to place a color block.  This assignment is considerably more difficult for students to conceptualize, although the graphics do help to provide them with immediate feedback on their solutions.  The most significant weakness of this variant is that its "iterators" do not really correspond to usual iterator objects.  This, and other assignments using the Grid Package, are available from http://www.cs.kzoo.edu/GridPkg/.

 

Files: