transformations of objectsnatacha/teachspring_12/csc47… · · 2012-01-30transformations of...
TRANSCRIPT
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY1
CSC 470 Computer Graphics
Transformations of ObjectsTransformations of Objects
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY2
Transformations of objects - 2D
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY3
Using TransformationsUsing Transformations
• The arch is designed in its own coordinate system.
• The scene is drawn by placing a number of instances of the arch at different places and with different sizes.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY4
Using Transformations cont’d
• In 3D, many cubes make a city.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY5
Using Transformations cont’d• A designer may want to view an object from
different vantage points.• Positioning and reorienting a camera can be
carried out through the use of 3D affine transformations.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY6
Using Transformations cont’dUsing Transformations cont’d
• In a computer animation, objects move.• We make them move by translating and rotating their
local coordinate systems as the animation proceeds. • A number of graphics platforms, including OpenGL,
provide a graphics pipeline: a sequence of operations which are applied to all points that are sent through it.
• A drawing is produced by processing each point.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY7
The OpenGL Graphics Pipeline
• This version is simplified.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY8
Graphics Pipeline (2)
• An application sends the pipeline a sequence of points P1, P2, ... using commands such as:glBegin(GL_LINES);
glVertex3f(...); // send P1 through the pipelineglVertex3f(...); // send P2 through the pipeline...
glEnd();• These points first encounter a transformation called
the current transformation (CT), which alters their values into a different set of points, say Q1, Q2, Q3.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY9
Object transformations vs coordinate transformations
There are two ways to view a transformation: as an object transformation or as a coordinate transformation.
An object transformation alters the coordinates of each point on the object according to some rule, leaving the underlying coordinate system fixed.
A coordinate transformation defines a new coordinate system in terms of the old one, then represents all of the object’s points in this new system.
The two views are closely connected, and each has its advantages, but they are implemented somewhat differently.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY10
Affine transformations have a simple form: the coordinates of Q are linear combinations of those of P for some six given constants m11, m12, etc. Q x consists of portions of both of P x and Py, and so does Qy. This “cross fertilization” between the x- and y-components gives rise to rotations and shears.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY11
Affine Transformations - Vectors
• When vector V is transformed by the same affine transformation as point P, the result is
• Important: to transform a point P into a point Q, post-multiply M by P: Q = M P.
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
01000232221
131211
y
x
y
x
VV
mmmmmm
WW
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY12
Geometric Effects of Affine Transformations
• Combinations of four elementary transformations: (a) a translation, (b) a scaling, (c) a rotation, and (d) a shear (all shown below).
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY13
Affine transformations - translation
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY14
Affine transformations - scaling
Reflection
Sx=3; Sy=-2
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY15
Example of ScalingExample of Scaling• The scaling (Sx, Sy) = (-1, 2) is applied to a
collection of points. Each point is both reflected about the y-axis and scaled by 2 in the y-direction.
x
y
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY16
Types of Scaling
• Pure reflections, for which each of the scale factors is +1 or -1.
• A uniform scaling, or a magnification about the origin: Sx = Sy, magnification |S|.– Reflection also occurs if Sx or Sy is negative.– If |S| < 1, the points will be moved closer to the
origin, producing a reduced image.• If the scale factors are not the same, the
scaling is called a differential scaling.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY17
Affine transformations - rotation
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY18
Affine transformations - shearing
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY19
Inverse Translation and Scaling
• Inverse of translation T-1:
• Inverse of scaling S-1:
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
−−
11001001
1PP
tt
y
x
y
x
y
x
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
11000/1000/1
1PP
SS
y
x
y
x
y
x
Formulas:
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY20
Inverse Rotation and ShearInverse Rotation and Shear
• Inverse of rotation R-1 = R(-θ):
• Inverse of shear H-1: generally h=0 or g=0.
( ) ( )( ) ( )
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
−1100
0cossin0sincos
1PP
y
x
y
x
θθθθ
ghPP
gh
y
x
y
x
−−−
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
=
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
11
11000101
1
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY21
Affine transformations - concatenation
A point P is first transformed by M1P and then by M2(M1P). Therefore the composition matrix is M=M2M1.
Rotating About an Arbitrary Point
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY22
Composing Affine Transformations: Composing Affine Transformations: ExamplesExamples
• To rotate around an arbitrary point: translate P to the origin, rotate, translate P back to original position. Q = TP R T-P P
• Shear around an arbitrary point: Q = TP H T-P P
• Scale about an arbitrary point: Q = TPST-P P
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY23
Affine transformations - concatenation
Reflection about a tilted line
cos(β)sin(β)
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY24
Affine transformations preserve affine combinations of points.
Affine transformations preserve lines and planes.
Parallelism of lines and planes is preserved.
The Columns of the Matrix reveal the Transformed Coordinate Frame.
Relative Ratios Are Preserved.
Effect of Transformations on the Areas of Figures.
Every Affine Transformation is Composed of Elementary Operations.
Affine transformations - properties
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY25
Affine transformations - 3D
Colored cube
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY26
Affine transformations - 3D - basic
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY27
Affine transformations - 3D - rotation
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY28
RotationsRotations
• Rotations are more complicated. We start by defining a roll (rotation counter-clockwisearound an axis looking toward the origin):
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY29
Example• A barn in its original orientation, and after a -70°
x-roll, a 30° y-roll, and a -90° z-roll.
a). the barn b). -700 x-roll
c). 300 y-roll d). -900 z-roll
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY30
Affine transformations - using OpenGL
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY31
ExampleExample• When glVertex2d()is called with argument V, the vertex V is first
transformed by the CT to form point Q. • Q is then passed through the window to viewport mapping to form
point S in the screen window.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY32
Example cont’dExample cont’d
• The principal routines for altering the modelviewmatrix are glRotated(), glScaled(), and glTranslated().
• These don’t set the CT directly; instead each one postmultiplies the CT (the modelview matrix) by a particular matrix, say M, and puts the result back into the CT.
• That is, each of these routines creates a matrix M as required for the new transformation, and performs: CT = CT *M.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY33
Example cont’dExample cont’d
• Of course, we have to start with some MODELVIEW matrix:
• The sequence of commands is– glMatrixMode (GL_MODELVIEW);– glLoadIdentity();– // transformations 1, 2, 3, .... (in reverse order)
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY34
Example cont’d• Code to draw house #2: note translate is done before
rotate (reverse order).• setWindow(...); • setViewport(..); // set window to viewport
// mapping• initCT(); // get started with identity
// transformation• translate2D(32, 25); // CT includes translation• rotate2D(-30.0); // CT includes translation and
// rotation• house(); // draw the transformed house
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY35
Example 2: Star• A star made of “interlocking” stripes: starMotif() draws a part
of the star, the polygon shown in part b. (Help on finding polygon’s vertices in Case Study 5.1.)
• To draw the whole star we draw the motif five times, each time rotating the motif through an additional 72°.
a). b).
(x1,y1)
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY36
Example: Dino Patterns• The dinosaurs are distributed around a circle in
both versions. Left: each dinosaur is rotated so that its feet point toward the origin; right: all the dinosaurs are upright.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY37
Example Example dinodino
• drawDino() draws an upright dinosaur centered at the origin.
• In a) the coordinate system for each motif is rotated about the origin through a suitable angle, and then translated along its y-axis by H units.
• Note that the CT is reinitialized each time through the loop so that the transformations don’t accumulate.
• An easy way to keep the motifs upright (as in part b) is to pre-rotate each motif before translating it.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY38
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY39
Summary of the OpenGL Transforms• Projection
– Clips and sizes the viewing volume• Viewing
–Specifies the location of the viewer or camera• Modeling
– Moving the model around the scene• Modelview
–Describes the quality of viewing and modeling transformations
• Viewport– Scales the final output to the window
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY40
Objectives
•Learn how to carry out transformations in OpenGL
–Rotation–Translation –Scaling
• Introduce OpenGL matrix modes–Model-view–Projection
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY41
OpenGL Matrices• In OpenGL matrices are part of the state•Three types
–Model-View (GL_MODELVIEW)–Projection (GL_PROJECTION)–Texture (GL_TEXTURE) (ignore for now)
•Single set of functions for manipulation•Select which to manipulated by
–glMatrixMode(GL_MODELVIEW);–glMatrixMode(GL_PROJECTION);
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY42
Current Transformation Matrix (CTM)
• Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline
• The CTM is defined in the user program and loaded into a transformation unit
CTMvertices verticesp p’=Cp
C
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY43
CTM operations• The CTM can be altered either by loading a new CTM
or by postmutiplication
Load an identity matrix: C ← ILoad an arbitrary matrix: C ← M
Load a translation matrix: C ← TLoad a rotation matrix: C ← RLoad a scaling matrix: C ← S
Postmultiply by an arbitrary matrix: C ← CMPostmultiply by a translation matrix: C ← CTPostmultiply by a rotation matrix: C ← C RPostmultiply by a scaling matrix: C ← C S
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY44
Rotation about a Fixed Point
Start with identity matrix: C ← IMove fixed point to origin: C ← CT -1Rotate: C ← CRMove fixed point back: C ← CT
Result: C = T -1RT
Each operation corresponds to one function call in the program.
Note that the last operation specified is the first executed in the program
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY45
CTM in OpenGL
•OpenGL has a model-view and a projection matrix in the pipeline which are concatenated together to form the CTM
•Can manipulate each by first setting the matrix mode
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY46
Rotation, Translation, Scaling
glRotatef(theta, vx, vy, vz)
glTranslatef(dx, dy, dz)
glScalef( sx, sy, sz)
glLoadIdentity()
Load an identity matrix:
Multiply on right:
theta in degrees, (vx, vy, vz) define axis of rotation
Each has a float (f) and double (d) format (glScaled)
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY47
Example
•Rotation about z axis by 30 degrees with a fixed point of (1.0, 2.0, 3.0)
•Remember that last matrix specified in the program is the first applied
glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef(1.0, 2.0, 3.0);glRotatef(30.0, 0.0, 0.0, .10);glTranslatef(-1.0, -2.0, -3.0);
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY48
How OpenGL operatesOpenGL is organized to postmultiply each new transformation matrix to combine it with the current transformation. Thus it will often seem more natural to the modeler to think in terms of successively transforming the coordinate system involved, as the order in which these transformations is carried out is the same as the order in which OpenGL computes them.
OpenGL maintains a so-called modelview matrix, and every vertex that is passed down the graphics pipeline is multiplied by it. We need only set up the modelviewmatrix to embody the desired transformation.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY49
The principal routines for altering the modelview matrix are glRotated(), glScaled(), and glTranslated(). These don’t set the CT directly; instead each postmultiplies the CT (the modelview matrix) by a particular matrix, say M, and puts the result back into the CT. That is, each of these routines creates a matrix M as required for the new transformation, and performs:
The order is important. As we saw earlier, applying CT * M to a point is equivalent to first performing the transformation embodied in M, followed by performing the transformation dictated by the previous value of CT. Or if we are thinking in terms of transforming the coordinate system, it is equivalent to performing one additional transformation to the existing current coordinate system.Since these routines only compose a transformation with the CT, we need some way to get started: to initialize the CT to the identity transformation. OpenGL provides glLoadIdentity(). And because these functions can be set to work on any of the matrices that OpenGL supports, we must inform OpenGL which matrix we are altering. This is accomplished using glMatrixMode(GL_MODELVIEW).
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY50
Stack of transformations
The top matrix on the stack is the actual CT, and operations like rotate2D() compose their transformation with it. To save this CT for later use a copy of it is made and “pushed” onto the stack using a routine pushCT(). This makes the top two items on the stack identical. The top item can now be altered further with additional calls to scale2D() and the like. To return to the previous CT the top item is simply “popped” off the stack using popCT(), and discarded.
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY51
Order of Transformations in OpenGL
• The current transform matrix (CTM) is the cumulative state of transformations that have been specified before a vertex is defined.
• In OpenGL, a list of transformations is postmultiplied to the CTM.
• This means that the transformation specified most recently is the one applied first.
• Picture this a stack of transformations...
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY52
Order of Transformations in OpenGL (cont.)
• If we specify a list of transformations, and then define vertices - all the the transformations specified will be applied to those vertices according to the postmultiplication rule.
• If we subsequently want to draw vertices without any transformations we can:
– Keep a copy of the transformations that have been applied to the CTM, and negate them by applying their opposites to the CTM in the correct order.
or– Save the untransformed CTM using glPushMatrix() perform our
transforming/vertex drawing, then recall the original CTM with glPopMatrix().
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY53
Saving the CT for Later Use
• Ex.: Tilings made easy
cvs.pushCT(); // so we can return herecvs.translate2D(W, H); // position for the first motiffor(row = 0; row < 3; row++) // draw each row{
cvs.pushCT();// draw the next rowfor(col = 0; col < 4; col++){
motif();// move to the rightcvs.translate2D(L, 0);
}cvs.popCT(); // back to the start of this row// move up to the next rowcvs.translate2D(0, D);
}cvs.popCT(); // back to where we started
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY54
Order of Transformations in OpenGL (cont.)
glPushMatrix();
apply scaling…drawCube();
glPushmatrix();
apply translation...drawCube();
glPopMatrix();
apply scaling…drawCube();
glPopMatrix();
drawCube();
saves the original CTM
applies a scaling to the CTM
restores the CTM that was pushed last
saves the CTM with scaling
restores the original CTM
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY55
Using Transformations
• Example: use idle function to rotate a cube and mouse function to change direction of rotation
• Start with a program that draws a cube(colorcube.c) in a standard way
–Centered at origin–Sides aligned with axes–Will discuss modeling in next lecture
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY56
main.c
void main(int argc, char **argv) {
glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB|GLUT_DEPTH);glutInitWindowSize(500, 500);glutCreateWindow("colorcube");glutReshapeFunc(myReshape);glutDisplayFunc(display);glutIdleFunc(spinCube);glutMouseFunc(mouse);glEnable(GL_DEPTH_TEST);glutMainLoop();
}
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY57
Idle and Mouse callbacksvoid spinCube() {theta[axis] += 2.0;if( theta[axis] > 360.0 ) theta[axis] -= 360.0;glutPostRedisplay();
}
void mouse(int btn, int state, int x, int y){
if(btn==GLUT_LEFT_BUTTON && state == GLUT_DOWN) axis = 0;
if(btn==GLUT_MIDDLE_BUTTON && state == GLUT_DOWN) axis = 1;
if(btn==GLUT_RIGHT_BUTTON && state == GLUT_DOWN) axis = 2;
}
CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY58
Display callbackvoid display(){
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);glLoadIdentity();glRotatef(theta[0], 1.0, 0.0, 0.0);glRotatef(theta[1], 0.0, 1.0, 0.0);glRotatef(theta[2], 0.0, 0.0, 1.0); colorcube();glutSwapBuffers();
}
Note that because of fixed from of callbacks, variables such as theta and axis must be defined as globals
Camera information is in standard reshape callback