Introduction to This Week's Lab
We'd like you to take the things we talked about on last week and build a drawing program. It can be a simple or as sophisticated as you'd like. The Sketching Program we showed you last class is what we have in mind. But, there's plenty of room to personalize and customize the applet -- have fun.
And, please keep in mind, different people have different backgrounds. You won't all be able to get as far -- that's okay. The important thing is that you learn and have fun.
We'd like to encourage you to work in pairs on this assignment. When programming, or solving problems of any kind, it is really helpful to have a partner, or at least someone to act as a sounding board. But, to make sure that everyone stays involved -- both people must work together (same time, same place) and be equally involved.
We don't expect you to do this without help. In fact, we want to help you -- a lot. That's why we're here. Please ask.
We've more-or-less got enough people for each group who wants one to have a private tutor for most, if not all, of the time.
To help you get started, we took our Sketching applet and deleted most, but not all, of the code. We left the class structure itself and the declarations for the methods that we think you might want. We also left some of the instance variables in place. Additionally, we used comments to give you some hints about how to approach things.
Right click Sketching.java skeleton to save the file, or just click on it to view the file.
If you take a look at our skeleton, you'll notice that we don't write directly to the visible Graphics object. Instead, we create another one, and change this one. Then, after we're done changing it, and we want the changes to become visible, we call the repaint() method, which paints this graphics area onto the visible Graphics area.
Often times, this is done to improve the quality of the program. If several items are draw to the screen, the user may actually be able to see them drawn, one at a time. By drawing them, instead, to an off-screen image, we can draw all of them, without the user watching the changes, then, very quickly, update all of the changes at once.
In this case, we're not doing anything complicated. But, doing this made the code a bit simpler, and it also illustrated a real-world technique.
You can approach this assignment any way you'd like. Our goal is for you to have, at least, a minimal drawing program before you leave today. We'd also like for some of you to add some cool features.
Please keep in mind that we don't expect you to do everything that we describe below, or exactly what we describe below. These are just some ideas -- you can follow this approach or your own approach. You can work on this just during today's lab -- or keep working for fun later on.
One way of getting started might be to draw lines on the screen, to fixed coordinates, from within mouseReleased(), and then to call repaint() to make them visible. If it compiles, but doesn't work, you may have forgotten to use setGraphicsColor() to make the foreground (drawing color) something different from the background color. forgotten
Then, after that works, try to save the coordinates of the mouse when the mouse is pressed, and again when it is released, and change the drawLine() to use these, instead of the coordinates you originally typed directly into the code. At this point, you have a simple drawing program. If it doesn't work, it might be because one of the coordinates is outside of the applet.
As the next step, you might want to consult the RealApplets.com GUI Layout Tutorial. It will show you how to layout the screen, so you can add GUI components, while leaving space to paint. In our example, we used the BorderLayout, as described in that tutorial. We put our checkboxes in the "West" and "East" regions, while leaving the "Center" one free for drawing. We'd like to suggest that you get the drawing program working in the "Center" region next -- while leaving the others empty.
A good next step might be to add CheckBoxes for a few colors. If you group them together in the same CheckBoxGroup, only one will be selected at a time. Then, get the check boxes to look right on the screen. As before, you might want to consult the RealApplets.com GUI Tutorial for a good example and explanation.
Once the buttons look right on the screen, try to make them function. Before drawing the line, look to see which button is active and set the color accordingly. Basically, you want to check each button, one at a time. If it is set, set the color to the color that corresponds to the button. The RealApplets.Com ActionListener Tutorial might be helpful to you here.
If you get that working, you might want to try drawing different shapes. To do this, add another set of checkboxes, one for each shape. Then, instead of drawing a line each time, check to see which shape is selected in the CheckBoxGroup, and draw the corresponding shape. This would bring you to the same point as our example.
But, there's still tons more that you can do. For example, you could try adding a paintbrush option that draws dots as the mouse moves. To do this, you'll need to use the MouseMotionListener in addition to the MouseListener. The RealApplets.Com MouseMotionListener Tutorial might be helpful to you here.
You could also try to add a polyline option. In other words, allow the user to click in multiple places, to draw a series of lines that intersect at each point -- a bent line. Or, similarly, to specify a polygon using multiple points -- either an arbitrary polygon, or perhaps a triangle.
If you really want to get into it, you could add a feature to place graphic images from files into the same Graphics area.
But, again, please keep in mind, you don't need to do all of this and especially not in the next three hours -- that might not even be possible.
What Are the Methods To Draw on the Screen?
For a full listing of the shapes that the Graphics class is capable of drawing by itself, you probably should check Sun's Java API for the Graphics Class. But, below is a listing of a few of the more common ones:
- drawLine(int x1, int y1, int x2, int y2)
- drawOval(int x, int y, int width, int height)
- drawRect(int x, int y, int width, int height)
- drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) // Round-cornered rectangle
- drawPolygon(int xPoints, int yPoints, int nPoints)
- drawString(String str, int x, int y) // Text
- fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)
- fillOval(int x, int y, int width, int height)
- fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
- fillPolygon(int xPoints, int yPoints, int nPoints)