CS111, Wellesley College, Spring 2003 Problem Set 9 Due on Tuesday, April 29

About this Problem Set

The purpose of this problem set is to give you experience with declaring Java classes, drawing object diagrams, using Java graphics, and playing with AnimationWorld. In Task 1, you will draw object diagrams showing the state of several objects. In Task 2, you will create a class the models simple cartoon faces, and draw these faces. In Task 3, you will create sprite classes for some simple animations.

There are also two optional extra credit problems. Extra Credit Challenge 1 is an open-ended opportunity to draw any picture(s) of your own design. In Extra Credit Challenge 2 is a chance for you to create your own animation.

All code for this assignment is available in the ps9_programs folder in the cs111 download directory on the CS fileserver.

How to turn in this Problem Set

Hardcopy Submission

1. The cover page;
2. Your object diagram from Task 1;
3. The final version of Faces.java from Task 2. If you are unable to complete all the subtasks, turn in the version of your code that solves those subtasks you have completed.
4. The final version of Spinner.java from Task 3.
5. The final version of MyPicture.java from (optional) Extra Credit Challenge 1.
6. The final version of any sprite and animation classes you created for (optional) Extra Credit Challenge 2.

Softcopy Submission

• The Faces subfolder should contain your final version of Faces.java.
• The Spinners subfolder should contain your final version of Spinner.java.
• The MyPicture subfolder should contain your final version of MyPicture.java (if you did the first extra credit challenge).
• The MyAnimation subfolder should contain your final version of any sprite and animation classes you created (if you did the second extra credit challenge).

Task 1: Node Diagrams

The purpose of this problem is to give you some practice drawing object diagrams. Recall that an object diagram shows a collection of interconnected class instances and arrays:

• Each instance is drawn as a large box that is labeled by the class name and contains the labeled instances variables of the class.
• Each array is drawn as a large box that is labeled by the array type and contains indexed array variables.
• Each variable is a small box that contains either a primitive data type (e.g., int, double, boolean, char) or a reference (i.e., pointer) to another object.

Consider the following Java class declaration:

---

public class Node {

    public int value;
    public Node [] subnodes;

    public Node (int value, Node [] subnodes) {
	this.value = value; 
	this.subnodes = subnodes;
    }

    public Node (int value) {
	this.value = value; 
    }
}

The Node class describes instances that have two instance variables: a value variable that holds an integer, and a subnodes variable that holds an array of other Node instances.

Here is a sequence of statements that creates and manipulates Node instances:

Node [] nodes = new Node [5];
nodes[4] = new Node(4);
nodes[3] = new Node(3, new Node [] {nodes[4]});
nodes[2] = new Node(2, new Node [] {nodes[4], nodes[3]});
nodes[1] = new Node(1, new Node [] {nodes[2], nodes[3]});
nodes[4].subnodes = new Node [] {nodes[1]};
nodes[1].subnodes[1].subnodes[0] = nodes[1].subnodes[0];
nodes[1].value = nodes[2].subnodes[1].subnodes[0].value 
                   + nodes[1].subnodes[0].subnodes[0].value;

In this problem, you are to draw a single object diagram that depicts the state of all objects (and their component variables) in ObjectLand after the above eight statements are executed. Your diagram should also include the local variable nodes.

Follow these conventions:

• Every local variable and instance variable should be drawn as a small box with the name of the variable to its left.
• Every array variable should be drawn as a small box with the index above it.
• Each instance of the Node class should be draw as a large box labeled Node that contains two instance variables.
• Each array object be draw as a large box labeled with its type that contains the appopriate number of array variables.
• A variable that contains the null pointer should have a slash drawn through it.
• References should be indicated by drawing pointers rather than using reference labels.
• The arrow of a pointer should always point at an instance box or array box. It should never point to a variable box.
• Try to draw your diagram as neatly as possible. If you are not careful with how you lay out your boxes, your diagram will turn into "pointer spaghetti".

Task 2: Faces

In this problem, we will model simple cartoon faces like those shown below:

Each face is characterized by the following state:

• Its color.
• Its happiness, which is a floating point number that should be between 0.0 (mouth closed) and 1.0 (mouth wide open). A face with happiness value h between 0.0 and 1.0 has its mouth open by a fraction h.
• Its sleepiness, which is a floating point number that should be between 0.0 (eyes wide open) and 1.0 (eyes shut). A face with sleepiness value s between 0.0 and 1.0 has its eyelids closed by a fraction s.

