CG OpneGL 2D viewing & simple animation-course 6

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

National Taiwan Normal University

2D Viewing & simple animation Chen Jing-Fung (2006/11/30)

Assistant Research Fellow, Digital Media Center,

National Taiwan Normal University

Ch6 & 11: Computer Graphics with OpenGL 3th, Hearn Baker

Video Processing Lab

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

2

2D view -> animation

• What is view? • How to view?

– Viewing region – Viewing transformation – Vision window vs. image

• What is animation? – How to construct? – Related to viewing region



3

View about output device

• Graphics package allows a user to specify the part of a picture – One device:

• Display the part of a defined picture

– Many devices • Which display device is to be placed by that

part (where?)



4

View region

• A view is selected by specifying a region – To select a region or several regions (an

animated panning sequence across a scene) – Who view? User or camera… – Where? Specified areas of the device

coordinates (Ex: xy plane) – Viewing transformations involve translation,

rotation and scaling operations • Or deleting some parts about the limits of outside



5

Coordinate representations

1 1

1

Plotter

Other Output

Device Coordinates

Video Monitor Modeling (local or master)

Coordinates World

(Cartesian) Coordinates

Normalized Coordinates

Viewing & Projection Coordinates

Transformation : Coordinates & Viewing



6

2D viewing-transformation pipeline

• Modeling-coordinate – User construct scene (or object) by world-coordinate

• Transformation – World coordinates <=> Viewing coordinates – Viewing coordinates to normalize

• reshape(): glMatrixMode(GL_PROJECTION), glLoadIdentify(), gluOrtho2D()…

• Output device show – Map normalized coordinates to device coordinates

• reshape(): viewport()



7

Two different Viewports

• Why do viewing transformation? – zoom in the green region (or zoom out)

• Viewing-coordinate (reference frame) is from specifying the clipping window

World coordinates Viewing coordinates

Clipping window

Normalization viewport



8

OpenGL viewport function

• glViewport (xvmin, yvmin, vpWidth, vpHeight); – Position: (xvmin,yvmin)

• Low-left corner of the viewport

– Viewport size • Width=vpWidth, Height=vpHeight

• Not invoke the glViewport() function – Default: viewport size (position) = display

window size (position)

(xvmin, yvmin)

vpWidth

vpHeight



9

Viewport: Split-screen

• Split display window – Two viewport: Up & down

• Object – Origin & rotate 90o

• Zoom in the object size

• Result

Origin

300

600

10.0 5.0



10

Viewport Example

• Initial set – glMatrixMode (GL_PROJECTION); – gluOrtho2D (x1, y1, x2, y2); // Normalization (central or corner) – glMatrixMode (GL_MODELVIEW);

• Display

– wcPt2D verts [2] //object

– glViewport (); //set viewport: lower-left point(0,0) size(300, 300) – rent (verts); //draw object

– glViewport (); //set up viewport – glRotatef(angle, x, y, z); //rotate 900 about z axis – rent (verts); //draw object

10.0 5.0

•Result: demo

ch6_2DViewSplitRent.exe



11

Real case about split monitor

• This case is used four sub-monitors to obverse more player how to bite

Practice the split window function …



12

Multiple display windows

http://www.microsoft.com/



13

Glut display window

• Multiple display windows can be created for an application – Create One window must be assigned one ID

• windowID = glutCreateWindow (“name”)

– Delete a display window • glutDestroyWindow (windowID)

– Current display window (not change current window) • glutSetWindow (windowID)

– Query the window • currentWindowID = glutGetWindow () //if value=0 => no

window



14

Managing Multiple GLUT display windows

• Window icon: glutIconifyWindow ()

– Convert the windowcurrent to an icon • small picture or symbol

– Use to represent the window

– Icon name is as same as the window. • Change icon’s name

glutSetIconTitle(“new name”)

• Change window’s name glutSetWindowTitle(“new name”)



15

Windows operators

• Change display windows order – The window is to be in front of all other

windows glutSetWindow (windowID) glutPopWindow ()

– Push the window to the back glutSetWindow (windowID) glutPushWindow()

– Take off the current window glutHideWindow()

– Return a “hidden” display window glutShowWindow()



16

One window & Multi-windows

• Describe what is to be displayed in the current display window – glutDisplayFunc (pictureDescrip)

• pictureDescrip: usually contains the OpenGL primitives and attributes

• After glutPopWindow()

• glutPostRedisplay () – Indicate the contents of the current display window

should be renewed – The routine is also used when additional object is to be

shown



17

Executing the application program

• When program setup is OK and display have been created and initialized – glutMainLoop()

• GLUT processing loop: Continually checks for new “event” – Interactive input: mouse or a graphics tablet



18

Resizing a GLUT display window

• Resize window – Any size: glutReshapeWindow (dwNewWidth,

dwNewHeight) • New position at the upper-left display window • Relative to the upper-left corner of the screen • Exact size depends on the window-management system

– Full screen: glutFullScreen() //usually use

• Resize function – glutReshapeFunc (winReshapeFcn)

• GLUT routine is activated which can be defined by user • The “callback function” for “reshape event”

– Change the parameters for the viewport



19

Scale image • This image extract from “Solar empire -

heavens above” have be produced by Discovery Communications , 1997

