1

Lecture 7Basic Graphics

Instructors:

Fu-Chiung Cheng

(鄭福炯 )

Associate Professor

Computer Science & Engineering

Tatung Institute of Technology

1

Outline

• the coordinate system for Java graphics• the use of color• drawing shapes such as lines, ovals, rectangles,

etc.• the use of fonts• basic animation techniques

2

The Graphics Class

• An object of the Graphics class represents a particular drawing surface

• It defines a graphics context in which drawn shapes will be rendered

• The Graphics class contains methods for drawing various shapes and controlling visual aspects like font and color

• An applet has a graphics context, which is automatically passed to the paint method when it is called

3

The Coordinate System

• A simple two-dimensional coordinate system exists for each graphics context (or drawing surface)

• Each point on the coordinate system represents a single pixel

• The top left corner of the area is coordinate <0, 0>• A drawing surface has a particular width and height• Anything drawn outside of that area will not be

visible

4

The Coordinate System

<0, 0>

<x, y>

<width-1, height-1>

x

y

Y

X

import java.applet.Applet;import java.awt.*;public class Coordinates extends Applet { public void paint (Graphics page) { // setSize (300, 200); // an abstract method // of Component class resize(400,300); // use resize page.drawRect (0, 0, 299, 199); page.drawLine (50, 50, 250, 100); page.drawString ("<50, 50>", 25, 45); page.drawString ("<250, 100>", 225, 115); } // method paint } // class Coordinates

5

Color

• The Color class is used to define and manage the color in which shapes are drawn

• Colors are defined by their RGB value,

( red, green, blue) (8 bits/color).• Each drawing surface has

– a foreground color (setColor) and– a background color (setBackground)

• The setColor is a method of Graphic setBackground is a methods of the Applet class

6

Color

• The Color class contains several predefined colors, defined as public, static constants

• See Nature.java(next page)• Many other colors can be defined using the

constructor of the Color class• Over 16 million colors can be defined, but humans

cannot distinguish between many similar colors• Furthermore, the hardware of most systems has

limitations to the color options available

import java.applet.Applet;import java.awt.*;public class Nature extends Applet { public void paint (Graphics page) { setBackground (Color.white); page.setColor (Color.red); page.drawRect (10, 15, 125, 85); page.setColor (Color.green); page.drawString ("Nature's first green", 25, 45); page.setColor (Color.yellow); page.drawString ("is gold.", 50, 75); } // method paint } // class Nature

7

XOR Mode

• Drawing in normal mode causes shapes of the same color to blend together

• Drawing in XOR mode causes the overlapping portions of the shapes to be rendered in a contrasting color

• This effect can be used to "erase" a shape by redrawing it in the same color in the same spot while in XOR mode

• See XOR_Demo.java (next page)

import java.awt.*;import java.applet.*;public class XOR_Demo extends Applet { public void paint (Graphics page) { page.fillRect (10,10,20,20); // disjoint page.fillRect (40,10,20,20); page.fillRect (100,10,20,20); // overlap page.fillRect (110,20,20,20); page.fillRect (140,10,20,20); // draw in the same position page.fillRect (140,10,20,20); page.setXORMode (Color.gray); page.fillRect (10,110,20,20); page.fillRect (40,110,20,20); page.fillRect (100,110,20,20); page.fillRect (110,120,20,20); page.fillRect (140,110,20,20); page.fillRect (140,110,20,20); } // method paint } // class XOR_Demo

8

Drawing Shapes

• The Graphics class contains methods for drawing several specific shapes:– lines, ovals, rectangles, arcs, polygons, and pol

ylines• Most shapes can be drawn filled or unfilled• A line, drawn with the drawLine method, is alw

ays one pixel wide and cannot be filled

9

Ovals

• An oval is defined by its bounding rectangle:

• The methods that draw an oval take four parameters, all integers:

drawOval(x, y, width, height)

fillOval(x, y, width, height)

width

height

10

Ovals

• The first two parameters are the <x, y> coordinate of the top-left corner of the bounding rectangle

• The third and fourth parameters specify the width and height of the bounding rectangle

• The drawOval method draws an unfilled oval and the fillOval method draws a filled (opaque) oval

• See Ovals.java and Rotating_Disk.java

import java.applet.Applet;import java.awt.*;public class Ovals extends Applet { public void paint (Graphics page) { page.drawOval (20, 20, 30, 50); page.drawOval (70, 40, 60, 10); page.drawOval (150, 30, 30, 30); // a circle page.fillOval (30, 100, 50, 30); page.drawRect (100, 100, 50, 30); // bounding rectangle page.fillOval (100, 100, 50, 30); } // method paint } // class Ovals

...<APPLET CODE="Ovals.class" WIDTH=300 HEIGHT=150></APPLET>...

11

Rectangles

• Rectangles can be drawn– filled or unfilled– with squared or rounded corners– with a slight three-dimensional effect or not

• The primary parameters for all rectangle drawing methods define the upper left corner of the rectangle and its width and height

• The shape of the rounded corner of a rounded rectangle are defined by an arc width and height

12

Rectangles

• A three dimensional rectangle is shown using a small highlight on two sides of the rectangle

• The highlight appears on the bottom and right or the top and left as specified by a boolean parameter to the 3D drawing methods

• See Rectangles.java (Next two pages)

import java.applet.Applet;import java.awt.*;public class Rectangles extends Applet { public void paint (Graphics page) { setBackground (Color.white); setForeground (Color.gray); // Rectangles: page.drawRect (20, 20, 30, 50); page.drawRect (70, 40, 60, 10); page.drawRect (150, 30, 30, 30); // a square page.fillRect (200, 20, 50, 30); page.fillRect (270, 20, 20, 40); // Rounded Rectangles: page.drawRoundRect (20, 120, 50, 50, 25, 25); page.drawOval (20, 120, 25, 25); // oval page.drawRoundRect (90, 130, 40, 30, 40, 15); page.fillRoundRect (150, 120, 40, 40, 10, 30); page.fillRoundRect (210, 130, 50, 20, 15, 15);

// 3D Rectangles: page.draw3DRect (20, 220, 50, 50, true); page.fill3DRect (90, 220, 50, 50, true); page.draw3DRect (160, 220, 50, 50, false); page.fill3DRect (230, 220, 50, 50, false);

} // method paint } // class Rectangles

13

Arcs

• An arc is defined as a segment of an oval• The first four parameters to the arc drawing methods

define the bounding rectangle of the oval (top left corner, width, and height)

• The other two parameters define the start angle and the arc angle

• The start angle indicates where the arc begins and the arc angle determines how far the arc sweeps across its defining oval

• See Arcs.java(next page)

import java.applet.Applet;import java.awt.*;public class Arcs extends Applet { public void paint (Graphics page) { page.drawArc (10, 10, 50, 50, 45, 225); page.drawArc (70, 10, 30, 70, -180, 180); page.fillArc (130, 10, 60, 60, -180, -90); page.fillArc (190, 10, 50, 50, 45, 270); page.fillArc (250, 10, 80, 40, -225, 180); } // method paint } // class Arcs

14

Arcs

• The start angle can be specified using both positive and negative values:

90-270 45

-315

0360-360

270-90

180-180

15

Arcs

• An arc angle can also be positive or negative• A positive arc angle sweeps counterclockwise, and

a negative arc angle sweeps clockwise• Therefore, the same arc can be specified using

four different combinations of start and arc angles• Arcs can also be filled or unfilled

16

Polygons

• A polygon is a multisided figure defined by a series of ordered points

• Line segments connecting the points form the polygon• The points are defined by corresponding arrays of x

and y coordinate values, and can already be incorporated into an object of the Polygon class

• Polygons are closed, forming a line segment from the last point back to the first

• See Polygons.java

import java.applet.Applet;import java.awt.*;public class Polygons extends Applet { private int[] xset1 = {110, 110, 115, 120, 150, 135}; private int[] yset1 = {10, 40, 30, 50, 15, 7}; private int[] xset2 = {195, 170, 170, 195, 220, 220}; private int[] yset2 = {10, 20, 40, 50, 40, 20}; private int[] xset3 = {110, 150, 110, 150, 110}; private int[] yset3 = {70, 70, 110, 110, 70}; private Polygon poly = new Polygon(); public void paint (Graphics page) { page.drawPolygon (xset1, yset1, 6); page.drawPolygon (xset2, yset2, 6); page.fillPolygon (xset3, yset3, 5); poly.addPoint (170, 70); poly.addPoint (170, 90); poly.addPoint (190, 110); poly.addPoint (220, 90); page.fillPolygon (poly); // closed automatically } // method paint } // class Polygons

17

Polylines

• A polyline is similar to a polygon except that it is not closed

• That is, there is no line segment from the last point back to the first unless explicitly specified

• They are convenient for specifying certain kinds of complex shapes

• Polylines cannot be filled• See Polylines.java

import java.applet.Applet;import java.awt.*;public class Polylines extends Applet { private int[] xset1 = {110, 110, 115, 120, 150, 135}; private int[] yset1 = {10, 40, 30, 50, 15, 7}; private int[] xset2 = {195, 170, 170, 195, 220, 220}; private int[] yset2 = {10, 20, 40, 50, 40, 20}; public void paint (Graphics page) { page.drawPolyline (xset1, yset1, 6); page.drawPolyline (xset2, yset2, 6); } // method paint } // class Polylines

18

Fonts

• Each computer system supports a specific set of fonts

• A font defines the look of each character when it is printed or drawn

• The Font class provides methods for specifying fonts in a Java program

• The setFont method defines the current font for a program

19

Fonts

• A font is defined using the Font class constructor and a combination of:– font name– font style: plain, bold, italic, or bold+italic– font size, in points

• Constants are defined in the Font class to specify the font style

• See Entropy.java

import java.applet.Applet;import java.awt.*;public class Entropy extends Applet { private String quote = "Entropy isn't what it used to be.";public void paint (Graphics page) { page.setFont (new Font ("TimesRoman", Font.PLAIN, 12)); page.drawString (quote, 10,20); page.setFont (new Font ("TimesRoman", Font.BOLD, 14)); page.drawString (quote, 10,40); page.setFont (new Font ("Helvetica", Font.ITALIC, 16)); page.drawString (quote, 10,60); page.setFont (new Font ("Helvetica", Font.PLAIN, 18)); page.drawString (quote, 10,80); } // method paint } // class Entropy

20

Animations

• Simple animations: drawing a shape, erasing it, then drawing it again in a slightly altered position

• Erasing can be accomplished through careful use of XOR mode

• Timing must be controlled so that the animation does not move too fast

• See BouncingBall.java (appletviewer will be too fast) use Netscape or IE.

public class BouncingBall extends Applet { private final int PAUSE = 100000; private final int SIZE = 300; private Ball ball = new Ball(150, 10, 250, 200); private Graphics page; public void init() { setVisible(true); //setSize (SIZE, SIZE); page = getGraphics(); page.setXORMode (getBackground()); } // method init public void start() { for (int pause = 1; pause < PAUSE; pause++); while (ball.moving()) ball.bounce (page); ball.drawBall(page); } // method start} // class BouncingBall

class Ball { private final int MOVE = 1; private final float DISTANCE = 0.97f; private final int SIZE = 20; private final int PAUSE = 1000000; private int x; private int startY; private int endY; private int length; private boolean movingUp = true; Ball (int newX,int newStartY,int newEndY,int newLength) { x = newX; startY = newStartY; endY = newEndY; length = newLength; } // constructor Ball void move() { if (movingUp) endY = endY - MOVE; else endY = endY + MOVE; } // method move

void drawBall (Graphics page) { page.fillOval (x-(SIZE/2), endY, SIZE, SIZE); page.drawLine (x, startY, x, endY); } // drawBall public boolean moving () { return length !=0; } // method moving public void bounce (Graphics page) { for (int count = 1; count < length; count += MOVE) { drawBall(page); for (int pause = 1; pause < PAUSE/length; pause++); drawBall(page); move(); } movingUp = !movingUp; length = (int) (DISTANCE * length); } // method bounce } // class Ball

Conclusion

• Graphic class represents a particular drawing surface and contains methods for drawing shapes on it. Shapes: ovals, rectangles, lines, polygons, polylines string• Any portion drawn outside of the drawing surface will not be displayed.• Color class defines several common colors.