1 / 35

Lecture 7 Basic Graphics

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

paul
Download Presentation

Lecture 7 Basic Graphics

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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.

More Related