Download presentation
Presentation is loading. Please wait.
Published byEric McKenzie Modified over 9 years ago
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.
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.