Transformations of Objectsnatacha/TeachSpring_12/CSC47… · · 2012-01-30Transformations of objects - 2D. CSC 470 Computer Graphics, Dr.N. Georgieva, ... gA coordinate transformation

CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY1

CSC 470 Computer Graphics

Transformations of ObjectsTransformations of Objects


Transformations of objects - 2D


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.


Using Transformations cont’d

• In 3D, many cubes make a city.


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.


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.


The OpenGL Graphics Pipeline

• This version is simplified.


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.


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.


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.


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


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


Affine transformations - translation


Affine transformations - scaling

Reflection

Sx=3; Sy=-2


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


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.


Affine transformations - rotation


Affine transformations - shearing


Inverse Translation and Scaling

• Inverse of translation T-1:

• Inverse of scaling S-1:

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

=

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

−−

11001001

1PP

tt

QQ

y

x

y

x

y

x

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

=

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

11000/1000/1

1PP

SS

QQ

y

x

y

x

y

x

Formulas:


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

QQ

y

x

y

x

θθθθ

ghPP

gh

QQ

y

x

y

x

−−−

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

=

⎟⎟⎟⎟

⎠

⎞

⎜⎜⎜⎜

⎝

⎛

11

11000101

1


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


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


Affine transformations - concatenation

Reflection about a tilted line

cos(β)sin(β)


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


Affine transformations - 3D

Colored cube


Affine transformations - 3D - basic


Affine transformations - 3D - rotation


RotationsRotations

• Rotations are more complicated. We start by defining a roll (rotation counter-clockwisearound an axis looking toward the origin):


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


Affine transformations - using OpenGL


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.


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.


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)


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


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)


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.


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.



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


Objectives

•Learn how to carry out transformations in OpenGL

–Rotation–Translation –Scaling

• Introduce OpenGL matrix modes–Model-view–Projection


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


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


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


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


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


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)


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


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.


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


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.


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


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


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


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


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


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

}


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;

}


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

Documents

Transformations of Objectsnatacha/TeachSpring_12/CSC47… · · 2012-01-30Transformations of objects - 2D. CSC 470 Computer Graphics, Dr.N. Georgieva, ... gA coordinate transformation