CMPU 102 - Spring 2017

 Lab 6: Making an Animated Graphics Application

To begin, create a lab6 directory in your cs102 directory.

Part 1: Download the starter file BallStarter.java

For this lab, you will write a Java animation of a bouncing ball and add some JComponents to control the ball. You will be instructed to do this in a sequence of steps that leads up to the final product: a bouncing ball that bounces off all the walls and can be stopped and started again using JButtons. The final product will also contain a "Quit" button to stop the animation.

Take a moment to read through and run the starter file. When you run this file, it will show a black-outlined red circle on the upper left quadrant of a yellow window. The file contains many constants and you should read the code to understand what each of the constants does in the code.

 
The BallStarter class extends the JPanel class and implements the ActionListener interface. It will use a Timer object to drive the animation (these lines are in the setup method and need to be uncommented). The only events that will be generated are ActionEvents, fired whenever the timer changes value (every 20 milliseconds) or when a JButton is pressed (for this lab). The actionPerformed method initially only calls repaint(). The effect is to redraw the scene every time the timer ticks. The paintComponent method is called initially when the program starts running and whenever a call is made to repaint().

For Part 1, you will make the ball start moving across the scene. There are 4 instance variables defined in the class that are not being used: xPos, yPos, xChange and yChange. You should determine how to use these variables to move the ball. The drawFrame method takes a Graphics object as an argument and is where the ball is drawn, using a call to g.fillOval() and g.drawOval().  The fillOval method takes as input the x (xPos) and y (yPos),  the coordinates of the upper left corner of the ball, and the width and height of the ball.

It should be clear from the starter code that the xPos and yPos of the ball never change. These values need to change in order to draw the ball at different places on the scene. That's where the xChange and yChange variables come in. Each time the scene is repainted, the xPos should change to xPos + xChange, and the yPos should change to yPos + yChange.  xChange and yChange do not have to change in this part of the lab. Try making this small change to the code and, when you run the program after this change, the ball should move to the right and down, off the bottom of the scene. I advise you to use small integers for xChange and yChange, to make sure the ball doesn't move too fast to see, but large enough that you aren't too bored watching it move (4 is a good number and is the default setting). 

Compile and run the program before moving on. You should see a red ball moving down and to the right, off the bottom of the scene. Save the file.


Part 2: Modify the BallStarter.java file to make the ball bounce off all 4 edges of the scene (BallStarter.java --> BouncingBall.java)

Save the file you wrote for Part 1 as BouncingBall.java. In this file, you should write the code that will make the ball bounce off all 4 edges of the scene. To do this, you will need to check for ball collision with the top, bottom, left, and right edges of the window. A collision on the right side occurs when the right edge of the ball is touching the right side of the scene and the ball is moving to the right. A collision on the left side occurs when the left edge of the ball is at the left side of the scene and the ball is moving to the left. Collisions on the top and bottom are calculated similarly.

The changes to the program needed for this part can be done in the drawFrame method.

Compile and run the program before moving on. When you have made the changes successfully, you should see the ball bouncing off all 4 edges of the scene. Save the file.


Part 3: Modify the BouncingBall.java file by adding a JPanel and JButtons to the window (BouncingBall.java --> BouncingBallwButtons.java)

Save the file you wrote for Part 2 as BouncingBallwButtons.java.  In this file, you should first define instance variables for a JPanel called buttonPanel to hold the JButtons to stop and start the ball and to quit the animation. After declaring these component instance variables at the top of the file, you should instantiate them in the window that is created in the setup method, in the blank area indicated. Remember, order matters when adding components to a window. The buttonPanel will hold the buttons in a pane at the bottom of the window, so buttonPanel should be created first and then added to the window in the proper position (see the BorderLayout layout manager). In between creating buttonPanel and adding it to the window, you should instantiate the JButtons, give them String names and add 'this'  as the argument to the addActionListener method called on each one of them. When you use 'this' as an argument to addActionListener, you are making the entire drawingPanel a listener, although only the Time and parts registered as listeners can have an effect. After naming and creating an action listener for each button, add it to buttonPanel and then add buttonPanel to the window. If you don't specify a layout manager for the buttonPanel, it will use the default FlowLayout, in which items are added to the left until there is no more room.

After you have set up the buttons, run the program.  The buttons should now appear at the bottom of the scene in a gray rectangle about 40 pixels in height and as wide as the window. Save the file.


Part 4: Modify the BouncingBallwButtons.java file by making changes to the actionPerformed method (BouncingBallwButtons.java --> BouncingBallwButtonActions.java)

Save the file you wrote for Part 3 as BouncingBallwButtonActions.java. The actionPerformed method was already created in the starter file, but it can only respond to Timer events. For this part, you should add the code for the "Start", "Stop", and "Quit" buttons. If you've gotten this far, it is not hard to see what part of the code needs to change to stop the ball from moving. But, when the "Start" button is pressed, the stopped ball should continue in the same direction it was moving when it stopped. You will need to add extra instance variables to keep track of the x and y direction and magnitude of the ball when it stops.

When the "Stop" button is pressed, you should disable it until the "Start" button is pressed, at which time "Stop" should be re-enabled. The same thing should hold true when the "Start" button is pressed, you should disable it until the "Stop" button is pressed, at which time "Start" should be re-enabled. When a JButton is disabled, its text appears gray in the JPanel and there is no effect when pressed. The "Quit" button should be enabled at all times and should exit the animation when pressed. You can look in the java api for methods that set a component enabled or disabled. This subject is also addressed in Chapter 6 of our on-line textbook.


Run this file to show your professor or one of the coaches that you are done with the lab. Be sure to save the file and get checked off on the lab checklist.

Be sure to write your name in each file as the author.  Submit your compressed lab6 directory on Moodle when you are finished and have tested your program.  If you save each part in a new file, you will have a record of how much you did before the lab ended and you can complete the rest later.