Chapter I - vernonmath.comvernonmath.com/wp/wp-content/uploads/2013/05/Text15-Intermed… · Web view15.10The Last Word. 15.1 Introduction. We have finally come to the last chapter

Chapter XV

Intermediate Graphics

Chapter XV Topics

15.1 Introduction

15.2 Using Mouse Events

15.3 Importing Images

15.4 Fixing Image Issues

15.5 New Features with the Deluxe Expo Class

15.6 Multi-Page Output

15.7 Creating a Simple Draw Program

15.8 Creating Clickable Areas in the Applet

15.9 Computer Animation

15.10 The Last Word

Chapter XV Intermediate Graphics 537

15.1 Introduction

We have finally come to the last chapter. This happens to be my favorite chapter, and not because it is the “last” one. In this chapter you will learn more advanced graphics features. These features will not be as advanced as those taught in AP Computer Science. That is why this chapter is called Intermediate Graphics while the last chapter in AP Computer Science is called Advanced Graphics.

Aside from being the last chapter, this chapter is special in another way. There will be no homework exercises for this chapter. There will also be no quizzes and no test. The information covered in this chapter will not even be part of the Final Exam. However, there are two major Lab Projects based on the information in this chapter. At John Paul II High School the first of these two projects counts as a test grade, and the second counts even more.

While this chapter is divided into different sections like any other chapter, it is also divided into two distinct halves. The first half of the chapter focuses on the skills that you will need to complete the first project. The second half of the chapter focuses on the skills that you will need to complete The Final Project.

15.2 Using Mouse Events

You are about to learn how to use a mouse to interact with graphics displays. In the spirit of Exposure Java, which means learning repeatedly with small pieces of new information, you will see many different programs using mouse features. In many cases one program will be used to address one mouse feature. By the time that you are finished, you may be surprised that you can do some sophisticated graphics programming with this information.

Ignore Deprecated API Warning Messages

Java is constantly improving its class and method selection. When newer and improved classes become available, the older classes are officially labeled “deprecated” which essentially means they are so "yesterday". When you use a deprecated class, you get a warning message like the one shown in Figure 15.1.

538 Exposure Java 2012, PreAPCS Edition 05-31-12

Figure 15.1

Please realize that warning messages are not error messages. An error must be fixed. A warning is just letting you know there may be a better way to do something. The technique that we will use to achieve mouse interaction is an older technique. And yes, there is a newer technique which is considered better. However, the newer and better technique is also more complicated and requires knowledge of topics taught in AP Computer Science. For this reason, we will use the older and simpler technique and simply ignore any warning messages about deprecated classes.

Counting Mouse Clicks

Now let us get the ball rolling with program Java1501.java, in figure 15.2. This program will count and display the number of times that the mouse is clicked. Program Java1501.java requires some explanation, because it includes a variety of new features that will be puzzling at first introduction.

You have already seen the paint method for some time. Applets use the paint method to display graphics patterns on the monitor. You have also learned that the paint method is called automatically by the web browser that executes the bytecode file of an applet. Method paint is not the only method that is called by the web browser. Method init is executed before paint, if it exists. True to its name, method init usually performs the job of initializing variables. In program Java1501.java the init method sets the numClicks integer field to 0.

After method init you see the familiar paint method. Apparently, method paint is only in charge of displaying a graphics string indicating how many times the mouse has been clicked.


Below method paint appears to be another method called mouseDown. There is no evidence that mouseDown is called anywhere. Is this yet another method that is called automatically? Well mouseDown is not called like init or paint and it is not a regular method. It is an event. Events are routines that are not called by using the identifier of the event, but the events are executed when some special event occurs. Mouse-type-events occur when the mouse is clicked, released, moved or dragged. Java has created a special behind-the-scene interface with the mouse that knows when something new is happening with the mouse.

In the case of Java1501.java something new means that either mouse button is clicked. It results in calling mouseDown and then mouseDown changes the numClicks value, as well as calling method repaint. When repaint is called, it clears the screen and then executes the paint method again. The bottom line is that every time you click, the number increases.

Figure 15.2

// Java1501.java// This program counts the number of times a mouse is clicked.// Both left-clicks and right-clicks are counted.// using the <mouseDown> event. Ignore the "deprecated API" warning.

import java.applet.Applet;import java.awt.*;

public class Java1501 extends Applet{

int numClicks;

public void init(){

numClicks = 0;}

public void paint(Graphics g){

g.drawString("Mouse is clicked " + numClicks + " times.",20,20);}

public boolean mouseDown(Event e, int x, int y){

numClicks++;repaint();return true;

}}


Figure 15.2 Continued

Above is the initial output. Below is the output after 7 clicks.

Detecting Mouse Click Coordinates

Each of the programs that follow will demonstrate some new mouse feature. A brief explanation will detail the actions of the new mouse feature. By now you should realize that "playing" with the program is the most effective way to learn new program language concepts. Program Java1502.java, in figure 15.3 shows that the mouseDown event records the X-coordinate and Y-Coordinate values when the mouse is clicked in the x and y parameters of the mouseDown event.

Figure 15.3

// Java1502.java// This program displays the position of the mouse every time it is clicked// using the <mouseDown> method.




int xCoord, yCoord;


g.drawString("Mouse clicked at (" + xCoord + "," + yCoord + ")",20,20);}


xCoord = x;yCoord = y;repaint();return true;

}}


Determining if the Mouse is In the Applet Window

Program Java1503.java, in figure 15.4 uses both the mouseEnter event and mouseExit event to determine when the mouse enter or exits the applet window.

Figure 15.4

// Java1503.java// This program demonstrates how to determine if the mouse is inside or// outside the Applet window using the <mouseEnter> and <mouseExit> methods.



boolean insideApplet;



if (insideApplet)g.drawString("Mouse is inside applet",20,20);

elseg.drawString("Mouse is outside applet",20,20);

}

public boolean mouseEnter(Event e, int x, int y){

insideApplet = true;repaint();return true;

}

public boolean mouseExit(Event e, int x, int y){

insideApplet = false;repaint();return true;

}}


Checking if the Button is Clicked Once or Twice

The e object in the parameter heading of the mouseDown event has a clickCount attribute which stores the number of times that a mouse is clicked. Program Java1504.java, in figure 15.5, demonstrates this concept for single-clicks and double-clicks. The same technique can also work for triple-clicks, quadruple-clicks, and beyond. Keep in mind that the time delay between first and second click is based on Windows mouse settings.

Figure 15.5

// Java1504.java// This program determines if a mouse is clicked once or twice using the// <clickCount> method. This method works for the left or right button.




boolean singleClick,doubleClick;


if (singleClick)g.drawString("Mouse was clicked once",20,20);

if (doubleClick)g.drawString("Mouse was clicked twice",20,20);

}


switch (e.clickCount){

case 1:singleClick = true;doubleClick = false;break;

case 2:doubleClick = true;singleClick = false;

}repaint();return true;

}}


Output after

singleclick:


Output after

doubleclick:

Displaying the Mouse Position Continuously

A few programs back the program displayed the mouse position whenever the mouse was clicked. Program Java1505.java, in figure 15.6, constantly checks and updates the location of the mouse using the mouseMove event. Any movement of the mouse triggers the mouseMove event, which stores the latest coordinate values in the x and y parameters.

Figure 15.6

// Java1505.java// This program displays the position of the mouse every time it moves// using the <mouseMove> method.



int xCoord, yCoord;


g.drawString("Mouse is located at (" + xCoord + "," + yCoord + ")",20,20);}

public boolean mouseMove(Event e, int x, int y){


}}



15.3 Importing Images

Soon you will be working on the first of your two graphics projects. The vast majority of output in any graphics project is expected to be created by your Java program with Graphics methods from the Expo class like drawLine, drawRectangle, and drawCircle. Sometimes it is nice to add a little personal touch to a project. This is similar to what you observe with the PowerPoint slides used with Exposure Java. You have probably noticed that the left picture from figure 15.7 is on the first slide of every PowerPoint presentation. The picture on the right was created by a former student and will be used in the next program.

Figure 15.7

Pictures like these can be imported into a Java program. Program Java1506.java in figure 15.8 shows how an image file can be imported and displayed at any location on the screen.

A new class, Image, enables the importing of pictures. In the init method, the picture is loaded from external storage then stored in internal memory,


specifically in the Image object picture. The init method does not display the picture. It links the internal Image object to the external image file. This is similar what you saw in the last chapter when an internal file object was linked to an external text file.

In the paint method a new method, drawImage, takes over and displays the image at a specified coordinate. This coordinate indicates the location of the top-left corner of the image. Note that drawImage is not a method of the Expo class. It is one of many object methods of the Graphics class. To call this object method, we must use the graphics object g. You will notice that g is not a parameter in this method. You may also notice the peculiar last parameter. The this parameter is required and needs to be used without explanation for now. Figure 15.8

// Java1506.java// This program demonstrates how display to a single graphics image from a .gif file// at any x,y location on the screen. The same image can be displayed multiple times.