For example, the following table shows the values for the color (r = red, g = green, and b = blue), happiness (h) and sleepiness (s) of each face in the corresponding position in the figure above:

We will represent a face by an instance of the Face class, which is described by the following contract:

---

Face Contract

Constructor Methods:

public Face (Color c, double h, double s)
Constructs and returns a Face instance whose color is c, whose happiness is h, and whose sleepiness is s.

public Face ()
Constructs and returns a Face instance whose color is yellow, whose happiness is 1.0, and whose sleepiness is 0.0.

Instance Methods:

public Color getColor()
Returns the color of this face.

public double getHappiness()
Returns the happiness of this face.

public double getSleepiness()
Returns the sleepiness of this face.

public void setColor (Color c)
Changes the color of this face to c.

public void setHappiness (double h)
If h is in the the range [0.0, 1.0], changes the happiness of this face to h. Otherwise, leaves h unchanged and displays an error message indicating h is out of range.

public void setSleepiness (double s)
If s is in the the range [0.0, 1.0], changes the sleepiness of this face to s. Otherwise, leaves s unchanged, and displays an error message indicating s is out of range.

public void draw (Graphics g, Rectangle r)
Draw a picture of this face inscribed in rectangle r within graphics context g. Note that Rectangle is Java's standard rectangle class in the java.awt package. See the Rectangle contract page for the Rectangle contract, and the the CS111 Contracts page for other contracts.

public String toString ()
Return a string representation of this face. A face with red/green/blue color values r, g, and b and with happiness h and sleepiness s should have the following string representation:

"Face[color=java.awt.Color[r=r,g=g,b=b]; happiness=h; sleepiness=s]"

Note that you can use the toString() method for colors to get the string representation of a color.

---

Task 2a: The Face Class

In this subtask, you will define a preliminary version of the Face class. A skeleton of this class can be found in the file Face.java within the Faces subfolder of the ps9 folder. You are flesh out the skelelton with instance variable declarations, constructor method declarations, and instance method declarations so that it implements the Face contract given above except for the draw() method. Rather than actually drawing the face in the given rectangle, your initial draw() method should simply display a string representation of the face in the Java Console window (via System.out.println).

For example, when you test the default applet ManyFaces.html, you should get the following output:

Face[color=java.awt.Color[r=255,g=0,b=0]; happiness=0.0; sleepiness=0.0]
Face[color=java.awt.Color[r=255,g=0,b=63]; happiness=0.0; sleepiness=0.25]
Face[color=java.awt.Color[r=255,g=0,b=127]; happiness=0.0; sleepiness=0.5]
Face[color=java.awt.Color[r=255,g=0,b=191]; happiness=0.0; sleepiness=0.75]
Face[color=java.awt.Color[r=255,g=0,b=255]; happiness=0.0; sleepiness=1.0]
Face[color=java.awt.Color[r=255,g=63,b=0]; happiness=0.25; sleepiness=0.0]
Face[color=java.awt.Color[r=255,g=63,b=63]; happiness=0.25; sleepiness=0.25]
Face[color=java.awt.Color[r=255,g=63,b=127]; happiness=0.25; sleepiness=0.5]
Face[color=java.awt.Color[r=255,g=63,b=191]; happiness=0.25; sleepiness=0.75]
Face[color=java.awt.Color[r=255,g=63,b=255]; happiness=0.25; sleepiness=1.0]
Face[color=java.awt.Color[r=255,g=127,b=0]; happiness=0.5; sleepiness=0.0]
Face[color=java.awt.Color[r=255,g=127,b=63]; happiness=0.5; sleepiness=0.25]
Face[color=java.awt.Color[r=255,g=127,b=127]; happiness=0.5; sleepiness=0.5]
Face[color=java.awt.Color[r=255,g=127,b=191]; happiness=0.5; sleepiness=0.75]
Face[color=java.awt.Color[r=255,g=127,b=255]; happiness=0.5; sleepiness=1.0]
Face[color=java.awt.Color[r=255,g=191,b=0]; happiness=0.75; sleepiness=0.0]
Face[color=java.awt.Color[r=255,g=191,b=63]; happiness=0.75; sleepiness=0.25]
Face[color=java.awt.Color[r=255,g=191,b=127]; happiness=0.75; sleepiness=0.5]
Face[color=java.awt.Color[r=255,g=191,b=191]; happiness=0.75; sleepiness=0.75]
Face[color=java.awt.Color[r=255,g=191,b=255]; happiness=0.75; sleepiness=1.0]
Face[color=java.awt.Color[r=255,g=255,b=0]; happiness=1.0; sleepiness=0.0]
Face[color=java.awt.Color[r=255,g=255,b=63]; happiness=1.0; sleepiness=0.25]
Face[color=java.awt.Color[r=255,g=255,b=127]; happiness=1.0; sleepiness=0.5]
Face[color=java.awt.Color[r=255,g=255,b=191]; happiness=1.0; sleepiness=0.75]
Face[color=java.awt.Color[r=255,g=255,b=255]; happiness=1.0; sleepiness=1.0]

