Using Graphics. Building Java Programs Supplement 3G

Transcription

1 Using Graphics Building Java Programs Supplement 3G

2 Introduction So far, you have learned how to: output to the console break classes/programs into static methods store and use data with variables write for loops for repetitive tasks pass parameters to a method return values from a method use String and Scanner objects Now you will have a way to output to the user other than using the console.

3 Review Calling static methods from another class: Classname.methodname(actual parameters); double square = Math.pow (x, 2); Calling (non-static) methods on an instance of a class (object): variablename.methodname(actual parameters); Scanner console = new Scanner(System.in); int userinput = console.nextint();

4 Graphical Objects We will need the following three objects for drawing graphics in Java: DrawingPanel: A window on the screen. Not part of Java; provided by the textbook authors. Graphics: A "pen" to draw shapes and lines on a window. Color: Colors in which to draw shapes. Like with String and Scanner, you will not have to write these classes on your own but will simply use them.

5 DrawingPanel Basics DrawingPanel represents a window on the screen, or the canvas on which the graphics will be drawn. Since DrawingPanel is an object type, we must use the constructor to create a new instance: DrawingPanel name = new DrawingPanel(width, height); The constructor takes two parameters which represent the width and height of the drawing area. Example: DrawingPanel panel = new DrawingPanel(500,500);

