Drawing a circle centered at (X, Y) with radius 150. Note that your Applet should have a couple of class fields X and Y of type int. These variables should hold the "current" coordinates of the center of the circle you draw. At any time, your paint( ) method should be able to draw a circle centered at X and Y with radius 150. Sometimes your circle will be filled in with color (use the Graphics method fillOval() ) and sometimes it will not be filled in (use drawOval( ) ). But the first problem that you need to deal with is that fillOval( ) and drawOval( ) do not work based on the center coordinates and the radius values. Remember that they work with a circle inscribed in a rectangle, and the rectangle is determined by (1) the coordinates of the upper-left point and (2) a width and a height. So you need to use these methods to draw a circle centered at X and Y with radius 150. First, if the circle has radius 150, then the box (rectangle) that it is inscribed in has to have width 300 and height 300 (right?). To get the upper left hand point coordinates you realize that the X-coordinate of the upper-left point is 150 less than the X coordinate of the center point. So if the variable X holds the X-coordinate of the center, then the X-coordinate of the upper left point is: X - 150. By the same type of reasoning, the Y-coordinate of the upper-left point should be Y - 150. Hence, when you want to call drawOval( ) or fillOval( ), the two coordinates that you pass it are X - 150 and Y - 150, and the width and height that you pass it are 300 and 300.
Telling if a point is inside the circle. If you program has circle centered at (X, Y) and radius 150, and you get another point with coordinates x1 and y1 (like from a mouse event), you need to be able to detect whether the point with coordinates x1 and y1 is inside the circle. To do this just calculate the distance from the point (x1,y1) to the center of your circle (X, Y). If that distance is less than 150, then the point (x1, y1) is inside the circle, otherwise it is not. So you could create a variable:
double distance = Math.sqrt( (double) ((X-x1)*(X-x1) + (Y-y1)*(Y-y1)) )
and then check if distance < 150.
Your paint( ) method. The paint( ) method you write should do its work based on several class variables globally accessible to all methods of your applet. Clearly the variables X and Y, which hold the current center of your circle, control what your paint( ) method draws. You should always draw an oval centered at X and Y with radius 150. But you need another variable, a boolean variable inCircle to tell whether the last mouse movement was into or out of the circle (inCircle true means it was inside the circle, false means outside). So when your paint( ) method has to draw an oval, it uses fillOval( ) if inCircle is true and it uses drawOval( ) if inCircle was false. Finally, your paint( ) method needs to set the foreground color to the shade of blue we want (50, 50, 255) before drawing anything. Note that your paint( ) method gets called when your mouse event methods (mouseMoved() and mouseDragged() ) decide that they have changed things (like the center of the circle) and call repaint( ) - which triggers a call to paint( ) by the JVM..
Filling in the circle when the mouse moves inside of it. You will need a method: mouseMoved(MouseEvent e) which will be called whenever the mouse has been moved. When it is called, you can use the MouseEvent methods getX( ) and getY( ) to get the coordinates of where the mouse was moved to:
int x1 = e.getX( ); int y1 = e.getY( );
Now you need to check if this new point (x1, y1) is inside the circle or not. If it IS, then set the variable inCircle to true; otherwise, set that variable to false! With inCircle properly set, your paint( ) method will draw the right thing when it gets called (fillOval( ) versus drawOval( )).
Moving the circle - with care. Your method mouseDragged(MouseEvent e) will be called whenever the mouse has been dragged. By using e.getX( ) and e.getY( ) you can get the coordinates xnew and ynew where the mouse was dragged to. Now you are tempted to immediately write these two values into the class fields X and Y (thus moving the circle to a new center). But you can move the circle to a new center ONLY if the dragging started inside the circle. The simplest way to detect that is to check the boolean variable inCircle. If inCircle is true when you get the mousedragged event, then you should move the center. If inCircle is false when you get the mousedragged event, you should ignore the mousedragged event. So the mouseDragged( ) method needs to check the inCircle value.
Not calling repaint( ) too much. Once you get this thing working, you will notice a lot of flicker and you'll want to limit that where you can. We will not have the time to learn how to do this well, but one thing to try is to not call repaint( ) too many times. Clearly, whenever you have changed the center of the circle (something you do in the mouseDragged( ) method), you do have to call repaint( ). But you do not have to call repaint( ) every time the mouse moves. Make sure you put in your code for mouseMoved( ) a mechanism that causes repaint( ) to be called ONLY IF inCircle changes value. That is, if inCircle was true, and you get a mouse move event, and inCircle is still true, DO NOT call repaint( ). So if a mouse movement happens by the mouse stays inside the circle, don't call repaint( ). Similar comments apply if the mouse movement started outside and stayed outside the circle. A good idea: when you first enter the mouseMoved() method, save the value of inCircle in a temporary boolean variable. Then go ahead a process the mouse move event, setting inCircle based on whether the move point is inside or outside the circle. Then call repaint() ONLY IF the new inCircle value is different from the temporary variable's value. Note also: DO NOT call repaint( ) if you have entered the method mouseDragged() but have not changed the center of the circle!
Testing Your Applet. To test the applet, you need an HTML file called Circle.html. This file should have the usual <APPLET> tag with code field set as follows: CODE="Circle.class". It is best to test this with the appletviewer command from the command-line (DOS) interface. So you say:
appletviewer Circle.html
I will use the appletviewer to test your applets (i.e. I won't use a browser like IE or Netscape).