lecture 7 basic graphics l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Lecture 7 Basic Graphics PowerPoint Presentation
Download Presentation
Lecture 7 Basic Graphics

Loading in 2 Seconds...

play fullscreen
1 / 35

Lecture 7 Basic Graphics - PowerPoint PPT Presentation


  • 487 Views
  • Uploaded on

Lecture 7 Basic 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lecture 7 Basic Graphics' - paul


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
lecture 7 basic graphics
Lecture 7Basic Graphics

Instructors:

Fu-Chiung Cheng

(鄭福炯)

Associate Professor

Computer Science & Engineering

Tatung Institute of Technology

1

outline
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

1

the graphics class
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

2

the coordinate system
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

3

the coordinate system5

X

<0, 0>

x

y

<x, y>

<width-1, height-1>

Y

The Coordinate System

4

slide6

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

color
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

5

color8
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

6

slide9

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

xor mode
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)

7

slide11

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

drawing shapes
Drawing Shapes
  • The Graphics class contains methods for drawing several specific shapes:
    • lines, ovals, rectangles, arcs, polygons, and polylines
  • Most shapes can be drawn filled or unfilled
  • A line, drawn with the drawLine method, is always one pixel wide and cannot be filled

8

ovals
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

9

ovals14
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

10

slide15

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>

...

rectangles
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

11

rectangles17
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)

12

slide18

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);

slide19

// 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

slide20
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)

13

slide21

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

slide22

90

-270

45

-315

0

360

-360

180

-180

270

-90

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

14

slide23
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

15

polygons
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

16

slide25

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

polylines
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

17

slide27

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

fonts
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

18

fonts29
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

19

slide30

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

animations
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.

20

slide32

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

slide33

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

slide34

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
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.