Using Graphics Building Java Programs Supplement 3G Introduction - PowerPoint PPT Presentation

Using Graphics Building Java Programs Supplement 3G

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.

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

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.

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

Try it out /** * Program that will be used to show the basics for learning * graphics * @author Your Name */ public class LearningGraphics { /** * Declares the variables, computes the position, and prints the * results. * @param 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

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+ (200, 100) y+ 7

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

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

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

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.

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 0-255 Color name = new Color( red , green , blue ); – Example: Color brown = new Color(192, 128, 64); 1 2

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 3

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

Outlining Shapes o draw a colored shape with an outline, first fill it, then • T 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

Drawing with Loops • 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++) { // x y w h g.fillOval(100 + 20 * i , 5 + 20 * 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

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(450 - 20 * i, 5 + 20 * i, 50, 50); g.setColor(Color.BLUE); g.drawRect(450 - 20 * i, 5 + 20 * i, 50, 50); } g.setColor(Color.WHITE); for (int x = 1; x <= 4; x++) { for (int y = 1; y <= 9; y++) { g.drawString("Java", 500 - x * 40, 500 - y * 25); } } 17

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

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

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, 100); 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); } } 20

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); // cyan background g.fillRect(20, 35, 100, 100); g.setColor(Color.WHITE); // white "bjp" text g.drawString("BJP", 70, 55); g.setColor(new Color(191, 118, 73)); // orange for (int i = 0; i < 10; i++) { //"bricks" g.fillRect(20, 35 + 10 * i, 10 + 10 * i, 9); } } } 21