Download Text15-IntermediateGFX

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 Simple Paint Program Tools
15.8
Creating Clickable Areas in an Applet
15.9
Computer Animation
15.10
The Last Word
Chapter XV
Intermediate Graphics
613
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.
612
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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
Chapter XV
Intermediate Graphics
613
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)
{
Expo.drawString(g,”Mouse is clicked " + numClicks + " times.",20,20);
}
public boolean mouseDown(Event e, int x, int y)
{
numClicks++;
repaint();
return true;
}
}
614
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.
import java.applet.Applet;
import java.awt.*;
Chapter XV
Intermediate Graphics
615
public class Java1502 extends Applet
{
int xCoord, yCoord;
public void paint(Graphics g)
{
Expo.drawString(g,”Mouse clicked at (" + xCoord + "," + yCoord + ")",20,20);
}
public boolean mouseDown(Event e, int x, int y)
{
xCoord = x;
yCoord = y;
repaint();
return true;
}
}
Figure 15.3 Continued
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.
import java.applet.Applet;
import java.awt.*;
616
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
public class Java1503 extends Applet
{
boolean insideApplet;
public void paint(Graphics g)
{
if (insideApplet)
Expo.drawString(g,”Mouse is inside applet",20,20);
else
Expo.drawString(g,”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;
}
}
Figure 15.4 Continued
Chapter XV
Intermediate Graphics
617
Figure 15.5 Continued
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 also works 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 single-clicked, double-clicked, triple-clicked or quadruple-clicked
// using the <clickCount> method. This method works for the left or right button.
import java.applet.Applet;
import java.awt.*;
public class Java1504 extends Applet
{
boolean singleClick,doubleClick,tripleClick,quadClick;
public void paint(Graphics g)
{
if (singleClick)
Expo.drawString(g,”Mouse was clicked once",20,20);
if (doubleClick)
Expo.drawString(g,”Mouse was clicked twice",20,20);
if (tripleClick)
Expo.drawString(g,”Mouse was clicked thrice",20,20);
if (quadClick)
Expo.drawString(g,”Mouse was clicked 4 times",20,20);
}
618
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
public boolean mouseDown(Event e, int x, int y)
{
switch (e.clickCount)
{
case 1:
case 2:
case 3:
case 4:
singleClick = true;
singleClick = false;
singleClick = false;
singleClick = false;
doubleClick = false;
doubleClick = true;
doubleClick = false;
doubleClick = false;
tripleClick = false;
tripleClick = false;
tripleClick = true;
tripleClick = false;
quadClick = false; break;
quadClick = false; break;
quadClick = false; break;
quadClick = true;
}
repaint();
return true;
}
}
Figure 15.5 Continued
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.
Chapter XV
Intermediate Graphics
619
Figure 15.6
// Java1505.java
// This program displays the position of the mouse every time it moves
// using the <mouseMove> method.
import java.applet.Applet;
import java.awt.*;
public class Java1505 extends Applet
{
int xCoord, yCoord;
public void paint(Graphics g)
{
Expo.drawString(g,”Mouse is located at (" + xCoord + "," + yCoord + ")",20,20);
}
public boolean mouseMove(Event e, int x, int y)
{
xCoord = x;
yCoord = y;
repaint();
return true;
}
}
620
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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 topleft 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.
Chapter XV
Intermediate Graphics
621
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");
}
public void paint(Graphics g)
{
g.drawImage(picture,0,0,this);
g.drawImage(picture,750,200,this);
g.drawImage(picture,350,450,this);
}
}
622
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.*;
public class Java1507 extends java.applet.Applet
{
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");
}
public void paint(Graphics g)
{
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);
}
}
Chapter XV
Intermediate Graphics
623
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 class Java1508 extends java.applet.Applet
{
Image picture1, picture2, picture3, picture4, picture5, picture6;
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");
}
public void paint(Graphics g)
{
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);
}
}
624
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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 class Java1509 extends java.applet.Applet
{
Image picture1, picture2, picture3, picture4, picture5, picture6;
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");
}
public void paint(Graphics g)
{
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);
}
}
Chapter XV
Intermediate Graphics
625
Jpeg files can also be displayed. This is demonstrated by program Java1515.java
in Figure 15.12. Note that jpg files are usually used for photographs.
Figure 15.12
// Java1515.java
// This program demonstrates .jpg files can be used as well.
// .jpg files are typically used for photographs.
import java.awt.*;
public class Java1510 extends java.applet.Applet
{
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");
}
public void paint(Graphics g)
{
g.drawImage(picture1,0,0,this);
g.drawImage(picture2,500,0,this);
g.drawImage(picture3,0,330,this);
g.drawImage(picture4,316,330,this);
}
}
626
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.*;
public class Java1511 extends java.applet.Applet
{
Chapter XV
Intermediate Graphics
627
Image picture;
public void init()
{
picture = getImage(getDocumentBase(),"ShortCircuit.bmp");
}
public void paint(Graphics g)
{
g.drawImage(picture,100,100,this);
}
}
Figure 15.14 Continued
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.
628
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.15
Figure 15.16
Chapter XV
Intermediate Graphics
629
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.*;
public class Java1511 extends java.applet.Applet
{
Image picture;
public void init()
{
picture = getImage(getDocumentBase(),"ShortCircuit. png");
}
public void paint(Graphics g)
{
g.drawImage(picture,100,100,this);
}
}
630
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.*;
public class Java1512 extends java.applet.Applet
{
Image picture;
public void init()
{
picture = getImage(getDocumentBase(),"DallasSkyline.png");
}
public void paint(Graphics g)
{
g.drawImage(picture,0,100,this);
}
}
Chapter XV
Intermediate Graphics
631
Figure 15.18 Continued
Java1512.java Output – Before the file is moved
Java1512.java Output – After the file is moved
632
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Problem #3 – The Image File is Too Big.
In the Programs15 folder is a file called Castillo.JPG. If you were to doubleclick 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.*;
Chapter XV
Intermediate Graphics
633
public class Java1513 extends java.applet.Applet
{
Image picture;
public void init()
{
picture = getImage(getDocumentBase(),"castillo.jpg");
}
public void paint(Graphics g)
{
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);
}
}
Figure 15.20 Continued
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.
634
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.
Chapter XV
Intermediate Graphics
635
Figure 15.22
Figure 15.23
Figure 15.24
636
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.*;
Chapter XV
Intermediate Graphics
637
public class Java1513 extends java.applet.Applet
{
Image picture;
public void init()
{
picture = getImage(getDocumentBase(),"castillo.jpg");
}
public void paint(Graphics g)
{
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.26 Continued
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.
638
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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
Chapter XV
Intermediate Graphics
639
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.
Figure 15.29
640
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.30
Figure 15.31
Chapter XV
Intermediate Graphics
641
Problem #4 – The Image Does Not Show Up When it Should.
Sometimes importing an image causes a strange side effect. This “side effect” is
demonstrated in program Java1514.java, shown in Figure 15.32. The program
seems pretty straight forward – Display 2 pictures followed by “Hello World”
100 times. It should be clear that the pictures are displayed BEFORE the 100
“Hello World” messages. When you run the program, you see the side effect.
There are no pictures. You just see the 100 “Hello World” messages. (See
Figure 15.33) Then the program spontaneously runs a second time. It is not until
the second execution that the images actually show up. (See Figure 15.34)
Figure 15.32
// Java1514.java
// Problem #4 -- The image is not displayed until the program runs a second time.
// This program will be used to demonstrate an annoying issue that occurs whenever
// you import pictures into a program that has a time consuming process.
// Even though this program clearly instructs the computer to display the pictures
// BEFORE displaying "Hello World" 100 times, the program does not display the
// the pictures until the entire program runs a second time.
// This issue is ironically caused by the computer's attempt at being efficient.
import java.awt.*;
public class Java1514 extends java.applet.Applet
{
Image picture1, picture2;
public void init()
{
picture1 = getImage(getDocumentBase(),"AllSmiling.jpg");
picture2 = getImage(getDocumentBase(),"Schrams.jpg");
}
public void paint(Graphics g)
{
// First draw these 2 pictures...
g.drawImage(picture1,0,0,this);
g.drawImage(picture2,335,0,this);
// ... then draw "Hello World" 100 times.
for (int j = 1; j <= 100; j++)
{
int size = Expo.random(12,72);
int x = Expo.random(0,990-6*size);
int y = Expo.random(320+size,650);
Expo.setRandomColor(g);
Expo.setFont(g,"Arial Rounded MT Bold", Font.BOLD, size);
Expo.drawString(g,"Hello World",x,y);
Expo.delay(100); // Wait for 100 milliseconds or 1/10 of a second.
}
}
}
642
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.33
Figure 15.34
Chapter XV
Intermediate Graphics
643
OK, so what is causing this strange side effect? Ironically, it is caused by Java’s
efficiency. In the init method the computer is told to load 2 image files. This is
not an instantaneous process. It takes some time. Have you ever been on a hike
with someone who slows down, but does not want to slow the entire group down?
They frequently will say something like, “Go ahead, I will catch up later.” Java is
basically doing the same thing. While one part of the computer is busy loading
the pictures, another continues executing the program. This is why the first thing
we saw were the 100 “Hello World” messages. (See Figure 15.33) When the
pictures are finally loaded they can be displayed. This means the screen needs to
be refreshed and the entire paint method is call again – not only displaying the
pictures but also the 100 “Hello World” messages as well. (See Figure 15.34)
So why is this happen now? This actually always happens when you import
images. Usually, you do not notice it because the output is displayed so quickly.
In this program the 100 “Hello World” messages take a bit of time to execute.
This makes the side effect noticeable.
Problem #4 – Solution – Use the Media Tracker.
What we want is the ability to tell the computer, “Just wait for the pictures to load
before you go on and do anything else!” This actually is possible and the process
is demonstrated in program Java1515.java, shown in Figure 15.35. The secret is
to use an object of the MediaTracker class. Its purpose is to keep track of
various media, like images. All images need to be added to this tracker object.
Finally, the command tracker.waitForAll(); tells the computer to wait for all
tracked images to load. When you run the program, you will see it outputs
properly this time. You will not notice is much of, or any, lag time because the
computer is waiting to load the pictures. While the process is not instantaneous it
does only take a fraction of a second.
Figure 15.35
// Java1515.java
// Problem #4 -- Solution
// All images needs to be added to an object of the <MediaTracker> class.
// Then the <waitForAll> method will force the computer to wait for all of the
// pictures to load BEFORE it continues with the program.
// NOTE: This program does use some features (like Exception Handling)
// that go beyond the scope of this course. More on this will be discussed
// in later courses.
import java.awt.*;
644
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
public class Java1515 extends java.applet.Applet
{
Image picture1, picture2;
public void init()
{
picture1 = getImage(getDocumentBase(),"AllSmiling.jpg");
picture2 = getImage(getDocumentBase(),"Schrams.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);
try
{
tracker.waitForAll();
}
catch(InterruptedException e)
{
System.out.println(e);
}
}
public void paint(Graphics g)
{
// First draw these 2 pictures...
g.drawImage(picture1,0,0,this);
g.drawImage(picture2,335,0,this);
// ... then draw "Hello World" 100 times.
for (int j = 1; j <= 100; j++)
{
int size = Expo.random(12,72);
int x = Expo.random(0,990-6*size);
int y = Expo.random(320+size,650);
Expo.setRandomColor(g);
Expo.setFont(g,"Arial Rounded MT Bold", Font.BOLD, size);
Expo.drawString(g,"Hello World",x,y);
Expo.delay(100); // Wait for 100 milliseconds or 1/10 of a second.
}
}
}
Chapter XV
Intermediate Graphics
645
Figure 15.35 Continued
It is my recommendation that all images should be tracked in this manner to avoid
the very issue demonstrated in the past couple programs.
NOTE: You may wonder about the purpose of the weird try and catch structure.
This is used for something called Exception Handling which is required for this
program to work properly. Exception Handling is a concept that is beyond the
scope of this class. It is will be discussed in greater detail in AP® Computer
Science. For now, just use the code as is.
646
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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 Java1516.java, in
Figure 15.36 demonstrates that the Deluxe Expo class has 85 colors. You may
remember that the Slimmed Down Expo class has only 36.
Figure 15.36
// Java1516.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.*;
public class Java1516 extends Applet
{
public void paint(Graphics g)
{
int radius = 60;
Expo.setColor(g,Expo.darkerRed);
Expo.setColor(g,Expo.darkRed);
Expo.setColor(g,Expo.red);
Expo.setColor(g,Expo.lightRed);
Expo.setColor(g,Expo.lighterRed);
Expo.setColor(g,Expo.brown);
Expo.setColor(g,Expo.violet);
Expo.setColor(g,Expo.darkerGreen);
Expo.setColor(g,Expo.darkGreen);
Expo.setColor(g,Expo.green);
Expo.setColor(g,Expo.lightGreen);
Expo.setColor(g,Expo.lighterGreen);
Expo.fillCircle(g, 60, 60,radius);
Expo.fillCircle(g,140, 60,radius);
Expo.fillCircle(g,220, 60,radius);
Expo.fillCircle(g,300, 60,radius);
Expo.fillCircle(g,380, 60,radius);
Expo.fillCircle(g,460, 60,radius);
Expo.fillCircle(g,540, 60,radius);
Expo.fillCircle(g,620, 60,radius);
Expo.fillCircle(g,700, 60,radius);
Expo.fillCircle(g,780, 60,radius);
Expo.fillCircle(g,860, 60,radius);
Expo.fillCircle(g,940, 60,radius);
Expo.setColor(g,Expo.darkerBlue);
Expo.setColor(g,Expo.darkBlue);
Expo.setColor(g,Expo.blue);
Expo.setColor(g,Expo.lightBlue);
Expo.setColor(g,Expo.lighterBlue);
Expo.setColor(g,Expo.purple);
Expo.setColor(g,Expo.turquoise);
Expo.setColor(g,Expo.darkerOrange);
Expo.setColor(g,Expo.darkOrange);
Expo.setColor(g,Expo.orange);
Expo.setColor(g,Expo.lightOrange);
Expo.setColor(g,Expo.lighterOrange);
Expo.fillCircle(g, 60,140,radius);
Expo.fillCircle(g,140,140,radius);
Expo.fillCircle(g,220,140,radius);
Expo.fillCircle(g,300,140,radius);
Expo.fillCircle(g,380,140,radius);
Expo.fillCircle(g,460,140,radius);
Expo.fillCircle(g,540,140,radius);
Expo.fillCircle(g,620,140,radius);
Expo.fillCircle(g,700,140,radius);
Expo.fillCircle(g,780,140,radius);
Expo.fillCircle(g,860,140,radius);
Expo.fillCircle(g,940,140,radius);
Expo.setColor(g,Expo.darkerCyan);
Expo.fillCircle(g, 60,220,radius);
Chapter XV
Intermediate Graphics
647
Expo.setColor(g,Expo.darkCyan);
Expo.setColor(g,Expo.cyan);
Expo.setColor(g,Expo.lightCyan);
Expo.setColor(g,Expo.lighterCyan);
Expo.setColor(g,Expo.plum);
Expo.setColor(g,Expo.indigo);
Expo.setColor(g,Expo.darkerMagenta);
Expo.setColor(g,Expo.darkMagenta);
Expo.setColor(g,Expo.magenta);
Expo.setColor(g,Expo.lightMagenta);
Expo.setColor(g,Expo.lighterMagenta);
Expo.fillCircle(g,140,220,radius);
Expo.fillCircle(g,220,220,radius);
Expo.fillCircle(g,300,220,radius);
Expo.fillCircle(g,380,220,radius);
Expo.fillCircle(g,460,220,radius);
Expo.fillCircle(g,540,220,radius);
Expo.fillCircle(g,620,220,radius);
Expo.fillCircle(g,700,220,radius);
Expo.fillCircle(g,780,220,radius);
Expo.fillCircle(g,860,220,radius);
Expo.fillCircle(g,940,220,radius);
Expo.setColor(g,Expo.darkerYellow);
Expo.setColor(g,Expo.darkYellow);
Expo.setColor(g,Expo.yellow);
Expo.setColor(g,Expo.lightYellow);
Expo.setColor(g,Expo.lighterYellow);
Expo.setColor(g,Expo.aqua);
Expo.setColor(g,Expo.aquaMarine);
Expo.setColor(g,Expo.darkerPink);
Expo.setColor(g,Expo.darkPink);
Expo.setColor(g,Expo.pink);
Expo.setColor(g,Expo.lightPink);
Expo.setColor(g,Expo.lighterPink);
Expo.fillCircle(g, 60,300,radius);
Expo.fillCircle(g,140,300,radius);
Expo.fillCircle(g,220,300,radius);
Expo.fillCircle(g,300,300,radius);
Expo.fillCircle(g,380,300,radius);
Expo.fillCircle(g,460,300,radius);
Expo.fillCircle(g,540,300,radius);
Expo.fillCircle(g,620,300,radius);
Expo.fillCircle(g,700,300,radius);
Expo.fillCircle(g,780,300,radius);
Expo.fillCircle(g,860,300,radius);
Expo.fillCircle(g,940,300,radius);
Expo.setColor(g,Expo.goldenRod);
Expo.setColor(g,Expo.gold);
Expo.setColor(g,Expo.silver);
Expo.setColor(g,Expo.bronze);
Expo.setColor(g,Expo.teal);
Expo.setColor(g,Expo.maroon);
Expo.setColor(g,Expo.fuschia);
Expo.setColor(g,Expo.lavender);
Expo.setColor(g,Expo.lime);
Expo.setColor(g,Expo.navy);
Expo.setColor(g,Expo.chartreuse);
Expo.setColor(g,Expo.fireBrick);
Expo.fillCircle(g, 60,380,radius);
Expo.fillCircle(g,140,380,radius);
Expo.fillCircle(g,220,380,radius);
Expo.fillCircle(g,300,380,radius);
Expo.fillCircle(g,380,380,radius);
Expo.fillCircle(g,460,380,radius);
Expo.fillCircle(g,540,380,radius);
Expo.fillCircle(g,620,380,radius);
Expo.fillCircle(g,700,380,radius);
Expo.fillCircle(g,780,380,radius);
Expo.fillCircle(g,860,380,radius);
Expo.fillCircle(g,940,380,radius);
Expo.setColor(g,Expo.moccasin);
Expo.setColor(g,Expo.salmon);
Expo.setColor(g,Expo.olive);
Expo.setColor(g,Expo.khaki);
Expo.setColor(g,Expo.crimson);
Expo.setColor(g,Expo.orchid);
Expo.setColor(g,Expo.sienna);
Expo.setColor(g,Expo.melon);
Expo.setColor(g,Expo.tangerine);
Expo.setColor(g,Expo.terraCotta);
Expo.setColor(g,Expo.pumpkin);
Expo.setColor(g,Expo.mahogany);
Expo.fillCircle(g, 60,460,radius);
Expo.fillCircle(g,140,460,radius);
Expo.fillCircle(g,220,460,radius);
Expo.fillCircle(g,300,460,radius);
Expo.fillCircle(g,380,460,radius);
Expo.fillCircle(g,460,460,radius);
Expo.fillCircle(g,540,460,radius);
Expo.fillCircle(g,620,460,radius);
Expo.fillCircle(g,700,460,radius);
Expo.fillCircle(g,780,460,radius);
Expo.fillCircle(g,860,460,radius);
Expo.fillCircle(g,940,460,radius);
Expo.setColor(g,Expo.darkerTan);
Expo.setColor(g,Expo.darkTan);
Expo.setColor(g,Expo.tan);
Expo.setColor(g,Expo.lightTan);
Expo.setColor(g,Expo.lighterTan);
Expo.setColor(g,Expo.amber);
Expo.setColor(g,Expo.black);
Expo.setColor(g,Expo.darkerGray);
Expo.setColor(g,Expo.darkGray);
Expo.setColor(g,Expo.gray);
Expo.setColor(g,Expo.lightGray);
Expo.setColor(g,Expo.lighterGray);
Expo.fillCircle(g, 60,540,radius);
Expo.fillCircle(g,140,540,radius);
Expo.fillCircle(g,220,540,radius);
Expo.fillCircle(g,300,540,radius);
Expo.fillCircle(g,380,540,radius);
Expo.fillCircle(g,460,540,radius);
Expo.fillCircle(g,540,540,radius);
Expo.fillCircle(g,620,540,radius);
Expo.fillCircle(g,700,540,radius);
Expo.fillCircle(g,780,540,radius);
Expo.fillCircle(g,860,540,radius);
Expo.fillCircle(g,940,540,radius);
}
}
648
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.36 Continued
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 Java1517.java, in Figure 15.37, and its
output. The drawRoundedRectangle method is also demonstrated in this
program.
Chapter XV
Intermediate Graphics
649
Figure 15.37
// Java1517.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.
import java.awt.*;
import java.applet.*;
public class Java1517 extends Applet
{
public void paint(Graphics g)
{
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);
}
}
650
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Thick Drawing 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 Java1518.java, in Figure 15.38, demonstrates several of
these drawThick methods.
Figure 15.38
// Java1518.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".
import java.awt.*;
import java.applet.*;
public class Java1518 extends Applet
{
public void paint(Graphics g)
{
int t = 12; // thickness
Expo.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);
}
}
Chapter XV
Intermediate Graphics
651
Figure 15.38 Continued
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 Java1519.java, shown in Figure
15.39. 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.
652
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.39
// Java1519.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.*;
public class Java1517 extends java.applet.Applet
{
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?");
}
public void paint(Graphics g)
{
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);
}
}
}
Chapter XV
Intermediate Graphics
653
Figure 15.39 Continued
Creating Transparent Colors
Way back in chapter 5 you learned how to create your own custom colors. By
using 3 numbers between 0 and 255 in an Expo.setColor command, you can
create virtually any color imaginable. You have also seen that the setColor
method is overloaded. There are multiple setColor methods in the Expo class,
each with a different signature (parameter list). The first time you used setColor
was with a Color parameter. Later, you learned to use setColor with 3 int
parameters to create a custom color. The previous program used setColor with a
single int parameter to select from 1 of 9 simple colors. The Deluxe Expo class
adds a fourth overloaded setColor method that has 4 int parameters. The first 3
specify the amount of red, green and blue to create a custom color. You might
think, “We already have a setColor method that does that.” It is the 4th int
parameter that makes this method special. To understand how, look at Figure
15.40. We will do things backwards in this example and start with the output.
654
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.40
OK, so we have 1000 randomly colored circles. You might think you have seen
this before, but look again at the output in Figure 15.40. Do you see circles
behind other circles? This is because the circles all have varying degrees of
transparency. This is what the 4th int parameter, referred to as the alpha value,
controls. Figure 15.41 shows program Java1520.java, which was used to create
this output. You will see that in addition to random values for red, green, and
blue, there is also a random alpha value. Like the other 3 int parameters, the
alpha value has a range of 0 to 255. Smaller alpha values are more transparent.
Larger alpha values are more opaque (solid). You should also notice that the
program seemed to execute slowly. This is because creating transparent colors
requires considerably more processing than creating solid colors.
Figure 15.41
// Java1520.java
// This program is similar to program Java0527 which displayed 1000 random colored solid circles.
// The difference now is the new 4-int parameter <setColor> method is used.
// The first 3 int values still specify the amount of red, green and blue.
// The fourth int parameter is the "alpha" value which determines how "transparent" the color is.
// Like the color values, the alpha value is a number between 0 and 255.
// Smaller alpha values are more transparent. Larger alpha values are more opaque.
// NOTE: The programs seems slow because creating transparent colors takes much longer than
//
creating solid colors.
Chapter XV
Intermediate Graphics
655
public class Java1520 extends Applet
{
public void paint(Graphics g)
{
for (int k = 1; k <= 1000; k++)
{
int x
= Expo.random(0,1000);
int y
= Expo.random(0,650);
int red
= Expo.random(0,255);
int green = Expo.random(0,255);
int blue = Expo.random(0,255);
int alpha = Expo.random(0,255);
Expo.setColor(g,red,green,blue,alpha);
Expo.fillCircle(g,x,y,50);
}
}
}
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.42.
Figure 15.42
656
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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 Java1521.java, in figure 15.43, 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.43
// Java1521.java
// This program shows how to display multiple pages of graphics output.
import java.awt.*;
public class Java1521 extends java.applet.Applet
{
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");
}
public void paint(Graphics g)
{
switch (numClicks)
{
case 0 : page1(g); break;
case 1 : page2(g); break;
case 2 : page3(g); break;
}
}
public boolean mouseDown(Event e, int x, int y)
{
numClicks++;
repaint();
return true;
}
Chapter XV
Intermediate Graphics
657
public void page1(Graphics g)
{
Expo.setFont(g,"Arial",Font.BOLD,100);
Expo.drawString(g,"TITLE PAGE",218,100);
Expo.setColor(g,Expo.red);
Expo.fillStar(g,510,350,175,8);
Expo.setColor(g,Expo.green);
Expo.drawThickStar(g,510,350,225,8,25);
Expo.setColor(g,Expo.blue);
Expo.drawThickStar(g,510,350,275,8,25);
g.drawImage(picture1,425,265,this);
Expo.setFont(g,"Times Roman",Font.PLAIN,20);
Expo.drawString(g,"My name is Leon Schram.",50,300);
Expo.drawString(g,"Click once to continue.",750,550);
}
public void page2(Graphics g)
{
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);
}
public void page3(Graphics g)
{
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);
}
}
658
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.43 Continued
Chapter XV
Intermediate Graphics
659
Figure 15.43 Continued
15.7 Creating Simple Paint Program Tools
“PART-2” of this chapter begins here. We are now working toward 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.
Paint Program Tools vs. Entire Paint Program
We are not creating an entire paint program. That assignment will have to wait
for the Advanced Graphics class. In this class, we are merely introducing some
concepts by creating some of the simpler tools from a paint program. This will
require the use of several Mouse Events.
660
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
For our first program consider this: The simplest paint program would simply
give you the ability to draw dots on the screen. Program Java1022.java, in
Figure 10.44, 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.44
// Java1522.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.
import java.applet.Applet;
import java.awt.*;
public class Java1522 extends Applet
{
int xCoord;
int yCoord;
public void paint(Graphics g)
{
Expo.setColor(g,Expo.red);
Expo.fillRectangle(g,xCoord,yCoord,xCoord+15,yCoord+15);
}
public boolean mouseDown(Event e, int x, int y)
{
xCoord = x;
yCoord = y;
repaint();
return true;
}
}
Java1522.java – Initial Output
Chapter XV
Intermediate Graphics
661
Figure 15.44 Continued
Java1522.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 Java1523.java in figure 15.45 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 ready. Variable ready is initialized to false in the init method.
The if structure in the paint method prevents the drawing of the small square. In
the mouseDown event method, the value of ready is changed to true. This
means once the user clicks the mouse, the computer will start displaying the small
square. The other issue will be addressed by the following program.
662
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.45
// Java1523.java
// This program cures the problem of the initial red square by adding a
// <boolean> variable called <ready>.
import java.applet.Applet;
import java.awt.*;
public class Java1523 extends Applet
{
int xCoord;
int yCoord;
boolean ready;
public void init() { ready = false; }
public void paint(Graphics g)
{
if (ready)
{
Expo.setColor(g,Expo.red);
Expo.fillRectangle(g,xCoord,yCoord,xCoord+15,yCoord+15);
}
}
public boolean mouseDown(Event e, int x, int y)
{
ready = true; // Clicking the mouse means the computer is "ready" to display.
xCoord = x;
yCoord = y;
repaint();
return true;
}
}
Java1523.java – Initial Output
Chapter XV
Intermediate Graphics
663
Figure 15.45 Continued
Java1523.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 Java1524.java, in figure 15.46, 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.
664
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.46
// Java1524.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.
import java.applet.Applet;
import java.awt.*;
public class Java1524 extends Applet
{
int xCoord;
int yCoord;
boolean ready;
public void init() { ready = false; }
public void paint(Graphics g)
{
if (ready)
{
Expo.setColor(g,Expo.red);
Expo.fillRectangle(g,xCoord,yCoord,xCoord+15,yCoord+15);
}
}
public boolean mouseDown(Event e, int x, int y)
{
ready = true; // Clicking the mouse means the computer is "ready" to display.
xCoord = x;
yCoord = y;
repaint();
return true;
}
public void update(Graphics g)
{
paint(g);
}
}
Chapter XV
Intermediate Graphics
665
Figure 15.46 Continued
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 Java1524.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 Java1525.java in Figure
15.47, you should see that it behaves very much like a pencil tool in a typical
paint program.
666
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.47
// Java1525.java
// This program changes <mouseDown> to <mouseDrag> and makes the square
// smaller. This should create the effect of having a freehand pencil.
import java.applet.Applet;
import java.awt.*;
public class Java1522 extends Applet
{
int xCoord,yCoord;
public void init()
{
xCoord = 0;
yCoord = 0;
}
public void paint(Graphics g)
{
Expo.setColor(g,Expo.red);
Expo.drawPoint(g,xCoord,yCoord);
}
public boolean mouseDrag(Event e, int x, int y)
{
xCoord = x;
yCoord = y;
repaint();
return true;
}
public void update(Graphics g)
{
paint(g);
}
}
Chapter XV
Intermediate Graphics
667
Figure 15.47 Continued
Drawing Lines
Another feature that paint programs typically have is the ability to draw straight
lines. Program Java1526.java in Figure 15.48, 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 Java1526.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.
668
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.48
// Java1526.java
// This program draws a straight line from the point where the mouse is clicked
// to the point where the mouse is released.
import java.applet.Applet;
import java.awt.*;
public class Java1526 extends Applet
{
int startX,startY,endX,endY;
public void paint(Graphics g)
{
Expo.drawLine(g,startX,startY,endX,endY);
}
public boolean mouseDown(Event e, int x, int y)
{
startX = x;
startY = y;
return true;
}
public boolean mouseUp(Event e, int x, int y)
{
endX = x;
endY = y;
repaint();
return true;
}
}
Chapter XV
Intermediate Graphics
669
One thing you probably noticed from program Java1526.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 Java1527.java in figure 15.49 will allow you to draw lines
with this rubber band effect. Most of you will find this more natural.
Figure 15.49
// Java1527.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.
import java.applet.Applet;
import java.awt.*;
public class Java1527 extends Applet
{
int startX,startY,endX,endY;
public void paint(Graphics g)
{
Expo.drawLine(g,startX,startY,endX,endY);
}
public boolean mouseDown(Event e, int x, int y)
{
startX = x;
startY = y;
return true;
}
public boolean mouseDrag(Event e, int x, int y)
{
endX = x;
endY = y;
repaint();
return true;
}
}
670
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.49 Continued
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 Java1527.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
Java1528.java, in Figure 15.50, answers this question by essentially adding
method update to what was program Java1527.java.
Chapter XV
Intermediate Graphics
671
Figure 15.44
// Java1528.java
// This program shows that method <update> can cause a peculiar "side effect" in some cases.
// Watch what happens when you try to draw a line.
import java.applet.Applet;
import java.awt.*;
public class Java1528 extends Applet
{
int startX,startY,endX,endY;
public void paint(Graphics g)
{
Expo.drawLine(g,startX,startY,endX,endY);
}
public boolean mouseDown(Event e, int x, int y)
{
startX = x; startY = y; return true;
}
public boolean mouseDrag(Event e, int x, int y)
{
endX = x; endY = y; repaint(); return true;
}
public void update(Graphics g) { paint(g); }
}
672
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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 Java1529.java in Figure 15.51, and see what
happens.
Figure 15.51
// Java1529.java
// This program is almost identical to Java1527.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.*;
public class Java1529 extends Applet
{
int startX,startY,endX,endY;
public void paint(Graphics g)
{
Expo.drawRectangle(g,startX,startY,endX,endY);
}
public boolean mouseDown(Event e, int x, int y)
{
startX = x;
startY = y;
return true;
}
public boolean mouseDrag(Event e, int x, int y)
{
endX = x;
endY = y;
repaint();
return true;
}
}
Chapter XV
Intermediate Graphics
673
Figure 15.51 Continued
Drawing Circles
Program Java1530.java, in figure 15.52, 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 that the method is based on the following
mathematical information:
674
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
c
a
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:
𝑐 = √𝑎 2 + 𝑏 2
This formula is used to find the distance between any 2 points (x1,y1) and
(x2,y2):
𝑑𝑖𝑠𝑡𝑎𝑛𝑐𝑒 = √(𝑥2 − 𝑥1 )2 + (𝑦2 − 𝑦1 )2
Figure 15.52
// Java1530.java
// This program will draw circles using a special <getDistance> method
// which is based on the Pythagorean Formula.
import java.applet.Applet;
import java.awt.*;
public class Java1530 extends Applet
{
int centerX,centerY,rimX,rimY;
public void paint(Graphics g)
{
int radius = getDistance(centerX,centerY,rimX,rimY);
Expo.drawCircle(g,centerX,centerY,radius);
}
Chapter XV
Intermediate Graphics
675
public boolean mouseDown(Event e, int x, int y)
{
centerX = x;
centerY = y;
return true;
}
public boolean mouseDrag(Event e, int x, int y)
{
rimX = x;
rimY = y;
repaint();
return true;
}
public int getDistance(int x1, int y1, int x2, int y2)
{
double distance = Math.sqrt( Math.pow(x2-x1,2) + Math.pow(y2-y1,2) );
return (int) distance;
}
}
Figure 15.52 Continued
676
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
15.8 Creating Clickable Areas in an Applet
There 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 Java1531.java, in figure 15.53, 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.53
// Java1531.java
// This uses the <Rectangle> class with the <inside> method to determine
// if a certain rectangular area of the screen has been clicked.
import java.applet.Applet;
import java.awt.*;
public class Java1531 extends Applet
{
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;
}
public void paint(Graphics g)
{
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);
Chapter XV
Intermediate Graphics
677
switch (numColor)
{
case 1:
Expo.setColor(g,Expo.red);
Expo.drawString(g,”Mouse clicked inside red",300,150);
break;
case 2:
Expo.setColor(g,Expo.green);
Expo.drawString(g,”Mouse clicked inside green",300,350);
break;
case 3:
Expo.setColor(g,Expo.blue);
Expo.drawString(g,”Mouse clicked inside blue",300,550);
break;
case 4:
Expo.setColor(g,Expo.black);
Expo.drawString(g,”Mouse clicked outside the colored squares",300,40);
break;
}
}
public boolean mouseDown(Event e, int x, int y)
{
if(red.inside(x,y))
numColor = 1;
else if(green.inside(x,y))
numColor = 2;
else if(blue.inside(x,y))
numColor = 3;
else
numColor = 4;
repaint();
return true;
}
}
678
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.53 Continued
Java1531.java – Initial Output
Chapter XV
Intermediate Graphics
679
Figure 15.53 Continued
680
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.53 Continued
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.54.
Figure 15.54
Rectangle red, green, blue;
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;
}
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 on which to click.
Chapter XV
Intermediate Graphics
681
Figure 15.55 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.55
public boolean mouseDown(Event e, int x, int y)
{
if(red.inside(x,y))
numColor = 1;
else if(green.inside(x,y))
numColor = 2;
else if(blue.inside(x,y))
numColor = 3;
else
numColor = 4;
repaint();
return true;
}
Finally, we look at the paint method in figure 15.56, 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.
682
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.56
public void paint(Graphics g)
{
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);
Expo.drawString(g,”Mouse clicked inside red",300,150);
break;
case 2:
Expo.setColor(g,Expo.green);
Expo.drawString(g,”Mouse clicked inside green",300,350);
break;
case 3:
Expo.setColor(g,Expo.blue);
Expo.drawString(g,”Mouse clicked inside blue",300,550);
break;
case 4:
Expo.setColor(g,Expo.black);
Expo.drawString(g,”Mouse clicked outside the colored squares",300,40);
break;
}
}
You may not really quite get this abstract business. Perhaps with program
Java1532.java, in Figure 15.57, 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.
Chapter XV
Intermediate Graphics
683
Figure 15.57
// Java1532.java
// This program proves that objects of the <Rectangle> class are abstract and
// not visible to the viewer. 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.
import java.applet.Applet;
import java.awt.*;
public class Java1529 extends Applet
{
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;
}
public void paint(Graphics g)
{
// Note: The solid colored squares are not drawn this time.
Expo.setFont(g,"Arial",Font.BOLD,28);
switch (numColor)
{
case 1:
Expo.setColor(g,Expo.red);
Expo.drawString(g,”Mouse clicked inside red",300,150);
break;
case 2:
Expo.setColor(g,Expo.green);
Expo.drawString(g,”Mouse clicked inside green",300,350);
break;
case 3:
Expo.setColor(g,Expo.blue);
Expo.drawString(g,”Mouse clicked inside blue",300,550);
break;
case 4:
Expo.setColor(g,Expo.black);
Expo.drawString(g,”Mouse clicked outside the colored squares",300,40);
break;
}
}
684
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
public boolean mouseDown(Event e, int x, int y)
{
if(red.inside(x,y))
numColor = 1;
else if(green.inside(x,y))
numColor = 2;
else if(blue.inside(x,y))
numColor = 3;
else
numColor = 4;
repaint();
return true;
}
}
Figure 15.57 Continued
Java1532.java – Initial Output
Chapter XV
Intermediate Graphics
685
Figure 15.57 Continued
686
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.57 Continued
Chapter XV
Intermediate Graphics
687
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.58.
Figure 15.58
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);
688
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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.59 gives a visual example of this:
Figure 15.59
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.
Chapter XV
Intermediate Graphics
689
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.60,
is our first step in the animation journey.
Figure 15.60
// Java1533.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.*;
public class Java1530 extends java.applet.Applet
{
public void paint(Graphics g)
{
Expo.fillCircle(g,50,325,25);
}
}
690
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
You may be wondering why Java1533.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 Java1534.java, in figure 15.61, 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.61
// Java1534.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.*;
public class Java1534 extends java.applet.Applet
{
public void paint(Graphics g)
{
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);
}
}
Chapter XV
Intermediate Graphics
691
Figure 15.55 Continued
The output of program Java1034.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
Java1035.java, in Figure 10.62, attempts to deal with this problem by erasing
each circle before the next circle is drawn. Erasing is accomplished by drawing a
white circle on top of each black circle. Why white? Because it is the
background color.
Figure 10.62
// Java1035.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.*;
public class Java1035 extends java.applet.Applet
{
public void paint(Graphics g)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,50,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,50,325,25);
692
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,150,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,150,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,250,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,250,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,350,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,350,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,450,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,450,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,550,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,550,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,650,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,650,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,750,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,750,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,850,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,850,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,950,325,25);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,950,325,25);
}
}
You may be wondering about the setBackground command at the very beginning
of the paint method and why it has the comment “necessary for Macs”. On a
Windows machine, Java applets have a white background by default. On a Mac,
the background is more off-white. If the background color and the erasing color
are not exactly the same, you will leave visible marks (in this case circles)
anytime you erase. The solution is to force both colors to be the same.
Chapter XV
Intermediate Graphics
693
Figure 15.62 Continued
In the animation journey it looks like we have taken a giant step backwards. The
output of program Java1535.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 Java1536.java, in
figure 15.63 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 full second. A delay
of 2000 would be 2 full 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.63
// Java1536.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.
694
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
import java.awt.*;
public class Java1536 extends java.applet.Applet
{
public void paint(Graphics g)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
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);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,150,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,150,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,250,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,250,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,350,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,350,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,450,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,450,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,550,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,550,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,650,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,650,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,750,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,750,325,25);
Chapter XV
Intermediate Graphics
695
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,850,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,850,325,25);
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,950,325,25);
Expo.delay(1000);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,950,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 Java1536.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 Java1537.java, in figure 15.64
does the exact same thing as program Java1536.java, but now a for loop is used
and the program is much shorter.
Figure 15.64
// Java1537.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.*;
public class Java1537 extends java.applet.Applet
{
public void paint(Graphics g)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
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);
}
}
}
696
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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 Java1538.java, in figure 15.65 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 15. 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.65
// Java1538.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.*;
public class Java1538 extends java.applet.Applet
{
public void paint(Graphics g)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
for (int x = 50; x <= 950; x+=10)
{
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,x,325,25);
Expo.delay(100);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,x,325,25);
}
}
}
Chapter XV
Intermediate Graphics
697
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 Java1539.java, in figure 15.66 and see
for yourself. Note, the delay is reduced again to compensate.
Figure 15.66
// Java1539.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.*;
public class Java1539 extends java.applet.Applet
{
public void paint(Graphics g)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
for (int x = 50; x <= 950; x+=1)
{
Expo.setColor(g,Expo.black);
Expo.fillCircle(g,x,325,25);
Expo.delay(10);
Expo.setColor(g,Expo.white);
Expo.fillCircle(g,x,325,25);
}
}
}
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 Java1540.java, in Figure 15.67, 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.
698
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.67
// Java1540.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.*;
public class Java1540 extends java.applet.Applet
{
public void paint(Graphics g)
{
for (int x = 50; x <= 950; x+=1)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
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);
}
}
}
Chapter XV
Intermediate Graphics
699
Program Java1541.java, in Figure 15.68, is similar to the previous program, with
a couple differences. First, instead of drawing 3 circles to animate a snowman, it
uses drawImage to make a bunny move across the screen. Second, the for loop
start and stop values have been switched to make the bunny move from right to
left.
Figure 15.68
// Java1541.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.
// NOTE: This for loop counts BACKWARDS from 1100 to -100 which makes the bunny
// move from right to left.
import java.awt.*;
public class Java1541 extends java.applet.Applet
{
Image picture;
public void init()
{
picture = getImage(getDocumentBase(),"bunny.png");
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(picture,1);
try
{
tracker.waitForAll();
}
catch(InterruptedException e)
{
System.out.println(e);
}
}
public void paint(Graphics g)
{
Expo.setBackground(g,Expo.white); // necessary for Macs
for (int x = 1100; x >= -100; x-=3)
{
g.drawImage(picture,x,200,this);
Expo.delay(30);
// Erase the bunny by drawing a white rectangle over it.
Expo.setColor(g,Expo.white);
Expo.fillRectangle(g,x,200,x+100,300);
}
}
}
700
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Figure 15.68 Continued
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
Java1542.java in figure 15.69. 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.69
// Java1542.java Animation Part 10
// This program demonstrates the problem that occurs with a multi-colored background.
import java.awt.*;
public class Java1542 extends java.applet.Applet
{
Chapter XV
Intermediate Graphics
701
public void paint(Graphics g)
{
drawColorfulBackground(g);
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);
}
}
public static void drawColorfulBackground(Graphics g)
{
for (int c = 1; c <= 9; c++)
{
Expo.setColor(g,c);
Expo.fillRectangle(g, (c-1)*111, 0, c*111, 650);
}
}
}
Figure 15.69 Continued
702
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
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-andredraw animation. In this type of animation nothing gets erased. Instead, the
entire background gets redrawn every time the object moves. This is
demonstrated with program Java1543.java in figure 15.70. You should notice
two big differences between this program and Java1542.java. First, the method
call to drawColorfulBackground 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.70
// Java1543.java Animation Part 11
// This program shows how to handle a multi-colored background.
// Instead of "draw-and-erase" animation, it is "draw-and-redraw" animation.
// The entire background is redrawn every time the object moves.
// NOTE: This does have the potential for serious flickering.
import java.awt.*;
public class Java1543 extends java.applet.Applet
{
public void paint(Graphics g)
{
for (int x = 50; x <= 950; x+=3)
{
drawColorfulBackground(g);
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);
}
}
public static void drawColorfulBackground(Graphics g)
{
for (int c = 1; c <= 9; c++)
{
Expo.setColor(g,c);
Expo.fillRectangle(g, (c-1)*111, 0, c*111, 650);
}
}
}
Chapter XV
Intermediate Graphics
703
Figure 15.70 Continued
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.
704
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
Program Java1544.java, in figure 15.71 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.67
// Java1544.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 Java1544
{
public static void main (String args[])
{
System.out.println("\nJAVA1544.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();
}
}
JAVA1544.JAVA
20 is an even number.
19 is an odd number.
18 is an even number.
17 is an odd number.
16 is an even number.
15 is an odd number.
14 is an even number.
13 is an odd number.
12 is an even number.
11 is an odd number.
10 is an even number.
9 is an odd number.
8 is an even number.
7 is an odd number.
6 is an even number.
5 is an odd number.
4 is an even number.
3 is an odd number.
2 is an even number.
1 is an odd number.
0 is an even number.
Chapter XV
Intermediate Graphics
705
Now look at program CPlusPlus.CPP, in Figure 15.72. This is the same program
written in C++. Even though you may have never seen a C++ program before,
you may 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
and from C++. The for loop and the if…else structure, and even the comments
are identical.
Figure 15.72
// 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
}
706
Exposure Java 2015, Pre-AP®CS Edition
05-22-15
And finally, look at program Pascal.PAS, in Figure 15.73. 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.73
{ 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
END
END.
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. I will conclude this chapter and
this textbook with this statement:
Programming knowledge will never become obsolete!
Chapter XV
Intermediate Graphics
707
708
Exposure Java 2015, Pre-AP®CS Edition
05-22-15