Chapter 4

1. Chapter 4 Instructor Mai Abu Sair

2. Color and Gray Scale • RGB color buffer • Store RGB color codes in frame buffer or in a separate table • Color code placed at pixel location • Minimum number of colors for 3-bits Left bit  Red, Middle bit  Green, Left bit  Blue0  black, 1  blue, …, 7  white • More color bits increase the size of the frame buffer: 24-bits * 1024 * 1024 = 3MB

3. Color and Gray Scale • Color tables • Color map (color look-up table) • Each pixel in the frame buffer contains a value (Ex. 196) corresponding to an entry in the color table (Ex. 2081), which has 256 entries. • Color table contains a 3-byte color code that represents an RGB color – 1-byte for the Red, 1-byte for the Green, 1-byte for the Blue. • Pick 256 colors from a total of 17 million, and save storage: 1024 * 1024 = 1MB

4. Color and Gray Scale (from Donald Hearn and Pauline Baker)

5. Color and Gray Scale • Gray scale • Shades of gray0  dark gray, 1  light gray • Other color parameters • Intensity (amount of light energy) • Luminance (perceived brightness)

6. Color Functions • Set color display mode to RGBglutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); • GLUT_SINGLE or GLUT_DOUBLE • GLUT_RGB, GLUT_RGBA, GLUT_INDEX • Alpha value (RGBA) for color blending of overlapping primitives (transparent or not) • Affects the color state from that function call on (not retroactive) • default (1.0f, 1.0f, 1.0f, 1.0f) for white

7. Color Functions public void triangleColor () // displays a three-colored triangle { gl.glClear (GL.GL_COLOR_BUFFER_BIT); // apply clear color to color buffer gl.glBegin(GL.GL_TRIANGLES); // Drawing Using Triangles gl.glColor3f(1.0f, 0.0f, 0.0f); // set color to red gl.glVertex2i( 100, 150); // top gl.glColor3f(0.0f, 1.0f, 0.0f); // set color to green gl.glVertex2i(10,10); // bottom Left gl.glColor3f(0.0f, 0.0f, 1.0f); // set color to blue gl.glVertex2i(180,15); // bottom right gl.glEnd(); // finished drawing the triangle }

8. Color Functions

11. Point Attributes and Functions • Attributes are any parameters that affect the way graphic primitives are displayed. • Basic attributes • Color • Size • Point • Color • Size is a multiple of the pixel size (a square). • gl.glPointSize (size);// size is the number of pixels

12. Line Attributes and Functions • Line attributes • Basic attributes: color, width, style • Widthcan be set in the line drawing algorithm as well as the length and point spacing.Raster algorithms display line attributes by plotting pixel spans, like plotting multiple pixels along the line either horizontally (m<1)of vertically (m>1).Produces lines of slightly different width according to the slope, and also abrupt ends (horizontal or vertical).Add line caps at the end (butt cap, round cap, projecting square cap).

13. Line Attributes and Functions • Line attributes • Style • Solid lines, dashed lines, dotted lines can be generated by modifying the line drawing algorithm – spacing between drawn pixels • Can be also generated from the raster by using a pixel mask, for example 11111000 will display a dashed line with dash length of 5 and inter-dash length of 3.

14. Line Attributes and Functions • Line attributes • Pen and brush options • Select several pen and brush styles • Shape, size, pattern • Can be implemented in a pixel mask • Change the mask to change the pen/brush

15. Line Attributes and Functions • Line attribute functions • gl.glLineWidth (width);// width is the width of the line • Default width is 1.0 • glLineStipple (repeatFactor, pattern); • pattern references a 16-bit integer that describes how the line should be displayed (default 0xFFFF, all bits set to 1, solid line) • repeatFactor specifies how many times each bit in the pattern is to be repeated before the next bit in the pattern in applied (default 1). • Example: displays 0x00FF -------- -------- -------- …8 solid line pixels, followed by 8 spaces • Requires first glEnable (GL_LINE_STIPPLE); line-pattern feature can be disabled by glDisable (GL_LINE_STIPPLE); • glShadeModel (GL_SMOOTH); // linear interpolation of colors

16. Curve Attributes and Functions • Same parameters as for lines • Width • Color • Dot-dash patterns • Pen/brush options • Raster curves produced by horizontal/vertical span

18. Width in the curve specified in one of the following ways: 1- use curve slope. Slope<=1 plot horizontal spans. Slope>1 plot vertical spans. 2- fill the area between two parallel curve paths. Separation distance equal the width.

20. Character Attributes (from Donald Hearn and Pauline Baker)

21. Character Attributes • Character attributes • Font (typeface)Helvetica, Courier, Times Roman, … • Underlining stylesolid, dotted, double • Styleboldface, italics, outline, shadow • Size10-point, 12-point, … • Point is 1/72 inch = 0.035146 • Color • Direction (up vector) • Space between characters • alignment

22. Direction (up vector): Orientation from baseline to capline

28. Character Attributes • Two methods • With bitmap functionscreate images of each character • With GLUT character generating routinesavailable in OpenGL from GLUT classBITMAP_HELVETICA_10BITMAP_HELVETICA_12BITMAP_HELVETICA_18BITMAP_TIMES_ROMAN_10BITMAP_TIMES_ROMAN_24…glutBitmapCharacter

29. Fill-Area attribute

36. Notes for scan line algorithm • Only nonhorizontal edges are entered into the sorted edge table. ( we find edges that meet at this point). • As the edges processed we can also shorten certain edges to ensure that only one intersection point is generated for the scan line going through the common vertex joining the two edges. • Each entry in the table for a particular scan line contains the maximum y value for that edge, the x-intercept value (at the lower vertex) for the edge, and the inverse slope of the edge. For each scan line, the edges are in sorted order from left to right.

37. Notes… cont • We process the scan lines from the bottom of the polygon to its top. Producing an active edge list for each scan line crossing the polygon boundaries. • Active edge list for a scan line contains all edges crossed by that scan line, with iterative coherence calculations used to obtain edge intersection.

38. Fill method for areas with irregular boundaries • Boundary fill algorithm • Flood fill algorithm

39. Boundary fill algorithm • It starts from a given interior position and paint outward, pixel by pixel from this point until we encounter specified boundary conditions.

40. Two filling methods

42. Flood fill algorithm

43. Flood fill algorithm