import java.awt.*;

public class Java1506 extends java.applet.Applet{

Image picture;

public void init(){

picture = getImage(getDocumentBase(),"LSchram.gif");}


g.drawImage(picture,0,0,this);g.drawImage(picture,750,200,this);g.drawImage(picture,350,450,this);

}

}


Program Java1507.java in figure 15.9 shows that multiple gif files can be displayed in the same program.

Figure 15.9// Java1507.java// This program demonstrates that several different images can be displayed.

import java.awt.*;


Image picture1, picture2, picture3, picture4, picture5, picture6;

public void init(){

picture1 = getImage(getDocumentBase(),"Knight.gif");picture2 = getImage(getDocumentBase(),"MouseWithCheese.gif");picture3 = getImage(getDocumentBase(),"smile.gif");picture4 = getImage(getDocumentBase(),"shark.gif");picture5 = getImage(getDocumentBase(),"Spider.gif");picture6 = getImage(getDocumentBase(),"TEDDY.gif");

}


g.drawImage(picture1,100,100,this);g.drawImage(picture2,400,100,this);g.drawImage(picture3,700,100,this);g.drawImage(picture4,100,400,this);g.drawImage(picture5,400,400,this);g.drawImage(picture6,700,400,this);

}


}

Program Java1508.java in figure 15.10 shows that importing an animated gif is no different from importing a normal gif. You will need to execute this program on a computer to see the actual output. Do not be surprised if your screen seems to flicker. This is normal with animated gifs.

Figure 15.10// Java1508.java// This program demonstrates that animated gifs are inserted in the same way as// normals gifs. Animated gifs can cause a flickering side-effect on the screen.

import java.awt.*;



public void init(){

picture1 = getImage(getDocumentBase(),"space.gif");picture2 = getImage(getDocumentBase(),"computer.gif");picture3 = getImage(getDocumentBase(),"gears.gif");picture4 = getImage(getDocumentBase(),"butterfly.gif");picture5 = getImage(getDocumentBase(),"pizza.gif");picture6 = getImage(getDocumentBase(),"jet.gif");

}


g.drawImage(picture1,100,100,this);g.drawImage(picture2,450,100,this);g.drawImage(picture3,700,100,this);g.drawImage(picture4,100,400,this);


g.drawImage(picture5,400,350,this);g.drawImage(picture6,700,400,this);

}}

Gifs are not the only type of image that can be displayed. We can also display png files. This is demonstrated by program Java1509.java in figure 15.11.

Figure 15.11// Java1509.java// This program demonstrates that .png files also work.

import java.awt.*;



public void init(){

picture1 = getImage(getDocumentBase(),"Bunny.png");picture2 = getImage(getDocumentBase(),"pineapple.png");picture3 = getImage(getDocumentBase(),"Penguin.png");picture4 = getImage(getDocumentBase(),"Koala.png");picture5 = getImage(getDocumentBase(),"house.png");picture6 = getImage(getDocumentBase(),"bird.png");

}


g.drawImage(picture1,100,100,this);g.drawImage(picture2,400,100,this);g.drawImage(picture3,700,100,this);g.drawImage(picture4,100,400,this);g.drawImage(picture5,400,400,this);g.drawImage(picture6,700,400,this);

}


}

Jpg files can also be displayed. This is demonstrated by program Java1510.java in figure 15.12. Note that jpg files are usually used for photographs.

Figure 15.12// Java1510.java// This program demonstrates .jpg files can be used as well.// .jpg files are typically used for photographs.

import java.awt.*;


Image picture1, picture2, picture3, picture4;

public void init(){

picture1 = getImage(getDocumentBase(),"Paris.jpg");picture2 = getImage(getDocumentBase(),"LetSleepingDogsLie.jpg");picture3 = getImage(getDocumentBase(),"AllSmiling.jpg");picture4 = getImage(getDocumentBase(),"Schrams.jpg");

}


g.drawImage(picture1,0,0,this);g.drawImage(picture2,500,0,this);g.drawImage(picture3,0,330,this);g.drawImage(picture4,316,330,this);

}}


15.4 Fixing Image Issues

There are a number of things that can prevent an image from being displayed properly. Maybe the image is not the correct format. Maybe the image is not in the correct folder. Maybe the image is just too big. Any of these will cause problems. In this section, we will look at how to fix those problems.

Problem #1 – The Image File has the Wrong Format

Figure 15.13 shows the image that we will attempt to display in the program Java1511.java, shown in Figure 15.14. The logic of the program seems no different than the past several programs which also displayed images. There is one difference however. This image is a bitmap (bmp) file. While Java can display gif, png, and jpg files, it cannot display bmp files as the output demonstrates.

Figure 15.13


Figure 15.14

// Java1511.java// Problem #1 -- The image file has the wrong format.// This program demonstrates that .bmp files cannot be displayed. Nothing will show up.// To fix this, load the bitmap file in Paint and resave it as a .gif, .png or .jpg file.

import java.awt.*;


Image picture;

public void init(){

picture = getImage(getDocumentBase(),"ShortCircuit.bmp");}


g.drawImage(picture,100,100,this);}

}



There is a solution to this problem. The bitmap file must be converted to a different format. Keep in mind it is not sufficient to simply rename the file and give it a different extension. This will simply make the file unusable. You need to actually convert the file. First you need to load the file in some graphics editor, like Microsoft Paint. See Figure 15.15. Then you need to choose Save As and make sure to specify a different file format. See Figure 15.16. Which format should you choose? Typically photographs are saved as jpg files and simple drawings are saved as gif files. Sometimes when you try to save a drawing as a gif you might get a warning stating that “The color quality might be reduced if you save the picture in this format.” In that case, choose png.

Figure 15.15


Figure 15.16


Now, you will have to make a slight change to the program to make things work. Program Java1511.java is shown again in figure 15.17. Note that the file name has been altered to reflect the fact that I converted the file to a png file. If you converted the file to a gif or jpg, you will need to adjust the file name accordingly. Now when you execute the program, we see the image.

Figure 15.17// Java1511.java// Problem #1 -- The image file has the wrong format.// This program demonstrates that .bmp files cannot be displayed. Nothing will show up.// To fix this, load the bitmap file in Paint and resave it as a .gif, .png or .jpg file.

import java.awt.*;


Image picture;

public void init(){

picture = getImage(getDocumentBase(),"ShortCircuit.png");}



}


Problem #2 – The Image File is Not in the Correct Location

Last chapter we worked with files, and one big deal with a file is that it must be in the proper folder so it can be found by the program that reads the information from it. You also have been working with the Expo.java file for a while. What allows you to use the methods of the Expo class is the fact that Expo.java is located in the same folder as the program calling its methods. If the file Expo.java was not in the Programs15 folder, then many of the programs in this chapter would not even compile.

A similar issue exists with program Java1512.java., shown in Figure 15.18. The program attempts to display the image file DallasSkyline.png, but nothing shows up. The file, DallasSkyline.png, does exist, but it is in the wrong folder. Instead of being with Java1512.java in the Programs15 folder, the file DallasSkyline.png, is in the Dallas subfolder. It needs to be copied or cut from the Dallas subfolder, and pasted into the Programs15 folder. Two outputs are shown. The first shows the blank output when the program cannot find the image file. The second should the output after the file has been put in the proper folder.

Figure 15.18// Java1512.java// Problem #2 -- The image file is not in the correct location.// This program demonstrates that an image cannot be displayed if it is not in the correct folder.// When you execute the program, nothing is displayed.// Move the "DallasSkyline.png" file from the "Dallas" subfolder to the "Programs15" folder// and execute the program again. After the file is moved, the program should work.

import java.awt.*;


Image picture;

public void init(){

picture = getImage(getDocumentBase(),"DallasSkyline.png");}



}



Java1512.java Output – Before the file is moved

Java1512.java Output – After the file is moved


Problem #3 – The Image File is Too Big

In the Programs15 folder is a file called Castillo.JPG. If you were to double-click this file, you would see image displayed in some sort of Picture Viewer or Photo Viewer like what is shown in Figure 15.19. This is a picture of El Castillo de San Felipe del Morro in San Juan, Puerto Rico. I am showing you this picture not to give you a geography lesson, but to make a point. This looks like a normal size picture that should have no problem being displayed in a Java program. In reality, the picture is huge! Its dimensions are 3008 by 2000 pixels. Program Java1513.java in Figure 15.20 will try to demonstrate just how huge.

Figure 15.19

Figure 15.20

// Java1513.java// Problem #3 -- The image file is too big.// This program will be used to demonstrate what to do when a picture is too big.

import java.awt.*;



Image picture;

public void init(){

picture = getImage(getDocumentBase(),"castillo.jpg");}


Expo.setFont(g,"Snap ITC",Font.PLAIN,48);Expo.drawString(g,"El Castillo de San Felipe del Morro",15,60);g.drawImage(picture,0,100,this);

}}


