* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Intro to Graphics - UNC Computer Science
Survey
Document related concepts
Stereo display wikipedia , lookup
Graphics processing unit wikipedia , lookup
Waveform graphics wikipedia , lookup
MOS Technology VIC-II wikipedia , lookup
Molecular graphics wikipedia , lookup
Tektronix 4010 wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Color vision wikipedia , lookup
Framebuffer wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Apple II graphics wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
Transcript
Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 Outline Basics of graphics The Graphics class Graphics contexts Drawing in Java Pixels Coordinates Lines Shapes Colors The Color class RGB Pixels 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? Coordinates 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 1st and the row comes 2nd. x 0 1 2 3 4 5 6 7 8 9 10 … y 0 1 2 3 4 5 6 7 8 9 10 11 The Graphics Class To display images in Java, we must use the Graphics class. The first step is to construct a Graphics object. import java.awt.* 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. Drawing in Java The simplest instance method provided by the Graphics class is the drawLine() method. It takes 4 arguments – drawLine(x1, y1, x2, y2), where (x1, y1) are the coordinates of one endpoint of the line and (x2, y2) 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. 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. 0 1 2 3 4 5 6 7 8 9 10 … 0 1 2 3 4 5 6 7 8 9 10 11 5 9 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? 0 1 2 3 4 5 6 7 8 9 10 … 0 1 2 3 4 5 6 7 8 9 10 11 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); Drawing in Java How might we display a tic-tac-toe board? 0 1 2 3 4 5 6 7 8 9 10 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 12 14 16 18 20 22 24 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); RGB – Red, Green, Blue 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 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. RGB – Red, Green, Blue Here’s a table of the 13 defined colors and their RGB values. Identifier white black lightGray gray darkGray red green blue yellow magenta cyan orange pink Red Value Green Value BlueValue 255 255 255 0 0 0 192 192 192 128 128 128 64 64 64 255 0 0 0 255 0 0 0 255 255 255 0 255 0 255 0 255 255 255 200 0 255 175 175 Homework Read: Appendix D, to middle of page 746; and top of page 749 to middle of page 753.