CA 302 Computer Graphics and Visual Programming

1. CA 302 Computer Graphics and VisualProgramming Aydın Öztürk aydin.ozturk@ege.edu.tr http://www.ube.ege.edu.tr/~ozturk ATTRIBUTES OF Graphics Primitives

2. 1. Introduction Attribute parameter: A parameter that affects the way a pirimitive is displayed. • Color • Size • Visibility ...etc.

3. Green • C • Blue • Y • Red • M 2.Color • Red, Green, Blue • Tri-stimulus theory. • Additive system : Adding ligths to blank points. • RGB cube has 3 axis (0 to 1).

4. 2.1 RGB ColorComponents (01) ……………………………………………………….………. 21 colors (00), (01), (10), (11) ………………………………… ………… 22 colors (00000000),… 224 colors Red Green Blue

5. Green • C • Blue • Y • Red • M 2.1 RGB Color Components

6. 2.1 RGB ColorComponents Color information can be stored in the frame buffer in two ways: • RGB Color codes can be stored directly in the frame buffer. • RGB Color codes can be put into a seperate table and use the pixel locations to store index values referencing the color table entries.

7. 2.1 RGB ColorComponents . . . 2081 . . . Red Green Blue 196 y 1 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 x

8. 2.2. GrayScale When an RGB colorsettingspecifies an equalamount of red, gren and blue, theresult is someshade of gray. • Valuescloseto 0 forthecolorcomponentproducedarkgray • Valuescloseto 1 forthecolorcomponentproducelightgray

9. 3. OpenGLColorFunctions Thefollowingcommandstatesthat a singlebufferfortheframebuffer is used and the RGB mode is swiched on. glutInitDisplayMode (GLUT_SINGLE| GLUT RGB)

10. 3.1 TheOpenGL RGB mode Weselectthecurrentcolorcomponentswiththefunction glColor* (colorComponents); glColor3f(0.0, 1.0, 1.0); glColor3fv(colorArray);

11. 3.2 TheOpenGLColor-IndexMode Usingthismode, we set thecurrentcolorbyspecifying an indexinto a colortable: glIndex* (colorIndex); glIndexi(196);

12. 3.2 TheOpenGLColor-IndexMode There is no functionprovided in theOpenGLlibraryforloadingvaluesinto a colorlook-uptable, However, there is a GLUT routinethatinteractswith a windowsystemto set colorspecificationsinto a table at a givenindexposition: glutSetColor (index, red, green, blue)

13. 4. PointAttributes Pixel size = 1

14. 5. LineAttributes Linecolor, width & style : glLineWidth ( width ); glLineStipple ( repeatFactor, pattern ); glEnable ( GL_LINE_STIPPLE ); ... glDisable ( GL_LINE_STIPPLE );

15. 5. LineAttributes • Implementation of line width :

16. 5. LineAttributes • Smooth Lines

17. 6. Fill-AreaAttributes

18. 9 OpenGLWire-FrameMethods We can choose to show only polygon edges with the command glPolygonMode (face, displayMode); face: Designate which face of the polygon we want to show as edges: GL_FRONT, GL_BACK, GL_FRONT_AND_BACK displayMode: GL_LINE, GL_POINT, GL_FILL (default)

19. 7. General Scan-Line Polygon-Fill Algorithm Consider the following polygon: How do we know whether a given pixel on the scanline is inside or outside the polygon? • D • B • C • A • E • F

20. 7.1 Polygon Rasterization Intersections are sorted from left to right and the pixel positions including each intersection pair are set to the specified color. Case 1: Evennumber of intersections