6 Try it out /** * Program that will be used to show the basics for learning * graphics Your Name */ public class LearningGraphics { /** * Declares the variables, computes the position, and prints the * results. args command line arguments (not used) */ public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(500, 500); From Moodle site, download the following files into the same folder: DrawingPanel.java LearningGraphics.java Compile both and then execute: $ java LearningGraphics

7 Coordinate System Each (x, y) position is a pixel ("picture element"). Position (0, 0) is at the window's top-left corner. x increases rightward and the y increases downward. The rectangle from (0, 0) to (200, 100) looks like this: (0, 0) x+ y+ (200, 100) 7

8 Graphics Basics Graphics represents the pen or paint that we will use to draw lines and shapes on the canvas (DrawingPanel). Graphics is part of the Java Class Library. Since Graphics belongs to a package named java.awt (Abstract Window Toolkit), we will need to include the following import statement in our programs that use Graphics: import java.awt.*; Add this import statement to the top (as the first line) of LearningGraphics.java Since we are using DrawingPanel, we will not have to construct new Graphics objects. Instead, we will use the DrawingPanel's getgraphics() method. We will access the Graphics object as follows: Graphics g = panel.getgraphics();

9 Graphics methods We will discuss some of the Graphics methods here; you can read about all of the Graphics methods in its API. drawline(x1, y1, x2, y2): draws a line between the points (x1, y1) and (x2, y2) drawoval(x, y, width, height): draws the outline of the largest oval that fits within the specified rectangle drawrect(x, y, width, height): draws the outline of the specified rectangle drawstring(message, x, y): draws the given text with its lower-left corner at (x, y) filloval(x, y, width, height): fills the largest oval that fits within the specified rectangle using the current color fillrect(x, y, width, height): fills the specified rectangle using the current color setcolor(color): sets this graphics context's current color to the specified color (all subsequent graphics operations using this graphics context use this specified color) setfont(font): sets this graphics context's current font to the specified font (all subsequent strings drawn using this graphics context use this specified font) 9

10 Try it out Let's modify LearningGraphics.java include two rectangles---one filled in and one outlined. Add the lines below to the main method of your LearningGraphics Class (after the creation of the DrawingPanel object): Graphics g = panel.getgraphics(); g.fillrect(100, 100, 100, 200); g.drawrect(0, 0, 100, 100); 10

11 Color Basics Color represents the color that we will draw lines and shapes on the canvas (DrawingPanel) with. Color is also part of the java.awt package. We will discuss some of the Color constants and methods here. You can read about all of the Color constants and methods in its API. In the same way that we used Math.PI for the value of pi, we can use the Color constants to access the predefined colors.

12 Specifying Color Can use predefined Color class constants: Color.CONSTANT_NAME where CONSTANT_NAME is one of: BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, YELLOW Or create one using Red-Green-Blue (RGB) values of Color name = new Color(red, green, blue); Example: Color brown = new Color(192, 128, 64); 1

13 Using Color colors Pass a Color to Graphics object's setcolor method Subsequent shapes will be drawn in the new color. g.setcolor(color.black); g.fillrect(10, 30, 100, 50); g.drawline(20, 0, 10, 30); g.setcolor(color.red); g.filloval(60, 40, 40, 70); Pass a color to DrawingPanel's setbackground method The overall window background color will change. Color brown = new Color(192, 128, 64); panel.setbackground(brown); 1

14 Try it out Let's modify LearningGraphics.java Change the background to red and add a blue circle Add the red lines below to the main method of your LearningGraphics class: public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(500, 500); panel.setbackground(color.red); Graphics g = panel.getgraphics(); g.fillrect(100, 100, 100, 200); g.drawrect(0, 0, 100, 100); g.setcolor(color.blue); g.filloval(200, 200, 100, 100); 14

15 Outlining Shapes To draw a colored shape with an outline, first fill it, then draw the same shape in the outline color // inner blue filled circle (from last slide) g.setcolor(color.blue); g.filloval(200, 200, 100, 100); Add the lines below to the end of the main method of your LearningGraphics class: // white outline of circle g.setcolor(color.white); g.drawoval(200, 200, 100, 100); 15

16 The x,y,w,h expressions can use the loop counter variable: panel.setbackground(color.yellow); g.setcolor(color.red); for (int i = 1; i <= 10; i++) { Drawing with Loops // x y w h g.filloval( * i, * i, 50, 50); Nested loops can be used with graphics: g.setcolor(color.blue); for (int x = 1; x <= 4; x++) { for (int y = 1; y <= 9; y++) { g.drawstring("java", x * 40, y * 25); 16

17 Try it Out Add these lines to the end of the main method of your LearningGraphics class: for (int i = 1; i <= 5; i++) { g.setcolor(color.yellow); g.fillrect( * i, * i, 50, 50); g.setcolor(color.blue); g.drawrect( * i, * i, 50, 50); g.setcolor(color.white); for (int x = 1; x <= 4; x++) { for (int y = 1; y <= 9; y++) { g.drawstring("java", x * 40, y * 25); 17

18 Polygons Objects that represent arbitrary shapes Add points to a Polygon using its addpoint(x,y) method. Example: DrawingPanel p = new DrawingPanel(100, 100); Graphics g = p.getgraphics(); g.setcolor(color.green); Polygon poly = new Polygon(); poly.addpoint(10, 90); poly.addpoint(50, 10); poly.addpoint(90, 90); g.fillpolygon(poly); 18

19 Try it Out Let s add a magenta triangle to your LearningGraphics class: g.setcolor(color.magenta); Polygon poly = new Polygon(); poly.addpoint(10, 90); poly.addpoint(50, 10); poly.addpoint(90, 90); g.fillpolygon(poly); Once your Drawing Panel looks like this, Submit your LearningGraphics.java file. 19

20 Superimposing Shapes When 2 shapes occupy the same pixels, the last drawn "wins." import java.awt.*; public class Car { public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(200, panel.setbackground(color.light_gray); Graphics g = panel.getgraphics(); g.setcolor(color.black); g.fillrect(10, 30, 100, 50); g.setcolor(color.red); g.filloval(20, 70, 20, 20); g.filloval(80, 70, 20, 20); g.setcolor(color.cyan); g.fillrect(80, 40, 30, 20); 100); 20

21 BJP Book // Draws a Building Java Programs textbook // with DrawingPanel. import java.awt.*; public class Book { public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(200, 150); panel.setbackground(color.white); Graphics g = panel.getgraphics(); g.setcolor(color.cyan); g.fillrect(20, 35, 100, 100); g.setcolor(color.white); g.drawstring("bjp", 70, 55); g.setcolor(new Color(191, 118, for (int i = 0; i < 10; i++) { // cyan background // white "bjp" text 73)); // orange //"bricks" g.fillrect(20, * i, * i, 9); 21

22 Using Methods to Draw Shapes To draw in a method, you must pass Graphics // Draws many BJP textbooks using parameters. import java.awt.*; public class Book2 { public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(450, panel.setbackground(color.white); Graphics g = panel.getgraphics(); // draw three books at different locations g to it. 180); drawbook(g, drawbook(g, drawbook(g, 20, 35); 150, 70); 300, 10);... 22

23 ..., cont'd. // Draws a BJP textbook at the given public static void drawbook(graphics g.setcolor(color.cyan); g.fillrect(x, y, 100, 100); x/y position. g, int x, int y) { // cyan background g.setcolor(color.white); g.drawstring("bjp", x + 50, // y + 20); white "bjp" text g.setcolor(new Color(191, 118, 73)); for (int i = 0; i < 10; i++) { // g.fillrect(x, y + 10 * i, 10 * (i orange "bricks" + 1), 9); 23

24 Generalize for any size // Draws many sized BJP textbooks using parameters. import java.awt.*; public class Book3 { public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(520, 240); panel.setbackground(color.white); Graphics g = panel.getgraphics(); // draw three books at different locations/sizes drawbook(g, drawbook(g, drawbook(g, 20, 35, 100); 150, 70, 60); 300, 10, 200);... 24

25 Resizable solution, cont'd.... // Draws a book of the given size at the given position. public static void drawbook(graphics g, int x, int y, int size) { g.setcolor(color.cyan); // cyan background g.fillrect(x, y, size, size); g.setcolor(color.white); g.drawstring("bjp", x + size/2, // white "bjp" text y + size/5); g.setcolor(new Color(191, 118, 73)); for (int i = 0; i < 10; i++) { g.fillrect(x, y + size/10 * i, size/10 * (i + 1), size/10-1); // orange "bricks" // x // y // width // height 25

26 More DrawingPanel Methods panel.clear(); Erases any shapes that are drawn on the drawing panel. panel.setwidth(width); panel.setheight(height); panel.setsize(width, height); Changes the drawing panel's size to the given value(s). panel.save(filename); Saves the image on the panel to the given file (String). panel.sleep(ms); Pauses the drawing for the given number of milliseconds. 26

27 Animation with sleep DrawingPanel's sleep method pauses your program for a given number of milliseconds. You can use sleep to create simple animations. DrawingPanel panel = new DrawingPanel(250, Graphics g = panel.getgraphics(); 200); g.setcolor(color.blue); for (int i = 1; i <= 10; i++) { g.filloval(15 * i, 15 * i, 30, panel.sleep(500); 30); 27

28 Face.java import java.awt.*; /** * Draws a face YOUR NAME */ public class Face { /** * Declares the variables, computes the * position, and prints the results. args command line arguments (not used) */ public static void main(string[] args) { DrawingPanel panel = new DrawingPanel(220, 150); Graphics g = panel.getgraphics(); g.setcolor(color.black); g.drawoval(10, 30, 100, 100); // face outline g.setcolor(color.blue); g.filloval(30, 60, 20, 20); // eyes g.filloval(70, 60, 20, 20); g.setcolor(color.red); g.drawline(40, 100, 80, 100); // mouth

29 In-class Exercise Face.java Go to the moodle page and work on the Face.java assignment. Modify the Face.java program to draw the graphical output shown below. Do so by writing a parameterized static method that draws a face at a given position public static void drawface(graphics g, int x, int y) The window size should be changed to 320 x 180 pixels The two faces' top-left corners are at (10, 30) and (150, 50). This is Exercise 3G.3 in the textbook. Magic numbers are okay for this program.

30 Lab Exercise Face2.java Go to the moodle page and work on the Face2.java assignment. Modify your Face program from the previous exercise into a new class Face2 to draw the new output shown below. The window size should be changed to 520 x 180 pixels The faces' top-left corners are at (10, 30), (110, 30), (210, 30), (310, 30), and (410, 30). Draw the figures using a loop to avoid redundancy. This is Exercise 3G.4 in the textbook. Magic numbers are okay for this program.