CSCI 201 -- Using graphics classes II

This lab will give you more practice with your graphics skills.

Downloading the project framework

Download Face.zip, a ZIP file containing a NetBeans project named Face and unZIP this project into your csci/201 directory. Try to make your Projects panel look something like the following picture before continuing.
Projects panel

Click on the icon for the Face.java file. This should bring up the source code for the Face class. Build and run the project. You should see a rather abstract face with only a nose, mouth, and one eye.
primative face

Enhancing your Face

A bit more about the Graphics class

You need to modify the paint method of the Face class to produce an improved face. (Ah, if all of life were so easy.) You are expected to be creative, both in designing the face and in using Java classes. Look at Sun's documentation for the Color and Graphics classes to see what colors and graphic objects are available. You might also find your textbook to be useful.

Understanding the Documentation

Take a look at Sun's on-line documentation for the fillArc method of Graphics. Everything we needed to know to draw that nose is located in this information. You just have to read and understand it. So give it a try! (By the way, reading and understanding documentation is a major part of the work life of a computer professional.)

In order to use the methods defined in the Graphics class, you need to remember how the display coordinate system is setup. The origin of the coordinate system is the top-left corner of the display, with the positive x-axis running horizontally to the right, and the positive y-axis running vertically down, not up, the right side of the display. Also, distances are measured in terms of pixels, the little dots that make up your screen.

Remember, the order in which the objects are drawn to the screen makes a difference. If you want to draw a black pupil in the center of a green iris, you must draw the surrounding iris first.

Some examples from the past

Here are some of the faces that students have created in the past when CSCI 201 was taught using C++. Most of these folks actually graduated from UNCA in spite of this assignment.

Your Assignment

This lab has more flexible rules than the others. However, it has few definite rules:

  1. You are strongly encouraged to work with a partner.
  2. You must use at least one color not seen in the original Face.java code.
  3. You must use at least two additional methods of from the Graphics object. We suggest you choose fillOval for one of your two.
  4. Your Java-generated face must not resemble that of your lab instructor.

Show your artistic effort to the lab instructor.

Placing your face on the net

The files you need

There are a couple of ways you could put your face program on the network. If you look within NetBean's various files, you will find one called Face.jar within your csci/201/Face/dist directory. This is a Java archive file that contains your compiled classes, both Face and FaceMain, along with the helper class, edu.unca.cs.LabAids.FrameMaker, in a rather tidy package which can be run simply by typing the command "java -jar Face.jar" on any computer where Java is installed.

However, the more exciting way to distribute your program would be to turn it into an Applet where it could be downloaded in a browser. Making your program into an Applet isn't that hard. In addition to a little manipulation of your Java code, you must create an HTML file, something we hope you did in CSCI 107,

WARNING

You really must read these directions carefully. These steps do work, but if you skip any of them you must come back to this point and try again.

The Java code

To make a Java Applet, you must write a program that extends the applet interface. This isn't hard at all. Right now your Face program extends javax.swing.JComponent. Change the javax.swing.JComponent to javax.swing.JApplet and you are done with the extension. By the way, this only works because a JApplet itself is already an extension of a JComponent.

Your Face class contains a constructor that calls the setPreferredSize method. There's no point in doing this, go ahead and delete, or comment out, the entire constructor. Removing code is always easier than adding it.

While you're deleting code, you ought to delete the Java classes FaceMain and FrameMaker along with the entire package edu.unca.cs.LabAids. FrameMaker is part of the package edu.unca.cs.LabAids. When your done, your package should contain nothing but the Face class.
Projects panel for Applet
If you can't make your Projects panel look exactly like the above diagram (and note that there is no expander to the left of the Constructors folder), there is no point in continuing. If you do try to continue without getting your project in order and your lab doesn't work, do not expect your lab instructor to be kind and caring.

Instead of Build Main Project, select Clean and Build Main Project to compile your project to remove all traces of FaceMain and FrameMaker. Isn't it nice to have such a small tidy package.

Running the applet

If you try to run your program using the Run Main Project icon, you'll get an error message because to run your applet, you'll need to right-click on the icon for Face.java and then select Run File. This will start Java's appletviewer. The results will be a tad disappointing because the applet window will be much too small to display the entire face. However, you can resize the appletviewer window to get a larger picture of your work.

Copying your applet to the right place

What you need to do now it copy your Face.jar file into your public_html directory. The following sequence of commands should accomplish movement.

[yourid@yourmach currentdir] cd
[yourid@yourmach yourid] mkdir -p public_html
[yourid@yourmach yourid] cp csci/201/Face/dist/Face.jar public_html/Face.jar

HTML file

Now you need an HTML file that runs your Applet. We're going to give this one to you. Use the editor to store the following HTML code into a file called public_html/face.html within your home directory.

<html>
<head>
<title>CSCI 201 Face Applet</title>
</head>
<body>
<h1>CSCI 201 Face Applet</h1>
<applet archive="Face.jar" code="Face.class" width="500" height="600">
</applet>
</body>
</html>

Some of you HTML experts may know that the applet tags was deprecated in HTML 4.0. However, we are using it here because some popular browsers do not conform to standards.

Browsing your applet

You should be able to display your applet in your favorite browser by loading the URL http://www.cs.unca.edu/~yourid/face.html. Be sure to email this URL to your friends and family so they can see that you have been attending your classes.

Load your applet into your browser and show it to your instructor.