CS 110 -- Lab 3

Images and Random Numbers

This lab introduces the use of images and random numbers in applets.  While the instruction here should be sufficient, these topics are also covered in chapter 3 and chapter 10 of Getting Wired with Java Linux. So, should you get confused with these directions, you should try reading those pages.

Fortunately, using images and random numbers is relatively easy. In the remainder of this lab we will create an Applet that displays a image in a random location in the the applet window.
The instructions below ask several questions of you. Be sure that you understand the answers, but there is nothing to hand in.

Step 1: Get an image

In the browser, go to a web page with an image in it. Right click on the image and select "save image as ..." in the popup menu. In the remainder of the instructions I assume that the image is saved under the name "a.jpg". Try to pick a relatively small image. Be sure to save the image into your html directory.

Step 2: Create an html page

As always, to create an html page do the following:
  1. open XEmacs
  2. C-x C-f html/lab3.html <RET>
  3. Give the document a likely title (e.g., images)
  4. add an applet tag below the <h1>tag. Be sure to make the applet wide and high. For example: 
    <applet code=Images.class width=500 height=500> </applet>
  5. Save it
You could call your html page something other than lab3.html, but I assume that the file is called lab3.html in the rest of these instructions.

Step 3: Create the Applet

Do the usual things to create a new Java applet. E.g.;
  1. open XEmacs
  2. C-x C-f html/Images.java <RET>
Into the applet put the following code: 
import java.awt.*;
import java.applet.Applet;
public class Images extends Applet
{
    public void paint(Graphics geoff)
    {
	int appX = (int)getSize().getWidth();
	int appY = (int)getSize().getHeight();
	
	geoff.setColor(Color.blue);
	geoff.fillRect(0,0,appX, appY);
	geoff.setColor(Color.WHITE);
	geoff.fillRect(5,5,appX-10, appY-10);
    }
}
Try just this applet. I.e., do the following:
  1. Save it. Hit the "save" icon in XEmacs
  2. Compile it.
    1. Start a terminal window
    2. cd html
    3. javac Images.java
  3. Run it. In the terminal window enter "appletviewer lab3.html". What does it do? Be sure that you understand why this little applet behaves as it does.

Step 4: Add the image

To add an image there are two separate pieces of code that need to be added to your applet. First, between the declaration of the applet and the declaration of the paint method 
             Image photo;
             public void init()
             {
                photo = getImage(getCodeBase(), "a.jpg");
             }
Second, below the second fillRect command in the paint method add the line: 
             geoff.drawImage(photo, 5, 5, this);
This should result in drawing the image in the upper left corner of the white area of the applet.

Step 5: Make it move

Just below the drawImage command you just added, put in the following: 
	int xloc = (int)(5 + Math.random()* (appX-10-photo.getWidth(this)));
	int yloc = (int)(5 + Math.random()* (appY-10-photo.getHeight(this)));
	geoff.drawImage(photo, xloc, yloc, this);
Save, compile and test. What happened? Execute the applet a second time. Did the images appear in the same place?