CS 101 (Fall 2002)
Lab 2: Norm - The Emote

Authors: Nick Leidenfrost and Jonathan D. Wetherbee

Lab Assigned Design Due
(In class)
10 AM
(In Lab)
(In Lab)
Lab Due
(In class)
10 AM
13 Sep None 17-18 Sep 24-25 Sep 27 Sep


By the end of this lab you should:

Demo Rubric:
15 points
Slider demos correctly from Startup class
40 points
Emote has all its parts: eyes, mouth, head
15 points
Head changes color with temperature
15 points
Mouth moves in response to happiness/sadness
15 points
Eyes or eyebrows do something to show happiness/sadness

Before Starting:

[[[ Download PC zip ]]]

Zip includes:

All labs this semester include a file named by the lab number, such as Lab2.java. The labs will also include a Startup.java file, which serves as a driver: a piece of code that calls the methods you write, to exercise your code and demonstrate your work. Startup.java will also give you easy access to your objects for testing.

  1. Problem Statement

    The time has come for computers to show their inner emotions. As CS101 students, it is your job to implement an electronic emotion display, or Emote. The Emote should display the following:

Any additional features or emotions will gain you favor with your TAs, and Extra Credit in CS101.

  • Design

    1. We will use a ViewFrame to display the Emote, and the four arrow keys to change its emotions. The class that listens for key presses, EKeyListener.java, and all the necessary code are provided for you.
    2. From the problem statement, we can decompose the problem by observing the following "has-a" relationship.

  • Decomposition has helped us define five distinct classes for the solution of our problem, but before we dive in, you might find it helpful to examine some of the tools we will use in this lab. You can find the specifications for ViewFrame and WebSafeColor (along with several other classes included in the canvas package) in your CS101 lab booklet.
  • Now let's look at the classes we wish to implement. Initially, we'll set aside graphical representation and approach the class that will control the Emote's emotions: Emote.java.

  • Remember, the Emote acts as a control center, or the 'brain' of the program. It has access to both internal and graphical representations of of the program. Each Emote has two emotional Sliders, 'temperature' and 'happiness.'
  • Constructor:
    public Emote(int width, int height)
    Creates an Emote ViewFrame of the specified width and height.
    public double getTemperature()
    Returns the value of the 'temperature' Slider
    public double getHappiness()
    Returns the value of the 'happiness' Slider
    public void adjustTemperature(double deltaT)
    Changes the value of the 'temperature' Slider by the amount 'deltaT' and then calls updateFeatures().
    public void adjustHappiness(double deltaH)
    Changes the value of the 'happiness' Slider by the amount 'deltaH' and then calls updateFeatures().
    public void setTemperature(double newValue)
    Uses the method adjustTemperature(double deltaT) to set the value of the 'temperature' Slider to 'newValue.'
    public void setHappiness(double newValue)
    Uses the method adjustHappiness(double deltaH) to set the value of the 'happiness' Slider to 'newValue.'
    Other Methods:
    public void updateFeatures()
    Calls update() on all of the Emote's features: Head, Eyebrow, Mouth, etc...

  • Slider.java is the internal representation for an emotion. It has no graphical representation, although one can be added for extra credit. A Slider has a minValue, a maxValue, and a curValue (current value). The current value is changed by mutators in Slider.java. You must ensure that curValue remains within minValue and maxValue.
  • Constructor:
    public Slider(String name, double min, double max, double startPoint)
    Creates a Slider based on the given specifications. The Slider has a value between the min and max values.
    public double getValue()
    Returns the current value of the Slider.
    public double getFraction()
    Returns the fraction value of the Slider. This is computed as the Slider's (current value - min value) divided by the difference between its max and its min.
    public void adjustValue(double deltaX)
    Changes the value of the Slider by the specified 'deltaX.' If a change of 'deltaX' yields a curValue that is greater than maxValue, curValue should be set to maxValue. If a change in 'deltaX' yeilds a curValue that is less than minValue, curValue should be set to minValue.
    public void setValue(double newValue)
    Sets the value of the Slider to be the 'newValue.' If the 'newValue' is either greater than the maxValue or less than the minValue, round to the appropriate value. (Hint: can you think of a helper method that might have a common utility to adjustValue(double deltaX) and setValue(double newValue)? )
    Other Methods:

  • Head.java draws the Ellipse on the Emote ViewFrame to represent the Emote's Head, and changes its color based on the 'temperature' Slider.
  • Constructor:
    public Head(int width, int height, Slider temperature, DrawingPane pane, DrawingGrid grid)
    Creates a Head of the desired width and height. Also, you must pass in the 'temperature' Slider so the Head can update itself. You are provided with three WebSafeColors, a blue color for cold, an orange color for normal temperature, and a red color for hot. You will need to pick between these WebSafeColors based on the value of the Emote's 'temperature' and then call saturate() in order to obtain the appropriate intensities of these colors. For the sake of appearance, you might also want to add a nose in this class (using an Arc).
    public void update()
    Updates the color of the head based on the position of the 'temperature' Slider.

  • Mouth.java draws the Arc on the Emote ViewFrame to represent the Emote's mouth. The size of the Arc is dependent on the value of the 'happiness' Slider.
  • Constructor:
    public Mouth(int width, int height, Slider happiness, DrawingPane pane, DrawingGrid grid)
    Creates a mouth of the specified width and height.
    public void update()
    Updates the size of the mouth Arc base on the value of the 'happiness' Slider

  • Eyebrow.java makes an Arc on each side of the Emote's head to represent an eyebrow. The angle of the eyebrows changes with changing happiness values. We'll use Eyebrow.java to represent the entire 'Eye Region' of the Emote, since the actual eyes do not change.
  • Constructor:
    public Eyebrow(int width, int height, Slider happiness, DrawingPane pane, DrawingGrid grid)
    Constructs an Arc of the given width and height. The angle of this Arc is dependent on the value of the 'happiness' Slider. Also, you might want to create your eyes in this class. Since the eyes do not change with the Emote's emotions, you can make them as detailed (or spartan) as you see fit.
    public void update()
    Changes the angle of the Arc on the face based on the value of the 'happiness' Slider.

  • You don't need to do modify EKeyListener.java in any way. It will work upon the completion of Emote.

  • Implementation You must implement the classes described below the 'Design' section of the design. For this lab, you are constrained to following this design.

    Note that your Emote does not need to look exactly like the class solution . You will get full credit even if your Emote (for example, its eyes) is not as attractive as ours. You can earn extra credit by having Emote be more expressive than ours, however. Ask the TAs about this.

    Here is a suggested implementation:

    1. Download pc.zip, unzip into your cs101 directory, compile, and run.
    2. First, implement Slider.java.
      • In Startup.java, create a Slider and briefly test each of its methods.
      • Notice the output on Transcript. It should be informative about the Slider's name and value.
    3. Next, work on the Emote class. Create two sliders for 'happiness' and 'temperature'. Remember that Emote is the emotional control for all of an Emote's features. Once Emote's methods are correctly completed, EKeyListener will be functional.
      • Return to Startup.java and see how we have already crated a new Emote for you and put it in a ViewFrame.
      • Compile and run your program, and watch the Transcript window for output based on your pushing of the arrow keys.
    4. Implement Head.java. In this class you will find that the head and ears are already created for you. The update() method in this class changes the color of the Emote's head based on the value of the 'temperature' Slider. You must have 9 different colors for the different values of the 'temperature' Slider.
    5. Implement Mouth.java. After you have filled in all the methods, return to Emote, position and add the mouth.
      • Compile and run. If you have implemented Emote and Mouth correctly, you should be able to use EKeyListener to help you test your code.
    6. Implement EyeComponent.java and Eyebrow.java. Create your (non-changing) graphical eye in EyeComponent, and give the eye an Eyebrow. Remember, EyeComponent is a container for the graphical eye and the Eyebrow. The Emote will only know about the EyeComponent, which will in turn have a notion of its Eyebrow. (Confused yet? Ask if you need clarification.) Again, return to Emote to add two EyeComponents.
      • Compile and run. Test to make sure all features work as the design specifies.

    What to turn in:
    1. Complete a code cover sheet.
    2. Provide a transcript for your self tests.
    3. Provide a printout of any files you have modified.
      • Slider.java
      • Emote.java
      • Head.java
      • Mouth.java
      • Eyebrow.java
      • EyeComponent.java