The picture is so big, that on a normal display of 1000 by 650, we are only about to see a little bit of the sky from the top-left corner. I also tried to execute the program on a 48 inch plasma screen. This did let me see more of the picture, but it was only about ¼ of the entire picture. When a photograph is taken with a digital camera, it creates a huge jpg file. This allows pictures to be blown up to poster size. In our case, we want to go the other direction and make the picture fit on our normal sized screen. This can be done in a variety of ways.


Problem #3 – Solution #1 – Resize the Image

As before, this solution involves loading the picture in a Graphics Editor. Microsoft Paint will be used again in this example. Any decent graphics editor should have the ability to resize the image. See Figure 15.21.

Figure 15.21

When resizing, you either resize with Percentages or Pixels. If you select Percentage and enter 50 for both dimensions, you will make the picture ½ as tall and ½ as wide – which means it now is ¼ the area. In our case, I know the exact size I want the picture to be, so I selected Pixels. This is shown in Figure 15.22. Note that it shows the current dimensions of the picture are 3008 by 2000.

I then changed the Vertical value from 2000 to 550. Look at Figure 15.23. Note that the Horizontal value also changed. This is because Maintain Aspect Ratio is checked. As long as this is checked, whenever you change one dimension, the other dimension will automatically change in such a way that the proportions of the picture remain the same.

Now look at Figure 15.24. This shows the picture after it is resized. Save the picture and execute the program again. You will not need to make any changes to the program. Figure 15.25 shows the output of the resized image.


Figure 15.22 Figure 15.23

Figure 15.24


Figure 15.25

Problem #3 – Solution #2 – Specify Image Dimensions

Resizing does have the benefit that the picture will use less memory, but memory is becoming less and less of an issue. You also may not want to alter the existing image. In this case, we will leave the actual image alone. We will not resize it at all. Instead, we will add a couple parameters to the drawImage command to specify the dimensions as shown in figure 15.26. You may wonder why I picked the numbers 752 and 500. Well, the actual dimensions of the image are 3008 by 2000. I simply divided both numbers by 4. The result is the displayed image will be ¼ the width and ¼ the height (or 1/16 the total area) of the actual image.

Figure 15.26

// Java1513.java// Problem #3 -- The image file is too big.// This program will be used to demonstrate what to do when a picture is too big.

import java.awt.*;


Image picture;


public void init(){

picture = getImage(getDocumentBase(),"castillo.jpg");}


Expo.setFont(g,"Snap ITC",Font.PLAIN,48);Expo.drawString(g,"El Castillo de San Felipe del Morro",15,60);g.drawImage(picture,0,100,752,500,this);

}}


Figure 15.27 shows the output of the program if the dimension parameters were changed to 376 and 250. Now the image will be ⅛ the width and ⅛ the height (or 1/64 the total area) of the actual image.


Figure 15.27

Figure 15.28 shows what happens if you do not alter the dimensions proportionally. In this output the horizontal dimension was changed to 1000, but the vertical dimension was left at 250. So we did not maintain aspect ratio and therefore, the picture is warped.

Figure 15.28


Problem #3 – Solution #3 – Crop the Image

When you have the problem of a really huge picture, the solution is not always related to the size of the actual image or the displayed image. What if you only need to display a small piece of the picture? In this case cropping works out better than resizing. Any decent graphics editor should also give you the ability to crop your picture.

Microsoft Paint allows cropping in a round-about sense. There are cropping handles available, but they are only on the right side and bottom of the image. If you want to crop the top or the left side, you need to flip the picture and then flip it back. There is another way to crop in Microsoft Paint that does not require flipping the image.

Look at Figure 15.29. Here the picture is really big again, but I scrolled to the middle of the picture and then used Select tool to outline a rectangular region of what I actually want to keep. In this case, it is the tower. I then copied the highlighted region and pasted it in a new file. See Figure 15.30. After saving this file under the name castillo.JPG I can execute the program again. See Figure 15.31.

Note: Make sure to remove the extra 2 parameters from the drawImage command so we will see the actual size of the cropped image.

Figure 15.29


Figure 15.30

Figure 15.31


15.5 New Features with the Deluxe Expo Class

Ever since Chapter 4, you have been using the Expo class. The primary purpose for this class was to simplify the process of working with graphics. It also simplifies the processes of generating random numbers and keyboard input. While the Expo class that you have been using has a lot of methods, it is actually the slimmed down version of the Expo class. There actually are many more methods, and colors available. For this final chapter, you will be using the Deluxe Expo class. All of the methods and colors that you already know still work. The Deluxe Expo class just gives you more. For example, program Java1514.java, in Figure 15.32 shows that the Deluxe Expo class has 85 colors. You may remember that the Slimmed Down Expo class has 36.

Figure 15.32// Java1514.java// This program demonstrates 84 of the 85 colors of the Deluxe Expo class// There is no white circle drawn since white is the background color.

// NOTE: The 10 primary colors in the Deluxe Expo class are// red, green, blue, orange, cyan, magenta, yellow, gray, pink and tan.// Each of these colors actually has 5 shades.// Example: The 5 shades of red are red, darkRed, lightRed, darkerRed and lighterRed.// There are also 35 special colors like lime, teal, navy and chartreuse to name a few.

import java.awt.*;import java.applet.*;



int radius = 60;Expo.setColor(g,Expo.darkerRed); Expo.fillCircle(g, 60, 60,radius);Expo.setColor(g,Expo.darkRed); Expo.fillCircle(g,140, 60,radius);Expo.setColor(g,Expo.red); Expo.fillCircle(g,220, 60,radius);Expo.setColor(g,Expo.lightRed); Expo.fillCircle(g,300, 60,radius);Expo.setColor(g,Expo.lighterRed); Expo.fillCircle(g,380, 60,radius);Expo.setColor(g,Expo.brown); Expo.fillCircle(g,460, 60,radius);Expo.setColor(g,Expo.violet); Expo.fillCircle(g,540, 60,radius);Expo.setColor(g,Expo.darkerGreen); Expo.fillCircle(g,620, 60,radius);Expo.setColor(g,Expo.darkGreen); Expo.fillCircle(g,700, 60,radius);Expo.setColor(g,Expo.green); Expo.fillCircle(g,780, 60,radius);Expo.setColor(g,Expo.lightGreen); Expo.fillCircle(g,860, 60,radius);Expo.setColor(g,Expo.lighterGreen); Expo.fillCircle(g,940, 60,radius);

Expo.setColor(g,Expo.darkerBlue); Expo.fillCircle(g, 60,140,radius);Expo.setColor(g,Expo.darkBlue); Expo.fillCircle(g,140,140,radius);Expo.setColor(g,Expo.blue); Expo.fillCircle(g,220,140,radius);Expo.setColor(g,Expo.lightBlue); Expo.fillCircle(g,300,140,radius);Expo.setColor(g,Expo.lighterBlue); Expo.fillCircle(g,380,140,radius);Expo.setColor(g,Expo.purple); Expo.fillCircle(g,460,140,radius);Expo.setColor(g,Expo.turquoise); Expo.fillCircle(g,540,140,radius);Expo.setColor(g,Expo.darkerOrange); Expo.fillCircle(g,620,140,radius);Expo.setColor(g,Expo.darkOrange); Expo.fillCircle(g,700,140,radius);Expo.setColor(g,Expo.orange); Expo.fillCircle(g,780,140,radius);Expo.setColor(g,Expo.lightOrange); Expo.fillCircle(g,860,140,radius);Expo.setColor(g,Expo.lighterOrange); Expo.fillCircle(g,940,140,radius);


Expo.setColor(g,Expo.darkerCyan); Expo.fillCircle(g, 60,220,radius);Expo.setColor(g,Expo.darkCyan); Expo.fillCircle(g,140,220,radius);Expo.setColor(g,Expo.cyan); Expo.fillCircle(g,220,220,radius);Expo.setColor(g,Expo.lightCyan); Expo.fillCircle(g,300,220,radius);Expo.setColor(g,Expo.lighterCyan); Expo.fillCircle(g,380,220,radius);Expo.setColor(g,Expo.plum); Expo.fillCircle(g,460,220,radius);Expo.setColor(g,Expo.indigo); Expo.fillCircle(g,540,220,radius);Expo.setColor(g,Expo.darkerMagenta); Expo.fillCircle(g,620,220,radius);Expo.setColor(g,Expo.darkMagenta); Expo.fillCircle(g,700,220,radius);Expo.setColor(g,Expo.magenta); Expo.fillCircle(g,780,220,radius);Expo.setColor(g,Expo.lightMagenta); Expo.fillCircle(g,860,220,radius);Expo.setColor(g,Expo.lighterMagenta); Expo.fillCircle(g,940,220,radius);