Enlarge image A image A

image B

smaller image B



20

OpenGL scale image function

• Scale an image to any size int gluScaleImage (format, Imagein info, Imageout info) – Format (Specifies the format of the pixel data)

• Color information: GL_COLOR_INDEX, GL_RED, GL_GREEN, GL_BLUE…

– Image info: width* & height*, type*, data* • widthin, heightin & widthout, heightout

– widthin and heightin of the scaled source image – widthout and heightout of the destination image.

• typein & typeout (Specifies the data type for datain & dataout)

– Data type: GL_UNSIGNED_BYTE, GL_BYTE, GL_INT, GL_FLOAT…

• datain & dataout – Datain: source image, dataout: diestination image

http://www.mevis.de/opengl/gluScaleImage.html



21

mutoscope

zoetrope

Film Art: An Introduction (Paperback)by David Bordwell, Kristin Thompson "Motion pictures

are so much a part of our lives that it's hard to imagine a world without them..."

8mm 16mm 35mm

70mm

Animation vs. Image

http://www.amazon.com/exec/obidos/search-handle-url/index=books&field-author-exact=David Bordwell&rank=-relevance%2C%2Bavailability%2C-daterank/002-7375221-2324865

http://www.amazon.com/exec/obidos/search-handle-url/index=books&field-author-exact=Kristin Thompson&rank=-relevance%2C%2Bavailability%2C-daterank/002-7375221-2324865



22

What is animation?

• Animation – A sequence of images

– Those images have relation



23

Motion sequences

• Two basic method to design – Real-time animation – Frame by frame animation

• Displayed on a video monitor in “real-time playback” – Simple animation displays->real-time – Complex animation

• Special hardware and software system (MPEG standard..)



24

Raster method for computer animation

• What is problem? – Construct one frame (in animation) could

take most of refresh cycle time • Objects generated take the frame refresh

time • Object is gone (next frame), that frame

should be recreate – Unregulated motion, fractured frame…

– Simply = regular motion



25

How to design a simple animation

• Think?

• Strategy...



26

Efficiently process image sequences

• Strategy in CG – Design the object which

can move between frame-by-frame • Problem is how to change

buffers

– Find frame rate

– What time to start



27

Double buffering

• Real-time animation with a raster system is to use two refresh buffers – Create a frame in a buffer

– When the screen is showed from that buffer • Construct the next frame in the other

buffer Back Buffer

Frame II Frame I

Front Buffer each time could be changed



28

Frame rate

• How fast to switch two refresh buffers – Regular motion

• 1/60 (sec): 60 frames per one second • 1/30 (sec) ~ MPEG I/II • 1/25 (sec) or 1/20 (sec) …

– Unregulated motion • 1/60 jump to 2/60 or 3/60



29

Monitor refresh rate

Refresh time:

50-85-Hz rate

demo



30

Periodic motion

• A typical example of an periodic-motion display is the wagon wheel in American Western movie

Frame 0, 0 sec

Frame 1, 1/24 sec

Frame 2, 2/24 sec

Frame 3, 3/24 sec

Frame 4, 4/24 sec



31

OpenGL double buffer

• Main function – glutInitDisplayMode (GLUT_DOUBLE |

GLUT_RGB);

• Display function – glutSwapBuffers()

Back Buffer

Frame II Frame I

Front Buffer each time could be changed



32

The sampling rate in Periodic motion

• For a continuous rotation, we could reset parameter values one every cycle (3600)

• We want to rotate a object – Each time rotation angle = 30

• 120 motion steps could be produced

– Increment = 40 • Generates 90 position

What rate do you choose (higher or lower)?



33

OpenGL buffer change function

• When there are no event to process, the convenient to design – glutIdleFunc (idle)

• Idle: describe the objects how to move (it’s trajectory)

• Mouse callback – mouse (button, action, x, y)

• if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) glutIdleFunc (idle);



34

Object’s trajectory

• void idle () – rotTheta += 2.0; //rotation angle △= 2.0

– if (rotTheta > 360.0) rotTheta -= 360.0;

– glutPostRedisplay ();

1. Object setup

2. Buffer change



35

Homework

• Object has different frame rate in split screen – Step 1: choose your object (one)

• Small image or polygon …

– Step 2: split screen • 2, 3, 4….(choose one)

– Step 3: put object which has different frame rate on those split screen

– Reward: put the icon up the window



36

• Next class will introduce 3D views



37

Reference books

• Computer Graphics with OpenGL 3th, Hearn Baker

• Interactive Computer Graphics: A Top-Down Approach using OpenGL, 3/e, Addison Wesley

• Film Art: An Introduction (Paperback)by David Bordwell, Kristin Thompson

http://www.amazon.com/exec/obidos/search-handle-url/index=books&field-author-exact=David Bordwell&rank=-relevance%2C%2Bavailability%2C-daterank/002-7375221-2324865

http://www.amazon.com/exec/obidos/search-handle-url/index=books&field-author-exact=Kristin Thompson&rank=-relevance%2C%2Bavailability%2C-daterank/002-7375221-2324865

CG OpneGL 2D viewing & simple animation-course 6

Design

Transcript of CG OpneGL 2D viewing & simple animation-course 6