Task 2b: Put on a Happy Face

Below is a diagram of a happy face inscribed in the unit square indicating the placement of the eyes, nose, and mouth. You should draw the happy face exactly as depicted in this diagram.

Notes:

• In order to draw the face, you will need to use various drawing methods of the Graphics class presented in lecture and lab. As part of doing this problem, you should consult the contract for the Graphics class. You will also need to use the contracts for the Rectangle and Polygon classes.
• For examples of each of the kinds of shapes out of which a face is composed, study the following graphics demos from Lecture 19:
  • GraphicsDemo.java
  • Circles.java
  • Ovals.java
• The drawing methods in the Graphics class expect integers as arguments. The java compiler will complain if you pass a floating point number rather than an integer as an argument to one of these methods. For instance, if g denotes a Graphics instance and r denotes a Rectangle instance, then the following is incorrect:

  g.drawLine(r.x + (0.1 * r.width), 
             r.y + (0.3 * r.height),
             r.x + (0.7 * r.width),
             r.y + (0.6 * r.height));
  

  This problem can be fixed by using an integer cast expression (int) E to convert the result of a floating point expression E to an integer. A corrected version of the above example is:

  g.drawLine(r.x + (int) (0.1 * r.width), 
             r.y + (int) (0.3 * r.height),  
             r.x + (int) (0.7 * r.width),
             r.y + (int) (0.6 * r.height));
  

• You can view a large version of a happy face by running the OneFace.html applet. You can do this by moving OneFace.html before ManyFaces.html in the LinkOrder tab of the Face.mcp project file. Here is the window produce by this applet:
  

Task 2c: Sleepy Faces

A face with sleepiness factor s (between 0.0 and 1.0) should have "eyelids" covering a fraction s of the height of the eyes from the top to the bottom. This effect can be achieved as follows:

• Draw the normal "alert" eyes as filled black ovals.
• Draw a filled rectangle with the color of the face that covers the appropriate fraction of the eyes.
• Draw unfilled black ovals around the eyes.

Note that, according to its contract, the drawOval() method covers an area that is width + 1 pixels wide and height + 1 pixels tall. In contrast, the the fillOval() method covers an area that is width pixels wide and height pixels tall. Because of this discrepency, to get your picture to "look right" you may need to subtract 1 from the width and height arguments of drawOval().

Task 2d: Drawing Happiness

For example, here are faces whose happiness value changes from left to right:

Here is the specification for the mouth that you should implement:

• The mouth should have a width that is 0.6 times the width of the face.
• The mouth should be horizontally centered in the face.
• The height of the mouth should be the happiness value times 0.3 times the height of the face, but should never be smaller than 1. The "never smaller than" effect can be achieved using the Math.max() method, which returns the maximum of two integers.
• The mouth should be vertically centered about a horizontal line that is 0.75 the way down the face.

The above specification can be implemented via a single invocation of the fillArc() method that handles all happiness values between 0.0 and 1.0. The key to getting this to work is to determine the coordinates of the rectangle in which the arc is inscribed as a function of the happiness value. Do not attempt to do this by trial and error! Instead, determine the correct formula on a sheet of paper before you attempt to implement this part!

Task 3: Spinners

A Note on Viewing Applets

This problem description contains an embedded AnimationWorld applet. Experience shows that this applet may run fine in some browsers but not in others. If you cannot get the applet to work in one browser, try another one instead. If you can't find any browser that works, you can run the applet in CodeWarrior from the Test subfolder of ps9_programs/Spinners.

The following Spinners animation shows "spinning" disks of various sizes and colors:

