COSC 123 - Computer Creativity
Lab 9: Graphics

In this lab, we will learn how to draw graphics and make graphical user interfaces in Java. The tutorials in the lab will be presented by the TA step-by-step. However, you are free to work at your own pace on the lab. The lab assignment questions will not be presented by the TA.

Tutorial #1

This tutorial will demonstrate how to draw shapes on a panel.

Step #1: Set Up Your New Project

Create a new project called Lab9 and a new class inside the project called GUITutorial with a main method.

Step #2: Creating a Frame

A window in a graphical user interface is created by extending the JFrame class. Create a new class called TutorialFrame that extends JFrame. The code should look like this:

Step #3: Show Frame

In the main method in GUITutorial add the code below to create a frame and display it. Run the code and you should see an empty frame with a title.

Step #4: Adding Components to a Frame

Components such as text boxes and buttons are added to a frame using panels. A JPanel is a container that holds components and other panels. A panel is added to a frame by putting it on its ContentPane in one of five areas: north (top), west (left), center, east (right), and south (bottom). We will create a new class called TutorialPanel that has a label (JLabel), a text field (JTextField), two radio buttons (JRadioButton), a check box (JCheckBox), and a combo box (JComboBox). Radio buttons are round and have the property that you can only select one at a time. Check boxes can either be checked or not. Multiple check boxes can be checked at the same time. The code to create this panel is below along with the code in TutorialFrame to add the new panel to the frame. Note that these components will not do anything until we handle events in the next lab.

The complete code files are: TutorialPanel.java, GUITutorial.java, and TutorialFrame.java.

Tutorial #2

This tutorial demonstrates applets, drawing shapes on the screen, and how to create menus. To start, download the code for DrawShapesApplet.java and put it into the project Lab9. Run the code. This program allows the user to draw shapes by selecting particular colors and shapes from the menu. There are a few pieces of the code to note. Here is what the output looks like:

Creating Menus

A menu is organized as a menu bar (JMenuBar) which contains menus (JMenu) each of which has one or more items (JMenuItem). The code in the constructor creates a menu bar and adds two menus to it, each with three items. Note that all menu items share an ActionListener class called MenuListener. We will learn more about how event listeners work in Lab 10.

Drawing Shapes

Shapes are drawn on a panel. There are many draw and fill methods. Each draw method takes a Graphics or Graphics2D object which represents how to draw on the screen. The sample code draws a rectangle using fillRect, a circle using fillOval, and a triangle using fillPolygon. Note that if drawRect was used instead, the rectangle would not be filled.

Lab Question #1

The asteroids game requires us to draw the ship and some asteroids on a background. We will also add a File menu that consists of three options: High Scores, Reset, and Exit. The main screen will be a filled black panel. It will also have a text bottom on the bottom with two buttons. At this point, we just have the interface, until we learn events the components will not do anything useful. You can either copy over your files from Lab 8 and modify them or use the starter files below. We will add draw routines to our Ship, Bullet, and Asteroid classes that can draw them on the screen. The asteroids are circles where the color and size depends on the type (type 3: Size: (60,60) Color: blue, type 2: Size: (40,40) Color: yellow, type 1: Size: (20,20) Color: green). Start from the sample code or your code as below.

Submission Instructions and Marking

For this lab assignment, each group should submit using Connect the Java files for the questions.

Grading (15 Marks Total)

Question #1 (15 marks)

1. +2 - Modify draw method in Asteroid class
2. +1 - Modify draw method in Ship class
3. +1 - Add score instance variable in Asteroids class
4. +3 - Complete draw method in Asteroids class
5. +2 - Add menu items to AsteroidsFrame class
6. +1 - Modify draw method in Bullet class
7. +2 - two JButtons (send, connect)
8. +2 - message text field and label
9. +1 - create a JTextArea called chatHistory
10. Bonus: Up to +3 bonus marks for drawing a better ship and/or asteroids.
11. Bonus: +1 bonus marks for adding an instance variable called degrees to GameObject that can be accessed by all its subclasses. This will be used to make the ship, asteroids, and bullets change appearance depending on their angle. A method called rotateShape in Asteroids class will rotate any shape that you draw according to an angle in degrees (from 0 to 360).