COMPUTER GRAPHICS

Using Java CS 171G

Outline
• Terminology • Java Graphics Coordinate System • Java Applets

• Drawing a Line
• Changing the Color • Designing Your Own Colors • Drawing other shapes: rectangles, ovals, arcs, and

polygons

1

Terminology: pixel
• A pixel is the smallest visual element on a computer

screen. Essentially, it’s a dot. • The image shown here is the letter S drawn in an area of 20 X 20 square pixels • The more pixels in an image, the smoother the image will appear.

Terminology: resolution
• Resolution: the number of pixels that can be

displayed on a computer monitor. • When the resolution of a monitor is increased, pixels are smaller and closer together, so images appear smaller. • Typical computer monitor and HD television screen resolutions these days are
• 720p: means 1366 pixels across by 768 pixels down • 900p: means 1600 pixels across by 900 pixels down • 1080p: means 1920 pixels across by 1080 pixels down

All of the above are used in HDTVs and newer LCD displays (computer screens).

2

Resolution: Example of 900p
1600 pixels

900 pixels This screen has a total of 1,440,000 pixels

Cartesian Coordinates
• In math class, you learned about the

Cartesian coordinate system. – Uses X (horizontal) and Y (vertical) axes – (0, 0) is at the center (also called the origin) – An increase in X means moving to the right – An increase in Y means moving up. – The Cartesian coordinate system has both positive and negative coordinates

Y x
(0,0)

3

The Java Coordinate System
• Using the Java programming language to draw shapes is

easy. • However, the Java coordinate system is not exactly the same as the Cartesian system. • A computer screen doesn’t have any negative coordinates. • The (0,0) point is located at the top, left corner of the screen.

The Java Coordinate System
• •

An increase in X means moving to the right (same as the Cartesian system). However, an increase in Y means moving down (opposite of the Cartesian system).

• When you draw something in Java, you’re limited by

the screen coordinates. • For example, if the screen has 1600 pixels going across and you want to draw a shape that is 1800 pixels wide, you will not be able to see all of the shape.

4

Java Coordinates
0,0 Y increases → 900 X increases → 1600 pixels

Java Applets
• An applet is a small program that is designed to be

embedded in a web page. • You can use an applet to draw graphics on the screen. • Applets are written in the Java programming language.

5

Java Applets
• Applets are not applications. An application is a program

that runs by itself. • An applet cannot run by itself. It needs another to program to run it… usually a web browser program, like Internet Explorer or Firefox.

Example: Applet program
This is the general structure of an applet program. The instructions are written in Java. Each applet is made up of sections: The largest section is called a class. In this example, the class section contains two other sections: 1) 2) the init section the paint section

6

Example: Applet Program
This is the class. It begins with a “{“ and ends with a “}”

{ and } are called curly braces (or sometimes just braces)

Example: Applet Program
These sections are called methods. There are two methods in this class: init and paint.

7

init and paint methods
• The init method stands for initialization. This method does

some initial work when the applets starts up. For now, we’ll leave the init method empty. • The other important method is the paint method. This method is responsible for all the drawing (drawing lines, circles, and other shapes).

Example: Drawing a Line
• Now, we’ll add a line (a Java instruction) inside the paint

method.

8

Example: Drawing a Line
g.drawLine( 0, 0, 100, 100 );
• Inside the parentheses, there are four numbers. These

numbers are called parameters. They tell the drawLine method where to draw.

Example: Drawing a Line
g.drawLine( 0, 0, 100, 100 );

• The first two parameters give the coordinates of one

endpoint of the line. This line starts at (0,0). • The last two parameters give the coordinates of the other endpoint of the line. This line ends at (100, 100).

9

Example: Drawing a Line
• Where does it draw? – Remember the Graphics coordinate system in Java. (0,0) means the top, left corner of the applet window. • If we run this program in the

web browser or appletviewer, this is what you should see.

Example: Changing the Color
• The line that was drawn is black. Black is the default

drawing color for an applet. • What if we want it to be RED or GREEN? • The answer is simple. We use the g.setColor( ) method. • The instruction to change color must be written before drawing the line.

10

Example: Changing the Color
• Here, we add one more line to change the color to red.

• Make sure you type the word Color with a uppercase C

(Color not color). • Java is case-sensitive. Capital letters and small letters are not the same thing to Java.

Example: Changing the Color
• There are 13 Java colors to choose Color.red Color.green Color.white Color.blue Color.gray Color.lightGray Color.black Color.cyan Color.pink

from:
Color.yellow Color.orange Color.darkGray Color.magenta

11

Designing Your Own Colors
• Colors in Java are represented using combinations of red,

green, blue. (Abbreviated RGB) • Each of the three color components is given an intensity between 0 and 255. 0 means no light. 255 means the brightest light possible. • Example RGB values for Java Colors:
Color.red = (255,0,0) 255 red, no green, no blue Color.green = (0,255,0) no red, 255 green, no blue Color.blue = (0,0,255) no red, no green, 255 blue

Designing Your Own Colors
• Here is a link to a web page that gives RGB values for

lots of different colors.
• http://www.tayloredmktg.com/rgb/

• Remember that Java only has 13 colors already built in.
• If you want to use other colors to draw, you have to create

your own Color name.

12

