Polar Coordinates & Color Display

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
臺灣師範大學數位媒體中心視訊處理研究室


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 (Pedoe
The name cardioid was first 1995).
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 臺灣師範大學數位媒體中心視訊處理研究室

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)


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


How to draw
polar-coordinate picture

Sector size


Input devices trigger


Ch3: 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


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.


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


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


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


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


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

Display Color
information


Ch4: 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


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

Color table Color lookup
table
monitor
0

y 196

196 0x0821(2081)

x
255
To Red Gun To Green Gun To Blue Gun Each 8-bit segment of
this entry controls the
00000000 00001000 00100001 intensity level of one of
the three electron guns
in an RGB monitor


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


y

OpenGL bitmap ymax

function (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 ?

Arrow pointing upwards

Start row

Range is similar the mask

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


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


Display architecture
Display-processor architecture
Simple graphics architecture
server
Display
server processor
Host
Host (DPU)

Display file
Immediate mode (display list)
Ex : progressive
Retained mode
Ex : interlace


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:

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


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
http://en.wikipedia.org/ 臺灣師範大學數位媒體中心視訊處理研究室

Color Arrays Interlace


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


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


How to use
Line style function

Default: 1

0xFFFF-> default, 0x1C47->dash-dot line,
0x00FF->dashed line


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


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

Edge table
• To efficiently perform a polygon fill

1. Stored each edge point
or
2. Sorted on the smallest
y value


Boundary & Flood -fill
algorithm
• Choose routine method
– 4-connected area
– 8-connected area
– Mask texture or

• Select start point boundary area

Interior area


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

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 ?

pixMap: BMP file format

• Header:

two bytes long and are reserved for
future extensions to the format
definition

http://web.uccs.edu/wbahn/ECE1021/STATIC/REFERENCES/bmpfileformat.htm

BMP header information

• BMP Image Header Contents for
Windows Format


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

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.


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()


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


Color-blended fill regions
Combine result:

Linear soft-fill function:
C = tF + (1-t)B
Pattern
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)


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


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


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

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.

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


Antialiasing & aliasing
pictures
• The antialiasing effects of pixel
phasing on a variety of line paths.


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)


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…


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 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/ 臺灣師範大學數位媒體中心視訊處理研究室

reference
• http://elearning.emath.pu.edu.tw/mk
uo2003/
• http://www.cs.utexas.edu/users/fuss
ell/courses/cs324e/


Polar Coordinates & Color Display

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Polar Coordinates & Color Display

Similar to Polar Coordinates & Color Display (20)

More from fungfung Chen

More from fungfung Chen (20)

Recently uploaded

Recently uploaded (20)

Polar Coordinates & Color Display