Expo.setColor(g,Expo.darkerYellow); Expo.fillCircle(g, 60,300,radius);Expo.setColor(g,Expo.darkYellow); Expo.fillCircle(g,140,300,radius);Expo.setColor(g,Expo.yellow); Expo.fillCircle(g,220,300,radius);Expo.setColor(g,Expo.lightYellow); Expo.fillCircle(g,300,300,radius);Expo.setColor(g,Expo.lighterYellow); Expo.fillCircle(g,380,300,radius);Expo.setColor(g,Expo.aqua); Expo.fillCircle(g,460,300,radius);Expo.setColor(g,Expo.aquaMarine); Expo.fillCircle(g,540,300,radius);Expo.setColor(g,Expo.darkerPink); Expo.fillCircle(g,620,300,radius);Expo.setColor(g,Expo.darkPink); Expo.fillCircle(g,700,300,radius);Expo.setColor(g,Expo.pink); Expo.fillCircle(g,780,300,radius);Expo.setColor(g,Expo.lightPink); Expo.fillCircle(g,860,300,radius);Expo.setColor(g,Expo.lighterPink); Expo.fillCircle(g,940,300,radius);

Expo.setColor(g,Expo.goldenRod); Expo.fillCircle(g, 60,380,radius);Expo.setColor(g,Expo.gold); Expo.fillCircle(g,140,380,radius);Expo.setColor(g,Expo.silver); Expo.fillCircle(g,220,380,radius);Expo.setColor(g,Expo.bronze); Expo.fillCircle(g,300,380,radius);Expo.setColor(g,Expo.teal); Expo.fillCircle(g,380,380,radius);Expo.setColor(g,Expo.maroon); Expo.fillCircle(g,460,380,radius);Expo.setColor(g,Expo.fuschia); Expo.fillCircle(g,540,380,radius);Expo.setColor(g,Expo.lavender); Expo.fillCircle(g,620,380,radius);Expo.setColor(g,Expo.lime); Expo.fillCircle(g,700,380,radius);Expo.setColor(g,Expo.navy); Expo.fillCircle(g,780,380,radius);Expo.setColor(g,Expo.chartreuse); Expo.fillCircle(g,860,380,radius);Expo.setColor(g,Expo.fireBrick); Expo.fillCircle(g,940,380,radius);

Expo.setColor(g,Expo.moccasin); Expo.fillCircle(g, 60,460,radius);Expo.setColor(g,Expo.salmon); Expo.fillCircle(g,140,460,radius);Expo.setColor(g,Expo.olive); Expo.fillCircle(g,220,460,radius);Expo.setColor(g,Expo.khaki); Expo.fillCircle(g,300,460,radius);Expo.setColor(g,Expo.crimson); Expo.fillCircle(g,380,460,radius);Expo.setColor(g,Expo.orchid); Expo.fillCircle(g,460,460,radius);Expo.setColor(g,Expo.sienna); Expo.fillCircle(g,540,460,radius);Expo.setColor(g,Expo.melon); Expo.fillCircle(g,620,460,radius);Expo.setColor(g,Expo.tangerine); Expo.fillCircle(g,700,460,radius);Expo.setColor(g,Expo.terraCotta); Expo.fillCircle(g,780,460,radius);Expo.setColor(g,Expo.pumpkin); Expo.fillCircle(g,860,460,radius);Expo.setColor(g,Expo.mahogany); Expo.fillCircle(g,940,460,radius);

Expo.setColor(g,Expo.darkerTan); Expo.fillCircle(g, 60,540,radius);Expo.setColor(g,Expo.darkTan); Expo.fillCircle(g,140,540,radius);Expo.setColor(g,Expo.tan); Expo.fillCircle(g,220,540,radius);Expo.setColor(g,Expo.lightTan); Expo.fillCircle(g,300,540,radius);Expo.setColor(g,Expo.lighterTan); Expo.fillCircle(g,380,540,radius);Expo.setColor(g,Expo.amber); Expo.fillCircle(g,460,540,radius);Expo.setColor(g,Expo.black); Expo.fillCircle(g,540,540,radius);Expo.setColor(g,Expo.darkerGray); Expo.fillCircle(g,620,540,radius);Expo.setColor(g,Expo.darkGray); Expo.fillCircle(g,700,540,radius);Expo.setColor(g,Expo.gray); Expo.fillCircle(g,780,540,radius);Expo.setColor(g,Expo.lightGray); Expo.fillCircle(g,860,540,radius);Expo.setColor(g,Expo.lighterGray); Expo.fillCircle(g,940,540,radius);

}}



Drawing Rounded Rectangles

Drawing rectangles is nothing new, but what about drawing rectangles with rounded corners? There are many new methods with the Deluxe Expo class and drawRoundedRectangle is one of them. This new method has the same parameters as drawRectangle with one exception, there is an extra parameter which determine how round the corners will be.

Drawing Spirals, Bursts and Random Bursts

These three methods: drawSpiral, drawBurst and drawRandomBurst are grouped together because they all use the same parameters as drawCircle. The two burst methods have one addition parameter which determines the number of lines which burst forth from the center. Exactly what these methods do can be best understood by looking the program Java1515.java, in Figure 15.33, and its output. The drawRoundedRectangle method is also demonstrated in this program.


Figure 15.33

// Java1515.java// This program demonstrates the drawSpiral, drawBurst and drawRandomBurst// methods of the Deluxe Expo class.// All three of these methods share the same parameters as drawCircle.// The two "Burst" methods have an additional parameter for the number of lines.// It also demonstrates the drawRoundedRectangle method of the Deluxe Expo class.// It shares the same parameters as drawRectangle, except there is an extra parameter// to control how "rounded" the corners will be.




Expo.drawRoundedRectangle(g,10,20,990,300,25);Expo.drawSpiral(g,180,160,100);Expo.drawBurst(g,500,160,100,8);Expo.drawRandomBurst(g,820,160,100,300);

Expo.drawRoundedRectangle(g,10,320,990,640,100);Expo.drawSpiral(g,180,480,150);Expo.drawBurst(g,500,480,150,40);Expo.drawRandomBurst(g,820,480,150,5000);

}}


drawThick Methods

When you first learned about graphics, you learned about various draw methods like drawRectangle, drawCircle, drawOval, drawPolygon, etc. You also learned that most draw methods have a corresponding fill method like fillRectangle, fillCircle, fillOval, fillPolygon, etc. The fill methods have the same parameters as their corresponding draw methods. With the Deluxe Expo class, we now also have drawThick methods. If a draw method is like drawing with a pencil, a drawThick method is like drawing with a paint brush. The parameters for drawThick methods are also the same as their corresponding draw method with one exception. There is one extra parameter to determine the thickness. Program Java1516.java, in Figure 15.34, demonstrates several of these drawThick methods.

Figure 15.34// Java1516.java// This program demonstrates the "drawThick" methods of the Deluxe Expo class.// All "draw" methods in the Deluxe Expo class have a corresponding "drawThick"// method with the same parameters, except that the "drawThick" methods have// an extra parameter to control the "thickness".




int t = 12; // thicknessExpo.setColor(g,Expo.blue);Expo.drawThickLine(g,100,80,900,80,t);Expo.drawThickRectangle(g,50,30,950,620,t);Expo.drawThickCircle(g,500,310,200,t);Expo.drawThickOval(g,400,300,30,40,t);Expo.drawThickStar(g,400,300,100,10,t);Expo.drawThickOval(g,600,300,30,40,t);Expo.drawThickStar(g,600,300,90,6,t);Expo.drawThickArc(g,500,415,105,65,90,270,t);Expo.drawThickRoundedRectangle(g,100,100,200,600,25,t);Expo.drawThickRoundedRectangle(g,800,100,900,500,50,t);Expo.drawThickSpiral(g,280,115,100,t);Expo.drawThickSpiral(g,700,115,100,t);Expo.setColor(g,Expo.red);Expo.drawThickBurst(g,150,350,150,20,t);Expo.drawThickRandomBurst(g,850,350,150,300,t);Expo.setColor(g,Expo.darkGreen);Expo.drawThickRegularPolygon(g,150,555,40,3,t);Expo.drawThickRegularPolygon(g,250,555,40,4,t);Expo.drawThickRegularPolygon(g,350,555,40,5,t);Expo.drawThickRegularPolygon(g,450,555,40,6,t);Expo.drawThickRegularPolygon(g,550,555,40,7,t);Expo.drawThickRegularPolygon(g,650,555,40,8,t);Expo.drawThickRegularPolygon(g,750,555,40,9,t);Expo.drawThickRegularPolygon(g,850,555,40,10,t);

}}



Keyboard Input from a GUI Window

You have used methods like enterInt to enter information from the keyboard in a text program. Methods like this will not work in a graphics program. You may remember that System.out.println also does not work on a graphics screen. We need to use the drawstring method instead. For keyboard input from a GUI window, the Deluxe Expo class provides enterIntGUI, enterDoubleGUI, enterCharGUI, and enterStringGUI. Two of these methods, enterIntGUI and enterStringGUI are demonstrated in program Java1517.java, shown in Figure 15.35. enterStringGUI is used to enter the file name of an image. enterIntGUI is used to enter how many times you wish the image displayed randomly on the screen. Two important details must be noted here. First, the enter methods are called from the init method. If you tried to call them from the paint method they would keep popping up on the screen every time the screen refreshes. Second, the prompt for each input is now a String parameter for each enter method.

