Solution for
Programming Exercise 7.7
THIS PAGE DISCUSSES ONE POSSIBLE SOLUTION to the following exercise from this on-line Java textbook.
Exercise 7.7: The applet at the end of Section 7.7 shows animations of moving symmetric patterns that look something like the image in a kaleidescope. Symmetric patterns are pretty. Make the SimplePaint3 applet do symmetric, kaleidoscopic patterns. As the user draws a figure, the applet should be able to draw reflected versions of that figure to make symmetric pictures.
The applet will have several options for the type of symmetry that is displayed. The user should be able to choose one of four options from a JComboBox menu. Using the "No symmetry" option, only the figure that the user draws is shown. Using "2-way symmetry", the user's figure and its horizontal reflection are shown. Using "4-way symmetry", the two vertical reflections are added. Finally, using "8-way symmetry", the four diagonal reflections are also added. Formulas for computing the reflections are given below.
The source code SimplePaint3.java already has a drawFigure() subroutine that draws all the figures. You can add a putMultiFigure() routine to draw a figure and some or all of its reflections. putMultiFigure should call the existing drawFigure to draw the figure and any necessary reflections. It decides which reflections to draw based on the setting of the symmetry menu. Where the mousePressed, mouseDragged, and mouseReleased methods call drawFigure, they should call putMultiFigure instead. The source code also has a repaintRect() method that calls repaint() on a rectangle that contains two given points. You can treat this in the same way as drawFigure(), adding a repaintMultiRect() that calls repaintRect() and replacing each call to repaintRect() with a call to repaintMultiRect(). Alternatively, if you are willing to let your applet be a little less efficient about repainting, you could simply replace each call to repaintRect() with a simple call to repaint(), without parameters. This just means that the applet will redraw a larger area than it really needs to.
If (x,y) is a point in a component that is width pixels wide and height pixels high, then the reflections of this point are obtained as follows:
The horizontal reflection is (width - x, y)
The two vertical reflections are (x, height - y) and (width - x, height - y)
To get the four diagonal reflections, first compute the diagonal reflection of (x,y) as
a = (int)( ((double)y / height) * width ); b = (int)( ((double)x / width) * height );Then use the horizontal and vertical reflections of the point (a,b):
(a, b) (width - a, b) (a, height - b) (width - a, height - b)(The diagonal reflections are harder than they would be if the canvas were square. Then the height would equal the width, and the reflection of (x,y) would just be (y,x).)
To reflect a figure determined by two points, (x1,y1) and (x2,y2), compute the reflections of both points to get the reflected figure.
This is really not so hard. The changes you have to make to the source code are not as long as the explanation I have given here.
Here is my applet. Don't forget to try it with the symmetry menu set to "8-way Symmetry"!
Discussion
The original applet, SimplePaint3, has a method
drawFigure(Graphics g, int shape, int x1, int y1, int x2, int y2)that is used to draw all the lines and figures in the applet. As suggested in the exercise, the drawFigure method will still be used to draw individual lines and figures. However, it is called by another method, putMultiFigure, that takes care of drawing any necessary reflections. The putMultiFigure method checks the value of an instance variable, symmetry, to decide which reflections to draw. This variable will be set elsewhere in the applet to reflect the user's choice of symmetry type. The computations are exactly as indicated in the exercise. The points (x1,y1) and (x2,y2) are reflected using the formulas given there to get the points for the reflected figures.
private void putMultiFigure(Graphics g, int shape, int x1, int y1, int x2, int y2) { // Draws the shape and possibly some of its reflections. // The reflections that are drawn depend on the selected // item in symmetryChoice. The shapes are drawn by calling // the drawFigure method. int width = getWidth(); int height = getHeight(); drawFigure(g,shape,x1,y1,x2,y2); // Draw the basic figure if (symmetry >= SYMMETRY_2) { // Draw the horizontal reflection. drawFigure(g, shape, width - x1, y1, width - x2, y2); } if (symmetry >= SYMMETRY_4) { // Draw the two vertical reflections. drawFigure(g, shape, x1, height - y1, x2, height - y2); drawFigure(g, shape, width - x1, height - y1, width - x2, height - y2); } if (symmetry == SYMMETRY_8) { // Draw the four diagonal reflections. int a1 = (int)( ((double)y1 / height) * width ); int b1 = (int)( ((double)x1 / width) * height ); int a2 = (int)( ((double)y2 / height) * width ); int b2 = (int)( ((double)x2 / width) * height ); drawFigure(g, shape, a1, b1, a2, b2); drawFigure(g, shape, width - a1, b1, width - a2, b2); drawFigure(g, shape, a1, height - b1, a2, height - b2); drawFigure(g, shape, width - a1, height - b1, width - a2, height - b2); } }In my applet, I followed a similar strategy for the repaintRect() method, as indicated in the exercise. You can check the details in my solution, below, if you are interested.
A third JComboBox menu is added to the applet to hold the four symmetry options. The option that is selected in this menu is checked in the mousePressed method when the user starts drawing. The value is stored in a new instance variable named symmetry. This variable is used in the putMultiFigure method as its sym parameter. The only other changes that are necessary is to change every call to putFigure in the original program into a call to putMultiFigure, and to change every call to repaintRect into a call to repaintMultiRect().
The Solution
Significant changes from SimplePaint3 are shown in red
/* A simple program where the user can sketch curves and shapes in a variety of colors on a variety of background colors. The user can draw symmetric pictures in which shapes are reflected horizontally, vertically, and diagonally. The user selects the type of symmetry from a pop-up menu at the top of the applet. The user can select a color to be used for drawing from another pop-up menu. If the user clicks "Set Background", the background color is set to the current drawing color and the drawing area is filled with that color. If the user clicks "Clear", the drawing area is just filled with the current background color. The user selects the shape to draw from another pop-up menu at the top of the applet. The user can draw free-hand curves, straight lines, and one of six different types of shapes. The user's drawing is saved in an off-screen image, which is used to refresh the screen when repainting. The picture is lost if the applet changes size, however. This file defines two classes, KaleidaPaint,class, and class, KaleidaPaint$Display.class. */ import java.awt.*; import java.awt.event.*; import javax.swing.*; public class KaleidaPaint extends JApplet { // The main applet class simply sets up the applet. Most of the // work is done in the Display class. JComboBox colorChoice, figureChoice; // Pop-up menus, defined as instance JComboBox symmetryChoice; // variables so that the Display // class can see them. public void init() { setBackground(Color.gray); getContentPane().setBackground(Color.gray); Display canvas = new Display(); // The drawing area. getContentPane().add(canvas,BorderLayout.CENTER); JPanel buttonBar = new JPanel(); // A panel to hold the buttons. buttonBar.setBackground(Color.gray); getContentPane().add(buttonBar, BorderLayout.SOUTH); JPanel choiceBar = new JPanel(); // A panel to hole the pop-up menus choiceBar.setBackground(Color.gray); getContentPane().add(choiceBar, BorderLayout.NORTH); JButton fill = new JButton("Set Background"); // The first button. fill.addActionListener(canvas); buttonBar.add(fill); JButton clear = new JButton("Clear"); // The second button. clear.addActionListener(canvas); buttonBar.add(clear); colorChoice = new JComboBox(); // The pop-up menu of colors. colorChoice.addItem("Black"); colorChoice.addItem("Red"); colorChoice.addItem("Green"); colorChoice.addItem("Blue"); colorChoice.addItem("Cyan"); colorChoice.addItem("Magenta"); colorChoice.addItem("Yellow"); colorChoice.addItem("White"); colorChoice.setBackground(Color.white); choiceBar.add(colorChoice); figureChoice = new JComboBox(); // The pop-up menu of shapes. figureChoice.addItem("Curve"); figureChoice.addItem("Straight Line"); figureChoice.addItem("Rectangle"); figureChoice.addItem("Oval"); figureChoice.addItem("RoundRect"); figureChoice.addItem("Filled Rectangle"); figureChoice.addItem("Filled Oval"); figureChoice.addItem("Filled RoundRect"); figureChoice.setBackground(Color.white); choiceBar.add(figureChoice); symmetryChoice = new JComboBox(); // The menu of symmetry types. symmetryChoice.addItem("No Symmetry"); symmetryChoice.addItem("2-way Symmetry"); symmetryChoice.addItem("4-way Symmetry"); symmetryChoice.addItem("8-way Symmetry"); symmetryChoice.setBackground(Color.white); choiceBar.add(symmetryChoice); } // end init() public Insets getInsets() { // Specify how wide a border to leave around the edges of the applet. return new Insets(3,3,3,3); } private class Display extends JPanel implements MouseListener, MouseMotionListener, ActionListener { // Nested class Display represents the drawing surface of the // applet. It lets the user use the mouse to draw colored curves // and shapes. The current color is specified by the pop-up menu // colorChoice. The current shape is specified by another pop-up menu, // figureChoice. (These are instance variables in the main class.) // The panel also listens for action events from buttons // named "Clear" and "Set Background". The "Clear" button fills // the panel with the current background color. The "Set Background" // button sets the background color to the current drawing color and // then clears. These buttons are set up in the main class. private final static int BLACK = 0, RED = 1, // Some constants to make GREEN = 2, // the code more readable. BLUE = 3, // These numbers code for CYAN = 4, // the different drawing colors. MAGENTA = 5, YELLOW = 6, WHITE = 7; private final static int CURVE = 0, LINE = 1, RECT = 2, // Some constants that code OVAL = 3, // for the different types of ROUNDRECT = 4, // figure the program can draw. FILLED_RECT = 5, FILLED_OVAL = 6, FILLED_ROUNDRECT = 7; private final static int NO_SYMMETRY = 0, // Some constants that code for SYMMETRY_2 = 1, // the different symmetry styles. SYMMETRY_4 = 2, SYMMETRY_8 = 3; /* Some variables used for backing up the contents of the panel. */ Image OSI; // The off-screen image (created in checkOSI()). int widthOfOSI, heightOfOSI; // Current width and height of OSI. These // are checked against the size of the applet, // to detect any change in the panel's size. // If the size has changed, a new OSI is created. // The picture in the off-screen image is lost // when that happens. /* The following variables are used when the user is sketching a curve while dragging a mouse. */ private int mouseX, mouseY; // The location of the mouse. private int prevX, prevY; // The previous location of the mouse. private int startX, startY; // The starting position of the mouse. // (Not used for drawing curves.) private boolean dragging; // This is set to true when the user is drawing. private int figure; // What type of figure is being drawn. This is // specified by the figureChoice menu. private int symmetry; // What type of symmetry style is being used. This is // specified by the symmetryChoice menu. private Graphics dragGraphics; // A graphics context for the off-screen image, // to be used while a drag is in progress. private Color dragColor; // The color that is used for the figure that is // being drawn. Display() { // Constructor. When this component is first created, it is set to // listen for mouse events and mouse motion events from // itself. The initial background color is white. addMouseListener(this); addMouseMotionListener(this); setBackground(Color.white); } private void drawFigure(Graphics g, int shape, int x1, int y1, int x2, int y2) { // This method is called to do ALL drawing in this applet! // Draws a shape in the graphics context g. // The shape parameter tells what kind of shape to draw. This // can be LINE, RECT, OVAL, ROUNTRECT, FILLED_RECT, // FILLED_OVAL, or FILLED_ROUNDRECT. (Note that a CURVE is // drawn by drawing multiple LINES, so the shape parameter is // never equal to CURVE.) For a LINE, a line is drawn from // the point (x1,y1) to (x2,y2). For other shapes, the // points (x1,y1) and (x2,y2) give two corners of the shape // (or of a rectangle that contains the shape). if (shape == LINE) { // For a line, just draw the line between the two points. g.drawLine(x1,y1,x2,y2); return; } int x, y; // Top left corner of rectangle that contains the figure. int w, h; // Width and height of rectangle that contains the figure. if (x1 >= x2) { // x2 is left edge x = x2; w = x1 - x2; } else { // x1 is left edge x = x1; w = x2 - x1; } if (y1 >= y2) { // y2 is top edge y = y2; h = y1 - y2; } else { // y1 is top edge. y = y1; h = y2 - y1; } switch (shape) { // Draw the appropriate figure. case RECT: g.drawRect(x, y, w, h); break; case OVAL: g.drawOval(x, y, w, h); break; case ROUNDRECT: g.drawRoundRect(x, y, w, h, 20, 20); break; case FILLED_RECT: g.fillRect(x, y, w, h); break; case FILLED_OVAL: g.fillOval(x, y, w, h); break; case FILLED_ROUNDRECT: g.fillRoundRect(x, y, w, h, 20, 20); break; } } private void putMultiFigure(Graphics g, int shape, int x1, int y1, int x2, int y2) { // Draws the shape and possibly some of its reflections. // The reflections that are drawn depend on the selected // item in symmetryChoice. The shapes are drawn by calling // the drawFigure method. int width = getWidth(); int height = getHeight(); drawFigure(g,shape,x1,y1,x2,y2); // Draw the basic figure if (symmetry >= SYMMETRY_2) { // Draw the horizontal reflection. drawFigure(g, shape, width - x1, y1, width - x2, y2); } if (symmetry >= SYMMETRY_4) { // Draw the two vertical reflections. drawFigure(g, shape, x1, height - y1, x2, height - y2); drawFigure(g, shape, width - x1, height - y1, width - x2, height - y2); } if (symmetry == SYMMETRY_8) { // Draw the four diagonal reflections. int a1 = (int)( ((double)y1 / height) * width ); int b1 = (int)( ((double)x1 / width) * height ); int a2 = (int)( ((double)y2 / height) * width ); int b2 = (int)( ((double)x2 / width) * height ); drawFigure(g, shape, a1, b1, a2, b2); drawFigure(g, shape, width - a1, b1, width - a2, b2); drawFigure(g, shape, a1, height - b1, a2, height - b2); drawFigure(g, shape, width - a1, height - b1, width - a2, height - b2); } } private void repaintRect(int x1, int y1, int x2, int y2) { // Call repaint on a rectangle that contains the points (x1,y1) // and (x2,y2). (Add a 1-pixel border along right and bottom // edges to allow for the pen overhang when drawing a line.) int x, y; // top left corner of rectangle that contains the figure int w, h; // width and height of rectangle that contains the figure if (x2 >= x1) { // x1 is left edge x = x1; w = x2 - x1; } else { // x2 is left edge x = x2; w = x1 - x2; } if (y2 >= y1) { // y1 is top edge y = y1; h = y2 - y1; } else { // y2 is top edge. y = y2; h = y1 - y2; } repaint(x,y,w+1,h+1); } private void repaintMultiRect(int x1, int y1, int x2, int y2) { // Call repaint on a rectangle that contains the points (x1,y1) // and (x2,y2). Also call repaint on reflections of this // rectangle, depending on the type of symmetry. The // rects are repainted by calling repaintRect(). int width = getWidth(); int height = getHeight(); repaintRect(x1,y1,x2,y2); // repaint the original rect if (symmetry >= SYMMETRY_2) { // repaint the horizontal reflection. repaintRect(width - x1, y1, width - x2, y2); } if (symmetry >= SYMMETRY_4) { // repaint the two vertical reflections. repaintRect(x1, height - y1, x2, height - y2); repaintRect(width - x1, height - y1, width - x2, height - y2); } if (symmetry == SYMMETRY_8) { // repaint the four diagonal reflections. int a1 = (int)( ((double)y1 / height) * width ); int b1 = (int)( ((double)x1 / width) * height ); int a2 = (int)( ((double)y2 / height) * width ); int b2 = (int)( ((double)x2 / width) * height ); repaintRect(a1, b1, a2, b2); repaintRect(width - a1, b1, width - a2, b2); repaintRect(a1, height - b1, a2, height - b2); repaintRect(width - a1, height - b1, width - a2, height - b2); } } private void checkOSI() { // This method is responsible for creating the off-screen image. // It should be called before using the OSI. It will make a new OSI if // the size of the panel changes. if (OSI == null || widthOfOSI != getSize().width || heightOfOSI != getSize().height) { // Create the OSI, or make a new one if panel size has changed. OSI = null; // (If OSI already exists, this frees up the memory.) OSI = createImage(getSize().width, getSize().height); widthOfOSI = getSize().width; heightOfOSI = getSize().height; Graphics OSG = OSI.getGraphics(); // Graphics context for drawing to OSI. OSG.setColor(getBackground()); OSG.fillRect(0, 0, widthOfOSI, heightOfOSI); OSG.dispose(); } } public void paintComponent(Graphics g) { // Copy the off-screen image to the screen, // after checking to make sure it exists. Then, // if a shape other than CURVE is being drawn, // draw it on top of the image from the OSI. checkOSI(); g.drawImage(OSI, 0, 0, this); if (dragging && figure != CURVE) { g.setColor(dragColor); putMultiFigure(g,figure,startX,startY,mouseX,mouseY); } } public void actionPerformed(ActionEvent evt) { // Respond when the user clicks on a button. The // command must be either "Clear" or "Set Background". String command = evt.getActionCommand(); checkOSI(); if (command.equals("Set Background")) { // Set background color before clearing. // Change the selected color so it is different // from the background color. setBackground(getCurrentColor()); if (colorChoice.getSelectedIndex() == BLACK) colorChoice.setSelectedIndex(WHITE); else colorChoice.setSelectedIndex(BLACK); } Graphics g = OSI.getGraphics(); g.setColor(getBackground()); g.fillRect(0,0,getSize().width,getSize().height); g.dispose(); repaint(); } private Color getCurrentColor() { // Check the colorChoice menu to find the currently // selected color, and return the appropriate color // object. int currentColor = colorChoice.getSelectedIndex(); switch (currentColor) { case BLACK: return Color.black; case RED: return Color.red; case GREEN: return Color.green; case BLUE: return Color.blue; case CYAN: return Color.cyan; case MAGENTA: return Color.magenta; case YELLOW: return Color.yellow; default: return Color.white; } } public void mousePressed(MouseEvent evt) { // This is called when the user presses the mouse on the // panel. This begins a draw operation in which the user // sketches a curve or draws a shape. (Note that curves // are handled differently from other shapes. For CURVE, // a new segment of the curve is drawn each time the user // moves the mouse. For the other shapes, a "rubber band // cursor" is used. That is, the figure is drawn between // the starting point and the current mouse location.) if (dragging == true) // Ignore mouse presses that occur return; // when user is already drawing a curve. // (This can happen if the user presses // two mouse buttons at the same time.) prevX = startX = evt.getX(); // Save mouse coordinates. prevY = startY = evt.getY(); figure = figureChoice.getSelectedIndex(); symmetry = symmetryChoice.getSelectedIndex(); dragColor = getCurrentColor(); dragGraphics = OSI.getGraphics(); dragGraphics.setColor(dragColor); dragging = true; // Start drawing. } // end mousePressed() public void mouseReleased(MouseEvent evt) { // Called whenever the user releases the mouse button. // If the user was drawing a shape, we make the shape // permanent by drawing it to the off-screen image. if (dragging == false) return; // Nothing to do because the user isn't drawing. dragging = false; mouseX = evt.getX(); mouseY = evt.getY(); if (figure == CURVE) { // A CURVE is drawn as a series of LINEs putMultiFigure(dragGraphics,LINE,prevX,prevY,mouseX,mouseY); repaintMultiRect(prevX,prevY,mouseX,mouseY); } else if (figure == LINE) { repaintMultiRect(startX,startY,prevX,prevY); if (mouseX != startX || mouseY != startY) { // Draw the line only if it has non-zero length. putMultiFigure(dragGraphics,figure,startX,startY,mouseX,mouseY); repaintMultiRect(startX,startY,mouseX,mouseY); } } else { repaintMultiRect(startX,startY,prevX,prevY); if (mouseX != startX && mouseY != startY) { // Draw the shape only if both its height // and width are both non-zero. putMultiFigure(dragGraphics,figure,startX,startY,mouseX,mouseY); repaintMultiRect(startX,startY,mouseX,mouseY); } } dragGraphics.dispose(); dragGraphics = null; } public void mouseDragged(MouseEvent evt) { // Called whenever the user moves the mouse while a mouse button // is down. If the user is drawing a curve, draw a segment of // the curve on the off-screen image, and repaint the part // of the panel that contains the new line segment. Otherwise, // just call repaint and let paintComponent() draw the shape on // top of the picture in the off-screen image. if (dragging == false) return; // Nothing to do because the user isn't drawing. mouseX = evt.getX(); // x-coordinate of mouse. mouseY = evt.getY(); // y=coordinate of mouse. if (figure == CURVE) { // A CURVE is drawn as a series of LINEs. putMultiFigure(dragGraphics,LINE,prevX,prevY,mouseX,mouseY); repaintMultiRect(prevX,prevY,mouseX,mouseY); } else { // Repaint two rectangles: The one that contains the previous // version of the figure, and the one that will contain the // new version. The first repaint is necessary to restore // the picture from the off-screen image in that rectangle. repaintMultiRect(startX,startY,prevX,prevY); repaintMultiRect(startX,startY,mouseX,mouseY); } prevX = mouseX; // Save coords for the next call to mouseDragged or mouseReleased. prevY = mouseY; } // end mouseDragged. public void mouseEntered(MouseEvent evt) { } // Some empty routines. public void mouseExited(MouseEvent evt) { } // (Required by the MouseListener public void mouseClicked(MouseEvent evt) { } // and MouseMotionListener public void mouseMoved(MouseEvent evt) { } // interfaces). } // end nested class Display } // end class KaleidaPaint
[ Exercises | Chapter Index | Main Index ]