CSCI 120 Lab 7

In this lab we will begin putting the finishing touches on the GUI interface for the EightPuzzle applet, Assignment 9. Much of the code is already written, but there are some substantial steps to complete.

Assembling the Project

We're going to start with the source code linked to at this location to obtain a Processing applet with the behavior you see at that page.
  1. Download EightPuzzleFramework.pde and build a processing project out of it.
  2. In the project, create a new tab named "EightPuzzle". Copy the code from EightPuzzle.pde and paste it into the EightPuzzle tab. (This is a stripped-down, compiling but non-working version of the EightPuzzle class. Ultimately you will substitute it with your own, but for now stick with this pared-down version.)
  3. Repeat step (2), with appropriate names for the new tabs, for the files PushBar.pde and Square.pde.
  4. Find the folder which Processing has created for EightPuzzleFramework (in which you will find the files EightPuzzleFramework.pde, PushBar.pde, etc.). Inside that folder, create a folder entitled "data". Inside the data folder, store all six fonts (the ".vlw" files) you find at this directory (or, same thing, the .vlw files linked to at this location).
  5. You should (at last) be able to run EightPuzzleFramework and get the behavior shown here.
We now need to get this working properly. Generally, what you want to do is find the parts of the program that say "MODIFY" (simply do a search for "//MODIFY" to find those sections) and change them accordingly. Follow the steps below to make it a bit easier.

Getting the Row and Column

As it is, when you click on the applet, the text field at the bottom displays the coordinates (in pixels) of the mouse. That's useful; we know the applet is responding to mouse clicks correctly. But it would be more useful to display the ROW and COLUMN of the mouse click, relative to the grid specified by the squares. The variables row and column can each be a number from 0 to 2.

Now let's modify the program so that the row and column of the mouse click is displayed in the text field. To start with, search for the first "//MODIFY" in EightPuzzleFramework. You first want to change the assignments row = 0; and column = 0; to the right things. A hint is given in the documentation.

Then to test out that your assignments to row and column are correct, go to the third "//MODIFY" in EightPuzzleFramework and change the string in the invocation of bottomTextMessage() so that the row and column (rather than x and y) are displayed. Is the output making sense?

Let's Give those Squares Some Character!

The squares, so far, are just faceless, immovable slabs of color. The way things are set up, it's easy to get numbers on them: Simply put your own EightPuzzle source in place of the pared-down version that's already there! If you wrote it correctly, the numbers should be displayed automatically (can you see why?). But the squares will still just sit there, unresponsive to mouse clicks.

That is also easily fixed; a primitive move() method is already implemented in the Square class. All you have to do is implement the second "//MODIFY" in EightPuzzleFramework. This asks you to do a (linear) search of the array of Squares, named s, to find one that can be moved. The way Square.canMove() and draw() are written, once you do this correctly, the squares will respond correctly to mouse clicks.

They won't yet move "continuously", however. This is work you'll have to do in the Square class. Save that for later.

Announcements and the Button

Change the invocation of bottomTextMessage() in mouseClicked() so that it announces the number of (legal) moves the user has made.

The PushBar class is mostly working. When you push on the button at the top, the reset() method of the PushBar class is automatically invoked. But it doesn't do much. Modify it (as the "//MODIFY" documentation suggests) so that it does the right thing. Using the invocation of bottomTextMessage() in reset(), make it so something sensible is written when the reset button is pushed (take a look here for what happens in my version as an example).

Getting the Logic Straight

Work on the remaining logic in mouseClicked(). The comments indicate what is necessary. Some thought will be required to reproduce the behavior you see here, or at least get something similar and workable.

Moving the Squares

The last step. Take a look at the move() method of the Square class. Implement the pseudocode given there for moving the square "continuously". Note that the suggestion to increment x and y really means to move the square one pixel at a time. This is safe, given the condition for a square winding up in its rightful position (which requires the exact x and y coordinates). If you want to increment or decrement x and/or y by more than 1 (say, to make the squares move faster), proceed with caution. Some of the logic in move() is going to have to be changed. Otherwise, the squares will sometimes fly off the screen in unpredictable directions!

Back to CS 120 Home Page