Figure 15.35

// Java1517.java// This program shows how to have user input in a graphics program with the// enterIntGUI and enterStringGUI methods of the Deluxe Expo class.// Methods enterDoubleGUI and enterCharGUI are also available.


import java.awt.*;


int amount;String imageFile;Image picture;

public void init(){

String imageFile = Expo.enterStringGUI("What image do you wish to display?");picture = getImage(getDocumentBase(), imageFile);amount = Expo.enterIntGUI("How many times do you wish to display this image?");

}


for (int j = 1; j <=amount; j++){

int x = Expo.random(0,900);int y = Expo.random(0,550);g.drawImage(picture,x,y,this);

}}

}




Deluxe Version of Expo.html As before, you are provided with the file Expo.html which documents all of the methods in the Deluxe Expo class (both old and new). See Figure 15.36.

Figure 15.36


15.6 Multi-Page Output

This is the last section that is part of “PART-1”. In this section we will look at a program which generates multiple pages of output, similar to a Slide Show or a PowerPoint presentation. This is made possible by using the mouseDown event that was introduced at the beginning of the chapter.

Program Java1518.java, in figure 15.37, demonstrates a short three-page Slide Show. All of the programming features used in this program have been explained earlier. You may not have realized that they could be used for this purpose. This program is going to lead right into the first of the two big graphics projects.

Figure 15.37// Java1518.java// This program shows how to display multiple pages of graphics output.

import java.awt.*;


int numClicks;Image picture1, picture2, picture3, picture4, picture5;

public void init(){

numClicks = 0;picture1 = getImage(getDocumentBase(),"LSchram.gif");picture2 = getImage(getDocumentBase(),"JSchram.jpg");picture3 = getImage(getDocumentBase(),"nederlands.gif");picture4 = getImage(getDocumentBase(),"leon&isolde.jpg");picture5 = getImage(getDocumentBase(),"JPIILogo.jpg");

// The following MediaTracker/try/catch code ensures that// all images are loaded before the program continues.MediaTracker tracker = new MediaTracker(this);tracker.addImage(picture1,1);tracker.addImage(picture2,1);tracker.addImage(picture3,1);tracker.addImage(picture4,1);tracker.addImage(picture5,1);try{

tracker.waitForAll();}catch(InterruptedException e){

System.out.println(e);}

}


switch (numClicks){

case 0 : page1(g); break;case 1 : page2(g); break;case 2 : page3(g); break;

}}



numClicks++;repaint();return true;

}

public void page1(Graphics g){

Expo.setFont(g,"Arial",Font.BOLD,100);Expo.drawString(g,"TITLE PAGE",218,100);Expo.setColor(g,Expo.yellow);Expo.drawThickPreciseSpiral(g,510,370,275,50,15);Expo.setColor(g,Expo.red);Expo.fillStar(g,510,370,175,8);Expo.setColor(g,Expo.green);Expo.drawThickStar(g,510,370,225,8,25);Expo.setColor(g,Expo.blue);Expo.drawThickStar(g,510,370,275,8,25);g.drawImage(picture1,425,285,this);Expo.setFont(g,"Times Roman",Font.PLAIN,20);Expo.drawString(g,"My name is Leon Schram.",30,300);Expo.drawString(g,"Click once to continue.",760,550);

}


Expo.setFont(g,"Algerian",Font.BOLD,100);Expo.drawString(g,"PAGE 2",200,100);Expo.setColor(g,Expo.blue);Expo.fillRectangle(g,100,250,900,500);Expo.setColor(g,Expo.chartreuse);g.drawImage(picture3,200,300,this);g.drawImage(picture4,500,280,this);Expo.setColor(g,Expo.blue);Expo.setFont(g,"Times Roman",Font.PLAIN,20);Expo.drawString(g,"I was born in the Netherlands in 1945 and married my sweet wife Isolde in

1967.",100,200);Expo.drawString(g,"Click once to continue.",750,550);

}


Expo.setFont(g,"Impact",Font.BOLD,100);Expo.drawString(g,"PAGE 3",200,100);Expo.setColor(g,Expo.darkGreen);Expo.fillRoundedRectangle(g,460,170,960,515,50);g.drawImage(picture5,150,225,this);g.drawImage(picture2,500,193,this);Expo.setFont(g,"Times Roman",Font.PLAIN,20);Expo.drawString(g,"I teach Computer Science at John Paul II High School with my son

John.",100,150);Expo.drawString(g,"Click once to continue.",750,550);

}}





15.7 Creating a Simple Draw Program

“PART-2” of this chapter begins here. We are now working on the Final Graphics Project which will be the biggest assignment of the year. Several different things will be shown to you. It will be up to you to decide what features to incorporate into your Final Graphics Project, and how.

The Start of a Simple Draw Program

Creating a Draw Program will require the use of several Mouse Events. The simplest draw program would simply give you the ability to draw dots on the screen. That will be our starting point. Program Java1519.java, in figure 15.38,


uses the mouseDown event to store the coordinate where someone has just clicked the mouse. That coordinate is then used to draw a small, red square.

This program example and many other mouse routine programs cannot be fully comprehended by reading the text alone. You must execute the program examples to understand the actual actions of the mouse routines.

Figure 15.38// Java1519.java// This program draws a small square at every mouse click position.// There are 2 problems with the program:// First, it draws a square in the upper left hand corner automatically before we have a chance to do anything.// Second, it will only draws one square at a time.



int xCoord;int yCoord;


Expo.setColor(g,Expo.red);Expo.fillRectangle(g,xCoord,yCoord,xCoord+15,yCoord+15);

}



}}

Java1519.java – Initial Output



Java1519.java – Output after clicking somewhere else on the screen

There are two issues with this program. First, there is a red square already on the screen even before you have had a chance to click anywhere. This is because the default values for xCoord and yCoord are both 0. The result it a dot is draw in the top-left corner (coordinate 0,0) at the very beginning of the program. The second problem is that you are only able to draw one dot at a time. Every time you click to draw a new dot, the old dot is erased. This is caused by repaint. Remember that when repaint is called it first clears the screen and then calls the paint again.

Program Java1520.java in figure 15.39 addresses one of the issues from the previous program. Specifically, the issue of the red square that shows up in the upper-left-hand corner before you have clicked on anything. This happens because method paint is called before the mouse is ever touched. This causes one initial square to be drawn in the applet. This problem is solved with the use of a boolean variable firstPaint. Variable firstPaint is initialized to true in the init method and prevents drawing a rectangle until the second time that method paint is visited.

Figure 15.39// Java1520.java// This program cures the problem of the initial red square by adding a "firstPaint" boolean variable.



int xCoord;int yCoord;


boolean firstPaint;

public void init(){

firstPaint = true;}


if (firstPaint)firstPaint = false;

else{


}}



}}



Java1520.java – Output after clicking somewhere else on the screen


OK, we have fixed the first problem. When the program starts, the screen is clear and there is no initial square. We still have the problem of only being able to see one square at a time. If we are trying to create a paint program, a single square simply will not do. So how do you draw anything and keep the drawing on the screen? The previous program drew many fat pixels, but each time that paint is called, it clears the screen and only displays the newest pixel.

The Magic of Method update

Program Java1521.java, in figure 15.40, shows the solution. There is a special method called update. You will notice that this method is not called explicitly anywhere in the program; however, simply by having it present in the program it changes what happens when repaint is called. Usually repaint does 2 things. First it clears the applet window, and second it calls the paint method. When the update method is present, the repaint method does not clear the applet window at all. It simply calls the paint method.

Figure 15.40

// Java1521.java// This program adds the clever "update" method which prevents the// computer from clearing the paint window every time it is refreshed.// This allows you to draw more than one square at a time.



int xCoord;int yCoord;boolean firstPaint;

public void init(){

firstPaint = true;


}


if (firstPaint)firstPaint = false;

else{


}}



}

public void update(Graphics g){

paint(g);}

}



Creating a Freehand Pencil Tool

OK, we can draw multiple dots on the screen. A paint program requires more than just dots. How about the ability to draw freehand? A pencil tool would be useful. We only need to make a couple small changes to program Java1521.java, to make this work. The first change is simply to make the square smaller. We want a pencil took, not a thick marker (at least not at this time). The fillRectangle command has been replaced with drawPoint. The second change involved a new mouse event. We will change mouseDown to mouseDrag. You have seen mouseDown and you have seen mouseMove. mouseDrag is essentially a combination of the 2 because to drag the mouse means to move it while the button is down. When you execute program Java1522.java in figure 15.41, you should see that it behaves very much like a pencil tool in a typical paint program.

Figure 15.41

// Java1522.java// This program changes "mouseDown" to "mouseDrag" and makes the square smaller.// This should create the effect of having a freehand pencil.



int xCoord,yCoord;