Designing Your Own Colors
• First, give the new color a name: Color rose = new Color(255,105,180); – rose is the name of the custom color. – You can use other names if you want. • Then, use your color name in a setColor statement. g.setColor(rose);
More info: names in Java must start with a letter, cannot contain spaces or symbols, and cannot be words that Java has reserved.

Designing Your Own Colors
• Suppose we wanted to draw the same polygon we had earlier, but filled

with brown. import javax.swing.*; import java.awt.*; public class MyApplet extends JApplet { public void paint(Graphics g) { Color brown = new Color(165, 80, 40); g.setColor(brown); int [] xcoords = {25, 145, 200, 145, 25}; int [] ycoords = {25, 25, 85, 145, 145}; g.fillPolygon(xcoords, ycoords, 5); } }

13

Drawing Shapes: A Rectangle
• To draw a rectangle, we just

replace the drawLine with drawRect(x, y, width, height) • X and Y are the coordinates of the top, left corner of the rectangle.

• This draws only the border of the

specified rectangle.
• The image to the right shows how

this applet would look.

Drawing Shapes: A Filled Rectangle
• We can also draw a filled rectangle. • As you saw before, the color is

specified by setColor before the shape is drawn.

• Instead of drawRect, we use fillRect to

create a filled rectangle.

14

Drawing Shapes: An Oval
• Drawing an oval is similar to drawing a

rectangle. You just write g.drawOval(x, y, width, height); • X and Y are the coordinates of the top, left corner of an imaginary rectangle around the oval. • An example

• This will draw an orange, unfilled oval.

Drawing Shapes: A Filled Oval
• Using the same technique as filling a

rectangle g.fillOval( 10, 10, 50, 100 ); • We write fillOval instead of drawOval. • An example

• This will draw a cyan, filled oval.

15

Your Turn
Now it’s your turn. Get a piece of graph paper and some colored pencils. Sketch out what you think this applet will draw.

Your Turn
Here’s what the applet will look like. Did your drawing look like this?

16

Drawing Shapes: Arcs
g.drawArc( x, y, width, height, startAngle, arcAngle);
This instruction tells Java to draw a portion of a circle or oval. startAngle is in degrees (remember your trigonometry?) arcAngle tells how many degrees the arc will cover.

Drawing Shapes: Arcs
• This example will draw part of a

circle (an arc).

• The arc starts at 45° and covers

270° (3/4 of a circle). • Notice that the arc is drawn in black (the default color) because we didn’t set a color.

17

Drawing Shapes: A Filled Arc
• This time we will use fillArc rather than drawArc

• The arc is filled and blue. • It starts at 45° and ends at 270°.

Drawing Shapes: Polygons
• A polygon is a series of connected lines. A polygon is

always a closed figure. The end point of the last segment is connected to the starting point.
• Rectangles, triangles, and squares are polygons

• What is the minimum number of lines can a polygon

have?

18

Drawing Shapes: Polygons
• In order to draw a polygon, you must define a set of points

(the vertices) that define the lines of the polygon. • Example: Let’s draw a polygon with five lines. This means we have to define 5 points. • Assume the points are:
Point 1 Point 2 Point 3 Point 4 Point 5 (25, 25) (145, 25) (200, 85) (145, 145) (25, 145)

• Each point has (x,y) coordinates

Drawing Shapes: Polygons
• In order to draw a polygon in Java, we need to define all

the points that will be connected. • First, make a list of the x coordinates (in order) • Next, make a list of the y coordinates (in order) • Then, add instructions to the applet to store these lists of coordinates.

19

Drawing Shapes: Polygons
• A list of values is called an array. • To define an array for the x coordinates, we write:

int int

xcoords [ ] = {25, 145, 200, 145, 25}; ycoords [ ] = {25, 25, 85, 145, 145};

• To define an array for the y coordinates, we write:

Note: the arrays can be named whatever you want. I chose xcoords and ycoords because those are meaningful names.

Drawing Shapes: Polygons
• Now we can include these arrays in our program to draw a polygon. import javax.swing.*; import java.awt.*; public class MyApplet extends JApplet { public void paint(Graphics g) { int xcoords [ ] = {25, 145, 200, 145, 25}; int ycoords [ ] = {25, 25, 85, 145, 145}; g.drawPolygon(xcoords, ycoords, 5); } }

• The third parameter to the drawPolygon method is the

number of vertices in the polygon.

20

Drawing Shapes: Filled polygons
• To create a filled polygon just replace drawPolygon with

fillPolygon. import javax.swing.*; import java.awt.*; public class MyApplet extends JApplet { public void paint(Graphics g) { int [] x = {25, 145, 200, 145, 25}; int [] y = {25, 25, 85, 145, 145}; g.fillPolygon(x, y, 5); } }

Drawing Text on the Applet
• Text can be displayed on an applet with the drawString

method. • To display the word "Hello" near the left side of the applet window, you would use the following:
g.drawString ( "Hello", 10, 50 );

Text you want to display, surrounded by double quotes.

X-coordinate of the bottom, left corner of the text.

Y-coordinate of the bottom, left corner of the text.

21

End of Graphics in Java
• You’re now ready to begin the Graphics lab assignments. • After you have finished the lab assignments, take the

Graphics quiz.

22