CG OpneGL 2D viewing & simple animation-course 6

2D Viewing & simple
animation
Chen Jing-Fung (2006/11/30)
Assistant Research Fellow,
Digital Media Center,
National Taiwan Normal University

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

National Taiwan Normal University
Ch6 & 11: Computer Graphics with OpenGL 3th, Hearn Baker

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

Video Processing Lab 2

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


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


Coordinate
representations
Viewing & Projection
Coordinates

1 1
Modeling Transformation : 1 Video Monitor
(local or master) Coordinates & Viewing
Coordinates
Plotter
World Normalized
(Cartesian) Coordinates
Coordinates
Other Output

Device
Coordinates

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


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
Clipping window
Normalization viewport

World coordinates Viewing coordinates


OpenGL viewport function

• glViewport (xvmin, yvmin, vpWidth, vpHeight);
– Position: (xvmin,yvmin)
• Low-left corner of the viewport vpHeight

– Viewport size vpWidth

• Width=vpWidth, Height=vpHeight (xvmin, yvmin)

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


Viewport: Split-screen
Origin
• Split display window
– Two viewport: Up & down 600

• Object 300

– Origin & rotate 90o 10.0
5.0
• Zoom in the object size
• Result


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

• Display
– wcPt2D verts [2] //object 10.0
5.0
– 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

•Result: demo


Real case about split
monitor
• This case is used four sub-monitors
to obverse more player how to bite

Practice the split window function …

Multiple display windows

http://www.microsoft.com/ 臺灣師範大學數位媒體中心視訊處理研究室

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


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


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


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


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


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


Scale image
• This image extract from “Solar empire -
heavens above” have be produced by
Discovery Communications , 1997
image B

image A Enlarge image A

smaller image B


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

Animation vs. Image

zoetrope

mutoscope

70mm
8mm 16mm 35mm

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..."

What is animation?

• Animation
– A sequence of images
– Those images have
relation


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


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


How to design a simple
animation
• Think?

• Strategy...


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


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 each time could Front Buffer
be changed
Frame II Frame I


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


Monitor refresh rate

Refresh time:
50-85-Hz rate
demo


Periodic motion

• A typical example of an periodic-
motion display is the wagon wheel in
American Western movie
Frame 0, Frame 1, Frame 2, Frame 3, Frame 4,
0 sec 1/24 sec 2/24 sec 3/24 sec 4/24 sec


OpenGL double buffer

• Main function
– glutInitDisplayMode (GLUT_DOUBLE |
GLUT_RGB);
• Display function
– glutSwapBuffers()
Back Buffer each time could Front Buffer
be changed
Frame II Frame I


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

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


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


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


• Next class will introduce 3D views


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


CG OpneGL 2D viewing & simple animation-course 6

Recommended

Recommended

More Related Content

Similar to CG OpneGL 2D viewing & simple animation-course 6

Similar to CG OpneGL 2D viewing & simple animation-course 6 (20)

More from fungfung Chen

More from fungfung Chen (20)

Recently uploaded

Recently uploaded (20)

CG OpneGL 2D viewing & simple animation-course 6