CG OpenGL polar curves & input display color-course 4

54
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

description

Design some polar curves & view color information on devices

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

Page 1: CG OpenGL polar curves & input display color-course 4

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

Page 2: CG OpenGL polar curves & input display color-course 4

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

Page 3: CG OpenGL polar curves & input display color-course 4

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

Page 4: CG OpenGL polar curves & input display color-course 4

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.

Page 5: CG OpenGL polar curves & input display color-course 4

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

Page 6: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

6

How to draw polar-coordinate picture

Sector size

Page 7: CG OpenGL polar curves & input display color-course 4

Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室

National Taiwan Normal University

Input devices trigger

Ch3: Interactive Computer Graphics: A Top-Down Approach using OpenGL, 3/e

Page 8: CG OpenGL polar curves & input display color-course 4

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

Page 9: CG OpenGL polar curves & input display color-course 4

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.

Page 10: CG OpenGL polar curves & input display color-course 4

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

Page 11: CG OpenGL polar curves & input display color-course 4

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

Page 12: CG OpenGL polar curves & input display color-course 4

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

Page 13: CG OpenGL polar curves & input display color-course 4

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

Page 14: CG OpenGL polar curves & input display color-course 4

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

Page 15: CG OpenGL polar curves & input display color-course 4

Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室

National Taiwan Normal University

Display Color information

Ch4: Computer Graphics with OpenGL 3th, Hearn Baker

Page 16: CG OpenGL polar curves & input display color-course 4

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

Page 17: CG OpenGL polar curves & input display color-course 4

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

Page 18: CG OpenGL polar curves & input display color-course 4

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

Page 19: CG OpenGL polar curves & input display color-course 4

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

Page 20: CG OpenGL polar curves & input display color-course 4

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 ?

Page 21: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

21

Arrow pointing upwards

Start row

Range is similar the mask

Page 22: CG OpenGL polar curves & input display color-course 4

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

Page 23: CG OpenGL polar curves & input display color-course 4

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

Page 24: CG OpenGL polar curves & input display color-course 4

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

Page 25: CG OpenGL polar curves & input display color-course 4

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

Page 26: CG OpenGL polar curves & input display color-course 4

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

Page 27: CG OpenGL polar curves & input display color-course 4

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

Page 28: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

28

Color Arrays Interlace

Page 29: CG OpenGL polar curves & input display color-course 4

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

Page 30: CG OpenGL polar curves & input display color-course 4

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

Page 31: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

31

How to use Line style function

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

Default: 1

Page 32: CG OpenGL polar curves & input display color-course 4

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

Page 33: CG OpenGL polar curves & input display color-course 4

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)

Page 34: CG OpenGL polar curves & input display color-course 4

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

Page 35: CG OpenGL polar curves & input display color-course 4

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

Page 36: CG OpenGL polar curves & input display color-course 4

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

Page 37: CG OpenGL polar curves & input display color-course 4

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 ?

Page 38: CG OpenGL polar curves & input display color-course 4

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

Page 39: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

39

BMP header information

• BMP Image Header Contents for Windows Format

Page 40: CG OpenGL polar curves & input display color-course 4

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

Page 41: CG OpenGL polar curves & input display color-course 4

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

Page 42: CG OpenGL polar curves & input display color-course 4

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

Page 43: CG OpenGL polar curves & input display color-course 4

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

Page 44: CG OpenGL polar curves & input display color-course 4

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

Page 45: CG OpenGL polar curves & input display color-course 4

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

Page 46: CG OpenGL polar curves & input display color-course 4

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

Page 47: CG OpenGL polar curves & input display color-course 4

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

Page 48: CG OpenGL polar curves & input display color-course 4

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

Page 49: CG OpenGL polar curves & input display color-course 4

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

Page 50: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

50

Antialiasing & aliasing pictures

• The antialiasing effects of pixel phasing on a variety of line paths.

Page 51: CG OpenGL polar curves & input display color-course 4

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)

Page 52: CG OpenGL polar curves & input display color-course 4

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…

Page 53: CG OpenGL polar curves & input display color-course 4

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

Page 54: CG OpenGL polar curves & input display color-course 4

Video Processing Lab

臺灣師範大學數位媒體中心視訊處理研究室

54

reference

• http://elearning.emath.pu.edu.tw/mkuo2003/

• http://www.cs.utexas.edu/users/fussell/courses/cs324e/