public void init(){

xCoord = 0;yCoord = 0;

}


Expo.setColor(g,Expo.red);Expo.drawPoint(g,xCoord,yCoord);

}

public boolean mouseDrag(Event e, int x, int y){


}


public void update(Graphics g){

paint(g);}

}



Drawing Lines

Another feature that paint programs typically have is the ability to draw straight lines. Program Java1523.java in figure 15.42, is the first of 3 programs that will demonstrate drawing lines. To draw a line you need to consider what a line actually is. By definition a line is the connection of 2 points. When we want to draw a single point, we simply used mouseDown because all we needed was one point and where we clicked the mouse is where the pixel was drawn. Now we want a line. Think of what you do in a normal paint program. You move your cursor to the beginning of the line and press down the move button, then you draw and release at the end of the line. This means we need to store 2 points to successfully draw a line. Where you press down the mouse is the beginning of the line. Where you release the mouse is the end of the line. When you execute program Java1523.java do not be surprised if at first it looks like nothing is happening. This is because the line will not show up until you release the mouse.


Figure 15.42// Java1523.java// This program draws a straight line from the point where the mouse is clicked// to the point where the mouse is released.



int startX,startY,endX,endY;


Expo.drawLine(g,startX,startY,endX,endY);}


startX = x;startY = y;return true;

}

public boolean mouseUp(Event e, int x, int y){

endX = x;endY = y;repaint();return true;

}}


One thing you probably noticed from program Java1523.java is that the drawing of the line was a little awkward. You could not see the line as you drew it. In most paint programs, when you draw a line you see what is called the rubber band effect. Like a rubber band, the line will stretch to your cursor until you release it. Program Java1524.java in figure 15.43 will allow you to draw lines with this rubber band effect. Most of you will find this more natural.

Figure 15.43

// Java1524.java// This program draws a straight line from the point where the mouse is clicked// to the point where the mouse is released. In this example the line is// constantly visible. This is sometimes called the "rubber band" effect.








}



}}



Again, remember that you cannot truly appreciate the output of the programs in this chapter unless you are executing them yourself on your computer.

The way program Java1524.java works is by adding the mouseDrag method. mouseDown is still used to determine the start of the line, and mouseUp still determine the end. mouseDrag is used to display the line as the mouse is moving.

One thing you may have noticed about the last 2 programs is that you can only draw one line. You may have noticed that the magical method update was not present. Well, what would happen if method update were used? Program Java1525.java, in figure 15.44, answers this question by essentially adding method update to what was program Java1524.java.


Figure 15.44// Java1525.java// This program shows that method "update" can causes a peculiar "side effect" in some cases.// Watch what happens when you try to draw a line.








}



}

public void update(Graphics g) { paint(g); }}


Here we see the side effect that can be caused by method update. Do you understand why this is happening? When the update method is present, the computer does not clear the applet window with each repaint. This means the old lines are never erased and they all show up on the screen. Some of you may find this a neat effect. It is possible to cure this side effect, but that requires programming skills beyond what is taught in the first year computer science course. This chapter is Intermediate Graphics. Next year, those of you who go on to AP Computer Science may figure out the cure when you study the chapter on Advanced Graphics.

Drawing Rectangles

For the next program, we are going to make 2 small changes. First, we will remove method update. Second, we will change the drawLine command to drawRectangle. Execute program Java1526.java in figure 15.45, and see what happens.

Figure 15.45// Java1526.java// This program is almost identical to Java1524.java.// The only difference is that "drawLine" has been changed to "drawRectangle".// Note how the rectangles are draw with the same "rubber band effect" as the lines.

import java.applet.Applet;


import java.awt.*;




Expo.drawRectangle(g,startX,startY,endX,endY);}



}



}}



Drawing Circles

Program Java1527.java, in figure 15.46, will deal with drawing circles. This is much more complicated that drawing lines or rectangles from a programming point of view. Think of what you need to do to draw a circle with a paint program. You use your cursor to find the center of the circle and press down the button. Instead of calling this location (startX, startY) we will call it (centerX, centerY). As you drag the mouse you make the circle larger as you increase its radius and then release the button when finished. Since the radius is the distance from the center to any point on the rim of the circle, we will call the release point (rimX, rimY) instead of (endX, endY).

Well, we have 2 points just like we did for the lines and the rectangles. In the case of the circle we need to do a little math. The radius will be the distance between these 2 points. The math required to compute this is explained below. If you are in a higher-level math class you should recognize the Pythagorean Theorem and the distance formula. If not, just accept that I had to write a special getRadius method for this to work and the method is based on the following mathematical information:

ca

b

Given that the triangle above is a right triangle, if you know the lengths of sides a and b you can compute side c this formula:

c=√a2+b2

This formula is used to find the distance between any 2 points (x1,y1) and (x2,y2):

distance=√(x2−x1)2+( y2− y1)

2


Figure 15.46// Java1527.java// This program will draw circles using a special "getRadius" method// which is based on the Pythagorean Formula.



int centerX,centerY,rimX,rimY;


int radius = getRadius(centerX,centerY,rimX,rimY);Expo.drawCircle(g,centerX,centerY,radius);

}


centerX = x;centerY = y;return true;

}


rimX = x;rimY = y;repaint();return true;

}

public int getRadius(int x1, int y1, int x2, int y2){

double radius = Math.sqrt( Math.pow(x2-x1,2) + Math.pow(y2-y1,2) );return (int) radius;

}}



15.8 Creating Clickable Areas in the AppletThere is something that computer mouse users take for granted. It is the ability of the program to know that a mouse has clicked inside some area. We click on a color in a paint program. We click on some icon. We click on the top bar of a window. In each case clicking is not equal to some specified coordinate location. Rather some action results from clicking anywhere in a specified area.

Program Java1528.java, in figure 15.47, displays three colored squares. The mission of the program is to see if the program can tell if the mouse is clicked anywhere in one of the three squares or anywhere outside the squares. This program includes some new concepts that will be shown separately. Look at the program in its entirety first with its execution and then more explanation follows.

Figure 15.47// Java1528.java// This uses the <Rectangle> class with the <inside> method to determine// if a certain rectangular area of the screen has been clicked.




Rectangle red, green, blue;int numColor;

public void init(){

red = new Rectangle(100,75,150,150);green = new Rectangle(100,275,150,150);blue = new Rectangle(100,475,150,150);numColor = 0;

}


Expo.setColor(g,Expo.red);Expo.fillRectangle(g,100,75,250,225);Expo.setColor(g,Expo.green);Expo.fillRectangle(g,100,275,250,425);Expo.setColor(g,Expo.blue);Expo.fillRectangle(g,100,475,250,625);

Expo.setFont(g,"Arial",Font.BOLD,28);

switch (numColor){

case 1:Expo.setColor(g,Expo.red);g.drawString("Mouse clicked inside red",300,150);break;

case 2:Expo.setColor(g,Expo.green);g.drawString("Mouse clicked inside green",300,350);break;

case 3:Expo.setColor(g,Expo.blue);g.drawString("Mouse clicked inside blue",300,550);break;

case 4:Expo.setColor(g,Expo.black);g.drawString("Mouse clicked outside the colored squares",300,40);break;

}}


if(red.inside(x,y))numColor = 1;

else if(green.inside(x,y))numColor = 2;

else if(blue.inside(x,y))numColor = 3;

elsenumColor = 4;

repaint();return true;

}}









Now that you have had a chance to see what the program looks like and how it behaves, let us break it apart and start understanding the separate pieces. A good place to start is the init method, shown in figure 15.48.

Figure 15.48

Rectangle red, green, blue;

public void init(){


}

The Rectangle class is a new class. Do not confuse this class with methods drawRectangle or fillRectangle. The Rectangle class does not actually draw anything on the screen. Instead it defines a rectangular area on the screen. Once defined, we have the ability to see if the mouse is clicked inside this rectangular area. In effect, we have created something like a button to click on.

Figure 15.49 helps to clarify the purpose of the three Rectangle objects. The Rectangle class provides the very useful method inside, which determines if a set of coordinates are inside the dimensions of the Rectangle object. You see yet another example of the mouseDown event. In this case the coordinate values provided when the event is triggered determine if the mouse is clicked inside any of the three squares or outside any of the three squares. Variable numColor is assigned a color appropriate to the mouse-click location that will be used when paint method is called.

Figure 15.49





elsenumColor = 4;


}


Finally, we look at the paint method in figure 15.50, to see the exciting conclusion of the Rectangle class program. You may easily say that the three rectangles are hardly abstract. You can see them in three colors. That is true, but you are not seeing any of the Rectangle objects. Method paint starts with three calls to the fillRectangle method, which results in displaying rectangles with the same dimensions as the red, green and blue objects. This essentially gives the user something to click on. The switch control structure is used to display the appropriate message based on the color value of numColor.

Figure 15.50


Expo.setColor(g,Expo.red);Expo.fillRectangle(g,100,75,250,225);Expo.setColor(g,Expo.green);Expo.fillRectangle(g,100,275,250,425);Expo.setColor(g,Expo.blue);Expo.fillRectangle(g,100,475,250,625);

