Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室
National Taiwan Normal University
Some polar curves Input devices
Display Color information Chen Jing-Fung (2006/11/22)
Assistant Research Fellow, Digital Media Center,
National Taiwan Normal University
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
2
Polar coordinates in xy plane
• Angle θ =s/r (radians/radius) • Polar coordinate-> Cartesian coordinate
x=r cosθ, y=r sinθ • Inverse transformation
x axis
y axis r
x
y
r
: ( , )x yP
s
2 2 1, tan ( )y
r x yx
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
3
Cardioid polar plot
• The curve given by the polar equation
The envelope of these circles is then a cardioid (Pedoe 1995). The name cardioid was first
used by de Castillon in Philosophical Transactions of the Royal Society in 1741. Its arc length was found by la Hire in 1708.
http://mathworld.wolfram.com
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
4
The graph of the polar equation (1)
cos( ) 52cos(4 ) sin (1/12)r e
• 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.
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
6
How to draw polar-coordinate picture
Sector size
Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室
National Taiwan Normal University
Input devices trigger
Ch3: Interactive Computer Graphics: A Top-Down Approach using OpenGL, 3/e
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
Measure process
Program Trigger
Trigger process
Request
Measure
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
Measure process
Program
Sample
Measure
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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.
Measure process
Program Trigger
Await
Event
Trigger process
Event queue Measure
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
14
OpenGL Input device function
• Input device: – Mouse & keyboard
• To extract the current raster position • window management function
– glutMouseFunc(myMouse); and glutKeyboardFunc(key);
– OpenGL mouse event (GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON …) OpenGL keyboard event (each key on keyboard can be used)
User define
Location of mouse: left-down
Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室
National Taiwan Normal University
Display Color information
Ch4: Computer Graphics with OpenGL 3th, Hearn Baker
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
• state parameters – from one coordinate position to another
glBegin
….
glEnd
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
17
Color
• Color information: – RGB: Resolution=1024x1024, Full color=24-
bit/pixel, Frame buffer=3 megabytes
– Gray scale: Ex: object‟s shade
Magenta
Yellow Cyan
Blue Red
Green
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
18
Color table
monitor
x
y
Color lookup
table
0x0821(2081)
0
196
255
0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1
To Red Gun To Green Gun To Blue Gun Each 8-bit segment of
this entry controls the
intensity level of one of
the three electron guns
in an RGB monitor
196
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
20
OpenGL bitmap function (same color)
• 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)
x
y
xmin xmax
ymax
ymin
How to set bitShape ?
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
21
Arrow pointing upwards
Start row
Range is similar the mask
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
24
Display architecture
Host
Simple graphics architecture
Immediate mode
Host
Display processor
(DPU)
Display file (display list)
Display-processor architecture
Retained mode Ex : progressive
Ex : interlace
server server
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
25
OpenGL Color Functions
• Color display mode: RGB
• Select the current color components
– Using an array specification for three color components
– Color-index mode references values in a color table
Data type
Nonnegative integer value & stored
in the frame-buffer positions, EX:
Point‟s dimension
3 or 4, RGB or RGBA (1.0,1.0,1.0,1.0) range: 0~1
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
26
Color Arrays Progress
nColorComponents: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
臺灣師範大學數位媒體中心視訊處理研究室
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.
http://en.wikipedia.org/
Odd field Even field
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
28
Color Arrays Interlace
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
30
OpenGL line functions
• Line-width function:
• 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
floating-point
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
31
How to use Line style function
0xFFFF-> default, 0x1C47->dash-dot line, 0x00FF->dashed line
Default: 1
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
33
Draw boundaries
Current edge point is -1
Next edge point is -1
clockwise
counterclockwise
• 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)
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
34
Edge table
2. Sorted on the smallest y value
• To efficiently perform a polygon fill
1. Stored each edge point or
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
35
• Choose routine method – 4-connected area
– 8-connected area
– Mask texture
• Select start point
Boundary & Flood -fill algorithm
Interior area
boundary area
or
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
38
pixMap: BMP file format
• Header:
http://web.uccs.edu/wbahn/ECE1021/STATIC/REFERENCES/bmpfileformat.htm
two bytes long and are reserved for future extensions to the format definition
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
39
BMP header information
• BMP Image Header Contents for Windows Format
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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.
http://web.uccs.edu/wbahn/ECE1021/STATIC/REFERENCES/bmpfileformat.htm
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
consecutive bytes of data • blue, green, and red component values.
pixMap
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
44
Color-blended fill regions
Pattern
Linear soft-fill function: C = tF + (1-t)B
P: object‟s current pixel 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)
Combine result:
Background
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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. • Pixel positions along a straight-
line segment – Moved closer to the defined line
path – And smooth out the raster stair-
step effect.
Supersampling subpixel positions in relation -the interior of a line -the finite width.
pixelcolor = (4blue + 5white) 9
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
50
Antialiasing & aliasing pictures
• The antialiasing effects of pixel phasing on a variety of line paths.
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
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
臺灣師範大學數位媒體中心視訊處理研究室
53
Lena story
• Another interesting piece of trivia is that Lenna's issue (November 1972) was Playboy's best selling issue ever and sold 7,161,561 copies.
http://www.cs.cmu.edu/~chuck/lennapg/
November 1972 May 1997
Lenna attended the 50th Anniversary The Society for Imaging Science and Technology
Video Processing Lab
臺灣師範大學數位媒體中心視訊處理研究室
54
reference
• http://elearning.emath.pu.edu.tw/mkuo2003/
• http://www.cs.utexas.edu/users/fussell/courses/cs324e/