1. Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 7/25/01

2. OutlineOutline ä Basics of graphics ä Pixels ä Coordinates ä The Graphics class ä Graphics contexts ä Drawing in Java ä Lines ä Shapes ä Colors ä The Color class ä RGB ä Basics of graphics ä Pixels ä Coordinates ä The Graphics class ä Graphics contexts ä Drawing in Java ä Lines ä Shapes ä Colors ä The Color class ä RGB

3. PixelsPixels ä Consider a black and white monitor – everything displayed on the monitor, including text and drawings, is made up of pixels. ä A pixel is a picture element – a single element of a two-dimensional image. ä What does a diagonal line look like from up close? ä Consider a black and white monitor – everything displayed on the monitor, including text and drawings, is made up of pixels. ä A pixel is a picture element – a single element of a two-dimensional image. ä What does a diagonal line look like from up close?

4. CoordinatesCoordinates ä Like elements of a two-dimensional array, each pixel is referenced by coordinates that start in the upper left corner. ä For example, the left-most pixel of the line is referenced by the coordinates (4, 9). ä Unlike 2D arrays, the column comes 1 st and the row comes 2 nd. ä Like elements of a two-dimensional array, each pixel is referenced by coordinates that start in the upper left corner. ä For example, the left-most pixel of the line is referenced by the coordinates (4, 9). ä Unlike 2D arrays, the column comes 1 st and the row comes 2 nd. 012345678910… x 0 1 2 3 4 5 6 7 8 9 11 y

5. The Graphics Class ä To display images in Java, we must use the Graphics class.  import java.awt.* ä The first step is to construct a Graphics object.  An instance of the Graphics class is called a graphics context, and is usually given the identifier name g. ä A graphics context is a rectangular area filled with pixels, used to store an image. ä The Graphics class has a collection of instance methods that we can use to create images. ä To display images in Java, we must use the Graphics class.  import java.awt.* ä The first step is to construct a Graphics object.  An instance of the Graphics class is called a graphics context, and is usually given the identifier name g. ä A graphics context is a rectangular area filled with pixels, used to store an image. ä The Graphics class has a collection of instance methods that we can use to create images.

6. Drawing in Java  The simplest instance method provided by the Graphics class is the drawLine() method.  It takes 4 arguments – drawLine(x 1, y 1, x 2, y 2 ), where ( x 1, y 1 ) are the coordinates of one endpoint of the line and ( x 2, y 2 ) are the coordinates of the other endpoint.  For example, if we’ve constructed a graphics context g, then g.drawLine(4, 9, 24, 2) will create the line shown in previous slides.  The simplest instance method provided by the Graphics class is the drawLine() method.  It takes 4 arguments – drawLine(x 1, y 1, x 2, y 2 ), where ( x 1, y 1 ) are the coordinates of one endpoint of the line and ( x 2, y 2 ) are the coordinates of the other endpoint.  For example, if we’ve constructed a graphics context g, then g.drawLine(4, 9, 24, 2) will create the line shown in previous slides.

7. Drawing in Java ä There are also methods that create shapes.  g.drawRect(x, y, width, height) creates the outline of a rectangle whose top left corner is at (x, y) and that has the specified width and height.  Example: g.drawRect(4, 3, 9, 5);  Similarly, g.fillRect() creates a filled in rectangle. ä There are also methods that create shapes.  g.drawRect(x, y, width, height) creates the outline of a rectangle whose top left corner is at (x, y) and that has the specified width and height.  Example: g.drawRect(4, 3, 9, 5);  Similarly, g.fillRect() creates a filled in rectangle. 012345678910… 0 1 2 3 4 5 6 7 8 9 11 9 5

8. Drawing in Java  g.drawOval(x, y, width, height) creates an oval that’s enclosed in a rectangle that has the given coordinates.  Similarly, g.fillOval() creates a filled in oval. ä How would you draw a circle?  g.drawOval(x, y, width, height) creates an oval that’s enclosed in a rectangle that has the given coordinates.  Similarly, g.fillOval() creates a filled in oval. ä How would you draw a circle? 012345678910… 0 1 2 3 4 5 6 7 8 9 11

9. Drawing in Java  g.drawString(str, x, y) can be used to display text in the drawing window. ä The first argument is a String – whatever you want to display. ä The second and third arguments give the coordinates of the bottom left corner of the text.  Example: g.drawString(“Hello”, 100, 50);  g.drawString(str, x, y) can be used to display text in the drawing window. ä The first argument is a String – whatever you want to display. ä The second and third arguments give the coordinates of the bottom left corner of the text.  Example: g.drawString(“Hello”, 100, 50);

10. ä How might we display a tic-tac-toe board? 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 01234567891012141618202224 Drawing in Java

11. The Color Class  Two more methods for displaying graphics are setColor() and setBackground().  setColor() defines the color of whatever is drawn next (it’s an instance method of the Graphics class).  setBackground() defines the background color (It’s a static method). ä These methods each take one argument – that argument must be an instance of the Color class. ä The Color class defines 13 constants that represent common colors. ä For example, the following command will set the drawing color to red: g.setColor(Color.red);  Two more methods for displaying graphics are setColor() and setBackground().  setColor() defines the color of whatever is drawn next (it’s an instance method of the Graphics class).  setBackground() defines the background color (It’s a static method). ä These methods each take one argument – that argument must be an instance of the Color class. ä The Color class defines 13 constants that represent common colors. ä For example, the following command will set the drawing color to red: g.setColor(Color.red);

12. ä What if we want a color other than the 13 ones defined? ä Computer monitors (and any other monitors) can display three primary colors – red, green, and blue. ä All other colors are made from combinations of these three. ä For example, red and green make yellow. ä What if we want a color other than the 13 ones defined? ä Computer monitors (and any other monitors) can display three primary colors – red, green, and blue. ä All other colors are made from combinations of these three. ä For example, red and green make yellow. RGB – Red, Green, Blue

13. ä Each of the three primary colors is specified on a scale of 0 to 255.  If we want our own custom color, we can use the Color constructor – Color(r, g, b);  g.setColor(new Color(255, 0, 0)); will set the drawing color to red.  g.setColor(new Color(255, 255, 0)); will set the color to yellow.  g.setColor(new Color(255, 255, 255)); will set the color to white.  g.setColor(new Color(0, 0, 0)); will set the color to black.  g.setColor(new Color(0, 0, 100)); will set the color to dark blue. ä Etc. ä These three values collectively give the RGB value. ä Each of the three primary colors is specified on a scale of 0 to 255.  If we want our own custom color, we can use the Color constructor – Color(r, g, b);  g.setColor(new Color(255, 0, 0)); will set the drawing color to red.  g.setColor(new Color(255, 255, 0)); will set the color to yellow.  g.setColor(new Color(255, 255, 255)); will set the color to white.  g.setColor(new Color(0, 0, 0)); will set the color to black.  g.setColor(new Color(0, 0, 100)); will set the color to dark blue. ä Etc. ä These three values collectively give the RGB value.

14. RGB – Red, Green, Blue ä Here’s a table of the 13 defined colors and their RGB values.

15. HomeworkHomework ä Read: Appendix D, to middle of page 746; and top of page 749 to middle of page 753.