Expo.setFont(g,"Arial",Font.BOLD,28);

switch (numColor){





}}

You may not really quite get this abstract business. Perhaps with program Java1529.java, in figure 15.51, you will appreciate that objects red, green and


blue are true abstract rectangles. The next program example is almost identical to program Java1528.java, but the three fillRectangle statements have been deleted from the paint method.

Figure 15.51// Java1529.java// This program proves that objects of the <Rectangle> class are abstract to the viewer and// not visible. The three square are intentionally not displayed. The program still works// like the previous program, but you must guess at the location of the squares.



Rectangle red, green, blue;int numColor;

public void init(){


}


// Note: The solid colored squares are not drawn this time.Expo.setFont(g,"Arial",Font.BOLD,28);switch (numColor){





}}





elsenumColor = 4;


}}








Note that even though there are no solid color squares visible on the screen, the Rectangle objects are still there. These invisible defined areas of the screen can still be clicked even though there is nothing visible to click on. Do keep in mind that to expect a user to click on some empty area of the screen in order for something to happen is not user-friendly at all. If you expect the user to click somewhere, draw something there for them to click on.

Rectangle Object Parameters

Before we go on we need to clarify something. You probably noticed that defining a Rectangle object requires four int parameters. The methods drawRectangle and fillRectangle also require four int parameters. What must be understood is the four int parameters have a different meaning when creating Rectangle objects.

An example of drawRectangle would be Expo.drawRectangle(g,x1,y1,x2,y2); (x1,y1) represent the upper-left-hand corner of the rectangle. (x2,y2) represent the lower-right-hand corner as is shown in Figure 15.52.


Figure 15.52

When an object of the Rectangle class is constructed, the parameters are different. Here is another example:

Rectangle area = new Rectangle(x,y,width,height);

The first 2 parameters (x,y) are still the upper-left-hand corner of the rectangle. The difference is the lower-right-hand corner is NOT used at all. Instead, the 3rd

parameter us the width of the rectangle, and the 4th parameter is the height. Figure 15.53 gives a visual example of this:

Figure 15.53

In the past couple sections, you have seen several pieces of a paint program, but not an entire paint program with everything put together. There are 2 reasons for this. First, such a program would be too complicated for this first year class. Second, a paint program is sometimes an assignment in AP Computer Science.


15.9 Computer Animation

Computer Animation makes many of today’s modern movies possible. It also has been making video games possible for decades. The ability to move things on the screen makes your program much more dynamic and exciting. We are going to conclude this chapter, as well as your textbook, by going through a series of 8 programs. The goal is to make a circle move across the screen. We will not achieve this on the first program, but each program will get closer.

Do keep in mind that now, more than ever, you need to be executing these programs on your computer to see the output. It is impossible to show animated output in a textbook. I will be able to show the output of the first 3 programs since those do not have animation yet.

Program Java1530.java, in figure 15.54, is our first step in the animation journey. Figure 15.54// Java1530.java Animation Part 1// This program simply draws a solid black circle.// This will eventually be "animated" as we go through the next few programs.

import java.awt.*;



Expo.fillCircle(g,50,325,25);}

}


You may be wondering why Java1530.java does nothing more than draw a circle. Here is why. Students get very excited when they do their final graphics project. The especially get excited when animation becomes involved. The following conversation occurs several times each year:

Eager Student: Mr. Schram, my project is going to be so awesome! I am going to have this move that way and that move this way and this will be doing this and that will be doing that…

Mr. Schram: That sounds great. What do you have on the screen so far?

Eager Student: Nothing. I have not figured out animation yet.

Here is my point. You cannot animate something if you do not have something to start with. If I want to animate a circle, I start by drawing a circle.

Program Java1531.java, in figure 15.55, shows our first step. To make a circle look like it is moving across the screen, I need to draw it at different positions across the screen. I will draw the circle 10 times, once at the original location where the X-value is 50, then again at the X-values of 150, 250, 350, 450, 550, 650, 750, 850 and 950.

Figure 15.55// Java1531.java Animation Part 2// This program simply draws the solid black circle at 10 different locations.// This is not yet animation because we see all 10 circles at the same time.

import java.awt.*;



Expo.fillCircle(g,50,325,25);Expo.fillCircle(g,150,325,25);Expo.fillCircle(g,250,325,25);Expo.fillCircle(g,350,325,25);Expo.fillCircle(g,450,325,25);Expo.fillCircle(g,550,325,25);Expo.fillCircle(g,650,325,25);Expo.fillCircle(g,750,325,25);Expo.fillCircle(g,850,325,25);Expo.fillCircle(g,950,325,25);

}}



The output of program Java1531.java is hardly animation, but it shows something. There are 10 positions that I want my circle to take. The problem is I am seeing the circle at all 10 of those positions at the same time. Program Java1532.java, in figure 15.56, attempts to deal with this problem by erasing each circle before the next circle is drawn.

Figure 15.56// Java1532.java Animation Part 3// This program erases every circle before it draws the next one.// This is necessary for animation; however, the process happens so fast you cannot see the circle move.

import java.awt.*;



Expo.setColor(g,Expo.black);Expo.fillCircle(g,50,325,25);Expo.setColor(g,Expo.white);Expo.fillCircle(g,50,325,25);











}}



In the animation journey it looks like we have taken a giant step backwards. The output of program Java1532.java shows absolutely nothing. It may not look like it, but the program did make the circle move across the screen. The problem is it moved so quickly, you did not get a chance to see it. Program Java1533.java, in figure 15.57 cures this problem by adding some Expo.delay commands. We need the image to stay on the screen long enough for your eyes to have a chance to see it. It does not need to be long, even a small fraction of a second is fine. The delay method has a single parameter which indicates the number of milliseconds that the computer should wait. A delay of 1000 would be 1 second. A delay of 2000 would be 2 seconds. A delay of 500 would be ½ a second. This will be the first program that actually shows animation. Because of this, we cannot show you the output in the textbook. You will have to execute the remaining programs on your computer to see what is happening.

Figure 15.57

// Java1533.java Animation Part 4// This program adds a short 1 second delay after each circle is drawn// to give you a chance to see it before it is erased.

import java.awt.*;



Expo.setColor(g,Expo.black);Expo.fillCircle(g,50,325,25);Expo.delay(1000);Expo.setColor(g,Expo.white);Expo.fillCircle(g,50,325,25);











}}

Yes, we have achieved animation. It may not have been earth-shattering animation, but the ball did move across the screen. You probably noticed the program is very repetitive. In program Java1533.java there are 10 groups of 5 line code segments. The only thing that is different in each group is the X-value of the circle. In the first group this value is 50. In the last group the value is 950. You should see that as you go from one group to the next the value increases by 100. Now, think back. We have something repetitive that counts from 50 to 950 by 100. This is ideal for a for loop. Program Java1534.java, in figure 15.58 does the exact same thing as program Java1533.java, but now a for loop is used and the program is much shorter.


Figure 15.58

// Java1534.java Animation Part 5// This program has the same output as the previous program.// The program is now much shorter since a for loop is used.

import java.awt.*;



for (int x = 50; x <= 950; x+=100){

Expo.setColor(g,Expo.black);Expo.fillCircle(g,x,325,25);Expo.delay(1000);Expo.setColor(g,Expo.white);Expo.fillCircle(g,x,325,25);

}}

}

You have probably noticed the movement of the last 2 programs was a little choppy. It resembles the animation of a cheap cartoon. You may also have seen animated movies where the animation is much smoother and far superior. What makes the difference? Think of a film strip. There are 24 frames for every 1 second of film. When a live action movie is filmed, the video camera takes 24 distinct pictures per second. In a made-for-the-screen animated movie, the animators actually draw 24 distinct pictures for every 1 second of film. This is 129,600 pictures for a 90 minute movie. This is why animated movies take 5-7 years to create.

Now think of a cheap 30 minute cartoon TV show. There is no way they are going to put in the same amount of effort when they have to mass produce as many as 65 episodes per season. For these cartoons, the animators only draw 4 distinct pictures for every 1 second of film. Each picture is duplicated on 6 frames in a row. This makes the animation look far less smooth.

Program Java1535.java, in figure 15.59 improves the quality of the animation by increasing the number of circles drawn. Instead of the circle moving 100 pixels at a time, it will only move 10. The delay is changed from 1000 to 100 to compensate. We are now drawing 10 times as many circles, each of which is on the screen for 1/10 the amount of time as before. Execute the program and you should see smoother animation.


Figure 15.59

// Java1535.java Animation Part 6// This program makes the animation smoother by using a smaller delay// and a smaller increment in the for loop.

import java.awt.*;



for (int x = 50; x <= 950; x+=10){


}}

}

Now you might ask, “If changing the increment from 100 to 10 made the animation look better, would changing it from 10 to 1 make the animation look even better than that?” Execute program Java1536.java, in figure 15.60 and see for yourself. Note, the delay is reduced again to compensate.

