Graphics Overview ECE2893. Lecture 19. ECE2893 Graphics Overview Spring / 15

Transcription

1 Graphics Overview ECE2893 Lecture 19 ECE2893 Graphics Overview Spring / 15

2 Graphical Displays 1 Virtually all modern computers use a full color Graphical Display device. 2 It displays images, text, animations, and movies. 3 A display consists of a rectangular (2-Dimensional) array of Picture Elements, or Pixels. 4 Each pixel has individually settable color values for the primary colors that make up the color of the pixel. Red Green Blue 5 Most display interfaces use 8 bits to represent the color of each of the three colors, for a total of 24 bits. 6 Since we use 24 bits to represent the color of the pixel, there are a total of 2 24 possible color values, or about 16 million. 7 Since most computers use 32 bit integers, it is often the case that the remaining 8 bits are used for the transparency, or Alpha value. 8 There are other ways to represent colors in the computer display system. HSV Hue, Saturation, Value CMYK Cyan, Magenta, Yellow, Key. ECE2893 Graphics Overview Spring / 15

3 Graphic Hardware 1 All modern computers use separate graphics interface hardware to manage the pixels shown on the display. 2 The graphics hardware card has its own memory that is used to store internally the current state of every pixel on the screen. 3 The capabilities of the display hardware (the monitor), and the amount of memory available on the graphics interface card, determines the pixel density and size on the display. A typical Mac laptop has up to 1440 pixels in the x direction and 900 pixels in the y direction. 4 They often use double buffering. One half of the on card memory is used to represent the display state The other half can be changed by the application to (for example) create an animation of a moving object. 5 Modern graphics hardware uses one or more high speed, custom designed Graphics Processing Unit, or GPU. 6 The GPU is designed to efficiently (and quickly) determine the value of a pixel considering lighting, shading, occulsion, and other graphics factors. ECE2893 Graphics Overview Spring / 15

4 Graphics Hardware, continued 1 Applications rarely, if even, directly access the memory in the graphics interface card. 2 Rather, they use a mirror image of the graphics memory in main memory on the computer. 3 The application then notifies the graphics interface card when to update the pixels (and which pixels to update). 4 The updated pixels are copied (usually by specialized hardware) from the main memory to the on board memory on the graphics interface card. 5 Good programming practice suggests we only update those pixels on the display device that have actually changed, rather than every single pixel. ECE2893 Graphics Overview Spring / 15

5 The GDisplay API DISCLAIMER! This API is non standard and was created by the ECE2893 instructor to provide a simple and easy to understand way to create and manage graphics. 1 In order to manage a graphical window with GDisplay you must first create a new window. There are two ways to do this: 1 Create a blank window of a specified width and height GDisplay BlankDisplay(int w, int h); 2 Create a window that contains a given image file (JPG or PNG) GDisplay LoadImage(const char* filename); 2 Both of the window creation functions return a variable of type GDisplay. This is a blind pointer, also sometimes called a Cookie or Handle. It is (under the covers) a pointer; however your program does not know what it points to. It cannot be de referenced. It is used however in later API calls to indicate which window is being managed. ECE2893 Graphics Overview Spring / 15

6 The GDisplay API, continued 1 The height and width (in pixels) for any window can be queried: int Width(GDisplay window); int Height(GDisplay window); 2 You can get a pointer to the memory image of the pixels on the display. The pixels are of type GColor. GColor * GetImageData(GDisplay window); 3 The GColor type is a structure with an 8 bit value for each of the red, green, and blue color components, plus an 8 bit transparency (alpha) value. // Define the GColor structure typedef struct unsigned char blue; // The red component unsigned char green; // The blue component unsigned char red; // The green component unsigned char alpha; // The transparency GColor; ECE2893 Graphics Overview Spring / 15

7 The GDisplay API, continued 1 Once you have obtained a pointer to the image data, you can read and write the individual pixels. 2 Remember that the memory image is a 1 D array of pixels, but the actual image is 2 D. 3 You will likely need a macro or function to convert from the x and y coordinates in the 2 D system to the array index in the 1 D system. 4 If you have changed any of the pixels, you must then Update them to the graphics hardware. There are two ways to do this: void Update(GDisplay g); This copies every single pixel from the memory image to the graphics hardware memory. void Update(GDisplay g,int x,int y,int w,int h); This copies a rectangular regiion at location x, y, and extending for w and h (width and height). This is more efficient and is generally preferred. 5 Often, we want the animation to proceed at a relatively slow rate, rather than as fast as possible. void SetUpdateRate(GDisplay g, int fps); This limits the updates to no more than fps frames per second. ECE2893 Graphics Overview Spring / 15

8 The GDisplay API, continued 1 We almost always want to leave the display window visible on the screen until it is closed (with a mouse click on the close icon). void WaitForClose(); This waits for all windows to close before returning. 2 For convenience, there is a helper function that constructs a variable of type GColor, given a red, green, and blue component. GColor RGBColor(unsigned char red, unsigned char green, unsigned char blue); ECE2893 Graphics Overview Spring / 15