In this problem, your goal is to flesh out the declaration of the Spinner class (a subclass of Sprite) within the Spinners folder so that it describes the behavior of spinning two-colored disks. Instances of Spinner should be created via the following constructor method:

public Spinner(int x, int y, int radius, int dRadius, Color color1, Color color2);
Creates a spinning disk with radius radius whose center is at the position (x, y) in the Java coordinate system. The disk appears to be "hanging" by a black string from the top of the window and appears to have two "sides", one of which is colored color1, and the other of which is colored color2. Initially a circle of color1 should be displayed. The "spinning" motion is simulated by changing the horizontal radius of the oval by the amount dRadius at every invocation of updateState(). The height of the oval should not change.

For example, the animation shown above is specified as follows:

---

  import java.awt.*; 

  class SpinnerAnimation extends Animation { 

    public SpinnerAnimation() {
      addSprite(new Spinner(200,100,50,3,Color.red,Color.blue));
      addSprite(new Spinner(250,150,125,1,Color.yellow,Color.green));
      addSprite(new Spinner(300,200,50,5,Color.pink,Color.gray));
      addSprite(new Spinner(400,200,100,2,Color.cyan,Color.magenta));
      setNumberFrames(Animation.NO_MAX_FRAMES);
    }

  }

---

To complete this problem, you will have to

• Declare appropriate instance variables for the Spinner class. These should all be private.
• Define the Spinner() constructor method specified above.
• Define the instance methods resetState(), updateState(), and drawState() described in the Sprite contract.

• To test your Spinner implementation, run the animation in the SpinnerShowcase applet. A correct definition of Spinner will give rise to the same behavior shown in the test applet (a copy of which can be found in the Test subdirectory).
• For examples of sprites, study the sprites examples mentioned in the Sprite contract as well as the following sprite examples from Lecture 21:
  • Rotator.java (used in the animation RotatorAnimation.java).
  • Pulsar.java (used in the animation PulsarAnimation.java).
  • BouncingBall.java (used in the animation BouncingBallAnimation.java).

Extra Credit Challenge 1: Create Your Own Picture [up to 5 points]

This is a completely optional problem. You should only attempt it after completing the rest of the assignment.

You can use Java graphics as a tool to create fascinating pictures. Here is a chance to be artistically creative and earn some extra credit points at the same time.

For this challenge, flesh out the paint() method in the MyPicture class within the MyPicture folder to draw whatever picture you imagine. If you like, you can draw more than one by making copies of MyPicture.java where the files (and the contained class) have different names.

Notes:

• The extra credit challenges are the only problems on this problem set in which you may collaborate with others in the class. Feel free to collaborate with as many people as you want.
• There will be no prizes for designs in this challenge. But all extra credit assignments submitted will be posted on an "exhibition page" so that you can share your designs with the class.
• If you need help to do something fancy, please talk to the instructors and/or TAs.
• The amount of extra credit awarded on this problem will be proportion to the creativity and artistry in your designs, as well as the level of technical challenge. You can earn up to 5 problem set points in extra credit on this challenge.

Extra Credit Challenge 2: Open-Ended Animation [up to 10 points]

You can use AnimationWorld to create dazzling animations that show off your artistry and your programming talents. Here is a chance to be creative and earn some extra credit points at the same time.

For this challenge, build an animation of your own design. You may use existing sprites that we have studied, but you should create and use at least one new kind of sprite from scratch.

The MyAnimation subfolder of the ps9_programs folder contains a copy of the sprites and animations shown in Lecture 21. This is a good starting point for your own animations. You may edit the existing files or create ones of your own. Add any animations you create to MyShowcase.java.

Notes:

• The extra credit challenges are the only problems on this problem set in which you may collaborate with others in the class. Feel free to collaborate with as many people as you want.
• There will be no prizes for designs in this challenge. But all extra credit assignments submitted will be posted on an "exhibition page" so that you can share your designs with the class.
• If you need help on any aspect of this challenge, do not hesitate to talk to the instructors and/or TAs.
• The amount of extra credit awarded on this problem will be proportion to the creativity and artistry in your designs, as well as the level of technical challenge. You can earn up to 10 problem set points in extra credit on this challenge. As an example of an animation worth 10 points, see Erin Stadler's Fall'99 animation. Some student animations from Spring '02 can be viewed in the Spring '02 animation gallery.