1 / 51

Computer Graphics

Computer Graphics. Zhen Jiang West Chester University. Topics. Introduction Display and OpenGL Point (pixel), line, polygon Curves 2D and 3D Clipping Projection and shadow Animation. Introduction. Computer Graphics Sample programs 1 2 3 4 5 6 7 8 9 10 and their execution file

celine
Télécharger la présentation

Computer Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer Graphics Zhen Jiang West Chester University

  2. Topics • Introduction • Display and OpenGL • Point (pixel), line, polygon • Curves • 2D and 3D • Clipping • Projection and shadow • Animation

  3. Introduction • Computer Graphics • Sample programs 12345678910 and their execution file • Objective • Evaluation • Resource

  4. Display and OpenGL • CRT (cathode-ray tube)

  5. Display and OpenGL

  6. Display and OpenGL

  7. Display and OpenGL 3 2 1 0 0 1 2 3

  8. Display and OpenGL 3 2 RGB 1 0 0 1 2 3

  9. Display and OpenGL • 1280x1024 • 75 refreshes / second (from top to bottom in left right order) • Memory elements called pixels

  10. Display and OpenGL • OO programming • Introduced but not required in this class • Application Programmer’s Interfaces (API) • Is shielded from the details of both the hardware and software implementation of the graphics library. • !! Match the conceptual model that we will introduce in this class

  11. Point , line, polygon • Point • Line • Introduction • (0,0) -> (dx,dy) • (0,cy)->(dx,cy+dy) • (cx,cy)->(dx+cx,dy+cy) • Brensenham’s algorithm • Complete Brensenham’s algorithm • Polygon • Vertices and edges • Simple polygon • What’s inside? • fill

  12. Point , line, polygon (point) 1023 … 2 1 0 … 0 1 2 3 1279

  13. Point , line, polygon (point) 1 1023/1023 0 1 0 1279/1279

  14. Point , line, polygon (point) 640 639*1023 /1023 0 768 767*1279/1279 0

  15. Point , line, polygon (line)

  16. Point , line, polygon (line) • Introduction • Integer vertices • From start point to end point • y = m x + c, where 0<m<1

  17. Point , line, polygon (line) Upper_y d2 d1 Lower_y

  18. Point , line, polygon (line) • (0,0) -> (dx,dy) //int dx, dy int x, Upper_y, Lower_y; float y, d1, d2; for ( x = 0 ; x <= dx ; x++) { y= Upper_y= Lower_y= d1= d2= glBegin(GL_POINTS); if(d1<d2) glVertex2i(x, Lower_y); else glVertex2i(x, Upper_y); glEnd(); } dy y x float (dy*x) / float(dx); int(y)+1; int(y); y-Lower_y; Upper_y-y; (0,0) dx For example, when x=0; y=0; Upper_y=1; Lower_y=0; d1=0; d2=1; d1<d2 glVertex2i(0,0);

  19. Point , line, polygon (line) //int dx, dy int x, Upper_y, Lower_y; float y, d1, d2; for ( x = 0 ; x <= dx ; x++) { y=float (dy*x) / float(dx); Upper_y=int(y)+1; Lower_y=int(y); d1=y-Lower_y; d2=Upper_y-y; glBegin(GL_POINTS); if(d1<d2) glVertex2i(x, Lower_y); else glVertex2i(x, Upper_y); glEnd(); } • Check (0,0) – (7,2)

  20. Point , line, polygon (line) • (0,cy)->(dx,cy+dy) //int dx, dy int x, Upper_y, Lower_y; float y, d1, d2; for ( x = 0 ; x <= dx ; x++) { y=float (dy*x) / float(dx); Upper_y=int(y)+1+cy; Lower_y=int(y)+cy; d1=y+cy-Lower_y; d2=Upper_y-(y+cy); glBegin(GL_POINTS); if(d1<d2) glVertex2i(x, Lower_y); else glVertex2i(x, Upper_y); glEnd(); } dy y x (0,cy) dx

  21. Point , line, polygon (line) //int dx, dy, cy int x, Upper_y, Lower_y; float y, d1, d2; for ( x = 0 ; x <= dx ; x++) { y=float (dy*x) / float(dx); Upper_y=int(y)+1+cy; Lower_y=int(y)+cy; d1=y+cy-Lower_y; d2=Upper_y-(y+cy); glBegin(GL_POINTS); if(d1<d2) glVertex2i(x, Lower_y); else glVertex2i(x, Upper_y); glEnd(); } • Check (0,-2) – (7,1)

  22. Point , line, polygon (line) • (cx,cy)->(dx+cx,dy+cy) //int dx, dy, cx, cy int x, Upper_y, Lower_y; float y, d1, d2; for ( x = cx ; x <= dx+cx ; x++) { y=float (dy*(x-cx)) / float(dx); Upper_y=int(y)+1+cy; Lower_y=int(y)+cy; d1=y+cy-Lower_y; d2=Upper_y-(y+cy); glBegin(GL_POINTS); if(d1<d2) glVertex2i(x, Lower_y); else glVertex2i(x, Upper_y); glEnd(); } dy y x (cx,cy) dx

  23. Point , line, polygon (line) //int dx, dy, cx, cy int x, Upper_y, Lower_y; float y, d1, d2; for ( x = cx ; x <= cx+dx ; x++) { y=float (dy*(x-cx)) / float(dx); Upper_y=int(y)+1+cy; Lower_y=int(y)+cy; d1=y+cy-Lower_y; d2=Upper_y-(y+cy); glBegin(GL_POINTS); if(d1<d2) glVertex2i(x, Lower_y); else glVertex2i(x, Upper_y); glEnd(); } • Check (3,-1) – (10,1)

  24. Point , line, polygon (line) • Brensenham’s Algorithm • Given (x,y), must choose from either (x+1, y+1) or (x+1, y) (x+1,y+1) (x,y) d2 y+1 y d1 x x+1 (x+1,y)

  25. Point , line, polygon (line) • Brensenham’s Algorithm (m=dy/dx) • d1-d2 = 2m(x+1)-2y+2c-1 • For integer calculations, use p = 2dy x-2dx y+2dy+2c dx-dx • d1<d2 =>p negative =>y • d1>d2 =>p positive=>y+1

  26. Point , line, polygon (line) //int dx, dy, cx, cy int x, p,y; y=cy; for ( x = cx ; x <= cx+dx ; x++) { p=2*dy*x -2*dx*y+2*dy+2*c*dx-dx; if(p>=0) y++; glBegin(GL_POINTS); glVertex2i(x, y); glEnd(); } • Check (3,-1) – (10,1)

  27. Point , line, polygon (line) • Complete Algorithm for (x1, y1) to (x2, y2)? • M<1 • M>1 • M=0 • M=

  28. if(m>1){ if(x2>x1) {cx=x1; cy=y1;} else {cx=x2;cy=y2;dx=-dx; dy=-dy;} c=y2-x2(y1-y2)/(x1-x2); • x=cx; • for ( y = cy ; y >= cy+dy ; y++) { • p=2*dx*y -2*dy*x+2*dx-2*c*dx-dy; • if(p>=0) x++; • glVertex2i(x, y); } } if(m<-1){ if(x2>x1) {cx=x1; cy=y1;} else {cx=x2;cy=y2;dx=-dx; dy=-dy;} c=y2-x2(y1-y2)/(x1-x2); • x=cx; • for ( y = cy ; y <= cy+dy ; y--) { • p=2*dx*y -2*dy*x-2*dx-2*c*dx-dy; • if(p>=0) x++; • glVertex2i(x, y); } } } glEnd(); Point , line, polygon glBegin(GL_POINTS); If (x1==x2) { if(y2>y1) {cy=y1; dy=y2-y1;} else {cy=y2; dy=y1-y2;} for (i=0;i<=dy;i++) glVertex2i(x1, cy+i); } Else if (y1==y2){ // ? Leave for your exercises } Else { dx=x2-x1, dy=y2-y1; m=dy/dx; if(m>-1 && m < 0){ if(y2>y1) {cy=y1; cx=x1;} else {cy=y2;cx=x2;dx=-dx; dy=-dy;} c=y2-x2(y1-y2)/(x1-x2); • y=cy; • for ( x = cx ; x >= cx+dx ; x--) { • p=2*dy*x -2*dx*y-2*dy+2*c*dx-dx; • if(p>=0) y++; • glVertex2i(x, y); } } if(m>0 && m < 1){ if(y2>y1) {cy=y1; cx=x1;} else {cy=y2;cx=x2;dx=-dx; dy=-dy;} c=y2-x2(y1-y2)/(x1-x2); • y=cy; • for ( x = cx ; x <= cx+dx ; x++) { • p=2*dy*x -2*dx*y+2*dy+2*c*dx-dx; • if(p>=0) y++; • glVertex2i(x, y); } }

  29. Point , line, polygon (polygon) • Vertices and edges • Simple polygon • No zero-winding? • No exterior? • Parity? • What’s inside? • Given a pixel, which polygon does it lie in? • Given a pixel, on edge? • Given a pixel, on vertex?

  30. 2 intersections ->inside or not? Inside? 1 intersection ->inside or not?

  31. Even number of intersections ->inside or not? Odd number of intersections ->inside or not?

  32. Draw a line start from that pixel (point), even number of intersections -> outside; odd number of intersections -> inside. • 0 intersection ? (need another line?)

  33. Overall Algorithm: • Line y=py, start from the point (px,py); • Has segment (x1,y1) (x2,y2) an intersection with line y=py? • For each edge in a polygon, see if it has an intersection with y=py. • For each polygon, see if it has odd number of intersections with y=py. • For all polygons in the area, see how many polygons contain this point (px,py).

  34. // detect how many polygons in p[number_of_polygons] contain the pixel point. For (i=0;i<number_of_polygons;i++){ p[ i ]=get_polygon (i); count=0; for(j=0;j<p[i].size_of_edge;j++){ start=get_xy(p[ i ][ j ]); // (x1,y1) end=get_xy(p[ i ][ (j+1) % p[ i ].size_of_edge) // (x2,y2) count+=how_many_intersections (start, end, point); } if(count%2) // it’s inside; else it’s outside; }

  35. or • Has segment (x1,y1) (x2,y2) an intersection with line y=py? • if(x1==x2) { if ((y1-py)*(y2-py)<0) it has one intersection at (x1,py). } • if (y1==y2) { if (py==y1) it has two intersections (x1,py) and (x2,py); one for joining the edge and the other for leaving from this edge. } • X=(py-y1)(x2-x1)/(y2-y1)+x1 if ((x2-x)*(x1-x)<0) it has an intersection at (x,py). or or

  36. Question?

  37. (x2,y2) (x1,y1) • Has segment (x1,y1) (x2,y2) an intersection with line y=py? • if(x1==x2) { if ((y1-py)*(y2-py)<=0 && y2!=py) => 1 it has one intersection at (x1,py). } • if (y1==y2) { if (py==y1) => 1 (even) or 0 (odd) it has two intersections (x1,py) and (x2,py). (x2,py) will be counted on the edge leaving from y=py. (x1,py) (where the edges join y=py) is counted to make even when joining edge and leaving edge are on the same side of y=py; otherwise, 0 for odd intersection. } • X=(py-y1)(x2-x1)/(y2-y1)+x1 if ((x2-x)*(x1-x)<=0 && x2!=x) =>1 it has an intersection at (x,py). (x1,y1) (x2,y2) (x2,y2) (x1,y1)

  38. Point , line, polygon (polygon) • Fill (interior) • Sweep fill • Flood fill • Boundary fill • Pattern fill (openGL)

  39. Sweep fill (interior) Xmin, xmax Fill the bottom horizontal span of pixels; move up and keep filling Keep edge information for any change on xmin and xmax AEL (active edge list) (x, 1/m, ymax) Point , line, polygon (polygon)

  40. Overall Algorithm: This algorithm maintains one line based on AEL structure • Get all the structures at the bottom line (filling procedure on this bottom line will be skipped). • Get the structure for the next line (add 1/m easily to x for each old AEL structure, add new one if any, delete the expired one). If no AEL unit, stop! • Find filling segments with xmin and xmax (sorting) • Filling all segments on the current line, the endpoints of each segment are excluded (no painting) • Go to step 2.

  41. 3 2 1 0 1 0 3 6 0 3

  42. 0 1 0 3 6 0 3 * 1 1 0 3 6 0 3 * 2 1 0 3 6 0 3 3 1 0 3 6 0 3 End! 3

  43. 4 3 2 4 0 4 1 0 1 0 2 6 0 4

  44. 0 1 0 2 6 0 4 * 1 1 0 2 6 0 4 2 1 0 2 6 0 4 4 0 4 * 2 4 0 4 6 0 4 * 3 4 0 4 6 0 4 4 4 0 4 6 0 4 End! 4

  45. 6 5 4 3 3 -1 6 5 1 6 2 1 0 0 1 3 8 -1 3

  46. 0 0 1 3 8 -1 3 * 1 1 1 3 7 -1 3 * 2 2 1 3 6 -1 3 3 3 1 3 5 -1 3 3 -1 6 5 1 6 * 3 3 -1 6 5 1 6 * 4 2 -1 6 6 1 6 * 5 1 -1 6 7 1 6 6 0 -1 6 8 1 6 End! 6

  47. Why? 5 4 3 3 0 4 6 0 7 2 1 0 0 0 7 0 1 4

  48. 0 0 0 7 0 1 4 1 0 0 7 1 1 4 * 2 0 0 7 2 1 4 * 3 0 0 7 3 1 4 3 0 4 6 0 7 * 4 0 0 7 6 0 7 * 5 0 0 7 6 0 7 * 6 0 0 7 6 0 7 End! 7

  49. Quiz preparation • How about a sweep fill for the interior and the edges?

  50. Point , line, polygon (polygon) • Flood fill • 4 connected fill • 8 connected fill • Spans fill ? 1 2

More Related