9 The Pixel Array X Y (0,0) (1,0) (2,0) (3,0) (4,0) (5,0) (6,0) (7,0) (0,1) (1,1) (2,1) (3,1) (4,1) (5,1) (6,1) (7,1) (0,2) (1,2) (2,2) (3,2) (4,2) (5,2) (6,2) (7,2) (0,3) (1,3) (2,3) (3,3) (4,3) (5,3) (6,3) (7,3) (0,4) (1,4) (2,4) (3,4) (4,4) (5,4) (6,4) (7,4) (0,5) (1,5) (2,5) (3,5) (4,5) (5,5) (6,5) (7,5) (0,6) (1,6) (2,6) (3,6) (4,6) (5,6) (6,6) (7,6) (0,7) (1,7) (2,7) (3,7) (4,7) (5,7) (6,7) (7,7) Memory (0,0) (1,0) (2,0) (3,0) (4,0) (5,0) (6,0) (7,0) (0,1) (1,1) (2,1) (3,1) (4,1) (5,1) (6,1) (7,1) ECE2893 Graphics Overview Spring / 15

10 Line Drawing 1 Given two endpoints, (x 0, y 0 ), (x 1, y 1 ), determine which pixels between (x 0, y 0 ) and (x 1, y 1 ) lie on the line connecting the two points. 2 Here is a possible algorithm: 1 IF x 1 < x 0 Swap the two endpoints. 2 Compute the angle Θ of the line, relative to the horizontal line intersecting (x 0, y 0 ). 3 SET x = x 0 4 WHILE x < x 1 R = (x x 0 )/ cos(θ) y = R sin(θ) SetPixel(x, y 0 + y) SET x = x This works fine as long as (x 1 x 0 ) > (y 1 y 0 ). 4 We need to revise the algorithm for other cases (left as an exercise to the reader!) 5 This also uses a significant amount of floating point math, which is computationally intensive. ECE2893 Graphics Overview Spring / 15

11 Bresenham s Mid Point Line Algorithm void MidpointLine ( i n t x0, i n t y0, i n t x1, i n t y1 ) i n t dx = x1 x0 ; i n t dy = y1 y0 ; i n t d = 2 dy dx ; i n t incre = 2 dy ; / / East increment i n t incrne = 2 ( dy dx ) ; / / Northeast increment i n t x = x0 ; / / I n i t i a l x i n t y = y0 ; / / I n i t i a l y S e t P i x e l ( x, y ) ; / / I n i t i a l l i n e p o i n t while ( x < x1 ) i f ( d <= 0) d += incre ; / / Move East else d += incrne ; / / Move Northeast y ++; / / and advance y x ++; / / Advance x S e t P i x el ( x, y ) ; / / Next p i x e l i n l i n e ECE2893 Graphics Overview Spring / 15

12 Bresenham s Mid Point Circle Algorithm void M i d p o i n t C i r c l e ( i n t r a d i u s ) i n t x = 0; i n t y = r a d i u s ; double d = 5. 0 / 4. 0 r a d ius ; S e tpixel ( x, y ) ; while ( y > x ) i f ( d < 0) d += 2.0 x ; / / Select East else d += 2.0 ( x y ) ; / / Select SE y ; x ++; S e tpixel ( x, y ) ; ECE2893 Graphics Overview Spring / 15

13 Image Reflection 1 Using the GDisplay API, we can easily reflect an image horizontally or vertically. 2 For horizontal reflection: Load the image in GDisplay window d Set w = Width(d); Set h = Height(d); Create a blank window of size w, h in GDisplay window e. Loop over the entire image d with nested for loops for y and x. Read the pixel from window d at location (x, y). Set x0 = w x 1 Store that pixel in window e at location (x0, y); 3 For vertical reflection, the algorithm is the same except the last two steps: Set y0 = h y 1 Store that pixel in window e at location (x, y0); ECE2893 Graphics Overview Spring / 15

14 Image Reduction 1 We can reduce the size of an image by a factor of two. Note: this algorithm assumes the image width and height are an even factor of two. Load the image in GDisplay window d Set w = Width(d); Set h = Height(d); Create a blank window of size w/2, h/2 in GDisplay window e. Loop over the entire image d with nested for loops for y and x. However, use only the even numbered x and y coordinates. In other words, for the for loop increment, add two instead of one. Compute the average color (for each red/green/blue) of the pixels at locations (x, y), (x + 1, y), (x, y + 1), (x + 1, y + 1) Store a new pixel with the average of each color in window e at location (x/2, y/2); 2 You can also just set the pixel in window e to the value in location (x, y) in window d, rather than averaging the four pixels. This produces an image that is not quite a good. ECE2893 Graphics Overview Spring / 15

15 Image Expansion 1 We can expand the size of an image by a factor of two. Load the image in GDisplay window d Set w = Width(d); Set h = Height(d); Create a blank window of size w 2, h 2 in GDisplay window e. Loop over the entire image d with nested for loops for y and x. Read the pixel from window d at location (x, y). Store that pixel in the following four locations in window e: (2x, 2y), (2x + 1, 2y), (2x, 2y + 1), (2x + 1, 2y + 1) 2 This results in a larger image, but it is a bit blocky, since we can t really add any detail in the larger image that is not present in the smaller image. ECE2893 Graphics Overview Spring / 15