2. Java Graphics Section 1 - Multi-File Graphics Programs Section 2 - The Coordinate System and Graphics Context g Section 3 - The Java Drawing and Painting Commands Go

3. Java Graphics Section 1 Structure of an Applet Program

4. 3 Structure of a Simple Applet Program Simple painting and drawing applet programs only need one file. This file doesn’t have a main() method like a console program, but has two important methods: 1 – an init() method that can do various kinds of work to set up the applet, like establish the size of the window the applet will be viewed in or initialize important program variables to values. 2 – a paint() method that contains the code for drawing and painting various components that will appear inside the applet window.

5. The GeometryApplet Driver File import javax.swing.*; import java.awt.*; public class GeometryApplet extends JApplet { public void init () { resize(800, 600); } public void paint (Graphics g) { super.paint(g); // ALL OTHER DRAWING AND PAINTING CODE HERE } 4 must have to erase and prepare background of applet window note the parameter g that is the graphics context

6. Java Graphics Section 2 Java’s Coordinate System and The Graphics Context g

7. The Java Graphics Coordinate System Every Java graphics program uses a coordinate system similar to the one used in geometry. Positions of items in a Java graphics window are specified in terms of two- dimensional points (x, y). The main difference is that the origin (0, 0) for a Java graphics window is located at the upper-left corner of a panel or frame. Because you can have several panels in a Java window, each panel has its own coordinate system with its origin in the upper-left corner. 6

8. The Java Graphics Origin Java’s origin x values (horizontal) increase going to the right and y axes (vertical) increase downward (top to bottom). 7

9. Java’s PaintBrush: the Graphics Context g Java has a Graphics class that allows programmers to draw or paint on a panel using a pencil or brush object named g. Every panel that is created maintains this object named g that is formally called the graphics context. You can think of g as a pencil for drawing and at the same time a paint brush for painting. So g has the ability to draw or paint! Shapes drawn on a panel by the Graphics class have a foreground color for g. That way the background color can stay the same while you draw or paint with another color. You can change the foreground color by using g to call the setColor() method as in … g.setColor(Color.yellow); Every time we want to draw or paint, we will use g to call a method. 8

10. Java Graphics Section 3 Java’s Drawing and Painting Commands

11. The drawLine Command To draw a line in Java, you use g with the method named drawLine. The general form of the drawLine command is: g.drawLine(x1, y1, x2, y2); where you are drawing between two points, namely (x1, y1) and (x2, y2). So the line of code: g.drawLine(0, 0, 25, 75); draws a line between the two points (0, 0) and (25, 75). 10

12. The drawRect & fillRect Commands To draw the outline of a rectangle, follow the general form of the drawRect command: g.drawRect(x, y, width, height); To do this you must know the point (x, y) which represent the upper- left corner of the rectangle and you must know the width and height of the rectangle. This will draw the rectangle so that its sides are oriented in either vertical or horizontal directions. You can never draw a rectangle at an angle. (x, y) width height 11

13. The drawRect & fillRect Commands To draw the outline of a rectangle with upper left corner represented by the point (50, 200) that has a width of 300 and a height of 150 use: g.drawRect(50, 200, 300, 150); To paint a rectangle with upper left corner represented by the point (50, 200) that has a width of 300 and a height of 150 use: g.fillRect(50, 200, 300, 150); To draw an outline of a figure, the method name will always start with the word “draw”. To paint a figure, the method name will always begin with the word “fill”. 12

14. drawRoundRect & fillRoundRect To draw the outline of a rounded-rectangle, follow the general form of the drawRoundRect command: g.drawRoundRect(x, y, width, height, arcWidth, arcHeight); Draws the outline of a rounded rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height. The corners are rounded according to the last two parameters. To make them perfectly symmetrical, make the last two values equal. (x, y) width height arcWidth arcHeight 13

15. drawRoundRect & fillRoundRect To draw the outline of a rounded-rectangle with the upper-left corner represented by the point (300, 400) with a width of 100 and a height of 50 that has an arcWidth of 10 and an arcHeight of 10 use: g.drawRoundRect(300, 400, 100, 50, 10, 10); To paint the same rounded-rectangle use: g.fillRoundRect(300, 400, 100, 50, 10, 10); 14

16. The drawOval & fillOval Commands To draw the outline of an oval, follow the general form of the drawOval command: g.drawOval(x, y, width, height); height The height and width values determine the curvature characteristics of the oval 15 (x, y) width Draws the outline of an oval whose upper-left corner is (x, y) and whose dimensions are the specified width and height of an imaginary rectangle that circumscribes the oval.

17. The drawOval & fillOval Commands To draw the outline of an oval with upper left corner represented by the point (50, 200) where the oval is circumscribed by a rectangle with a width of 300 and a height of 150 use: g.drawOval(50, 200, 300, 150); To paint the same oval use g.fillOval(50, 200, 300, 150); 150 The height and width values determine the curvature characteristics of the oval 16 (50, 200) 300

18. The drawArc & fillArc Commands To draw or paint an arc, use one of the following: g.drawArc(x, y, width, height, startAngle, arcAngle); or g.fillArc(x, y, width, height, startAngle, arcAngle); This command draws the outline of an arc that is a portion of an oval. It fits within a rectangle whose upper-left corner is (x, y) and whose dimensions specify the width and height of an oval that the arc is part of. The arc is drawn from startAngle to startAngle + arcAngle. The angles are expressed in degrees. A startAngle of 0 indicates the 3 o'clock position. The arcAngle indicates how much and what direction is swept to draw the arc. It can be positive or negative. A positive arc indicates a counterclockwise rotation, and a negative arc indicates a clockwise rotation from 3 o'clock. 17

19. The drawArc & fillArc Commands Example: draw or paint the arc whose upper-left corner of its imaginary oval is the point (100, 100) where the oval has a width of 50 and a height of 50 and whose startAngle is 90 and whose arcAngle is 270. Code: g.drawArc(100, 100, 50, 50, 90, 270); start angle of 90 0 degrees = 3 o’clock height of 50 width of 50 (100, 100) 270° draw or paint imaginary rectangle that surrounds imaginary oval that the arc is part of. 18

20. drawPolygon & fillPolygon To draw or paint a polygon, use one of the following: g.drawPolygon(xvalues, yvalues, n); or g.fillPolygon(xvalues, yvalues, n); This code draws or paints a polygon where the abscissas (Xs) and ordinates (Ys) of a set of points have been defined in two simple arrays prior to making a call to either of the methods. The parameter n represents the number of sides of the polygon. We usually just place the correct number in place of n. For example, if we are making a triangle with 3 sets of points, then we put 3 in place of n. 19

21. drawPolygon & fillPolygon Example: draw or paint the triangle that has the three points: (x1, y1) = (100, 25)(x2, y2) = (150, 75)(x3, y3) = (200, 50) Here is the code you would need: int [ ] xvalues = {100, 150, 200}; Note how the x values are placed: int [ ] xvalues = {x1, x2, x3}; int [ ] yvalues = {25, 75, 50}; Note how the y values are placed: int [ ] yvalues = {y1, y2, y3}; then you can use: g.drawPolygon(xvalues, yvalues, 3); or g.fillPolygon(xvalues, yvalues, 3); 20

22. The drawString Command To draw a String to a panel use the general formula: g.drawString(str, x, y); where str is a String variable or a literal String value in double quotes, and the point (x, y) indicates the position of where the base line starts for what is to be printed. Example: draw the words "Java Rules" at the point (10, 50). g.drawString("Java Rules", 10, 50);or String str= “Java Rules”; g.drawString(str, 10, 50); Java Rules (10, 50) baseline start of baseline 21

23. Changing Fonts for drawString() When you run a JFrame or JApplet program, Eclipse or other IDEs will always use your default system font when you call drawString(). To change the drawing font, you need to define a font then set the drawing font to that font. The code is on the next slide: 22

24. Changing Fonts for drawString() Here are the steps to change the drawing font: Step 1. Define a font. Step 2. Set the font. Step 3. Draw the string. Example: Step 1. Font font1 = new Font ("Arial", Font.BOLD, 18); Step 2.g.setFont(font1); Step 3. g.drawString("Java Rules", 100, 100); The general form of the Font constructor line is: Font font = new Font (,, ); The Font Name must be in double quotes. The Font Style is usually a constant from the Font class. It can be: PLAIN, BOLD, ITALIC, or BOLD + ITALIC. 23

25. The getWidth() and getHeight() Methods The width and height of a panel can be found using the getWidth() and getHeight() methods, respectively. They return int values that give the number of pixels wide or the number of pixels high of the panel. This can be helpful for things like centering something in the center of a panel no matter what its size is. When calling these methods, do not use g.getWidth() or g.getHeight()! One good way to use them is as parameters when using the drawString method: g.drawString(“Go Bearcats”, getWidth() / 2, getHeight() / 2); 24

26. Drawing and Painting Web Page The drawing and painting commands web page discusses these precedding commands and also tells you how to change the font if you don’t like the default font when using drawString. http://ww2.kcd.org/FundOfProg/special/JavaGraphicsCommands.html 25

27. The JPanel paintComponent() Method When we create a class like ColorPanel that extends JPanel, we will always have a paintComponent() method, and the first line of code in it must always be …. super.paintComponent (g); This line of code produces a fresh blank panel for the ColorPanel class to use and prepares it for drawing or painting. Your code will follow that line of code. Your method paintComponent() in ColorPanel will automatically be called by the JVM when the panel needs to be drawn. If someone is viewing your panel and decides to resize the window, then the JVM will automatically call your paintComponent() method which will then call super.paintComponent(g); (which erases the panel) then your drawing code will be executed and the panel will be redisplayed. 26

28. Over-Riding the paintComponent() Method Occasionally, you will be over-riding methods! You are doing it for the first time in the ColorPanel class! If you could go look at the code of the JPanel class, you would find a method with the method signature of ….. public void paintComponent (Graphics g) But you have a method with that exact method signature in your ColorPanel class and the class definition of your ColorPanel class is …. public class ColorPanel extends JPanel By including “extends JPanel” in your class definition line and the method paintComponent with that exact method signature, then you are “over-riding” the paintComponent method. (See next slide) 27

29. Over-Riding the paintComponent() Method By over-riding the method paintComponent, you are telling Java to NOT execute the paintComponent method of the JPanel class but instead to execute your paintComponent method that has your drawing code. However, to make sure the panel is repainted properly with the background color when resized we need to call super.paintComponent and it has to be the first line of code in your paintComponent method. 28