Lecture 7 Basic Graphics - PowerPoint PPT Presentation

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

play fullscreen
1 / 35
Download Presentation
Lecture 7 Basic Graphics
497 Views
Download Presentation

Lecture 7 Basic Graphics

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Lecture 7Basic Graphics Instructors: Fu-Chiung Cheng (鄭福炯) Associate Professor Computer Science & Engineering Tatung Institute of Technology 1

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

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

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

  5. X <0, 0> x y <x, y> <width-1, height-1> Y The Coordinate System 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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