Upcoming SlideShare
Loading in …5
×

# CG OpenGL polar curves & input display color-course 4

1,388 views

Published on

Design some polar curves & view color information on devices

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
Your message goes here
• Be the first to comment

• Be the first to like this

No Downloads
Views
Total views
1,388
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

### CG OpenGL polar curves & input display color-course 4

1. 1. Some polar curves Input devicesDisplay Color information Chen Jing-Fung (2006/11/22) Assistant Research Fellow, Digital Media Center, National Taiwan Normal University Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
2. 2. Polar coordinates in xy plane r y axis  y P : ( x, y ) s r  x axis x• Angle θ =s/r (radians/radius)• Polar coordinate-> Cartesian coordinate x=r cosθ, y=r sinθ• Inverse transformation 1 y r  x  y ,   tan ( ) 2 2 x Video Processing Lab 2 臺灣師範大學數位媒體中心視訊處理研究室
3. 3. Cardioid polar plot • The curve given by the polar equation The envelope of these circles is then a cardioid (PedoeThe name cardioid was first 1995).used by de Castillon inPhilosophical Transactionsof the Royal Society in 1741.Its arc length was found byla Hire in 1708. Video Processing Lab 3 http://mathworld.wolfram.com 臺灣師範大學數位媒體中心視訊處理研究室
4. 4. The graph of the polar equation (1)• Plot the polar equation – The incredibly beautiful curve that results was discovered by Temple H. Fay. His article "The Butterfly Curve“ (American Mathematical Monthly, May 1989, p.442) is well worth a trip to the library.r  ecos( )  2cos(4 )  sin5 (1/12) Video Processing Lab 4 臺灣師範大學數位媒體中心視訊處理研究室
5. 5. The graph of the polar equation (2)• Six leaves: – r=1+cos(t)/2 – ө=t/6-sin(2t) X=r*cos(ө) Y=r*sin(ө) range: t = 0 ~ 12pi Video Processing Lab 5 臺灣師範大學數位媒體中心視訊處理研究室
6. 6. How to drawpolar-coordinate picture Sector size Video Processing Lab 6 臺灣師範大學數位媒體中心視訊處理研究室
7. 7. Input devices trigger Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal UniversityCh3: Interactive Computer Graphics: A Top-Down Approach using OpenGL, 3/e
8. 8. Measure and Trigger• Input devices provide input to an application program can be described: – Measure process: • The device returns to user program – Trigger process: • User can signal the computer – Ex: Keyboard • Measure: key a string • Trigger: “enter” key Video Processing Lab 8 臺灣師範大學數位媒體中心視訊處理研究室
9. 9. Describe modes• Three distinct modes are defined by the relationship between the measure process and the trigger. – Request mode, sample-mode and event mode – Example: • The position of a mouse: – tracked continuously by the underlying window system – Whether the application program needs or not mouse input. Video Processing Lab 9 臺灣師範大學數位媒體中心視訊處理研究室
10. 10. Request mode• The measure of the device is not returned to the program until the device is triggered. – The input mode is standard, such as: C , C++, ….program • Input the “scanf”: – the program halts before we type characters at our terminal. – Each data is placed in keyboard buffer • “enter” key (the trigger) is depressed Request Trigger Measure process Program Trigger process Measure Video Processing Lab 10 臺灣師範大學數位媒體中心視訊處理研究室
11. 11. Sample mode• Input is immediate. (simple type of request mode) – As soon as the function call in the user program is encountered, the measure is returned. • Left Click is depressed Sample Measure Program process Measure Video Processing Lab 11 臺灣師範大學數位媒體中心視訊處理研究室
12. 12. Event mode (1)• Handle other interactions: – How event mode can be described as another mode within our measure-trigger. (How) – Basic of client and servers where event mode is the preferred interaction mode. (where) – Event-mode interface to OpenGL using GULT Video Processing Lab 12 臺灣師範大學數位媒體中心視訊處理研究室
13. 13. Event mode (2)• Event is generated: – Each time that a device is triggered• Device measure: – The identifier for the device is placed in an event queue. Await Trigger Measure Event Program process Trigger process queue Measure Event Video Processing Lab 13 臺灣師範大學數位媒體中心視訊處理研究室
14. 14. OpenGL Input device function• Input device: – Mouse & keyboard • To extract the current raster position • window management function – glutMouseFunc(myMouse); and glutKeyboardFunc(key); User define – OpenGL mouse event (GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON …) OpenGL keyboard event (each key on keyboard can be used) Location of mouse: left-down Video Processing Lab 14 臺灣師範大學數位媒體中心視訊處理研究室
15. 15. Display Color information Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal UniversityCh4: Computer Graphics with OpenGL 3th, Hearn Baker
16. 16. Graphics system• Attribute parameter – Determine the fundamental characteristics • Color and size – Specify how the primitive is to be displayed under special conditions • Visibility or detectability within an interactive object- selection program – The current frame-buffer position • state variables glBegin …. glEnd • state parameters – from one coordinate position to another Video Processing Lab 16 臺灣師範大學數位媒體中心視訊處理研究室
17. 17. Color• Color information: – RGB: Resolution=1024x1024, Full color=24- bit/pixel, Frame buffer=3 megabytes Magenta Blue Red Cyan Yellow Green – Gray scale: Ex: object‟s shade Video Processing Lab 17 臺灣師範大學數位媒體中心視訊處理研究室
18. 18. Color table Color lookup table monitor 0 y 196 196 0x0821(2081) x 255To Red Gun To Green Gun To Blue Gun Each 8-bit segment of this entry controls the00000000 00001000 00100001 intensity level of one of the three electron guns in an RGB monitor Video Processing Lab 18 臺灣師範大學數位媒體中心視訊處理研究室
19. 19. Pixel-array primitives• Graphics packages often supply routines to display shapes – Defined with a rectangular array of color values – Display: digitizing (scanning). – Each color value in the array is mapped to one or more screen pixel positions. • Typically referred to as a pixmap. • Pixel array: color and size Video Processing Lab 19 臺灣師範大學數位媒體中心視訊處理研究室
20. 20. y OpenGL bitmap ymaxfunction (same color) ymin x xmin xmax• The pixel-array is simply a bitmap, which is also called a mask.• OpenGL binary array pattern: glBitmap – width and height: the number of columns and rows in the array bitShape – x0 and y0: the start position of the array bitShape, (x0,y0): opposite current raster position – xOffset and yOffset: use as coordinate offsets to update the frame-buffer current raster position. (next raster position) How to set bitShape ? Video Processing Lab 20 臺灣師範大學數位媒體中心視訊處理研究室
21. 21. Arrow pointing upwards Start row Range is similar the mask Video Processing Lab 21 臺灣師範大學數位媒體中心視訊處理研究室
22. 22. OpenGL character function (1)• Using shape define any character as a bitmap.• Text string is displayed by mapping a selected sequence of bitmaps – From the font list into adjacent positions in the frame buffer• Some predefined character sets are available in the OpenGL Utility Toolkit (GLUT) – Bitmapped GLUT fonts are rendered: glBitmap – Outline fonts are generated with polyline (GL_LINE_STRIP) boundaries Video Processing Lab 22 臺灣師範大學數位媒體中心視訊處理研究室
23. 23. OpenGL character function (2)• Display a bitmap GLUT character – font : a symbolic GLUT constant identifying a particular set of type faces • Fixed-width fonts: – GLUT_BITMAP_8_BY_13 or GLUT_BITMAP_9_BY_15 – Times-Roman font(10-point and 12-point font) » Ex: GLUT_BITMAP_TIMES_ROMAN_10… – Helvetica font(10, 12, 18-point font) » Ex: GLUT_BITMAP_HELVETICA_10… – character • ASCII code – Capital letter : „A‟=ASCII code=65, „B‟=ASCII code=66… – Small letter: ‟a‟=ASCII code=97, ‟b‟=ASCII code=98… • the specific character Video Processing Lab 23 臺灣師範大學數位媒體中心視訊處理研究室
24. 24. Display architecture Display-processor architectureSimple graphics architecture server Displayserver processor Host Host (DPU) Display file Immediate mode (display list) Ex : progressive Retained mode Ex : interlace Video Processing Lab 24 臺灣師範大學數位媒體中心視訊處理研究室
25. 25. OpenGL Color Functions• Color display mode: RGB• Select the current color components 3 or 4, RGB or RGBA (1.0,1.0,1.0,1.0) range: 0~1 – Using an array specification for three color components Point‟s dimension Data type – Color-index mode references values in a color table Nonnegative integer value & stored in the frame-buffer positions, EX: Video Processing Lab 25 臺灣師範大學數位媒體中心視訊處理研究室
26. 26. Color Arrays ProgressnColorComponents:3 or 4 datatype: GL_INT or GL_FLOAT offset: 0: separate color array else (combine color data with vertex data): the number of bytes between each set of color components in colorArray Video Processing Lab 26 臺灣師範大學數位媒體中心視訊處理研究室
27. 27. Interlace scan • Interlace is a technique of improving the picture quality of a video transmission without consuming any extra bandwidth. – It was invented by RCA engineer Randall C. Ballard in the late 1920s. Odd field Even field Video Processing Lab 27http://en.wikipedia.org/ 臺灣師範大學數位媒體中心視訊處理研究室
28. 28. Color Arrays Interlace Video Processing Lab 28 臺灣師範大學數位媒體中心視訊處理研究室
29. 29. OpenGL point functions• Point-attribute: – The point is displayed as a square block of pixels. – size = round ( the assigned + floating- point value) • Ex: a point size = 4.0 displays a 4 X 4 pixel array • Default value: point size = 1.0 Video Processing Lab 29 臺灣師範大學數位媒體中心視訊處理研究室
30. 30. OpenGL line functions• Line-width function: floating-point• Line style function: – pattern: 16-bit integer that describes how the line should be displayed. • “1”-bit in the pattern denotes an “on” pixel position • “0”-bit : “off” pixel position – Ex: 0xFFFF-> (default), 0x1C47->dash-dot line, 0x00FF->dashed line… – repeatFactor: how many times each bit in the pattern is to be repeated before the next bit in the pattern. • Default repeat value = 1 Video Processing Lab 30 臺灣師範大學數位媒體中心視訊處理研究室
31. 31. How to useLine style function Default: 1 0xFFFF-> default, 0x1C47->dash-dot line, 0x00FF->dashed line Video Processing Lab 31 臺灣師範大學數位媒體中心視訊處理研究室
32. 32. General scan-line polygon-fill algorithm• A scan-line fill of a region – Intersection positions of the boundaries – Fill colors are within the interior of the fill region – Display format • Simple case • Pattern case Video Processing Lab 32 臺灣師範大學數位媒體中心視訊處理研究室
33. 33. Draw boundaries• Find start vertex-intersection – Count the shorten polygon edges• Decide the polygon boundary – Clockwise or counterclockwise• Check the next point – Monotonically increasing or decreasing – *The edge currently being processed is indicated as a solid line (delete some points) counterclockwise Next edge Current edge point is -1 point is -1 clockwise Video Processing Lab 33 臺灣師範大學數位媒體中心視訊處理研究室
34. 34. Edge table• To efficiently perform a polygon fill 1. Stored each edge point or 2. Sorted on the smallest y value Video Processing Lab 34 臺灣師範大學數位媒體中心視訊處理研究室
35. 35. Boundary & Flood -fill algorithm• Choose routine method – 4-connected area – 8-connected area – Mask texture or• Select start point boundary area Interior area Video Processing Lab 35 臺灣師範大學數位媒體中心視訊處理研究室
36. 36. OpenGL fill-pattern function• Define pattern style … – The pattern start at the lower-left window corner• Fill pattern function• Enable the fill routines … turns off pattern filling Video Processing Lab 36 臺灣師範大學數位媒體中心視訊處理研究室
37. 37. OpenGL Pixmap function– width and height: the number of columns and rows in the array (pixmap)– dataFormat: the values are assigned from OpenGL in the array (pixMap) • GL_BLUE: a single bule color for all pixels • GL_BGR: three color components (blue, green and red)– dataType: to designate the data type for the color values in the array (pixmap) • GL_BYTE, GL_INT, GL_FLOAT… How to set pixMap ? Video Processing Lab 37 臺灣師範大學數位媒體中心視訊處理研究室
38. 38. pixMap: BMP file format • Header: two bytes long and are reserved for future extensions to the format definition Video Processing Lab 38http://web.uccs.edu/wbahn/ECE1021/STATIC/REFERENCES/bmpfileformat.htm 臺灣師範大學數位媒體中心視訊處理研究室
39. 39. BMP header information• BMP Image Header Contents for Windows Format Video Processing Lab 39 臺灣師範大學數位媒體中心視訊處理研究室
40. 40. BMP color table • Optional color table – 24-bit image: no Color Table present. – 8-bit Windows BMP: (Gray) • the Color Table consists of 256 entries with each entry consisting of four bytes of data. • The first three byte are the blue, green, and red color values respectively. • The fourth byte is unused and must be equal to zero. Video Processing Lab 40http://web.uccs.edu/wbahn/ECE1021/STATIC/REFERENCES/bmpfileformat.htm 臺灣師範大學數位媒體中心視訊處理研究室
41. 41. BMP pixel data• 8-bit format: – A pixels use a character into the Color Table.• 24-bit format: – each pixel is represented by three pixMap consecutive bytes of data • blue, green, and red component values. Video Processing Lab 41 臺灣師範大學數位媒體中心視訊處理研究室
42. 42. Where to read or display image data?• Put read image function to init()• Process image data – Mouse function: Idle->… – Before display• Display image in display function – Display() Video Processing Lab 42 臺灣師範大學數位媒體中心視訊處理研究室
43. 43. Color blending• Color-blending function (image-compositing function) : – provide method for producing various color- mixing effects • Combine the colors of overlapping objects • Blend an object with the background – How to do in OpenGL? (combine destination color & source color) • Destination color: first load one object into the frame buffer • Source color: the color of the second object start end Video Processing Lab 43 臺灣師範大學數位媒體中心視訊處理研究室
44. 44. Color-blended fill regions Combine result: Linear soft-fill function: C = tF + (1-t)BPattern P: object‟s current pixel Background position (PR, PG, PB) B: background (BR, BG, BB) C: pattern pixel + background pixel (CR, CG, CB) t: linear combine parameter=(Pk-Bk)/(Fk-Bk) Video Processing Lab 44 臺灣師範大學數位媒體中心視訊處理研究室
45. 45. Color blending function• Color blending can use in a number of different ways – Different color effects by specifying two sets of blending factors • One set: destination object • The other set: blending factors is for the incoming “source” object. – RGBA source color components (Rs, Gs, Bs, As) – Destination components (Rd, Gd, Bd, Ad) – Source blending factors (Sr, Sg, Sb, Sa) – Destination blending factors (Dr, Dg, Db, Da) – All range 0.0~1.0 Video Processing Lab 45 臺灣師範大學數位媒體中心視訊處理研究室
46. 46. OpenGL color blending function• sFactor & dFactor : the source and destination factors – OpenGL predefined set of four blending coefficients • GL_ZERO: blending factor (0.0, 0.0, 0.0, 0.0) & GL_ONE: blending factor (1.0, 1.0, 1.0, 1.0) • The default value: – sFactor is GL_ONE and dFacter is GL_ZERO Video Processing Lab 46 臺灣師範大學數位媒體中心視訊處理研究室
47. 47. Aliasing picture• Aliasing – the distortion of information due to low- frequency sampling• Sampling – Basic condition: • Nyquist sampling frequency • Nyquist sampling interval High frequency Low frequency 47 Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室
48. 48. Antialiasing method • Computing overlap areas is referred to as area sampling (or prefiltering) • Pixel overlap areas – determining where object boundaries – intersect individual pixel boundaries.Supersampling subpixel • Pixel positions along a straight-positions in relation-the interior of a line line segment-the finite width. – Moved closer to the defined line pixelcolor = path (4blue + 5white) – And smooth out the raster stair- 9 step effect. Video Processing Lab 48 臺灣師範大學數位媒體中心視訊處理研究室
49. 49. Subpixel Weighting Masks• Supersampling algorithms are often implemented by giving – more weight to subpixels near the center of a pixel area – more important in determining the overall intensity of a pixel The volume of each filter is normalized to 1.0 Video Processing Lab 49 臺灣師範大學數位媒體中心視訊處理研究室
50. 50. Antialiasing & aliasing pictures• The antialiasing effects of pixel phasing on a variety of line paths. Video Processing Lab 50 臺灣師範大學數位媒體中心視訊處理研究室
51. 51. Homework 1 – use function glBitmap draw • Raster start point, Ex: (30, 40) – Repeat time = 5 • Times-Roman fonts (first character 12-point, others 10- point): “Hello~ I like OpenGL!!” • Practice: Helvetica font(10, 12, 18-point) • Reward: design your name (fill-pattern function) Video Processing Lab 51 臺灣師範大學數位媒體中心視訊處理研究室
52. 52. Homework 2• Load a picture and show this picture – Such as: lena.bmp or other bmp (24-bits or 32-bit…) • Use operator (&, or, xor, replace) to separate color (red, green, blue, magenta, yellow, cyan) • Combine another picture – Ex: parameter: linear or… Video Processing Lab 52 臺灣師範大學數位媒體中心視訊處理研究室
53. 53. Lena story November 1972 May 1997 Lenna attended the 50th Anniversary The Society for Imaging Science and Technology • Another interesting piece of trivia is that Lennas issue (November 1972) was Playboys best selling issue ever and sold 7,161,561 copies. Video Processing Lab 53http://www.cs.cmu.edu/~chuck/lennapg/ 臺灣師範大學數位媒體中心視訊處理研究室
54. 54. reference• http://elearning.emath.pu.edu.tw/mk uo2003/• http://www.cs.utexas.edu/users/fuss ell/courses/cs324e/ Video Processing Lab 54 臺灣師範大學數位媒體中心視訊處理研究室