21. 7.1 Polygon Rasterization Comparetwoedgessharing an intersectingvertextoseeiftheyare on oppositesides of thescanlineornot. Case 2: Odd number of intersections Scanline y′ (Evennumber of intersections 2 1 1 Scanline y ((Oddnumber of intersections 1 2 1 1

22. 7.2. Flood-Fill Algorithm • Set pixel to fill color value until bounds. • An interior point (x, y) • A boundary color • A fill color Fill color Boundary color Interior point (x, y)

23. 8. OpenGL Anti-aliasing • In RGB display mode • glEnable(mode);GL_POINT_SMOOTH GL_LINE_SMOOTH GL_POLYGON_SMOOTH

24. 9. Animation • One of the most exciting things we can do on a graphics computer is draw pictures that move. • An engineer:Tries to see all sides of a mechanical part he is designing, • A pilot learns how to fly an airplane using a simulation etc. • Animation is an important part of computer graphics.

25. 9. Animation (contd.) • In a movie theater, motion is achieved by taking a sequence of pictures and projecting them at 24 per second on the screen. • Each frame is moved into position behind the lens, the shutter is opened, and the frame is displayed. • The shutter is momentarily closed while the film is advanced to the next frame, then that frame is displayed, and so on. • Although we're watching 24 different frames each second, our brain blends them all into a smooth animation.

26. 9. Animation (contd.) • Most modern projectors display each picture twice at a rate of 48 per second to reduce flickering. • Computer-graphics screens typically refresh (redraw the picture) approximately 60 to 76 times per second, and some even run at about 120 refreshes per second. • Clearly, 60 per second is smoother than 30, and 120 is marginally better than 60. • Refresh rates faster than 120, however, are beyond the point of diminishing returns, since the human eye is only so good.

27. 9. Animation (contd.) • The key reason that motion picture projection works is that each frame is complete when it is displayed. • Suppose we try to do computer animation of a million-frame movie with a program like this: open_window(); for (i = 0; i < 1000000; i++){ clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); }

28. 9. Animation (contd.) • If we add the time it takes for our system to clear the screen and to draw a typical frame, this program gives more and more disturbing results depending on how close to 1/24 second it takes to clear and draw. • Suppose the drawing takes nearly a full 1/24 second. Items drawn first are visible for the full 1/24 second and present a solid image on the screen; • Items drawn toward the end are instantly cleared as the program starts on the next frame. The problem is that this program doesn't display completely drawn frames; instead, we watch the drawing as it happens.

29. 9. Animation (contd.) • Most OpenGL implementations provide double-buffering - hardware or software that supplies two complete color buffers. • One is displayed while the other is being drawn. • When the drawing of a frame is complete, the two buffers are swapped, so the one that was being viewed is now used for drawing, and vice versa. • With double-buffering, every frame is shown only when the drawing is complete; the viewer never sees a partially drawn frame.

30. 9. Animation (contd.) • A modified version of the preceding program that does display smoothly animated graphics might look like this: open_window(); for (i = 0; i < 1000000; i++){ clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); swap_the_buffers(); }

31. 9. Animation (contd.) • For some OpenGL implementations, in addition to simply swapping the viewable and drawable buffers, the swap_the_buffers() routine waits until the current screen refresh period is over so that the previous buffer is completely displayed. • This routine also allows the new buffer to be completely displayed, starting from the beginning.

32. 9. Animation (contd.) • Assuming that our system refreshes the display 60 times per second, this means that the fastest frame rate we can achieve is 60 frames per second (fps), and if all our frames can be cleared and drawn in under 1/60 second, our animation will run smoothly at that rate.

33. 9. Animation (contd.) • What often happens on such a system is that the frame is too complicated to draw in 1/60 second, so each frame is displayed more than once. • If, for example, it takes 1/45 second to draw a frame, we get 30 fps, and the graphics are idle for 1/30-1/45=1/90 second per frame.

34. 9. Animation (contd.) • In addition, the video refresh rate is constant, which can have some unexpected performance consequences. • For example, with the 1/60 second per refresh monitor and a constant frame rate, we can run at 60 fps, 30 fps, 20 fps, 15 fps, 12 fps, and so on (60/1, 60/2, 60/3, 60/4, 60/5, ...). • That means that if you're writing an application and gradually adding features at first each feature we add has no effect on the overall performance - we still get 60 fps. • Then, all of a sudden, you add one new feature, and the system can't quite draw the whole thing in 1/60 of a second, so the animation slows from 60 fps to 30 fps because it misses the first possible buffer-swapping time.

35. 9. Animation (contd.) • The structure of real animation programs does not differ too much from this description. • Usually, it is easier to redraw the entire buffer from scratch for each frame than to figure out which parts require redrawing. • This is especially true with applications such as three-dimensional flight simulators where a tiny change in the plane's orientation changes the position of everything outside the window.

36. 9. Animation (contd.) • In most animations, the objects in a scene are simply redrawn with different transformations - the viewpoint of the viewer moves, or a car moves down the road a bit, or an object is rotated slightly. • If significant recomputation is required for non-drawing operations, the attainable frame rate often slows down. • Keep in mind, however, that the idle time after the swap_the_buffers() routine can often be used for such calculations.

37. 9. Animation (contd.) • OpenGL doesn't have a swap_the_buffers() command because the feature might not be available on all hardware and, in any case, it's highly dependent on the window system. • For example, if we are using the GLUT library, we'll want to call this routine: void glutSwapBuffers(void);