Lab #5: Graphics, Inheritance, and Problem Solving Mah Jong Tiles This programming lab continues the work began in Lab 3 to build a set of Mah Jong tiles that will be used in subsequent labs to build a Mah Jong solitaire game. At the completion of this lab, the tiles will have a visible, graphic appearance or representation. Please read the instructions carefully as you have great flexibility in how you implement your tiles but there are a few strict requirements. You must distinguish between (a) descriptions of how I implemented the tiles, (b) my suggestions, and (c) the program requirements. I strongly recommend that you read through the complete assignment before you begin. Please note that this assignment has a high value score and an extended working time - both indicators that the assignment is challenging and will take a substantial amount of time and effort (20 to 40 hours). Please begin at once. As professional computer scientists you will often be given a task and then periodically be asked to provide a concrete assessment of your progress. Having concrete and measurable "mile posts" helps you to assess your progress. I recommend that you divide the project into pieces and establish personal due dates for each piece. This will help you to manage your time and help you to complete the project on time. The object model supports this approach by dividing a program into classes that can be implemented and tested independently. It is both possible and strongly recommend that you put a "main" in each class so that you can test each class independently. I will provide copies of the main from each of my tile classes and you may use and modify these methods to match your implementations. Begin by reading about Mah Jong tiles at Wikipedia and compare the tile descriptions to the inheritance hierarchy created in Lab #3 and to the tiles used in the following Flash version of Mah Jong solitaire. tile_layers.pdfPreview the documentView in a new window Mahjong Tiles Flash Mah Jong Solitaire The Flash version of Mah Jong solitaire demonstrates the basic behavior (rules) that we are implementing for the final project. Please take careful note of the number of tiles that must be displayed horizontally and vertically - do not make your tiles too large to fit on your computer screen when arranged in this pattern. I will score Lab #7, where the tiles will be arranged as illustrated here, on a screen with a screen resolution of 1920 x 1080. When performing an object-oriented analysis (OOA), it is customary to name classes after corresponding problem domain entities whenever possible. It is sometimes necessary to introduce classes that do not appear explicitly in the problem domain to represent superclasses that maintain features common to two or more explicitly described classes; RankTile and pictureTile are examples of classes that abstract features common to classes that are identified during analysis. Furthermore, it is often necessary to add implementation classes during object-oriented design (OOD). Implementation classes may not have direct analogs in the problem domain but serve as bridges between the "real world" and the final computer program. Implementation classes may be used to deal with special cases in the problem domain (e.g., the Bamboo1Tile), implementation details that are more easily managed as separate classes (e.g., Circle, Pancake, Bamboo, and RotatedBamboo), or containers used to organize objects. The UML diagram below shows the classes created for Lab #3, which should match the problem fairly closely. The UML diagram also adds four implementation classes. Circle draws an individual decorated circle and Bamboo draws a single bamboo stick. Pancake draws the embellished circle displayed on the Circle 1 tile, and RotatedBamboo draws a bamboo stick that has been rotated as needed to create the Bamboo 8 tile. None of these four classes are required but illustrate how I implemented my tile classes. (Also, the classes are not meant to be complete, but just illustrate some of the essential features.) NOTE: three of the classes (Tile, RankTile, and PictureTile) in the UML diagram below are presented as abstract classes (the name appears in italic letters). My final program did not need instances of these classes so I could make them abstract; you may have your classes abstract or you may make them concrete if that helps you complete and debug the assignment. mahjong_tiles.png I mostly deviated from the problem domain where a tile was an exception to an otherwise clearly followed rule. For example, the Bamboo 1 tile is often depicted as a bird (typically a sparrow) rather than as a single bamboo stick - so I implemented it as a specialized picture tile. I also implemented the wind tiles and two of the dragon tiles as character tiles, which requires branching logic in the constructor and the paintComponent method of the CharacterTile class. A possible alternative implementation of the CharacterTile is presented in the CharacterTile section below. Assignment Summary and Submission Requirements This is an individual assignment. You may exchange ideas and help each other solve problems and debug code, but you may not exchange or copy code (beyond a couple of lines to answer a specific question). You may submit individual .java files or you may zip your .java files. If you submit a zip file, DO NOT ZIP THE ENTIRE PROJECT - just the .java files. If you submit a zip file, the file MAY NOT CREATE A SUBFOLDER WHEN UNZIPPED (you may want to test this before uploading your zip file) - this requires extra steps to move the files into the test bed. If your IDE automatically inserts package statements (e.g., package Lab5;) at the top of each file, PLEASE REMOVE ALL PACKAGE STATEMENTS BEFORE SUBMITTING YOUR ASSIGNMENT as that's a lot of files for me to modify to try to get them to compile. A file named Lab5.java is included with the assignment. When compiled, this file will display all of your tiles (similar the illustration below). You MAY MODIFY this file as needed to accommodate your tile classes. Submit Lab5.java with your .java files. A zip file containing the images needed for the bamboo 1 tile, the season tiles, and the flower tiles is included with the assignment. For this assignment you must use the images provided (this is just to reduce the number of files that I must download and so make grading easier); you may change images in later assignments. The test bed will provide the images in a folder named "images" located as demonstrated previously. all_tiles.png The Tile Class The main task of the tile class is to draw a single, empty or blank three-dimensional tile. All drawing operations take place in an overridden paintComponent(Graphics g) method. The tiles shown in the Wikipedia article and in the Mah Jong solitaire game are shown from opposite perspectives: top right and bottom left respectively. You may choose in which direction you tiles "lean" (upwards to the left, upwards to the right, downwards to the left, or downwards to the right - whatever seems easiest for you to implement). This class will use several instances of Polygon and GradientPaint (awt package). It is efficient to make these instances (i.e., objects) static and therefore it is convenient to instantiate them in a static initializer block (chapter 5). I used the following color chart to help find a suitable color (but I think that the gradient shading will look better with a slightly darker color than the one I used). Color Chart Both Wikipedia and the game use rectangular tiles. I made mine square. You may make your tiles either square or rectangular. This is what my tile looks like: tile.png Requirements: Implement your tile as a sub-class of JPanel. Your image must be three-dimensional, have two layers, and use gradient painting (choose a point for the light source and have the tile gradually darken the farther it is from the source). Most of the operations in the tile paintComponent method can be accomplished by a standard Graphics object. However the method setPaint (which sets a GradientPaint) does not work with Graphics. Fortunately, the graphics object passed into paintComponent is really a sub-class of Graphics and can be safely downcast to a Graphics2D object: Graphics2D g2 = (Graphics2D)g; Graphics2D supports setPaint. Begin the problem solving phase of this class by drawing a diagram of your tile (on graph paper if you have it) and labeling the coordinates of each point in the square and polygons. Then program the tile as a JPanel. Each JPanel (i.e., each tile) will have its own, separate coordinate system with (0,0) in the upper left hand corner. Use the fillPolygon, drawPolygon, and drawRect methods in the Graphics and/or Graphics2D classes to draw your tile. Remember to set the preferred sise of the tile. My Tile main used to test the class: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Tile"); frame.add(new Tile()); frame.pack(); frame.setVisible(true); } The CharacterTile Class The CharacterTile class requires Chinese characters. The Chinese characters are installed by default on Windows 7 but must be installed separately on Windows XP. I have no idea about Macs or Linux. If you do not have and do not want to install the Chinese characters on your computer, you may use Athena, the department's Windows terminal server, to write and or test your program. Pleas note: I have the Chinese characters installed on my system for the default font (Roman) only but not for other fonts like Ariel or Helvetica. Please don't use other typefaces. There are generally two major problems with the CharacterTile class: dealing with the unicode to create the Chinese characters, and sizing and positioning the characters. The Graphics drawString method will accept a unicode character as an argument: g.drawString("\u842C", ..... Alternatively, the static method Character.toString('\u4E00'); will convert a character into an appropriate string, which can then be used with drawString. The following table lists the unicode characters used in the project: 1 4E00 2 4E8C 3 4E09 4 56DB 5 4E94 6 516D 7 4E03 8 516B 9 4E5D North 5317 East 6771 West 897F South 5357 Red 4E2D Green 767C wan 842C I used the following online resources to help figure this out: Chinese Unicode Tables Chinese to Unicode Dynamic Chinese Dictionary My character tiles look like this: character.png The black characters are created with the unicode characters in the above table. The red Chinese character is "wan" at the bottom of the table. Use the x and y arguments to drawString to position the characters (remember the centering problem in the GUIDemo.java example). Text sizing is also demonstrated in GUIDemo.java. I have implemented the character tile in two different ways: as just a single class as illustrated in the above UML diagram and as three classes as illustrated below. The single class implementation requires branching logic in both the constructor and in the paintComponent method. The three-class implementation replaces the branching logic with separate paintComponent methods and polymorphism. You may implement the character tile as you choose. char_tile_option.png You can use a long if-else statement or a large switch statement to select what character to draw (i.e., to map between English and Chinese characters), but that is a lot of work. You could use either an array or an array list to draw the characters in the range of 1 - 9, which simplifies the programming a little. I used a HashMap (in the util package) with a Character key and a Character value. That is, (a) the constructor remembers which character is passed in, (b) then I construct a hash map in a static initializer block that maps that character to the corresponding unicode character, and (c) in paintComponent, I look up and draw the unicode character that corresponds to the character from the constructor. My constructor for this class is small and simple, but my paintComponent is large and complex. Requirements: Draw the tile in paintComponent. Draw the basic, blank tile with super.paintComponent(g); and do the rest of the drawing in the CharacterTile paintComponent method. Draw the indicated character in red in the upper right hand corner. For numerically ranked tiles, draw the rank in black above the red wan character. For the wind characters and for the red and green dragon, draw the symbol full size. Add a tool tip in the constructor to display the tile' s name: setToolTipText(toString()); My CharacterTile main used for testing and validation: public static void main(String[] args) { JFrame frame = new JFrame(); JPanel tiles = new JPanel(); JScrollPane scroller = new JScrollPane(tiles); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Character Tiles"); frame.add(scroller); // Try something like this if your tiles don't fit on the screen. // Replace "tile width" and "tile height" with your values. //scroller.setPreferredSize(new Dimension(8 * tile width, 40 + tile height)); tiles.add(new CharacterTile('1')); tiles.add(new CharacterTile('2')); tiles.add(new CharacterTile('3')); tiles.add(new CharacterTile('4')); tiles.add(new CharacterTile('5')); tiles.add(new CharacterTile('6')); tiles.add(new CharacterTile('7')); tiles.add(new CharacterTile('8')); tiles.add(new CharacterTile('9')); tiles.add(new CharacterTile('N')); tiles.add(new CharacterTile('E')); tiles.add(new CharacterTile('W')); tiles.add(new CharacterTile('S')); tiles.add(new CharacterTile('C')); tiles.add(new CharacterTile('F')); frame.pack(); frame.setVisible(true); } Modify this main if you use the three-class implementation (or anything similar): new WindAndDragonTile('N')); . . . new WindAndDragonTile('F')); The CircleTile Class The circle class is relatively straightforward: follow the problem solving example of the Die problem presented in class. I implemented two similar versions of this class: one version used a fixed size circle and the other used a circle diameter that was a function of the number of circles on the tile and on their arrangement. The fixed size is easier to implement but the variable version looks better and better matches the "real" tiles seen on Wikipedia and the Flash example. Try the variable-size version if you have time and want to challenge yourself (5 points extra credit). I also implemented two inner classes to actually draw the circles as illustrated in the above UML class diagram. The Circle class's paintComponent draws a single, decorated circle. The Pancake class's paintComponent calls Circle to draw the center and then adds the outer decoration. My two implementations look like this: circle1.png circle2.png I created an array of Circle objects for each tile. That made the paintComponent method very simple: public void paintComponent(Graphics g) { super.paintComponent(g); for (Circle c : circles) if (c != null) c.draw(g); } Requirements: The individual circles may be one size or varied in size for extra credit but must have some simple (or complex if you wish) interior decoration and must be displayed in the color as indicated in Wikipedia. The rank 1 tile (i.e., the big pancake) must have a large circle that has some repeating pattern. Add the tool tip text in the constructor: setToolTipText(toString()); CircleTile Main: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Circle Tiles"); frame.add(new CircleTile(1)); frame.add(new CircleTile(2)); frame.add(new CircleTile(3)); frame.add(new CircleTile(4)); frame.add(new CircleTile(5)); frame.add(new CircleTile(6)); frame.add(new CircleTile(7)); frame.add(new CircleTile(8)); frame.add(new CircleTile(9)); frame.pack(); frame.setVisible(true); } The BambooTile Class This was the most difficult class for me! In many ways it is similar to the CircleTile class. I drew many pictures and labeled many points as I tried to draw and place each bamboo stick. Notice that the 8-tile is difficult to draw as is illustrated in either Wikipedia or the game. You may make the simplification shown below or implement the "correct" tile using the Graphics2D rotate method (see Peter's example program and/or "Coordinate Transformations" in Vol 2, Advanced AWT, p. 552) for 10 points extra credit. The 1 Bamboo is traditionally implemented as a bird, which I have done. I will explain more about picture tiles in the next section. My bamboo tiles look like this: bamboo.png bamboo8.png Requirements: Each bamboo stick must have some physical decorations beyond being a simple rectangle and must have some color highlights. Each stick, except 8, must follow the color convention shown in Wikipedia. BambooTile main: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Bamboo Tiles"); frame.add(new BambooTile(2)); frame.add(new BambooTile(3)); frame.add(new BambooTile(4)); frame.add(new BambooTile(5)); frame.add(new BambooTile(6)); frame.add(new BambooTile(7)); frame.add(new BambooTile(8)); frame.add(new BambooTile(9)); frame.pack(); frame.setVisible(true); } The PictureTile, SeasonTile, FlowerTile, and Bamboo1Tile Class These were easest classes to implement. They follow the GUIDemo program written in class. Use the images accompanying this assignment in the images.jar file. You may extract the image with the following command: jar xvf images.jar You can list the contents of jar (i.e., get table of contest) with the following command: jar tvf images.jar Alternatively, if you are working with an IDE, it is generally possible to add the jar as a resource and not unpack the images at all. You can place a single main in PictureTile and test all of the subclasses at once or you can have a main in each subclass (I have done both). Don't forget to add the tool tip text in the constructors: setToolTipText(toString()); My picture tiles look like this: picture.png The individual tiles look like this: picture.png season.png flower.png bamboo1.png Requirements: There is not much to say: make all of the picture tiles, make them look nice (i.e., dont color outside of the lines so to speak). PictureTile main: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Picture Tiles"); frame.add(new Bamboo1Tile()); frame.add(new FlowerTile("Chrysanthemum")); frame.add(new FlowerTile("Orchid")); frame.add(new FlowerTile("Plum")); frame.add(new FlowerTile("Bamboo")); frame.add(new SeasonTile("Spring")); frame.add(new SeasonTile("Summer")); frame.add(new SeasonTile("Fall")); frame.add(new SeasonTile("Winter")); frame.pack(); frame.setVisible(true); } SeasonTile main: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Season Tiles"); frame.add(new SeasonTile("Spring")); frame.add(new SeasonTile("Summer")); frame.add(new SeasonTile("Fall")); frame.add(new SeasonTile("Winter")); frame.pack(); frame.setVisible(true); } FlowerTile main: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Flower Tiles"); frame.add(new FlowerTile("Chrysanthemum")); frame.add(new FlowerTile("Orchid")); frame.add(new FlowerTile("Plum")); frame.add(new FlowerTile("Bamboo")); frame.pack(); frame.setVisible(true); } Bamboo1Tile main: public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FlowLayout()); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setTitle("Bamboo 1 Tile"); frame.add(new Bamboo1Tile()); frame.pack(); frame.setVisible(true); } The WhiteDragonTile Class The White Dragon is a special case, like the bamboo tiles, it is not a picture nor is it a symbol: it must be drawn. Here are two slightly different versions. The first has "transparent" spaces between the blue rectangle and the second has alternating blue and white rectangles. white dragon 1.png white dragon 2.png Requirements: you must draw a border around the white dragon tile. The border may be simple but must be more than a single, solid color.