CompSci 6- Classwork 9 - Feb 11, 2010
10 pts

Today's classwork focuses on classes and objects by drawing shapes and creating an animation.

You will work with your group, but each of you will use a laptop and solve all the problems. You should discuss problems with your group and help each other debug.

This classwork must be completed before the next class period and submit on ambient.

Snarf the classwork/09_animation_cps006_spring10 project.

Problem: Animation

Animation, whether in the movies, cartoons, flipbooks, or even claymation, involves making small step-by-step changes to the characters and then displaying those changes rapidly enough to fool our eyes into seeing the motion as smooth. Today, you will be drawing shapes on the screen and making them move.The motion that you create will be algorithmic, i.e., based on the previous step, rather than hand-drawn or intelligent, but then that is what computers are best at.

We will use the following files in today's activity (snarf these files):

The first is the class you will be updating, the second simply starts the program by creating a frame in which to view the action. You should start by reading over the code in Canvas.java and making sure you understand it.

Note: You will only modify the Canvas class today.

Part 1

  1. First add your names and the date as a comment in the Canvas.java class.

  2. Now compile and run the program (click on Main and select Run Application). When run, it should draw a red circle centered in the frame. Try resizing the window to the right. Nothing really happens.

    We would like to have the circle move a little bit each time it is redrawn. Make the following changes to the Canvas class.

    1. Add a new public method called move with no parameters. It should increment the x value of myCenter (myCenter.x) by adding 5.

    2. Call the move method at the end of the paintComponent. Then compile and run the program.

    3. QUESTION 1 FOR README FILE: Describe in your README file What happens when the window is resized repeatedly.

  3. Now we will modify the program to do an animation.

    1. After the call to move() add a call to the method repaint()
      [NOTE: THIS IS NOT CORRECT. PUT THE call to repaint() not here, but in the method at the bottom of the file called actionPerformed. We have set up a timer to slow down the animation. Run the file. In the Main.java you will see a line:

      final int DEFAULT_DELAY = 1000 / 25; // in milliseconds

      You can adjust this number to get more or less of a delay. ]

    2. QUESTION 2 FOR README FILE: Describe in your README file what happens when you run the program?

  4. Now we will change the direction of the animation.

    1. Add another private variable of type Point to ethe state of the Canvas class called myVelocity.

      In the constuctor, see how myCenter is initialized. Give myVelocity any initial value in the constructor, such as (2,4).

    2. Modify the move method to change the point by adding the velocity to myCenter. (that is add the x value of myVelocity to the x value of myCenter, and add the y value of myVelocity to the y value of myCenter).

    3. Compile and run the program.

    4. QUESTION 3 FOR README FILE: Describe in your README file what happens when myVelocity is set to (-10, 10), (5, 5), and (0, 3).

  5. We'd like the ball to "bounce" when it hits the wall. Modify the move method so that after the ball's center is changed, check to see if the ball is outside the canvas and if so, then change it to head the other direction. All of these modifications are added to the move method.

    1. First you will need to get the Dimensions of the canvas. Add in the line
       
               java.awt.Dimension bounds = getSize();
      

      Then bounds.width and bounds.height will give you the width and height of the canvas. Also note that RADIUS and DIAMETER (part of the state of the class) give you information about the size of the oval.

    2. There are four edges to the canvas to check. For example, if the oval is past the right edge (note its x velocity was positive) then change its x velocity to force the oval to move left. Be sure to consider the size of the oval. The oval should not be partway past the canvas and then change direction. It should be at the edge and then change direction.

Part 2

Now we would like to have two balls bouncing around, one blue and one red. It would be best to create a new class for a bouncing ball, taking the information from the Canvas class that defines how a ball is created and how it moves around.

FIRST make a copy of your project and then rename it to 09_animationPart2_cps006_spring10. To do this, click on the project name, right click on it and select "Copy". Nothing appears to happen. Then from the Edit menu, select Edit, then Paste. Then change the project name.

  1. Create a new class called Bouncer (Select File - New - Class). Note that it should not have a main method!

  2. Add state to the Bouncer class by cutting all the state from the Canvas class (it is not needed there any more) and putting it in the Bouncer class. Also add a jawa.awt.Color variable.

    Note that in this step and others this will create errors in Canvas, we will fix those after Bouncer is fixed up.

  3. Create a constructor for the Bouncer class that has three parameters: a center, a velocity, and a Color. Use those parameters to initialize the state (instance variables).

  4. Cut the move method from the Canvas class and paste it into the Bouncer class. When you do this, Eclipse will be confused about getSize(). Remove that line and instead pass in the bounds as a parameter.

  5. Each ball created needs to be painted. In the Bouncer class, create a method called paint with one parameter named pen of type Graphics. For this method, cut and paste the pen.setColor and pen.fillOval from the Canvas paintComponent method to here. You will need to modify the pen.setColor to paint the color of the ball.

    After doing this, your Bouncer.java should have no red X's.

  6. Now you need to fix up the Canvas class to create two private Bouncers and animate them. First, you need to declare two private Bouncer variables as state in the Canvas class.

  7. Next, in the Canvas constructor, initialize the Bouncer variables to Bouncer objects (use new). The two bouncers should both start in the center of the canvas, have different colors and different velocities.

    Note that you will also have to create the Points as Points are objects also.

       ... =   new Bouncer(new Point(...,...), new Point(....), java.awt.Color.RED);
    

  8. Create a move method for the Canvas class to move the objects. It should declare a variable named bounds of type java.awt.Dimension, and set it to getSize(). Then it should call the move method for both of its bouncers.

    Last you need to fix up the paintComponent method. Before the call to move, both of the bouncers should call their paint method.

    You should now see two bouncing balls of different colors and different speeds.

Submit

This classwork must be completed before the next class period and Be sure to create a README file.

You should submit this classwork on ambient. Submit your README and java files, and test data files (if any) via Ambient using classwork name Class09Feb11.