COMP102/112 2022 Tri 1: Assignment 8
Due 19 May 10am
By the end of the assignment, you will have gained experience in
writing programs with simple event-driven input (mouse, buttons, etc).
Resources and links
Download the zip file
and extract it to your home
folder. It should contain template for the Java program you are to
complete. Read through the whole assignment to see what you need to do.
Go over the code examples in slides from the lectures on GUI.
Later when the model answer to assignment 7 becomes available, make sure you understand all the components of the programs.
Complete the MiniPaint program that allows the user to draw simple pictures on the graphics pane with the mouse.
Submit your best version of
by the due date. Remember to click the button for the final step of
the submission process after you have uploaded the files (which does some
automated checking for you).
You may talk with other students about the assignment but you must write and submit your
own code. If you use code that you got from someone else, you must
put a comment explaining where you got it.
For this question, you must design and implement a simple paint application that lets a user draw simple pictures on the screen.
There are many commercial software applications that allow you to draw pictures using a computer. Most of them have a lot of commands
and would be complicated to write. For this assignment, you are to write a simple version of these applications called
provides a set of "tools" for drawing different kinds of
shapes, (lines, rectangles, ovals, text, images, flowers and triangles). The user can
use the mouse to draw using the current tool and can click on buttons
to change the brush-shape. There are also buttons to clear the
screen, and to set various options, such as toggling between outline
shapes and filled shapes, setting the line and fill colours, setting
the line width and setting the text size.
It is important to watch the demo video
in order to see how the program should work.
If you are using a computer in a lab, you can also run the
demo program to see what your program should do for the Core and the Completion (look in the assig8-demos folder). Running the demo will help you understand what selecting a button do and when the actual drawing happens.
There is aslo a
demo program, for those ready to attempt the Challenge.
- a setupGUI method to set up all the elements of the GUI,
- fields to store
- the name of the current tool,
- the position the mouse was pressed.
(the shape is drawn when the mouse is released, but the position and size of the shape depend on the pressed position also.)
- whether the shape should be filled or not,
- the colour of the lines (including the outline of the rectangles and ovals)
- the width of the lines
- the fill colour for the centers of the rectangles, ovals, and the flower petals.
- the name of the current image file,
- the "caption" that can be placed on the image
- the font size for the captions.
- methods to respond to the buttons, textfields, and sliders
- a method to respond to the mouse
- methods for drawing the shapes (called from the mouse method).
should have the following widgets (buttons, sliders, etc):
- Clear button: Clears the graphics pane.
- Line button: After the Line tool has been selected, if the user drags the mouse from one point on the screen to another, the program should draw a straight line between the points.
Although an ideal program would show the line being drawn while the user drags the mouse,
MiniPaint is simpler, and only shows the line once the user has released the mouse.
- Rect button: After the Rect tool has been selected, if the user drags the mouse from one point on the screen to another, the program should draw the rectangle defined by the two points.
[Completion] Note that the user should be able to drag between any two diagonally opposite corners of the rectangle (top-left to bottom-right, bottom-right to top-left, top-right to bottom-left, or bottom-left to top-right).
- Oval button: After the Oval tool has been selected, if the user drags the mouse from one point on the screen to another, the program draws an oval centred within the rectangle defined by the two points.
- Caption textfield: When the user enters some text in the Caption textfield, the program will remember the caption. After this, if the user releases the mouse at a point, the program will draw the caption at that point.
- Image button: [completion] When the Image button is clicked, the program will ask the user for an image file (using the
UIFileChooser.open() dialog box). After this, if the user drags the mouse between two points, the program will draw the image file to fit in the rectangle between those points.
Note: If the pressed and released points are very close, it should just draw the image with its natural size at the released position.
- Eraser button: [completion] When the user presses and drags the mouse, the program will erase a circular region around the mouse wherever the user drags the mouse.
- Flower button: [completion] If the user drags the mouse from one point to another, the program should draw a flower centered at the first point with total radius of the distance from the first point to the second point.
- Fill/NoFill button: Changes whether later rectangles and ovals are filled or just outline. Clicking the button should toggle the current state of the "tool".
- Line Color button: Asks the user for the color for lines (and borders and text) for later shapes. It should use the
- Fill Color button: Asks the user for the color for the centers of later shapes. It should use the
- Line Width slider: Changes the width of lines (and borders) for later shapes.
- Text Size slider: Changes the font size of later captions.
that none of the buttons (except Clear) actually change anything on the graphics pane when they are selected. All actual drawing (except the clear functionality) happens in response to releasing
the mouse on the graphics pane. The effect of a button is to change the internal state of the program, so that the next mouse release will draw a different shape.
so that it will
- Have the appropriate fields.
- Set up the user interface correctly
- Select the Line, Rect, Oval, or Caption tool correctly (and remember the text for the caption).
doSetLine etc, methods)
- Draw a line between the mouse pressed and mouse released points if the current shape is Line.
- Draw a rectangle or oval between the mouse pressed and mouse released points if the current shape is Rect or Oval. The shape should be an outline or filled, depending on the Fill/NoFill button.
For the core,
drawAnOval only need to draw the shapes correctly when the user drags from the top-left corner to the bottom-right corner.
- Draw a text caption where the mouse is released if the current tool is Caption.
- Make the Fill/NoFill button work, so that drawing rectangles and ovals will be filled or outline, depending on the Fill/NoFill button.
- Make the Line Width and Text Size sliders set the line width and text size.
: The most common difficulty that students have is working out exactly when
and where everything should happen. Make sure that you watch the demo video and
notice what happens when buttons are clicked and what happens when the mouse is pressed, released, or dragged on the
graphics pane. Notice especially that when you click on the buttons (except the Clear
button), the program does not draw anything
- all it does is to remember
which button was chosen. It is only when you release the mouse somewhere that it actually
draws a shape (or image). What shape it draws depends on what tool it is currently set to.
Add the following features to your program:
- Make the mouse draw ovals or rectangles correctly when the user drags from any corner to the diagonally opposite corner.
(Hint: given the two points, work out the values of left, top, width, and height.)
- Make the Line Color and Fill Color buttons work, and make lines, ovals, rectangles and captions use the two colours correctly.
- Make the Image button ask for a filename and set the tool correctly, and then have the mouse draw the image within the rectangle specified by the pressed and released mouse positions (just like the rectangles) (or at its natural size if the two positions are within 5 pixels of each other).
- Make the Eraser button work. For this, you need a mouseMotionListener, and the mouse must respond to "dragged" events by erasing a circular region around the mouse.
- Make the Flower button draw a flower consisting of a central yellow circle and six petals (the same size as the central circle) around it. The color of the petals should be the current fill color. The circle should be centered where the mouse was pressed, and have a total radius equal to the distance from the pressed point to the released point.
There are lots of ways in which this program could be made nicer to use. For example you could add some of the following (or something else interesting):
(Expected marks are given for the suggested extensions; you are not expected to do them all!!!).
- [+5] Make the Fill/NoFill and Colour buttons display the currently selected state and colour in some way.
- [+7] Add a Triangle button that lets the user add a Triangle to the drawing. The user will need to select three points to draw the triangle. See the demo video for one way this can be done.
- [+8] Add a slider to specify how many petals a flower should have and make the Flower tool draw a central yellow circle and the current number of petals around it. The central circle and the petals should be sized so that (a) the petals fit evenly around the center with no spaces between them, and the radius of the flower is still correct. (With lots of petals, then center has to be larger and the petals have to be smaller.)
- [+10] Make the drawing actions "rubber-band" - as the user drags the mouse, the program should show the line or an outline of the rectangle/oval being dragged out. However, it should not destroy the bits of the drawing that it is dragged over. Hint: use the
- [+10] Add a "Curve" button which will allow the user to draw nice curved lines. Curved lines need at least three points to specify them. Ideally, the user should be able to keep adding points to a curve. (Look up Bezier curves to do this really nicely!)
The COMP102 folder on your desktop has a demo program featuring most of the above challenge extensions.
To go further
- Why do you need fields in the MiniPaint program? Explain why you couldn't use local variables and/or parameters in the methods.
- What were the design problems you had when working on MiniPaint? What bits were hard to get right?