Figure 15.60

// Java1536.java Animation Part 7// This program makes the animation as smooth as possible by having an increment of// just 1 pixel in the for loop. The delay is also made smaller.

import java.awt.*;



for (int x = 50; x <= 950; x+=1){


}}

}


The answer is “Yes.” We now have the circle moving as smooth as possible. You may have noticed the circle flickering as it was moving. This is a side effect of the draw-and-erase style of animation that we are using. If you have ever played your parent’s really, really old video game system, you might have noticed the characters flicker in a similar manner. That is because the old video game systems used this simplistic form of animation. You probably also know that this flickering does not occur in modern video games. What is different? Modern video games use a completely different form of animation which is more complicated and not taught in this course. It is taught at the end of AP Computer Science so some of you may learn it next year.

Program Java1537.java, in figure 15.61, draws 3 circles at a time instead of just one. The result will be a snowman moving across the screen. This program will have even more flickering. You may be able to minimize the flickering by making the delay longer, but if you make it too long the snowman may move too slowly. Keep in mind that the flickering side effect, will not cause you to lose points on your final graphics project.

Figure 15.61

// Java1537.java Animation Part 8// This program draws and erases 3 circles instead of one to animate a snowman// across the screen. The flickering that you will see is normal for this type of animation.// In AP Computer Science you will learn a more advanced type of animation that// eliminates the flicker.

import java.awt.*;



for (int x = 50; x <= 950; x+=1){

Expo.setColor(g,Expo.black);Expo.fillCircle(g,x,290,15);Expo.fillCircle(g,x,325,25);Expo.fillCircle(g,x,380,40);Expo.delay(10);Expo.setColor(g,Expo.white);Expo.fillCircle(g,x,290,15);Expo.fillCircle(g,x,325,25);Expo.fillCircle(g,x,380,40);

}}

}



The final program in this section will be program Java1538.java, in figure 15.62. This program is similar to the previous one, but instead of drawing 3 circles to animate a snowman, it uses drawImage to make a bunny move across the screen.

Figure 15.62// Java1538.java Animation Part 9// This program shows that an image from a file can also be made to move across the screen.// As with the snowman, there can be considerable flickering.

import java.awt.*;


Image picture;

public void init(){

picture = getImage(getDocumentBase(),"bunny.png");}


for (int x = -100; x <= 1100; x+=3){

g.drawImage(picture,x,200,this);Expo.delay(30);Expo.setColor(g,Expo.white);Expo.fillRectangle(g,x,200,x+100,300);

}}

}



Animation with a Multi-Colored Background

The draw-and-erase animation seems simple enough. First, you draw something. Then, you wait a tiny bit of time. Then, you erase it by drawing over it in the background color. Then you redraw it in a different location and repeat the process. OK, but what if your background is not one solid color? What if you have a multi-colored background? This problem is demonstrated with program Java1539.java in figure 15.63. The first for loop generates 9 different colored vertical stripes. The second for loop is used to move the snowman across the screen. Since the first stripe is red, red is used as the erasing color. When you execute the program it seems to work at first, but once the snowman gets beyond the first stripe, the animation ceases to work properly.

Figure 15.63

// Java1539.java Animation Part 10// This program demonstrates the problem that occurs with a multi-colored background.

import java.awt.*;




for (int c = 1; c <= 9; c++){

Expo.setColor(g,c);Expo.fillRectangle(g, (c-1)*111, 0, c*111, 650);

}

for (int x = 50; x <= 950; x+=3){

Expo.setColor(g,Expo.black);Expo.fillCircle(g,x,290,15);Expo.fillCircle(g,x,325,25);Expo.fillCircle(g,x,380,40);Expo.delay(30);Expo.setColor(g,Expo.red);Expo.fillCircle(g,x,290,15);Expo.fillCircle(g,x,325,25);Expo.fillCircle(g,x,380,40);

}}

}



To fix this problem we need to use something other than draw-and-erase animation. There is a different type of animation which I will call draw-and-redraw. In this type of animation nothing gets erased. Instead, the entire background gets redrawn every time the object moves. This is demonstrated with program Java1540.java in figure 15.64. You should notice two big differences between this program and Java1539.java. First, the for loop that generates the background is now inside the for loop that moves the snowman. Second, the snowman is never erased. Every time the snowman moves the entire background is drawn on top of him.

Note: This type of animation has the potential for serious flickering, especially with complicated backgrounds.

Figure 15.64

// Java1540.java Animation Part 11// This program shows how to handle a multi-colored background.// Instead of "draw-and-erase", it is "draw-and-redraw".// The entire background is redrawn every time the object moves.// NOTE: This does have the potential for serious flickering.

import java.awt.*;



for (int x = 50; x <= 950; x+=3){

for (int c = 1; c <= 9; c++){

Expo.setColor(g,c);Expo.fillRectangle(g, (c-1)*111, 0, c*111, 650);

}

Expo.setColor(g,Expo.black);Expo.fillCircle(g,x,290,15);Expo.fillCircle(g,x,325,25);Expo.fillCircle(g,x,380,40);Expo.delay(30);

}}

}



15.10 The Last Word

The final section in this graphics chapter actually has nothing to do with graphics at all. This is the final section of the final chapter of this textbook, and there is one last point I want to make – and now you are ready to understand it.

Some people may be concerned that with technology changing so rapidly, the programming knowledge that they have acquired in this course will soon be out of date. While new programming languages pop up from time to time, the logic of programming has never changed.

The next three programs all do the exact same thing. The first is written in Java. The second in C++ and the third in Pascal. Even though you may have never seen C++ or Pascal, you may be surprised how familiar these programs will look to you now that you know Java.


Program Java1541.java, in figure 15.65 shows nothing new. There is a for loop that counts backwards from 20 down to 0. Inside the for loop is an if…else structure that checks if dividing the loop counter by 2 gives you a remainder of 0. Based on this it will tell you if the number is even or odd. The intent is not to teach any new material here. You learned about control structures some time ago. The intent is to have you compare this program to the next two.

Figure 15.65

// Java1541.java// This program will count backwards from 20 to 0 and displays which numbers// are even and which are odd.// Compare this Java code to the code from other languages.

public class Java1541{

public static void main (String args[]){

System.out.println("\nJAVA1539.JAVA\n\n");for (int j = 20; j >= 0; j--){

if (j % 2 == 0){

System.out.println(j + " is an even number.");}else{

System.out.println(j + " is an odd number.");}

}System.out.println();

}}


Now look at program CPlusPlus.CPP, in figure 15.66. This is the same program written in C++. Even though you may have never seen a C++ program before, you might be surprised just how familiar the program will look, even though it is in a different language. Well… mostly different. Java did get its control structures from C++. The for loop and the if…else structure, and even the comments are identical.

Figure 15.66

// CPlusPlus.CPP// This program will count backwards from 20 to 0 and displays which numbers// are even and which are odd.// Compare this C++ code to the code from other languages.

#include <iostream.h>#include <conio.h>

void main(){ cout << endl << "CPlusPlus.CPP" << endl << endl; for (int j = 20; j >= 0; j--) {

if (j % 2 == 0){

cout << j << " is an even number." << endl;}else{

cout << j << " is an odd number." << endl;}

} cout << endl;

getch(); // makes the computer wait until a character is pressed}


And finally, look at program Pascal.PAS, in figure 15.67. This is the same program written in Pascal. The point being made with these 3 programs is while the syntax is different with different languages, the logic is the same. To display text, Java uses System.out.println. C++ uses cout and Pascal uses WRITELN. Braces { } mark the beginning and ending of blocks in Java and C++. In Pascal braces are used for comments. The actual words BEGIN and END are used instead.

Figure 15.67

{ Pascal.PAS This program will count backwards from 20 to 0 and displays which numbers are even and which are odd. Compare this Pascal code to the code from other languages. }

PROGRAM My_Pascal_Program;

VAR J : INTEGER; (* Loop Counter *)

BEGIN WRITELN; WRITELN('Pascal.PAS'); WRITELN;

FOR J := 20 DOWNTO 0 DO BEGIN IF J MOD 2 = 0 THEN BEGIN WRITELN(J,' is an even number.') END ELSE BEGIN WRITELN(J,' is an odd number.') END ENDEND.

I will use one final example to emphasize this point. At John Paul II High School, we have a religion teacher who is known as “Sister Peggy”. In 2007, Sister Peggy came by my classroom to drop something off and noticed the assignment my students were doing. “Oh, they are learning the for loop” she said. I was a little surprised until I learned that Sister Peggy taught Computer Science back in the 1970s. Back then, she taught the language FORTRAN. While FORTRAN is very different from Java, the logic is still the same. Programming knowledge will never become obsolete.



Documents

Chapter I - vernonmath.comvernonmath.com/wp/wp-content/uploads/2013/05/Text15-Intermed… · Web view15.10The Last Word. 15.1 Introduction. We have finally come to the last chapter