Like this presentation? Why not share!

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

## by fungfung Chen, Software Developer at III on Oct 15, 2011

• 905 views

Design some polar curves & view color information on devices

Design some polar curves & view color information on devices

### Views

Total Views
905
Views on SlideShare
791
Embed Views
114

Likes
0
6
0

### 1 Embed114

 http://140.122.185.36 114

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

• 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
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• How to drawpolar-coordinate picture Sector size Video Processing Lab 6 臺灣師範大學數位媒體中心視訊處理研究室
• Input devices trigger Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal UniversityCh3: Interactive Computer Graphics: A Top-Down Approach using OpenGL, 3/e
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• Display Color information Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal UniversityCh4: Computer Graphics with OpenGL 3th, Hearn Baker
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• Arrow pointing upwards Start row Range is similar the mask Video Processing Lab 21 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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/ 臺灣師範大學數位媒體中心視訊處理研究室
• Color Arrays Interlace Video Processing Lab 28 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• How to useLine style function Default: 1 0xFFFF-> default, 0x1C47->dash-dot line, 0x00FF->dashed line Video Processing Lab 31 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• BMP header information• BMP Image Header Contents for Windows Format Video Processing Lab 39 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• Antialiasing & aliasing pictures• The antialiasing effects of pixel phasing on a variety of line paths. Video Processing Lab 50 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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 臺灣師範大學數位媒體中心視訊處理研究室
• 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/ 臺灣師範大學數位媒體中心視訊處理研究室
• reference• http://elearning.emath.pu.edu.tw/mk uo2003/• http://www.cs.utexas.edu/users/fuss ell/courses/cs324e/ Video Processing Lab 54 臺灣師範大學數位媒體中心視訊處理研究室