GridPlotter

Submission for the SIGCSE '05
Nifty Assignments
Session

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/.